Session Presentation

Moodle Kurse schön(er) gestalten

Moodle Kurse schön(er) gestalten

by Iris Neiske -
Number of replies: 1

Hallo,

ich tippe darauf das 95-99 % unserer Lehrenden ihre Kurse in Moodle zwar füllen, aber nicht optisch ansprechend aufbereiten. Da wir zu einem Good-Practice Wettbewerb aufgerufen haben, haben wir aber auch sehr schöne Kursbeispiele eingereicht bekommen. Diese möchte ich gerne mit euch teilen.

Geplanter Inhalt:

  • Vorstellung ansprechender Kurse, die als Good Practice an der Uni Paderborn eingereicht wurden
  • Eure Beispiele von schönen Kursen
  • gemeinsame Sammlung: Tipps zur Umsetzung von grafisch ansprechenden Moodle Kursen
Ziel:
Am Ende Idee für optisch schöne Kursumsetzungen gesammelt haben und Ideen / Codes wie das mit HTML umsetzten kann.

Zeitrahmen:
in einem der ersten drei Slots

Viele Grüße
Iris
In reply to Iris Neiske

Re: Moodle Kurse schön(er) gestalten

by Anja Lorenz -


Was macht einen ansprechenden Kurs aus?  
- Übersichtlichkeit (Navigation/Index, Symbole/Icons, Unterüberschriften, Leerzeilen/Trennzeichen(<HR>), Einrückungen)
Inhalt!!!
- Elemente aufklappen/reduzieren können
- Kontrolle für die Nutzer:innen
- Responsivität: Mobile first
- hervorgehobene Bereiche


ZIEL: Am Ende Idee für optisch schöne Kursumsetzungen gesammelt haben und Ideen / Codes wie das mit HTML umsetzten kann.
gemeinsame Sammlung: Tipps zur Umsetzung von grafisch ansprechenden Moodle Kursen

Moodle Boardmittel
Viel machen Bilder, Tabellen, farbige Formatierungen
 
HTML Tipps:
Im externen Editor bauen und über Quellcode <> einfügen

Ist meine Seite responsive? http://www.responsinator.com/
 
Javascript ???? Eine Option, wenn ja was ist zu beachten?
  • Hinweis: ist in einigen Systemen gesperrt und wird beim Speichern gelöscht
 
CSS Stylesheets? Geht das auf Kursebene? Was ist zu beachten?
 
Plugins
"Wer auf Plugins verzichtet, verpasst die kulinarischen Leckerbissen."

Kursformate

Andere Idee?

andere Beispiele
  • Birgit L. aus dem Bereich Chemie
  • Rebecca Burk: BOKU E-Learning und Didaktik Couch (CC lizensiert)

---
Bitte auch dort ergänzen

CSS-Tipp: Accordion auf HTML/CSS-Basis:
    (im Textfeld in die HTML-Ansicht kopieren und anpassen)
    <details open="">
  <summary style=" border-left: 6px solid red; height: auto; padding-left: 5px;">
    <b>Accordion mit dem HTML-Tag &lt;details&gt;</b>
  </summary>
  <p>
    Das neue HTML5-Tag &lt;details&gt; wird von Firefox, Chrome, Opera und Safari unterstützt. Der Internet Explorer unterstützt das Tag noch nicht; hier werden die Inhalte immer vollständig angezeigt.
  </p>
</details>

Eyetracking
von wann ist diese Studie?  2004 ungefähr

Course zu Font Awesome in English