Der Moodle Designer erstellt barrierefreie HTML-Code-Schnipsel für Lernplattformen wie die ByCS. Mit Modulen für Zoom-Bilder, Text-to-Speech und interaktive Buttons lassen sich digitale Inhalte ohne Programmierkenntnisse inklusiv gestalten und optisch sowie didaktisch deutlich aufwerten.
https://lernsachen.online/moodle
Die erzeugten HTML-Code-Schnipsel können per Copy & Paste in jede Plattform eingefügt werden können, die HTML erlaubt (z. B. ByCS, mebis, WordPress). Obwohl für die bayerische ByCS Lernplattform optimiert, funktionieren die Elemente universell. Man öffnet im Editor der Zielseite einfach die Quellcode-Ansicht (</>), fügt den Code ein – fertig.
Die Module im Überblick
- Interaktives Bild: Bilder erhalten eine Zoom-Funktion und einen TTS-Button, der den Alternativtext vorliest.
- Button Designer: Erstellt klickbare Schaltflächen mit Icons (z. B. ARASAAC), die Struktur und klare Handlungsanweisungen geben.
- Sprechender Text: Ein Klick auf das Lautsprecher-Symbol liest den Textblock direkt im Browser vor – ideal für Leseschwache.
- Kasten Designer: Merksätze oder Aufgaben werden in ansprechenden, farbigen Boxen mit Piktogrammen hervorgehoben.
- Floating Nav: Eine schwebende Seitenleiste, die beim Scrollen mitwandert und wichtige Werkzeuge oder Ziele immer im Blickfeld hält.
- Split-Screen (Telli): Teilt den Bildschirm in zwei Spalten, um z. B. links einen Text und rechts ein interaktives Tool (iFrame) zu zeigen – inklusive QR-Scanner zum Laden externer Links.
- Farben Designer: Hilft beim Erstellen harmonischer und kontrastreicher Farbpaletten, sogar basierend auf eigenen Fotos.
- CSS Hacks: Kleine Codes, um z. B. verwirrende Navigationspfeile in ByCS-Kursen einfach auszublenden.
Sonderpädagogischer Bezug
Der Moodle Designer unterstützt:
- Multimodalität: Informationen werden gleichzeitig visuell (Text/Bild) und auditiv (Sprachausgabe) angeboten.
- Kognitive Entlastung: Durch den Einsatz von Piktogrammen (ARASAAC) und klar strukturierten Info-Kästen wird die Orientierung erleichtert.
- Physiologische Unterstützung: Die Zoom-Funktion hilft Schülern mit Sehbeeinträchtigungen, Details ohne externe Hilfsmittel zu erfassen.
Methodisch-didaktische Hinweise
- Konsistenz: Nutze für ähnliche Aufgabenformate immer die gleichen Button-Farben oder Icons, um eine visuelle Routine aufzubauen.
- Scaffolding: Setze den „Sprechenden Text“ gezielt als Unterstützungssystem ein. Schüler können so selbst entscheiden, wann sie eine Lesehilfe benötigen.
- Struktur vor Design: Verwende den Kasten-Designer nicht zur reinen Dekoration, sondern um die Informationshierarchie (z. B. Blau = Info, Rot = Aufgabe) zu verdeutlichen.
Praktische Umsetzung: So geht’s
Der Prozess ist denkbar einfach:
- Modul im Moodle Designer wählen und nach Wunsch konfigurieren.
- Auf „HTML Code erstellen“ klicken.
- In mebis/ByCS/WordPress beim Textfeld die Quellcode-Ansicht öffnen.
- Code einfügen, speichern und das neue Design genießen!
LernSachen 