Vorlese-Funktion

Lernplattformkurse ansprechend gestalten

In diesem Beitrag erfahren Sie, wie Sie Kurse in der Lernplattform mit Hilfe von Bootstrap übersichtlich gestalten. Sie lernen vielfältige Möglichkeiten kennen, um den Kurs optisch aufzuwerten und diesen übersichtlicher und informativer zu gestalten.

Der verlinkte teachShare-Kurs beinhaltet alle Code-Schnipsel der hier vorgestellten Elemente sowie zusätzliche Gestaltungselemente. Diese können direkt aus dem Kurs kopiert und in einem eigenen Kurs eingefügt werden.

Was ist Bootstrap?

Die meisten Websites bestehen aus Inhalt (HTML), Funktion (JavaScript) und Layout (CSS), wobei die Übergänge teilweise fließend sind. Diese Gestaltungelemente sind häufig in Frameworks zusammengefasst.

Um Inhalte einheitlich zu gestalten, werden, ähnlich den Formatvorlagen bei Textverarbeitungen, häufig Vorlagen für das Layout (CSS) verwendet. Ein Framework, das sehr viele solcher Vorlagen enthält, ist Bootstrap. Es bietet Vorlagen für einheitliche Buttons, vorformatierte Textfelder, Navigationselemente und vieles mehr. Das Framework Bootstrap ist in der Lernplattform bereits intergriert. Die Formatvorlagen können durch die Eingabe der entsprechenden Codes aktiviert werden.

 

  Farbige Textboxen – Alerts

  Schaltfläche – Buttons

  Markierungen – Badges

  Menüelemente

Farbige Textboxen – Alerts

Im Sinne der Cognitive Load Theory ist es wichtig, die lernirrelevante kognitive Belastung zu senken. Dies kann mit einer übersichtlichen Struktur erreicht werden. Dazu können die vorformatierten Textboxen alerts zu einer einheitlichen Gestaltung dienen.

Beispielsweise kann man auf diese Weise elegant und visuell ansprechend Aufgaben, Zusatzinfos und reinen Text voneinander abgrenzen. Dies erhöht die Struktur der Lernumgebung und erleichtert dem Lernenden die Inhalte schnell zu erfassen

Es stehen Ihnen sechs Unterschiedliche Formatvorlagen zur Verfügung:

<div class="alert alert-primary" role="alert">

TEXT</div>

 

Im mebis teachShare-Kurs können Sie den Bootstrapcode mit einem Klick auf das jeweilige Element bequem in die Zwischenablage kopieren.

Schaltfläche – Buttons

Die Inhalte von mebis sind naturgemäß Hypertext-Dokumente, welche verschiedene Elemente wie Medien, Aufgaben, Text, usw. auf einer Seite darstellen. Dabei können Links auf Ziele innerhalb oder außerhalb der Lernplattform verwiesen. Standardmäßig werden die Links im Text durch einen blaue Einfärbung der Schrift hervorgehoben. Mit Hilfe von „Buttons“ können Link als  auffällige Schaltfläche dargestellt werden.

Mit Bootstrap bietet sich zudem eine visuelle Kategorisierung der Links an. So können für verschiedene Linkzeile, wie etwas Aktivitäten innerhalb des Kurses oder Verlinkungen uaf externe Inhalte unterschiedliche Farben für Buttons gewählt werden, etwa primary für die interne Navigation, info für externe Inhalte und warning für Hilfen.

Hier finden Sie eine Übersicht uber die verfügbaren Farben:

<button type="button" class="btn btn-primary">

TEXT</button>

 

Digitale Lerninhalte benötigen Verlinkungen. Mit Hilfe der Bootstrap Buttons kann man diese gestalten.

 

Markierungen – Badges

Bootstrap bietet auch die Möglichkeit, einzelne Elemente mit einem sogenannten Badge zu markieren. Eine typische Anwendungssituation ist eine klare und übersichtlichte Differenzierung, bei der man verschiedene badges für verschiedene Aufgaben einsetzt.

So könnte man Badges beispielsweise zur Kennzeichnung verschiedener Anforderungsniveaus verwenden. Ebenso kann mit Hilfe von Bagdes auf neue oder besonders relevante Inhalte hingewiesen werden. Auch bei diesem Gestaltungselement kann man aus sechs Vorlagen wählen:

<span class="badge bg-primary">

TEXT</span>

 Bootstrap badges verwendet man, um bestimmte Inhalte auszuzeichnen.

Badges können an jeder beliebigen Stelle eingefügt werden. Bootstrap bietet weitere Klassen an, die einfach angehängt werden können. Mit dem folgenden Code-Schnispel kann das „Erfolgstextfeld“ mit Schlagschatten und gerundeten Ecken formatiert werden.

<span class="alert alert-success rounded shadow">

TEXT</span>

Menüelemente

Bootstrap bietet sogenannte Cards an, welche innerhalb eines Grids, also einer responsiven Tabellenstruktur angeordnet werden können.

Dieses Element eignet sich ganz besonders gut dazu, um eine zusätzliche Navigationsstruktur im Kurs aufzubauen. Dazu können sowohl die verwendeten Bilder als auch der angezeigte Text mit einem Link belegt werden. Bootstrap bietet standardmäßig verschiedene Cards an, die Text und Bild jeweils unterschiedlich anordnen. Zudem können Cards auch mit Buttons kombiniert werden.

  • Veröffentlichung
  • 24. März 2021
  • Letzte Änderung
  • 16. April 2021
  • Empfohlene Zitierweise
  • mebis-Redaktion (2021), Lernplattformkurse ansprechend gestalten, in: mebis – Landesmedienzentrum Bayern, URL: <https://www.mebis.bayern.de/p/55372> (16. April 2021).
  • Lizenzangaben
  • Beitragsbild: CC-BY-SA ISB