Erstellung eines Online-Kurses in WordPress

Du bist hier:
< Alle Themen

1. Konzeption

Ein Online-Kurs bie­tet die Mög­lich­keit, Infor­ma­tio­nen, Lern­ma­te­ria­li­en ver­schie­dens­ter Art, exter­ne Links oder Lite­ra­tur­emp­feh­lun­gen in über­sicht­li­cher Form an einem, in sich abge­schlos­se­nen Ort für die Ler­nen­den zu bündeln.

1.1 Inspiration

Wie bei der Erstel­lung von Lern­mo­du­len ist auch bei der Erstel­lung von Online-Kur­sen eine Grob­kon­zep­ti­on eine der ers­ten Schrit­te. Mehr Infor­ma­tio­nen zur Erstel­lung von digi­ta­len Lern­ma­te­ria­li­en und einem medi­en­di­dak­ti­schen Kon­zept kön­nen Sie unse­ren bereits bestehen­den Lern­mo­du­len ent­neh­men.

Bevor man sich nun an die Erstel­lung des Grob­kon­zepts für den Online-Kurs und die Umset­zung macht, ist es sinn­voll, sich zunächst Inspi­ra­ti­on bei bereits erstell­ten Online-Kur­sen zu holen. Ein Online-Kurs kann eine klei­ne Zusam­men­stel­lung von weni­gen Sei­ten (Bei­spiel) oder auch eine grö­ße­re Zusam­men­stel­lung von Sei­ten mit Unter­sei­ten und einem grö­ße­ren Inhalts­ver­zeich­nis (Bei­spiel) beinhal­ten.

 

1.2 Aufbau des Kurses

Nach die­sem gro­ben Über­blick über die Mög­lich­kei­ten der inhalt­li­chen und gra­fi­schen Struk­tu­rie­rung und des Auf­baus geht es nun an die Struk­tu­rie­rung der zu ver­mit­teln­den Inhal­te des Online-Kur­ses in Ober- und Unterkapitel.

Als all­ge­mei­ne Rah­men­be­din­gung zum Auf­bau kann fol­gen­des Sche­ma dienen:

  1. Start­sei­te mit einer Beschrei­bung der Zie­le des Online-Kur­ses, einer Kurs­über­sichts­gra­fik und einer Anlei­tung zur Bedie­nung (ggf. Logos betei­lig­ter Part­ner oder Förderer)
  2. Kapi­tel mit Unter­ka­pi­teln laut Anzahl der Berei­che in der Kursübersichtsgrafik

1.3 Grafischer Überblick über die Inhalte

Eine Mög­lich­keit zur För­de­rung der Über­sicht­lich­keit und zur Unter­stüt­zung der Ler­nen­den bei der selbst­stän­di­gen Erar­bei­tung der Inhal­te des Online-Kur­ses bie­tet eine gra­fi­sche Lern­land­kar­te. Die Kapi­tel des Online-Kur­ses wer­den in die­ser Kurs­über­sichts­gra­fik in der emp­foh­le­nen Bear­bei­tungs­rei­hen­fol­ge und unter­stützt durch ein Sym­bol in farb­li­chen Blö­cken dargestellt.

Bei­spiel für eine Kursgrafik

Die­se Gra­fik dient als Ele­ment zur gra­fi­schen Dar­stel­lung des Umfangs und der Bear­bei­tungs­rei­hen­fol­ge der Unter­the­men, ist aber gleich­zei­tig auch ein Navi­ga­ti­ons­ele­ment, da sie inter­ak­tiv gestal­tet wer­den kann. Inter­ak­tiv bedeu­tet, dass beim Dar­über­scrol­len mit der Maus ein Fens­ter mit Hin­wei­sen zu den dar­un­ter ver­steck­ten Inhal­ten erscheint und per Maus­klick direkt in das Kapi­tel navi­giert wer­den kann.

Machen Sie sich eine Skiz­ze zur gra­fi­schen Lern­land­kar­te. Fah­ren Sie dann aber zunächst mit der Anla­ge der Ober- und Unter­sei­ten fort, bevor Sie sich detail­liert mit der gra­fi­schen Navi­ga­ti­on aus­ein­an­der­set­zen. Oft zeigt sich bei der Anla­ge der Sei­ten, dass noch Anpas­sun­gen in der Gra­fik not­wen­dig sind. Nähe­res zur Umset­zung der gra­fi­schen Lern­land­kar­te fin­den Sie wei­ter unten in die­sem Wiki-Arti­kel.

Erstel­lung der Kurs­gra­fik (Image­Map) durch die AG Digi­ta­le Lehre

Icon Hinweis

Für die Erstel­lung der Kurs­gra­fik bie­tet die AG Digi­ta­le Leh­re Hil­fe­stel­lung. Soll­ten Sie die Kurs­kon­zep­ti­on been­det haben und die Auf­tei­lung der Ober­ka­pi­tel des Kur­ses klar sein, wen­den Sie sich mit die­sen Infor­ma­tio­nen an uns. Bit­te rei­chen Sie ger­ne Ideen und Vor­schlä­ge für pas­sen­de Icons mit ein. Die Kurs­gra­fik wird nach der Erstel­lung unse­rer Medi­en­ge­stal­ter, von uns in die Media­thek in den Ord­ner des ent­spre­chen­den Online-Kur­ses hoch­ge­la­den, und kann dann von Ihnen, als Kurs-Erstel­ler, in einer Image­Map bear­bei­tet und ver­linkt werden.

Schrei­ben Sie uns eine E‑Mail mit der Bit­te zur Erstel­lung einer Kurs­gra­fik an zfl-digitalelehre@uni-koeln.de

ImageMap bearbeitet und verlinkt werden

Bit­te beach­ten Sie dabei die Hin­wei­se zur Erstel­lung von Tool­tips, wel­che wir in der Anlei­tung Hin­wei­se zur Erstel­lung von inter­ak­ti­ven Gra­fi­ken (Image­Maps) zusam­men­ge­tra­gen haben.


2. Umsetzung

Nun sind wir also schon mit­ten in der Umset­zung des Kur­ses ange­kom­men. Wel­che Schrit­te hier nötig sind erklä­ren wir in die­sem Abschnitt. Viel Erfolg bei der Erstel­lung Ihres Online-Kur­ses.
In der Umset­zung müs­sen neben dem anpas­sen der Kurs­in­hal­te fol­gen­de Schritt im Wor­d­Press umge­stezt wer­den, damit Sie eine funk­tio­nie­ren­den Online-Kurs erstel­len: 
1. Gene­rell ein Kurs-Ord­ner erstel­len 
2. und 3. das Kurs-Menü muss ange­legt und die Sei­ten damit ver­knüpft wer­den
4. Kapi­tel­far­ben müs­sen den Sei­ten zuge­ord­net wer­den
5. Die Inhal­te for­ma­tiert wer­den
6. Hil­fe zum Anle­gen von Inhalt­blö­cken in WordPress

2.1 Anlage des Kursordners

Um einen Online-Kurs anzu­le­gen, soll­ten Sie eine neue Sei­te im Wor­d­Press erstel­len oder auf eine vor­han­de­ne Sei­te zurück­grei­fen, die Sie kopie­ren. Die Kurs­sei­ten wer­den dann mit dem Kur­s­ti­tel ver­se­hen und als Ent­wurf gespei­chert. Nun kön­nen Sie mit dem Anpas­sen der Inhal­te beginnen.

2.2 Inhalte erstellen

Für das Ein­bin­den von Bil­der, Video und inter­ak­ti­ven Ele­men­ten bit­ten wir Sie dabei auf fol­gen­des im Umgang mit der Medi­en­bi­blio­thek zu beach­ten. Hier­zu fin­den Sie wei­te­re Hin­wei­se im Wiki-Arti­kel: https://digilehre.zflkoeln.de/knowledge-base/lernmodulerstellung/umgang-mit-der-wordpress-medienbibliothek

Icon Hinweis

Datei-Benen­nun­gen
Im Kurs ein­ge­bet­te­te Ele­men­te wie Bil­der, Vide­os oder Kar­ten wer­den nach fol­gen­dem Sche­ma benannt: Absender_NamedesLernmoduls_SeiteausdemLernmodul
Bei­spiels­wei­se im “Lern­mo­dul Medi­en­kon­zep­ti­on”, wür­de ein auf der Sei­te “Lern­zie­le” hoch­ge­la­de­nes Bild folg­lich „ZfL_Medienkonzeption_Lernziele” heißen.


Hin­wei­se zur Lizen­sie­rung von Uploads (PDF, docx, etc.)
Beim Upload von Inhal­ten Ihres Lern­mo­duls ist zu beach­ten, dass die CC-Lizen­sie­rung des Doku­ments im Fuß jeder Sei­te mit Titel des Doku­ments, dem Namen der*des Autor*in, der CC-Lizen­sie­rung und dem ent­spre­chen­den Link wie folgt angeben: 

Wir emp­feh­len, dass Doku­men­te als bear­beit­ba­re Datei­en ein­ge­bun­den wer­den – folg­lich nicht als pdf-Datei. War­um? Nur so sind sie für ande­re Nutzer*innen wei­ter­be­ar­beit­bar im Sin­ne von offe­nen Bil­dungs­ma­te­ria­li­en. Soll­ten Sie sich den­noch für eine pdf-Datei ent­schei­den, müs­sen Sie sicher­stel­len, dass hin­ter dem Lizenz­ver­trag in der Fuß­zei­le („CC BY-SA 4.0“) der ent­spre­chen­de Link-Text zum Lizenz­ver­trag hin­ter­legt ist. Bei der Kon­ver­tie­rung eines Word-Doku­ments in eine pdf-Datei geht der Link verloren.

Hier haben Sie nun zwei Möglichkeiten:

  1. Falls Sie Ado­be Acro­bat Pro besit­zen, kön­nen Sie den Link in der pdf-Datei nach­träg­lich hinterlegen.
  2. Falls das nicht der Fall ist, set­zen Sie den Link zum Lizenz­text in die Fuß­leis­te der Word-Datei ein bevor Sie die­se kon­ver­tie­ren – die­sem Sche­ma ent­spre­chend:

    (Doku­ment­ti­tel) I (Urheber*in) I

    CC BY-SA 4.0 (https://creativecommons.org/licenses/by-sa/4.0/deed.de)

Nur so kann garan­tiert wer­den, dass das Doku­ment eben­falls CC-lizen­ziert ist und somit als offe­nes Bil­dungs­ma­te­ri­al gel­ten kann. Mehr Infor­ma­tio­nen zu CC-Lizen­zen und offe­nen Bil­dungs­ma­te­ria­li­en fin­den Sie im Wiki-Ein­trag zum The­ma OER.

Eine Vor­la­ge für Word-Datei­en kön­nen Sie unter fol­gen­dem Link herunterladen:

Download Icon für ein PDF

Vor­la­ge für Word-Datei­en mit CC-Lizenz


 2.2 Kurs-Menü einstellen

Beispiel für Kursnavigation im Online-Kurs
Bei­spiel für eine Kurs­na­vi­ga­ti­on unter Ver­wen­dung der Kapitelfarben

Jedem Online-Kurs wird zu bes­se­ren Ori­en­tie­rung inner­halb des Kur­ses ein Kurs-Menü (mit allen Kapi­teln) zuge­ord­net. Das Menü wird mit den jewei­li­gen Kapi­tel­far­ben und Icons dargestellt.

Dar­stel­lung der Kurs­na­vi­ga­ti­on rechts

Dar­stel­lung Lay­out / Select Lay­out > Hier wird die rech­te Spal­te für die Navi­ga­ti­on angezeigt

Vor­aus­set­zung im auf der Kur­sei­te ein Menü in der rech­ten Spal­te anzu­zei­gen, ist die Ein­stel­lung des ent­spre­chen­den Sei­ten­lay­outs. Hier­zu müs­sen Sie in jeder Kurs­sei­te fol­gen­de Ein­stel­lung vor­neh­men bzw. über­prü­fen: im Rei­ter „Lay­out” (unter­halb des Text­ein­ga­be­fel­des) wäh­len Sie im Punkt „Use Cus­tom Lay­out” die drit­te dar­ge­stell­te Ver­si­on der Sei­ten­auf­tei­lung mit eine Spal­te recht aus. Geschafft! – nun kann auf der Sei­te eine Navi­ga­ti­on ange­zeigt wer­den. Die­se wird bei rich­ti­ger Zuwei­sung der Unter­sei­ten nun auto­ma­tisch ein­ge­bet­tet.

Hin­weis: Bei Ver­wen­dung der Vor­la­ge „Online-Kurs” ist die­se Lay­out-Ansicht voreingestellt.

Unter­sei­ten einem Kapi­tel hinzufügen

Bei­spiel einer Kurs­na­vi­ga­ti­on mit Unterpunkte
Bei­spiel für Ein­stel­lun­gen in Sei­ten Attri­bu­te > Zuwei­sung der Unter­ka­pi­tel zu den Kapiteln

Auf der jewei­li­gen Kurs­sei­te muss für die Unter­sei­ten eine Zuwei­sung zum Kapi­tel erfol­gen, nur so wird das rich­ti­ge Kurs­me­nü dar­ge­stellt. Unter Sei­ten-Attri­bu­te in der rech­ten Spal­te, kön­nen Sie im Drop­down-Menü unter Eltern das Ober­ka­pi­tel zuwei­sen. gesetzt wer­den. Bit­te suchen Sie in der Lis­te nach die­sem und kli­cken es an. in unse­rem Bei­spiel oben ist das, dass Kapi­tel „Grund­la­gen digi­ta­ler Bil­dung”. Nun spei­chern Sie die Sei­te ab und fertig!

2.3 Menü-Struktur erstellen

Um ein Kurs­me­nü anzu­le­gen, wech­seln sie im Bear­bei­tungs­mo­dus in Wor­d­Press den Bereich Menü. 
Hier kön­nen Sie ent­we­der ein bereits erstell­test Menü auf­ru­fen, indem Sie die­ses im Drop­down „Wäh­le ein Menü zum Bear­bei­ten” aus und Kli­cken auf „Aus­wäh­len”. Oder erstel­len Sie ein neu­es Menü über den Link „erstel­le ein neu­es Menü”.

Bei­spiel-Menü für einen Onlinekurs

Das neu erstell­te Menü muss einen Namen bekom­men der dem Online-Kurs ent­spricht. Jetzt kön­nen Sie aus dem Bereich „Sei­ten” die gewünsch­ten Sei­ten suchen und per Drag-and-Drop in den Men­übereich zie­hen und dort sor­tie­ren. Das Ein­rü­ckun­gen der Unter­sei­ten kann durch ent­spre­chen­des Ver­schie­ben der Sei­ten erreicht wer­den. Bit­te den­ken Sie dar­an das Menü nach der Erstel­lung zu Speichern. 😉

Icon Hinweis

Far­ben und Icons im Menü anle­gen (durch AG Digi­ta­le Leh­re)
Für die gra­fi­sche Anpas­sung des Kurs­me­nü mit­tels Kapi­tel­far­ben und Icons bie­tet die AG Digi­ta­le Leh­re Hil­fe­stel­lung an. Bit­te infor­mie­ren Sie uns per Mail über die Anpas­sung des Menüs unter Anga­be des Menü-Namens und Hin­wei­se auf die ent­spre­chen­den Icons:
ag_digi@zfl-uni-koeln.de

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

Set­zen der Kapi­tel­far­be unter Fea­ture Titel Area > Back­ground color

Um den jewei­li­gen Sei­ten der Kapi­tel die rich­ti­ge Far­be zuzu­wei­sen, prü­fen Sie im Rei­ter Fea­ture Titel Area die Ein­stel­lun­gen unter back­ground color. Hier kön­nen Sie bei Bedarf die Far­be für ihre Sei­te mit­tels Farb­wäh­ler oder mit Hexa­de­zi­mal-Code (#8ccaae — mint­grün, #e3afd1 — pink, #7fa3c8 — blau, #ffed00 — gelb, #8e8e8e — grau, #fffab6 — hell­gelb) anpas­sen. Die Far­be soll­te auf jeder Sei­te nach Zuge­hö­rig­keit im Kapi­tel aus­ge­sucht und gesetzt wer­den. Die­se wird dann im Kopf­be­reich der Sei­te ange­zeigt, sie­he Bei­spiel unterhalb:

Bei­spiel für Kapi­tel­far­be im Seitentitel

2.5 Formatierungen von Seiten

Es gibt zwei ver­schie­de­ne For­ma­tie­rungs­op­tio­nen. Um simp­le Über­schrif­ten und Absät­ze zu for­ma­tie­ren, ist das Drop­down­me­nü in der obe­ren lin­ken Ecke des Edi­tors gedacht.

Bei­spiel für den Text­edi­tor im Wor­d­Press zur Bear­bei­tung von Texten

Formatierungen im Überblick

Hier folgt in Kür­ze eine Anlei­tung zum Umgang mit For­ma­tie­run­gen. Com­ing Soon!

Über­schrift
Com­ing Soon! 
Text­block
Com­ing Soon! 
Trenn­li­nie
Com­ing Soon! 
Abstand­hal­ter
Com­ing Soon! 

2.5 Anlegen von Blocken mit Vorlagen

Hier folgt in Kür­ze eine Anlei­tung zum Anle­gen von Blö­cken & deren For­ma­tie­rung unter Nut­zung von Vor­la­gen. Com­ing Soon!

2‑Spaltiger Block
Com­ing Soon! 
Info­block
Com­ing Soon! 
Lern­mo­dul­box
Com­ing Soon! 
Hover­box
 

Bei­spiel für eine Hover­box mit Vor­der- und Rückseite

Hover­bo­xen kön­nen zur Ein­bin­dung von Lern­mo­du­len und wei­ter­füh­ren­den Infor­ma­tio­nen ein­ge­setzt wer­den. Sie haben ein Bild und einen kur­zen beschrei­ben­den Text, sowie eine Schalt­flä­che die auf den ent­spre­chen­den Inhalt verweist. 

Bei der Erstel­lung von Hover­bo­xen ste­hen wir (die AG Digi­ta­le Leh­re) zur Umset­zung zur Ver­fü­gung. Wich­tig ist: dass Sie uns den Ort der Hover­box (Ler­mo­dul und Sei­te), die zu ver­wen­den­de Über­schrift und einen kur­zen erklä­ren­den Text, sowie den Link zum Inhalt zu Ver­fü­gung stel­len. Bit­te schi­cken Sie die­se Infos mit dem Betreff “Hover­box” an zfl-digitalelehre@uni-koeln.de

Zur Ver­wen­dung einer Hover­box bit­ten wir Sie uns fol­gen­de Infor­ma­tio­nen bereit zustel­len:
1. Titel der Hover­box (Anzei­ge auf der Vor­der­sei­te als Titel)
2. kur­zer beschrei­ben­der Text des Inhalts des Lern­mo­du­les oder Inhal­tes der Hover­box. Die­ser Text steht auf der Rück­sei­te der Box.


3. Qualitätssicherung & Veröffentlichung 

Es ist geschafft! Sie haben ihren Online-Kurs fer­tig­ge­stellt. Herz­li­chen Glück­wunsch.
Im letz­ten Schritt über­prü­fen Sie nun ihre Arbeit. Die fol­gen­de Über­sicht soll Ihnen dabei helfen:

Checkliste zur Überprüfung der Online-Kurse

OK Auf­ga­be
  Titel der Kur­ses und der Lek­tio­nen ändern
  Alle Inhal­te aus der Vor­la­ge an die neu­en The­men anpassen
  Impres­sum aktua­li­siert? (Namen des Lern­mo­duls, Lizenz) > Stand wird auto­ma­tisch mit der Aktua­li­sie­rung geändert.
  Recht­schrei­bung und Kor­rekt­heit der Inhal­te prüfen
  For­ma­tie­rung der Quel­len kor­rekt? (klei­ne­re Schrift und Zahl hochgestellt)
  Auf­zäh­lun­gen zu Beginn klein (außer gan­ze Sät­ze), Ant­wor­ten in Fra­gen groß zu Beginn
  Hin­wei­se zur Bar­rie­re­frei­heit beachtet?
  Sind die Bild­be­schrif­tun­gen vollständig?
  Kurs­in­hal­te wie Bil­der etc. im Kurs­ord­ner unter Medi­en einsortiert?
  Ist Menü rich­tig ein­ge­stellt (Links, Far­ben und Icons)? Las­sen sich alle Sei­ten anklicken?
  Kurs ver­öf­fent­li­chen?
   

All­ge­mei­ne­re Infor­ma­tio­nen zur Qua­li­täts­si­che­rung und eine umfang­rei­che Check­lis­te (ab Sei­te 10), die im Uni­ver­si­täts­ver­bund digiLL ein­ge­setzt wird, fin­den Sie unter die­sem Link.


Probleme und Fragen?

Soll­ten bei der Erstel­lung von Lern­mo­du­len Pro­ble­me oder Fra­gen auf­kom­men wen­den Sie sich bit­te per Mail an: zfl-digitalelehre@uni-koeln.de.

Schlagwörter:
Inhaltsverzeichnis