Beschreibung

Der Scroll-To-Top - Button ist auf den meisten Seiten ein sehr hilfreiches Tool, um den Nutzer*innen die Möglichkeit zu geben, unabhängig von der Scroll-Position auf der Seite, mit einem Klick direkt zum Seitenanfang zu scrollen.

Rechts ist der Scroll-To-Top - Button in den beiden Varianten abgebildet.

Im linken Bild ist die normale Darstellung, wenn der Button auf der Seite eingeblendet wird. In diesem Fall wird der Button halb-transparent dargestellt, damit der Content möglichst wenig überdeckt wird. Zusätzlich wird der Button erst ab einer bestimmten Scroll-Position eingeblendet. Somit ist er beim Aufruf der Seite zunächst nicht sichtbar.

Wenn die Nutzer*innen den Mauszeiger über den Button bewegen, wird dieser vollständig sichtbar und wechselt die Farbe als zeichen, dass es activ ist. Bei einem Mausklick auf den Button, wird ein sanfter Bildlauf bis zum Seitenanfang durchgeführt.

Verwendbarkeit

Der Button kann auf allen Seiten eingefügt werden, auf denen mit dem ILIAS-Seiteneditor gearbeitet werden kann. Der Button steht allen Nutzer*innen in allen Content-Styles zur Verfügung.

Einfügen des Buttons auf einer Seite

• Der Scroll-To-Top - Button wird mit Hilfe des Blocks "ScrollToTop" im Seiteneditor eingebunden.

  Über das + kann ein neuer Block eingefügt werden.

  

• Danach kann über den Button Absatzformat auf der linken Seite der ScrollToTop - Block ausgewählt werden.

  Mit dem Button Einfügen wird der Block an der vorher ausgewählten Stelle eingefügt.

  

  

• Wichtig:

  Damit der Scroll-To-Top-Button korrekt funktioniert, muss der Block am Ende der Seite eingefügt werden.

  Dem Block darf weiterhin auch kein Link zugewiesen werden, da dies die Funktion des Buttons verhindert.

  

Beschreibung

Der Page-Position-Marker zeigt permanent die Scroll-Position auf der Seite an. Hierzu wird in der mobilen Ansicht oder für Tablets die eine Linie unter dem Header, auf PC-Bildschirmen unterhalb der Breadcrumbs, angezeigt.

Je nach Position auf der Seite bewegt sich die Position der Linie von links (entspricht oben) nach rechts (entspricht unten).

Verwendbarkeit

Der Page-Position-Marker kann auf allen Seiten eingefügt werden, auf denen mit dem ILIAS-Seiteneditor gearbeitet werden kann. Der Button steht allen Nutzer*innen in allen Content-Styles zur Verfügung.

Einfügen des Position-Markers auf einer Seite

• Der Page-Position-Marker wird mit Hilfe des Blocks "PagePositionMarker" im Seiteneditor eingebunden.

  Über das + kann ein neuer Block eingefügt werden.

  

• Danach kann über den Button Absatzformat auf der linken Seite der PagePositionMarker - Block ausgewählt werden.

  Mit dem Button Einfügen wird der Block an der vorher ausgewählten Stelle eingefügt.

• Wichtig:

  Der Page-Position-Marker sollte möglichst am Beginn der Seite eingefügt werden.

  Dem Block darf weiterhin auch kein Link zugewiesen werden, da dies die Funktion des Page-Position-Markers verhindert.

Beschreibung

ILIAS unterstützt die Option, ILIAS-Objekte als Kachelbild darzustellen. So können verschiedene, attraktive Designs für die Darstellung von Inhalten erstellt werden. Mit dem Update auf die Version 9 kann für Gruppierungen ein abweichende Einstellung zur Standard-Seiteneinstellung ausgewählt werden. So sind nun Listen- und Kachelbilddarstellungen auf einer Seite möglich.

Mit dem HSU-Skin wurden zum Standarddesign noch zwei weitere Kachel-Designs eingeführt. Die zusätzlichen Designs können mit Hilfe des Seiteneditors als Block eingefügt werden. Anschließend muss dann die entsprechende Gruppierung in den Design-Block verschoben werden. Die Umstellung des Designs erfolgt automatisch.

Kacheldesigns im Vergleich

Standard Kacheldesign

Highlight Kacheldesign

Large-Tile Kacheldesign

Standard Kacheldesign

Das Standard-Kacheldesign bietet die schnelle und einfache Variante zur Darstellung von Inhalten.

Sobald Nutzer*innen mit dem Mauszeiger über die Kachel gehen, wir ein Hover-Effekt angezeigt, welche die Kachel hervorhebt. Gleichzeitig wird in der HSU-Variante das Kontext-Menü oben, links angezeigt.

In der linken unteren Ecke des Kachelbilds wird, sofern verfügbar, der Lernfortschritt angezeigt.

Zentriert unter dem Kachelbild befindet sich der Titel. Je nach Bereich kommen hier verschiedene Farben zum Einsatz.

Unterhalb des Titels werden die weiteren Informationen wie Beschreibung, Status, etc. angezeigt.

Highlight Kacheldesign

Die Highlight-Variante unterscheidet sich zum Standard Kacheldesign in wenigen Punkten.

Der wichtigste Punkt ist das Kontextmenü, welchen rechts unterhalb des Kachelbild beim Hovern angezeigt wird. Der Hover-Effekt hebt nur das Kachelbild hervor und der Titel wird ohne Hintergrundfarbe fett unter dem Kachelbild dargestellt.

LargeTiles Kacheldesign

Dieses Design eigent sich, um große Bilder für Kategorien anzuzeigen. Bei uns werden diese für die Zentralen Einrichtungen, die Präsidialabteilung und die Verwaltung verwendet.

Das Kacheldesign ist so angelegt, das die Darstellung der Kacheln möglichst sehr groß gewählt werden sollte. Die Informationen zum ILIAS-Objekt werden dabei oberhalb des Kachelbild am unteren Rand angezeigt. Wie auch beim Standarddesign wird das Kontextmenü oben, links beim hovern angezeigt. Wie auch in beiden anderen Varianten wird hier ein Hover-Effekt verwendet, welcher die Kachel hervor hebt. Zusätzlich wird das Kachelbild noch vergrößert.

Damit diese Kachelvariante auch auf mobilen Endgeräten einwandfrei angezeigt wird, wird die Beschreibung und die Informationen unterhalb des Kachelbild angezeigt.

Verwendbarkeit

Kacheldesigns können überall dort verwendet werden, wo ILIAS-Objekte oder Gruppierungen eingerüft werden können.

Beschreibung

Die Scroll-Box ermöglicht es, Bilder und andere Inhalte innerhalb eines Scroll-Containers zu implementieren. Der Scroll-Container hat eine maximale Höhe von 80% der Bildschirmhöhe. Sollte der darin enthaltene Content die Größe der Scroll-Box überschreiten, werden automatisch Scrollleisten angezeigt. So können Nutzer*innen die Inhalte lesen ohne weiter auf der Seite zu scrollen. Dies eigent sich vor allem für Bilder, welche in der Länge die Höhe des Bildschirms deutlich überschreiten.

Beschreibung

Der Content-Slider ermöglicht es, mehrere Slider-Elemente anzulegen, mit zusätzliche Informationen und/oder ILIAS-Objekten zu befüllen und anschließend zu modifizieren. Der Slider besitzt eine Standard-Konfiguration, welche für den allgemeinen Einsatz ausreichend sind. Für spezielle Fälle kann eine abweichende Konfiguration eingegeben werden.

Aktuell planen wir die Umsetzung mit Hilfe eines Dialog-Fensters, welches die Konfiguration des Sliders verbessert.

Die Wiki-Features sind ausschließlich in Wikis verwendbar.

Beschreibung

ILIAS unterstützt nur in Blogs Bannerbilder. Für Wiki's kann dieses Feature jedoch sehr gut eingesetzt werden, um verschiedene Bereiche des Wiki's optisch aufzuwerten und von einander zu trennen. Mit dem Block HeaderBanner werden verschiedene Umbauten im Design durchgeführt. Dabei wird das Bannerbild, welches sich im HeaderBanner-Block befindet, an die oberste Position eingefügt. Zusätzlich wird das Icon und der Titel des Wiki's unten Links auf dem Bild angezeigt.

Beschreibung

Wiki's bieten aktuell als einzigstes die Anker-Funktion. Diese Anker dienen der automatisierten Implementierung eines Seitenmenüs, welches immer unterhalb der Breadcrumbs angezeigt wird. Die einzelnen Menü-Elemente basieren auf den Anker-Elementen, welche das Absatzformat Headline2 oder Headline3 haben. Beim Klick auf ein Menü-Element wird ein sanfter Bildlauf bis zum entsprechenden Anker initiiert. Beim scrollen über die Seite folgen die Markierungen der Menüelemente der Anzeige. So können Nutzer*innen auch am Menü erkennen, in welchem Themenbereich sie sich auf der Seite befinden.

Beschreibung

Um Nutzer*innen, insbesondere auf mobilen Endgeräten eine einfache Navigation in Wiki's zu ermöglichen. kann ein Sticky-Footer-Menü eingefügt werden. Hierbei kann am Ende der Seite ein Menü aus einzelnen Buttons erstellt werden. Dazu eignen sich neben den normalen Buttons auch die Spaltenlayouts, um die Button entsprechend anzuordnen.

Das Stick-Footer-Menü besitzt einen Scroll-Effekt, welcher das Footer-Menü erst einblendet, wenn bis zu einer bestimmten Position gescrollt wurde. Sobald sich die Scroll-Position oberhalb dieser Position befindet, wird das Footer-Menü wieder ausgeblendet.

Beschreibung

Window-Images lockern die Seitenanzeige auf. Insbesondere bei großen Seiten können diese Fenster einen einheitlichen Look unterbrechen und so das Ansichtserlebnis der Seite deutlich verbessern.

Je nach Anzahl der zu implementierenden Bilder vergrößert sich die Ladezeit der Seite. Daher werden die Bilder mit einem hoch-komprimierten jpeg-Format implementiert. Die Größe der Bilder sollte 1280 x 1024 Pixel betragen. Sollten individuelle Bilder eingefügt werden, so werden diese von uns mit den o.g. Parametern implementiert.

Beschreibung

Häufig werden Datensammlungen als einfache und schnelle Erhebung von Informationen genutzt. Insbesondere bei größeren Listen kann es hinfreich sein, wenn Zeilen anhand von bestimmten Parametern farblich hervor gehoben werden.

Mit diesem Feature können wir die Datensammlung optisch so anpassen, dass je nach Wert einer oder mehrerer Zellen die Farben angepasst werden.

Beschreibung

Dieses Feature bietet in Datensammlungen die Möglichkeit, dass verschiedene Werte miteinander verrechnet werden. So kann in einer Übersichtsliste die Summe von Spalten berechnet werden, die Anzahl von Eintragungen ausgegeben werden oder sonstige mathematischen Berechnungen eingefügt werden.

In Kombination mit dem Highlighting können so schnell Übersichten erstellt werden, welche auch auf den ersten Blick eine gute Übersicht bieten und die relevanten Werte hervorheben.