Hilfreiche Vorlagen zur Gestaltung von Inhalten unter Moodle.
Diese Vorlagen verwenden wir in unseren Moodle Kursen im Modul Daten und Information an der ZHAW. Sie sind an unsere Bedürfnisse ausgerichtet und entsprechend unvollständig.
Wenn weiter Elemente oder Anpassungen gewünscht sind, bitte ein neues Issue erstellen und genau beschreiben was fehlt oder angepasst werden soll.
Diese Vorlagen basieren auf Bootstrap 4 und den font awesome 4.7 Icons. Diese Versionen werden von Moodle direkt unterstützt.
Die Vorlagen basieren auf den responsiven Layouts von Bootstrap, so dass sie auch auf Mobilgeräten gut aussehen.
Alle Element sind also HTML-Code gestaltet. Sie eignen sich für Textfelder, Textseiten und Beschreibungen. Dazu muss in den HTML-Modus des Moodle-Editors gewechselt werden.
Prinzipiell können die Vorlagen auch in Tests eingesetzt werden, aber dort muss die spezielle Formiertung beachtet werden. Manche Styles sind dort nämlich unsichtbar.
Praktisch alle Elemente müssen angepasst werden.
Wenn schon Inhalte existieren, dann können diese an den entsprechenden Stellen von den Elementen der Vorlangen "eingerahmt" werden.
Wenn die HTML-Blöcke auf Textseiten eingebettet werden, dann muss im Moodle-Editor darauf geachtet werden, dass man sich einen kleinen Hilfstext oben und unten anlegt, denn sonst ist das weitere Bearbeiten schwierig und führt zu unerwünschten Ergebnissen.
Alle Vorlagen sind für die Nutzung mit Markdown vorbereitet.
Falls Inhalte in Markdown vorliegen können diese eingefügt werden, wenn als Texteditor "Unformatiert" und dann als Formatierung "Markdown" ausgewählt wurden.
Es gibt alle Vorlagen als volle Breite und als 2/3 Variante.
-
Warnung (Gelb) 2/3 Breite, zentriertes Symbol
-
Warnung (Rot) 2/3 Breite, zentriertes Symbol
-
Info (Blau) 2/3 Breite, zentriertes Symbol
-
Erfolg (Grün) 2/3 Breite, zentriertes Symbol
Achtung: Alle Schalter (Buttons) sind Links. D.h. Es muss die richtige URL zum Inhalt angepasst werden werden. In den Vorlagen sind diese mit DOWNLOAD_LINK bzw. MOODLE_LINK gekennzeichnet.
Achtung: Die rechte Spalte enthält einen Link, der angepasst werden muss. In den Vorlagen sind diese mit LINK_ZUM_MEETING_RAUM gekennzeichnet.
- Infoblock (2/3) mit Link (1/3) (für Videokonferenzen) Grün
- Infoblock (2/3) mit Link (1/3) (für Videokonferenzen) Gelb
Diese Elemente sind noch in Arbeit.
Flex-Elemente nutzen das flexible Layout von Bootstrap.
- linksbündige Darstellungen
- rechtsbündige Darstellungen
- zentrierte Darstellungen
- Element für einspaltige Darstellung
- Element für 2/3 Darstellung
- Element für 1/3 Darstellung
- Element für 3-Spalten Darstellung
- Element für 4-Spalten Darstellung