Warum die Plattform so aussieht, wie sie aussieht...

Wir haben relativ lange an einem neuen "Theme" für die Plattform gearbeitet. Dieses Design soll ...

... zur neuen Webseite passen:

Obwohl die älteren Themes sich auch bereits an der (damals noch in Planung befindlichen) Webseite orientiert haben, sind wir jetzt zeimlich nah dran. lächelnd

Header:

Header der Webseite

Header der Lernplattform

Kopfzeilen von Webseite (oben) und Lernplattform (unten) mit Logo, den verschiedenen Menübändern (oben: weitere Dienste der TFH wie Webmail, OPAC, AStA-Seite, etc; grau hinterlegt: Seiteninterne Links wie Hilfe, Impressum, etc.), einem Suchfenster, dem Seitentitel und dem Login-Bereich.


Seitenleisten / Seitenblöcke:

Sidebar der Webseite Sidebar der Lernplattform

Die sog. Sidebar, also die Seitenleiste mit entsprechenden Blöcken bzw. "Widgets" der Webseite und der Lernplattform. Der Unterschied besteht in dem automatischen Minimieren nicht aktiver Seitenblöcke (Webseite) im gegensatz zum manuellen Auf- und Zuklappen (+/- -Button) auf der Lernplattform.


Dock / Navigation:

Menü der Webseite

Dock mit ausgeklapptem Block der Lernplattform

Das Dock ist ein horizontaler Bereich zwischen Kopfzeile und Inhaltsbereich der Lernplattform, in den man die Blöcke aus der Seitenleiste verschieben kann. So gewint man Platz und kann - wenn alle Blöcke verschoben werden - die gesamte mögliche Breite für die Inhaltsdarstellung verwenden. Die Blöcke können aus dem Dock - analog zur Webseite - per MouseOver ausgeklappt werden.


"Brotkrumen":

Breadcrumbs der Webseite

Breadcrumbs der Lernplattform

Die sog. Breadcrumbs (oben: Webseite, unten: Lernplattform) sind für die Navigation auf Moodle elementar, zeigen Sie doch den bisher geklickten Weg von Startseite über die Liste meiner Kurse in den momentanen Kurs und darüber hinaus bis in die einzelnen Kursaktivitäten. Noch viel nützlicher sind sie aber für die Navigation einen oder mehrere Schritte zurück: Wenn Sie aus der Unterkonfiguration einer Kursaktivität zurück in den Kurs wollen, klicken Sie auf die entsprechende Brotkrume (hier: Name des Kurses).

... unabhängig von Gerät, Betriebssystem und Browser sein:

Das neue sog. Responsive Design der Lernplattform basiert auf dem CSS-Framework Bootstrap und sorgt für eine optimierte Darstellung für alle Endgeräte:

Optimierte Darstellung je nach Endgerät

Denn nach unserer Piwik-Zugriffsstatistik steigen die Zahlen von Zugriffen mit mobilen Endgeräten (Smartphones, Tablets) rasant.

Nebenbei haben wir auch diverse Bugs behoben. Zum Beispiel führte die Kombination von "Arbeitsmaterial: PDF" und "Darstellung: Eingebettet" in früheren Versionen dazu, dass das Dokument auf iPads zwar dargestellt, aber nicht scrollbar war. Jetzt erscheint - je nach Endgerät - der gewohnte "Öffnen mit..."-Dialog auf Tablets bzw. das eingebettete Dokument auf Desktop-Rechnern.

... möglichst flexibel sein:

Der Nutzer kann - je nach Endgerät - diverse Modifikationen am Layout und an seiner Startseite vornehmen:

  • Bei einem schmalen Viewport werden die Seitenblöcke unter den Inhalt geschoben (wenn sie nicht bereits in das Dock verschoben wurden) und
  • die Header-Menüs (externe Links, interne Links, Benutzermenü, Sprachmenü) werden ausgeblendet und in einem Dropdown-Menü hinter einem Button (oben rechts) verborgen. 
  • Blöcke können - egal, ob in der Seitenleiste oder unter dem Inhaltsbereich - minimiert oder in das Dock verschoben werden.
  • Kursbereiche, Kursunterbereiche, Kursdetails, Kursbeschreibungen, Einstellungsmenüs, etc. können ein- und ausgeklappt werden.
  • Die persönliche Startseite kann (in vorgegebenem Rahmen) an die eigenen Bedürfnisse angepasst werden.

Zuletzt geändert: Donnerstag, 30. April 2015, 08:28