Verlinkungen, E-Mailadressen, Einfügen/Anzeigen von Bildern

Kurzanleitung Links/E-Mail-Adresse:

1. Zu verlinkenden Text markieren, auf das nun erscheinende Kettensymbol (Link einfügen/ändern) klicken, Link setzen
2. Interner Link: Bricht auch bei Änderung der Internetadresse nicht 
3. Externer Link: Für alle Links außerhalb des Systems der JLU
4. E-Mail-Adresse: E-Mailadresse anlegen, siehe ausführliche Anleitung - E-Mailadressen sind automatisch spam-geschützt

Kurzanleitung Bilder einfügen:

Kurzanleitung Dateien einfügen:

1. Datei in das System laden (hinzufügen -> Datei)
2. Datei ggf. veröffentlichen
3. Datei auf Webseite intern verlinken

Ausführliche Anleitung: 

Grundmerkmal von Webseiten sind Verlinkungen und Bilder. Hier erfahren Sie, wie sie intern und extern verlinken, E-Mail Adressen angeben und Bilder einfügen.

Verlinken von Webseiten:

In Plone unterscheiden wir zwischen internen Links (Verlinkung innerhalb des Haupt-Systems Plone an der JLU; Links bleiben erhalten, auch wenn sich die Internetadresse durch Umstrukturierung der Webseiten oder Änderung des Kurznamens ändert) und externen Links (z.Z. Verlinkung auf alles, was sich nicht unterhalb von www.uni-giessen.de befindet). Externe Links müssen aktualisiert werden, sobald sich die Internetadresse der Zielseite ändert. 

Interne Links: 

Innerhalb der Webseiten im Hauptsystem der JLU können Sie intern verlinken, sodass Sie diese Links nur noch anpassen müssen, wenn die Zielseite nicht mehr existiert bzw. gelöscht wurde. Wir empfehlen Ihnen dringend, so weit es geht intern zu verlinken (dies erspart Ihnen Zeit und Mühe). 

Zunächst markieren Sie den zu verlinkenden Text (oder das zu verlinkende Bild). Sodann erscheint im Editor das Symbol für Link einfügen/bearbeiten: 

Sie können nun das System nach der Zielseite durchsuchen und diese auswählen.

Klicken Sie bei dem Reiter "Link einfügen -> interner Link" einfach auf "Auswählen":

Nachdem Sie den Ziellink aus dem Menü angeklickt haben, erscheint er oben rechts mit einem Kreuzchen zum hinzufügen in einem blauen Button:

Externe Links: 

Markieren Sie den extern zu verlinkenden Text, klicken Sie auf das Symbol für Link einfügen/bearbeiten (siehe oben), wählen Sie die Option "extern", geben Sie die von der externen Webseite kopierte URL ein, fertig:

Angabe von E-Mail-Adressen: 

Sie können eine E-Mail-Adresse elegant mit Ihrer E-Mail-Adresse hinterlegen, sodass ein Klick auf den mit dieser E-Mail-Adresse hinterlegten Text das auf dem jeweiligen Rechner installierte E-Mail-Programm öffnet und man sofort eine E-Mail schreiben kann. E-Mailadressen werden grundsätzlich Spam-geschützt hinterlegt. Geben Sie einfach die E-Mailadresse im Editor an. Dann klicken Sie auf das Symbol für "Link einfügen/bearbeiten" (das "Kettensymbol") und geben dort unter dem Reiter "E-Mail-Adresse" die komplette E-Mailadresse ein.

Die vollständige E-Mail-Adresse wird auf der Webseite angezeigt, im Quelltext wird sie allerdings erst nach einem Klick auf die E-Mail-Adresse generiert. Damit sind so angegebene E-Mail-Adressen automatisch spam-geschützt, auch wenn die E-Mailadresse für Menschen sichtbar auf der Webseite erscheint. Bösartige Bots, die Webseiten automatisiert nach E-Mail-Adressen abgrasen, gelangen so nicht an die hinterlegte E-Mail-Adresse, Webseitenbesucher können Ihnen aber direkt eine E-Mail schicken. Bitte achten Sie darauf, ausschließlich auf diese Weise E-Mailadressen zu verlinken. Die Angabe von fehlerhaft hinterlegten E-Mailadressen kann dazu führen, dass die Webseite nicht mehr über den Button "Bearbeiten", sondern nur noch durch die Eingabe von "/edit" als Zusatz hinter der URL in der Browserzeile zu bearbeiten ist.

Bitte veröffentlichen Sie nicht ungefragt E-Mail-Adressen, die keine Funktionsadressen sind! Lassen Sie sich am besten schriftlich (z.B. per E-Mail) die Einverständniserklärung geben.

Hochladen von Bildern und Anzeigen von Bildern

Zunächst müssen Sie ein Bild ins System laden, um es auf beliebig vielen Webseiten anzeigen zu können. Tauschen Sie das Bild nachträglich gegen ein anderes Bild aus, wird es auf allen anzeigenden Webseiten ebenfalls ausgetauscht. Sie müssen ein Bild also nur einmal hochladen, auch wenn es mehrmals angezeigt werden soll. Zum Hochladen eines Bildes in einen Ordner (ein Bild kann nur einem Ordner hinzugefügt werden, keiner Seite) klicken Sie auf "Hinzufügen" und wählen die Option "Bild" aus: 

Bitte achten Sie darauf, nur Bilddateien (z.B. JPEG, GIF, PNG) als Bild zu speichern, keine PDFs, etc.!

Das Bild können Sie nachträglich austauschen, indem Sie über den Reiter "Inhalte" zum Bild navigieren (Bilder sind automatisch aus der Navigation ausgeschlossen), auf "bearbeiten" gehen, und das Bild austauschen.

Haben Sie ein Bild hochgeladen, gehen Sie auf der Seite mit dem Cursor an die Stelle, wo das Bild eingestellt werden soll. Klicken Sie dann auf "Bild einfügen".

So navigieren Sie zum Bild: 

So wählen Sie es aus:

So fügen Sie das Bild ein:

Sie navigieren also zum Bild, wählen das Bild aus (zunächst im Menü, dann oben rechts mit dem blauen Button mit dem + wie beim Link einfügen), dann wählen Sie aus, ob der Text an der Stelle hinterlegt werden soll, wo Sie den Cursor gesetzt haben (Option "Inline"), oder ob er rechtsbündig eingefügt werden soll oder linksbündig. Anschließend wählen Sie unter "Größe" die gewünschte Anzeigegröße des Bildes. Ein Bild können Sie von der Anzeige auf einer Webseite entfernen, indem Sie es markieren (klicken Sie auf das Bild im Bearbeitungsmodus) und z.B. mit der Taste "entfernen" entfernen, oder mit Hilfe der Backspace-Taste. Bilder können Sie wie Text verlinken. 

Eine Bildunterschrift (z.B. für Details zum Bild) erzeugen Sie, indem Sie im Feld "Bildbeschreibung" den Text eingeben und den Haken bei "Zeige Bildbeschreibung als Bildunterschrift" setzen. Diese Bildunterschrift sollten Sie für die Angabe von Copyright-Hinweisen verwenden.

Wichtig ist ebenfalls die Wahl eines aussagekräftigen Titels für das Bild (insbesondere für die Suchmaschinenoptimierung), aber auch eine aussagekräftige Beschreibung des Bildes ist zentral.

Der Status eines Bildes (veröffentlicht/privat) richtet sich nach dem Status des Ordners, in dem es sich befindet. Möchten Sie also Bilder im System haben, aber nicht weltweit veröffentlichen, laden Sie diese Bilder in einen privat geschalteten Ordner.

Wichtige Hinweise zur Einhaltung der Barrierefreiheit bei Bildern

Bitte achten Sie beim Einfügen von Bildern darauf, die Felder “Titel” und insbesondere "alternativer Text" sinnvoll auszufüllen! Das Titelfeld bewirkt eine Beschreibung bei Mouse-Over, der alternative Text wird Menschen mit Sehbehinderung von Screenreadern vorgelesen, sodass auch Blinde verstehen können, was für ein Bild auf der Seite zu sehen ist. Barrierefreiheit im Netz ist kein Nice-to-Have, sondern gerade für öffentliche Einrichtungen gesetzlich vorgeschrieben. Dies wird durch das Regierungspräsidium regelmäßig überprüft.

Die Angabe eines alternativen Textes folgt dabei einem recht einfachem Schema, je nachdem was für ein Bild verwendet wird:

Verlinkte Grafiken dienen als Link und verweisen auf eine andere Seite. Im Alternativtext sollte dann das Linkziel vermerkt sein, damit der Nutzer weiß, wohin der Link führt. Ein typisches Beispiel wäre ein verlinktes Teaserbild, das auf einen Artikel verweist. Im Alternativtext sollte dann der Name des Artikels stehen.

Wenn eine Grafik als Schaltfläche benutzt wird, ist es wichtig, dass der Zweck des Bedienelements vermittelt wird, sodass der Nutzer weiß, welche Aktion er ausführt. Beispielsweise sollte der Alternativtext eines Buttons mit Play-Symbol “Abspielen” lauten.

Informative Grafiken vermitteln eine Bildaussage und sind nicht verlinkt. Der Alternativtext sollte in diesem Fall den Inhalt des Bildes wiedergeben. Für das folgende Beispielbild könnte also dieser Alternativtext verwendet werden: "Das Hauptgebäude der Justus-Liebig-Universität mit kennzeichnender Stele und Fahnen".

Schmuckgrafiken haben keine informative Funktion und sorgen vor allem für einen schöneren Look der Website. Da der Inhalt hier keine Rolle spielt, reicht im Alternativtext ein einfaches “Schmuckgrafik”.

In der Regel sollte für Schrift keine Grafik verwendet werden, da sie nur eingeschränkt über den Browser angepasst werden können (z.B. Farbe oder Schriftgröße). Eine Ausnahme wären Logos, die Schrift enthalten, die mit dem Alternativtext “Logo von Name der Einrichtung” erklärt werden sollten.

Also:

• Grafiken, die als Link dienen: alt="Linkziel"
• Grafiken, die eine Aktion auslösen: alt="Aktion"
• Grafiken, die Informationen vermitteln: alt="Beschreibung des Bildinhalts"
• Schmuckgrafiken, die keine informative Funktion haben: alt="Schmuckgrafik"
• Logos: alt="Logo von Name der Einrichtung"

Wichtige rechtliche Hinweise bei der Verwendung von Bildern

Bitte beachten Sie unbedingt die Bilderrechte! Lesen Sie die Lizenzbedingungen bei gekauften Bildern gründlich und befolgen Sie die Anweisungen bezüglich der Copyrighthinweise und ggf. anderer Angaben. Bilder von Personen sollten Sie nie ungefragt ins Netz stellen. Lassen Sie sich (auch von Mitarbeitern!) immer schriftllich (z.B. per E-Mail) von auf Bildern abgebildeten Personen bestätigen, dass diese mit der Veröffentlichung ihres Bildes auf den Webseiten der JLU Gießen einverstanden sind.   

Wenn Sie KI-generierte Grafiken oder Bilder nutzen, empfehlen wir aus Transparenzgründen, dies folgendermaßen anzugeben:
Foto: KI-generiert mit Hilfe von XY.

Sogenannte Deepfakes unterliegen der Kennzeichnungspflicht, hier muss die Nutzung von KI transparent gemacht werden. Achten Sie bei der Nutzung von KI auch auf die Nutzungsbedingungen der jeweiligen Plattform-Betreiber.“

Wichtige Bildmaße

Möchten Sie eine Slideshow ohne rechte und linke Spalte wie z.Z. auf der Startseite der JLU Gießen erzeugen, betragen die Maße der Bilder der Slideshow 1184 px x 316 px. Ein Bannerbild oberhalb der grauen Navigationsleiste hat idealerweile die Maße 722 px x 108 px. Eine Slideshow ohne rechte, aber mit linker Spalte beträgt 960px.

Für Slideshows fügen Sie bitte Bilder mit 1200px Breite ein und stellen Sie die Bildgröße auf "great".

Bitte laden Sie Bilder nicht größer als notwendig in das System. Webseiten mit übergroßen Bildern laden langsamer bzw. die Bilder bauen sich langsam auf. Wichtig ist dabei die Größe des Bildes beim Hochladen in das System, nicht die Anzeigegröße des Bildes auf der Webseite.

Bilder in der Größe "great" bzw. "large" werden immer dann in Originalgröße angezeigt, wenn sie kleiner ins System geladen wurden. Das heißt, wenn Sie Bilder in Originalgröße anzeigen möchten, stellen Sie sie in der Größe "great" bzw. "large" ein. Bilder, die größer als die Seitenbreite sind,  werden, sofern sie als "great" eingebunden aind, automatisch mit maximal der Seitenbreite angezeigt.

Hochladen von Dateien und Verlinken auf Dateien

Dateien laden Sie wie Bilder ins System (zu Ordner hinzufügen->Datei). Auch Dateien sind automatisch aus der Navigation ausgeschlossen. Sie können nun beliebig oft auf eine Datei verlinken (Text markieren, intern verlinken). Dateien können Sie wie Bilder austauschen. Sie müssen nicht das Objekt oder die interne Verknüpfung löschen. Sie sollten darauf achten, Dateien nur einmal ins System zu laden und dann auf diese Datei mehrfach zu verlinken. Sonst müssen Sie viele Dateien bei einer Aktualisierung austauschen. Der Status einer Datei verhält sich unabhängig vom Ordner, Dateien müssen also separat veröffentlicht werden.

Bitte verwenden Sie im Web keine Office-Dateien (Word, Excel, etc.), damit schließen Sie Nutzer von Linux-Systemen automatisch vom Zugriff auf diese Dateien aus (Office-Programme und Linux-Distributionen sind inkompatibel). Laden Sie so weit wie möglich ausschließlich PDF-Dateien ins Netz. Dieses Portable Document Format kann auf allen Betriebssystemen mit einem PDF Reader geöffnet werden. Diese PDF-Dateien sollten keine Scans sein, dadurch entstehen Bilder, die nicht barrierefrei sind! Achten Sie bei der Erstellung von PDF-Dateien immer auch auf die Barrierefreiheit, das HRZ bietet Schulungen dazu an.