Erstellung eines Online-Kurses in WordPress

Du bist hier:
< Alle Themen

1. Konzeption

Ein Online-Kurs bietet die Möglichkeit, Informationen, Lernmaterialien verschiedenster Art, externe Links oder Literaturempfehlungen in übersichtlicher Form an einem, in sich abgeschlossenen Ort für die Lernenden zu bündeln.

1.1 Inspiration

Wie bei der Erstellung von Lernmodulen ist auch bei der Erstellung von Online-Kursen eine Grobkonzeption eine der ersten Schritte. Mehr Informationen zur Erstellung von digitalen Lernmaterialien und einem mediendidaktischen Konzept können Sie unseren bereits bestehenden Lernmodulen entnehmen.

Bevor man sich nun an die Erstellung des Grobkonzepts für den Online-Kurs und die Umsetzung macht, ist es sinnvoll, sich zunächst Inspiration bei bereits erstellten Online-Kursen zu holen. Ein Online-Kurs kann eine kleine Zusammenstellung von wenigen Seiten (Beispiel) oder auch eine größere Zusammenstellung von Seiten mit Unterseiten und einem größeren Inhaltsverzeichnis (Beispiel) beinhalten.

 

1.2 Aufbau des Kurses

Nach diesem groben Überblick über die Möglichkeiten der inhaltlichen und grafischen Strukturierung und des Aufbaus geht es nun an die Strukturierung der zu vermittelnden Inhalte des Online-Kurses in Ober- und Unterkapitel.

Als allgemeine Rahmenbedingung zum Aufbau kann folgendes Schema dienen:

  1. Startseite mit einer Beschreibung der Ziele des Online-Kurses, einer Kursübersichtsgrafik und einer Anleitung zur Bedienung (ggf. Logos beteiligter Partner oder Förderer)
  2. Kapitel mit Unterkapiteln laut Anzahl der Bereiche in der Kursübersichtsgrafik

1.3 Grafischer Überblick über die Inhalte

Eine Möglichkeit zur Förderung der Übersichtlichkeit und zur Unterstützung der Lernenden bei der selbstständigen Erarbeitung der Inhalte des Online-Kurses bietet eine grafische Lernlandkarte. Die Kapitel des Online-Kurses werden in dieser Kursübersichtsgrafik in der empfohlenen Bearbeitungsreihenfolge und unterstützt durch ein Symbol in farblichen Blöcken dargestellt.

Beispiel für eine Kursgrafik

Diese Grafik dient als Element zur grafischen Darstellung des Umfangs und der Bearbeitungsreihenfolge der Unterthemen, ist aber gleichzeitig auch ein Navigationselement, da sie interaktiv gestaltet werden kann. Interaktiv bedeutet, dass beim Darüberscrollen mit der Maus ein Fenster mit Hinweisen zu den darunter versteckten Inhalten erscheint und per Mausklick direkt in das Kapitel navigiert werden kann.

Machen Sie sich eine Skizze zur grafischen Lernlandkarte. Fahren Sie dann aber zunächst mit der Anlage der Ober- und Unterseiten fort, bevor Sie sich detailliert mit der grafischen Navigation auseinandersetzen. Oft zeigt sich bei der Anlage der Seiten, dass noch Anpassungen in der Grafik notwendig sind. Näheres zur Umsetzung der grafischen Lernlandkarte finden Sie weiter unten in diesem Wiki-Artikel.

Erstellung der Kursgrafik (ImageMap) durch die AG Digitale Lehre

Icon Hinweis

Für die Erstellung der Kursgrafik bietet die AG Digitale Lehre Hilfestellung. Sollten Sie die Kurskonzeption beendet haben und die Aufteilung der Oberkapitel des Kurses klar sein, wenden Sie sich mit diesen Informationen an uns. Bitte reichen Sie gerne Ideen und Vorschläge für passende Icons mit ein. Die Kursgrafik wird nach der Erstellung unserer Mediengestalter, von uns in die Mediathek in den Ordner des entsprechenden Online-Kurses hochgeladen, und kann dann von Ihnen, als Kurs-Ersteller, in einer ImageMap bearbeitet und verlinkt werden.

Schreiben Sie uns eine E-Mail mit der Bitte zur Erstellung einer Kursgrafik an zfl-digitalelehre@uni-koeln.de

ImageMap bearbeitet und verlinkt werden

Bitte beachten Sie dabei die Hinweise zur Erstellung von Tooltips, welche wir in der Anleitung Hinweise zur Erstellung von interaktiven Grafiken (ImageMaps) zusammengetragen haben.


2. Umsetzung

Nun sind wir also schon mitten in der Umsetzung des Kurses angekommen. Welche Schritte hier nötig sind erklären wir in diesem Abschnitt. Viel Erfolg bei der Erstellung Ihres Online-Kurses.
In der Umsetzung müssen neben dem anpassen der Kursinhalte folgende Schritt im WordPress umgestezt werden, damit Sie eine funktionierenden Online-Kurs erstellen: 
1. Generell ein Kurs-Ordner erstellen 
2. und 3. das Kurs-Menü muss angelegt und die Seiten damit verknüpft werden
4. Kapitelfarben müssen den Seiten zugeordnet werden
5. Die Inhalte formatiert werden
6. Hilfe zum Anlegen von Inhaltblöcken in WordPress

2.1 Anlage des Kursordners

Um einen Online-Kurs anzulegen, sollten Sie eine neue Seite im WordPress erstellen oder auf eine vorhandene Seite zurückreifen, die Sie kopieren. Die Kursseiten werden dann mit dem Kurstitel versehen und als Entwurf gespeichert. Nun können Sie mit dem Anpassen der Inhalte beginnen.

2.2 Inhalte erstellen

Für das Einbinden von Bilder, Video und interaktiven Elementen bitten wir Sie dabei auf folgendes im Umgang mit der Medienbibliothek zu beachten. Hierzu finden Sie weitere Hinweise im Wiki-Artikel: https://digilehre.zflkoeln.de/knowledge-base/lernmodulerstellung/umgang-mit-der-wordpress-medienbibliothek

Icon Hinweis

Datei-Benennungen
Im Kurs eingebettete Elemente wie Bilder, Videos oder Karten werden nach folgendem Schema benannt: Absender_NamedesLernmoduls_SeiteausdemLernmodul
Beispielsweise im “Lernmodul Medienkonzeption”, würde ein auf der Seite “Lernziele” hochgeladenes Bild folglich “ZfL_Medienkonzeption_Lernziele” heißen.

 2.2 Kurs-Menü einstellen

Beispiel für Kursnavigation im Online-Kurs
Beispiel für eine Kursnavigation unter Verwendung der Kapitelfarben

Jedem Online-Kurs wird zu besseren Orientierung innerhalb des Kurses ein Kurs-Menü (mit allen Kapiteln) zugeordnet. Das Menü wird mit den jeweiligen Kapitelfarben und Icons dargestellt.

Darstellung der Kursnavigation rechts

Darstellung Layout / Select Layout > Hier wird die rechte Spalte für die Navigation angezeigt

Voraussetzung im auf der Kurseite ein Menü in der rechten Spalte anzuzeigen, ist die Einstellung des entsprechenden Seitenlayouts. Hierzu müssen Sie in jeder Kursseite folgende Einstellung vornehmen bzw. überprüfen: im Reiter “Layout” (unterhalb des Texteingabefeldes) wählen Sie im Punkt “Use Custom Layout” die dritte dargestellte Version der Seitenaufteilung mit eine Spalte recht aus. Geschafft! – nun kann auf der Seite eine Navigation angezeigt werden. Diese wird bei richtiger Zuweisung der Unterseiten nun automatisch eingebettet.

Hinweis: Bei Verwendung der Vorlage “Online-Kurs” ist diese Layout-Ansicht voreingestellt.

Unterseiten einem Kapitel hinzufügen

Beispiel einer Kursnavigation mit Unterpunkte
Beispiel für Einstellungen in Seiten Attribute > Zuweisung der Unterkapitel zu den Kapiteln

Auf der jeweiligen Kursseite muss für die Unterseiten eine Zuweisung zum Kapitel erfolgen, nur so wird das richtige Kursmenü dargestellt. Unter Seiten-Attribute in der rechten Spalte, können Sie im Dropdown-Menü unter Eltern das Oberkapitel zuweisen. gesetzt werden. Bitte suchen Sie in der Liste nach diesem und klicken es an. in unserem Beispiel oben ist das, dass Kapitel “Grundlagen digitaler Bildung”. Nun speichern Sie die Seite ab und fertig!

2.3 Menü-Struktur erstellen

Um ein Kursmenü anzulegen, wechseln sie im Bearbeitungsmodus in WordPress den Bereich Menü. 
Hier können Sie entweder ein bereits erstelltest Menü aufrufen, indem Sie dieses im Dropdown “Wähle ein Menü zum Bearbeiten” aus und Klicken auf “Auswählen”. Oder erstellen Sie ein neues Menü über den Link “erstelle ein neues Menü”.

Beispiel-Menü für einen Onlinekurs

Das neu erstellte Menü muss einen Namen bekommen der dem Online-Kurs entspricht. Jetzt können Sie aus dem Bereich “Seiten” die gewünschten Seiten suchen und per Drag-and-Drop in den Menübereich ziehen und dort sortieren. Das Einrückungen der Unterseiten kann durch entsprechendes Verschieben der Seiten erreicht werden. Bitte denken Sie daran das Menü nach der Erstellung zu Speichern. 😉

Icon Hinweis

Farben und Icons im Menü anlegen (durch AG Digitale Lehre)
Für die grafische Anpassung des Kursmenü mittels Kapitelfarben und Icons bietet die AG Digitale Lehre Hilfestellung an. Bitte informieren Sie uns per Mail über die Anpassung des Menüs unter Angabe des Menü-Namens und Hinweise auf die entsprechenden Icons:
ag_digi@zfl-uni-koeln.de

2.4 .Kapitelfarben auf der Seite zuweisen (Hintergrundfarbe für Seitentitel)

Setzen der Kapitelfarbe unter Feature Titel Area > Background color

Um den jeweiligen Seiten der Kapitel die richtige Farbe zuzuweisen, prüfen Sie im Reiter Feature Titel Area die Einstellungen unter background color. Hier können Sie bei Bedarf die Farbe für ihre Seite mittels Farbwähler oder mit Hexadezimal-Code (#8ccaae – mintgrün, #e3afd1 – pink, #7fa3c8 – blau, #ffed00 – gelb, #8e8e8e – grau, #fffab6 – hellgelb) anpassen. Die Farbe sollte auf jeder Seite nach Zugehörigkeit im Kapitel ausgesucht und gesetzt werden. Diese wird dann im Kopfbereich der Seite angezeigt, siehe Beispiel unterhalb:

Beispiel für Kapitelfarbe im Seitentitel

2.5 Formatierungen von Seiten

Es gibt zwei verschiedene Formatierungsoptionen. Um simple Überschriften und Absätze zu formatieren, ist das Dropdownmenü in der oberen linken Ecke des Editors gedacht.

Beispiel für den Texteditor im WordPress zur Bearbeitung von Texten

Formatierungen im Überblick

Hier folgt in Kürze eine Anleitung zum Umgang mit Formatierungen. Coming Soon!

Überschrift
Coming Soon!
Textblock
Coming Soon!
Trennlinie
Coming Soon!
Abstandhalter
Coming Soon!

2.5 Anlegen von Blocken mit Vorlagen

Hier folgt in Kürze eine Anleitung zum Anlegen von Blöcken & deren Formatierung unter Nutzung von Vorlagen. Coming Soon!

2-Spaltiger Block
Coming Soon!
Infoblock
Coming Soon!
Lernmodulbox
Coming Soon!
Hoverbox
 

Beispiel für eine Hoverbox mit Vorder- und Rückseite

Hoverboxen können zur Einbindung von Lernmodulen und weiterführenden Informationen eingesetzt werden. Sie haben ein Bild und einen kurzen beschreibenden Text, sowie eine Schaltfläche die auf den entsprechenden Inhalt verweist. 

Bei der Erstellung von Hoverboxen stehen wir (die AG Digitale Lehre) zur Umsetzung zur Verfügung. Wichtig ist: dass Sie uns den Ort der Hoverbox (Lermodul und Seite), die zu verwendende Überschrift und einen kurzen erklärenden Text, sowie den Link zum Inhalt zu Verfügung stellen. Bitte schicken Sie diese Infos mit dem Betreff “Hoverbox” an zfl-digitalelehre@uni-koeln.de

Zur Verwendung einer Hoverbox bitten wir Sie uns folgende Informationen bereit zustellen:
1. Titel der Hoverbox (Anzeige auf der Vorderseite als Titel)
2. kurzer beschreibender Text des Inhalts des Lernmodules oder Inhaltes der Hoverbox. Dieser Text steht auf der Rückseite der Box.


3. Qualitätssicherung & Veröffentlichung 

Es ist geschafft! Sie haben ihren Online-Kurs fertiggestellt. Herzlichen Glückwunsch.
Im letzten Schritt überprüfen Sie nun ihre Arbeit. Die folgende Übersicht soll Ihnen dabei helfen:

Checkliste zur Überprüfung der Online-Kurse

OK Aufgabe
  Titel der Kurses und der Lektionen ändern
  Alle Inhalte aus der Vorlage an die neuen Themen anpassen
  Impressum aktualisiert? (Namen des Lernmoduls, Lizenz) > Stand wird automatisch mit der Aktualisierung geändert.
  Rechtschreibung und Korrektheit der Inhalte prüfen
  Formatierung der Quellen korrekt? (kleinere Schrift und Zahl hochgestellt)
  Aufzählungen zu Beginn klein (außer ganze Sätze), Antworten in Fragen groß zu Beginn
  Hinweise zur Barrierefreiheit beachtet?
  Sind die Bildbeschriftungen vollständig?
  Kursinhalte wie Bilder etc. im Kursordner unter Medien einsortiert?
  Ist Menü richtig eingestellt (Links, Farben und Icons)? Lassen sich alle Seiten anklicken?
  Kurs veröffentlichen?
   

Allgemeinere Informationen zur Qualitätssicherung und eine umfangreiche Checkliste (ab Seite 10), die im Universitätsverbund digiLL eingesetzt wird, finden Sie unter diesem Link.


Probleme und Fragen?

Sollten bei der Erstellung von Lernmodulen Probleme oder Fragen aufkommen wenden Sie sich bitte per Mail an: zfl-digitalelehre@uni-koeln.de.

Inhaltsverzeichnis
Zur Werkzeugleiste springen