Moodle App - Kurse optimieren

Da zunehmend mehr Nutzer/innen über mobile Endgeräte auf Moodle zugreifen, wird es immer wichtiger, dass Sie Ihre Kursinhalte für mobile Endgeräte optimieren.

Ermutigen Sie Ihre Kursteilnehmer/innen, die offizielle Moodle App zu installieren und neue Lernerfahrungen zu sammeln. In diesem Artikel finden Sie einige Anregungen, wie Sie Ihre Kursinhalte für mobile Endgeräte aufbereiten können.

Einen Kurs aufsetzen

• Für mobile Endgeräte sind die Kursformate Themenformat und "Wochenformat" am besten geeignet. Im Themenformat wird standardmäßig der erste oder der hervorgehobene Kursabschnitt in der App angezeigt. Im Wochenformat wird die aktuelle Woche angezeigt.
• Verwenden Sie keine verwaisten Aktivitäten oder direkte Links zu Aktivitäten (die Links funktionieren zwar, aber sie sind nicht komfortabel auf mobilen Endgeräten).
• Blöcke werden in der App nicht angezeigt, vermeiden Sie daher, wichtige Informationen in Blöcken zu platzieren.
• Wenn Ihre Kursteilnehmer/innen sowohl über den Browser als auch über die App auf Moodle zugreifen, fragen Sie Ihre Moodle-Adminstration, ob sie dieses Zusatz-Plugin installieren kann. Dieses Plugin ermöglicht es, den Zugriff auf Kursinhalte einzuschränken, so dass entweder vom Browser oder vom mobilen Endgerät darauf zugegriffen werden kann.

Kursinhalte

• Verwenden Sie auf Ihren Seiten responsives HTML.
• Verwenden Sie die Materialien Textseite oder Buch anstelle von Dokumenten, die heruntergeladen werden müssen.
• Vermeiden Sie große Mengen von Dokumenten und lange Textseiten. Bieten Sie stattdessen kleine "Informationshäppchen".
• Wenn Sie YouTube-Videos bereitstellen, halten Sie diese kurz und stellen Sie auch als Datei in einem Verzeichnis zum Herunterladen zur Verfügung, damit Ihre Nutzer/innen die Videos offline anschauen können. Beachten Sie, dass nicht alle Videoformate unterstützt werden. Stellen Sie also Videos in verschiedenen Formaten bereit (MP4 ist wahrscheinlich das am weitesten verbreitete Format).
• Für YouTube- oder Vimeo-Videos können Sie responsive Bootstrap-Klassen verwenden: https://getbootstrap.com/docs/4.0/utilities/embed/, zum Beispiel:

<div class="embed-responsive"><video...

• Beachten Sie, dass Drag&Drop-Fragen sich in der App anders verhalten. Sie können Bilder nicht ziehen, sie müssen sie antippen, um sie auszuwählen, und noch mal antippen, um sie zu platzieren.
• Beachten Sie, dass Youtube Videos, die Sie als Links bereitstellen, automatisch in der App geöffnet werden.

Kurzform eines Textfeldes

Responsive HTML

Link

• Verwenden Sie nur Plugins, die die Moodle App unterstützen, so dass die Funktionalitäten auch in der App verfügbar sind. Siehe Moodle-Plugins-Datenbank: Auszeichnung: Moodle App Support.
• Vermeiden Sie relative URLs wie z.B. ../mod/page/views.php?id=X, da die App die richtige URL nicht erraten kann. Falls Sie URLs ohne Domain verwenden müssen, nutzen Sie bitte absolute URLs wie z.B. /mod/page/views.php?id=X.

Bootstrap Komponenten verwenden

Die mobile App unterstützt alle Bootstrap 5 CSS-Komponenten Informationen zur Kompatibilität bestimmter JavaScript (JS)-Komponenten finden Sie jedoch in der folgenden Liste. Um die Abwärtskompatibilität zu gewährleisten, wird eine Teilmenge der Bootstrap 4-Komponenten für einen begrenzten Zeitraum weiterhin unterstützt.

"Unterstützte Bootstrap 5-JS-Komponenten Hinweis: Diese Komponenten wurden angepasst an das Framework und die visuellen Stile der App angepasst wurden, sodass sich ihr Verhalten oder ihr Erscheinungsbild möglicherweise geringfügig von der ursprünglichen Bootstrap-Implementierung unterscheidet:

• Collapse
• Carousel
• Accordion
• Modal
• Popovers
• Tooltips
• Tabs
• Schließen-Button:
  • Alerts
  • Offcanvas
  • Toasts
  • Modal

Bitte beachten Sie, dass nicht alle Eigenschaften der Komponenten unterstützt werden. Wir empfehlen Ihnen, Ihre Inhalte in der App zu testen, um deren Funktionalität und Darstellung zu überprüfen.

JavaScript verwenden

Neue Funktionalität
in Moodle 5.2!

Ab Moodle 5.2 ist es möglich, eine Liste von Domains anzugeben, von denen JavaScript-Dateien eingebunden werden dürfen, die auf der Seite ausgeführt werden, auf der sie eingebunden sind.

Auf der Seite Website-Administration“ > Mobile App > Mobile features können Sie unter Zulässige JavaScript-Domains eingeben, von wo externe JavaScript-Dateien in der Moodle-App geladen werden dürfen, wenn sie in nutzergenerierten HTML-Inhalten erkannt werden.

Auf diese Weise können Sie Widgets und JavaScript-Tools beispielsweise von typeform, jotform, x.com, imgur, framely, usw. verwenden.

Auf diese Weise können Sie nutzerdefiniertes JavaScript einbinden, sofern es in einer Datei enthalten ist, die auf einer Domain gehostet wird, die in der Einstellung Zulässige JavaScript-Domains aufgeführt ist.

Hilfsklassen für den Anzeigemodus der App

Die Moodle-App hat spezielle CSS-Klassen eingeführt, mit denen Sie die Sichtbarkeit und das Anzeigeverhalten von Elementen speziell innerhalb der Moodle-App steuern können. Auf diese Weise lassen sich Standard-Bootstrap-Klassen (wie d-none) überschreiben, um ein maßgeschneidertes mobiles Erlebnis zu schaffen.

Allgemeine Anzeige-Klassen

Diese Klassen dienen dazu, das Verhalten von Elementen in der mobilen App unabhängig vom Betriebssystem (iOS oder Android) zu steuern.

CSS-Klasse	Effekt in der Mobile App	Anwendungsszenario
mobileapp-d-none	Verbirgt das Element.	Inhalte, die nur auf dem Desktop sichtbar sein sollen.
mobileapp-d-block	Wird als Block angezeigt.	Ein verstecktes Element (d-none) in der App sichtbar machen.
mobileapp-d-inline	Wird als inline angezeigt.	Inline-Text oder Symbole speziell für mobile Nutzer/innen.
mobileapp-d-inline-block	Wird als Inline-Block angezeigt.	Inline-Blocktext oder Symbole speziell für mobile Nutzer/innen.
mobileapp-d-flex	Wird als flex angezeigt.	Flexible Layouts, die für mobile Bildschirme optimiert sind.

Plattform-specifische Klassen (OS)

Sie können Nutzer/innen anhand ihres jeweiligen Mobilgeräts ansprechen. Dies ist nützlich, um spezifische Anweisungen für Android- oder iOS-Nutzer/innen bereitzustellen (z.B. Links zum Store oder Systemeinstellungen).

• Android: mobileapp-android-d-block, mobileapp-android-d-none, mobileapp-android-d-inline usw.
• iOS: mobileapp-ios-d-block, mobileapp-ios-d-none, mobileapp-ios-d-inline usw.

Examples

Show content ONLY in the Mobile App

Use the Bootstrap d-none class to hide it everywhere, then use the mobile class to reveal it in the app.

<div class="d-none mobileapp-d-block">
   This message is only visible to users inside the Mobile App.
</div>

Inhalte in der Mobile App verbergen

Verwenden Sie die Bootstrap-Klasse d-block, um das Element im Web anzuzeigen, und die Klasse mobile, um es in der App auszublenden.

<div class="d-block mobileapp-d-none">
   Dieser Bereich ist in der App ausgeblendet, um Datenvolumen oder Platz auf dem Bildschirm zu sparen.
</div>

Zielgerichtete Betriebssystem-Benachrichtigungen

Die Benachrichtigungen werden im Web nicht angezeigt und unterscheiden sich unter iOS und Android.

<div class="mobileapp-ios-d-block d-none">
   Anweisungen speziell für iPhone/iPad Nutzer/innen.
</div>
<div class="mobileapp-android-d-block d-none">
   Anweisungen speziell für Android Nutzer/innen.
</div>

Media-Dateien für die Offline-Nutzung herunterladen

Damit es möglich ist, Media-Dateien wie z.B. Videos für die Offline-Nutzung herunterzuladen,

• muss die Datei im Kurs hochgeladen sein, anstatt sie zu aus YouTube o.ä. zu verlinken
• muss die Datei klein sein: kleiner als 2MB für 3G-Nutzer/innen oder kleiner als 20MB für WiFi-Nutzer/innen

Wenn eine Seite mit einem darin enthaltenen Video angeklickt wird (ohne das Video abzuspielen), dann wird die Videodatei trotzdem geladen. Das automatische Herunterladen lässt sich verhindern, indem der <video>-Tag im HTML-Quellcode mit dem Parameter preload=none eingesetzt wird.

Wenn Sie die Moodle App ab Version 3.1 mit einer WiFi-Verbindung nutzen und das Video abspielen, dann wird die Datei im Hintergrund heruntergeladen und in der App gespeichert. Beim nächsten Abspielen des Videos wird die gespeicherte Datei verwendet.

Bitte beachten Sie: Wenn jemand die Kurse vollständig heruntergeladen hat, werden die Dateien unabhängig von ihrer Größe heruntergeladen.

Aktivitäten

Tests

Tests mit vielen Fragen funktionieren auf der Website oder in der App nicht besonders gut, da der Backend-Server umfangreiche Vorbereitungsarbeiten leisten muss, insbesondere wenn zufällige Fragen verwendet werden.

Generell empfehlen wir, einen einzigen Test mit vielen Fragen zu vermeiden; es ist besser, die Fragen in mehrere Tests aufzuteilen.

Eine weitere Empfehlung ist, die Anzahl der Fragen pro Seite zu begrenzen, um zu vermeiden, dass auf einem sehr schmalen Bildschirm mehr als fünf Fragen auf einer einzigen Seite angezeigt werden.

Offline-Aktivitäten

Alle unterstützen Aktivitäten funktionieren auch offline, auch wenn manche dafür spezielle Einstellungen benötigen, z.B. Lektionen, Tests und H5P. Weitere Informationen finden Sie über:

• Tests offline in der Moodle App
• H5P offline in der Moodle App
• Lernpakete offline in der Moodle App

Dinge, die Sie vermeiden sollten

Einige Aktivitäten unterstützen die Moodle App noch nicht vollständig, suchen Sie daher nach Alternativen. Bei Lernpaketen sollten Sie bestimmte Dinge vermeiden, siehe Moodle App - SCORM Player.

Eine Liste der Aktivitäten, die die App unterstützen, finden Sie im Artikel Moodle App - Funktionalitäten.

Verwenden Sie die neueste stabile Version von Moodle

Wie im Artikel Moodle App - Funktionalitäten beschrieben, sind einige Funktionalitäten nur in den neueren Moodle-Versionen verfügbar.

Wir empfehlen die Nutzung der neuesten stabilen Moodle-Version. Falls Sie Ihre Moodle-Site nicht aktualisieren können, installieren Sie das Plugin Moodle App - Zusatzfunktionen.

Benachrichtigungen und Mitteilungen

Ermutigen Sie Ihre Kursteilnehmer/innen, Mitteilungen aus Moodle auf Ihren mobilen Endgeräten zu aktivieren, so dass sie über Termine, Forumsbeiträge, Aufgabenabgaben, Mitteilungen usw. benachrichtigt werden. Mehr dazu unter Moodle App - Systemnachrichten.

Sie können in den Einstellungen für Mitteilungen mobile Beanchrichtigungen für alle Nutzer/innen aktivieren. Die Teilnehmer/innen können die mobilen Benachrichtigungen in der App deaktivieren.

Mobile Endgeräte

Die App läuft auf Geräten mit moderner Hardware besser.

Bei älteren Geräten können Probleme mit der

• Benutzerschnittstelle
• Verbindung (insebsondere wenn Sie sich mit Moodle-Sites verbinden, die HTTPS-Zertifikate verwenden)
• Geschwindigkeit

Links zum Öffnen der Moodle App

Bei Bedarf können Sie in Ihrem Moodle-Kurs einen Link bereitstellen, um die Moodle Mobile App zu öffnen (für Nutzer/innen, die auf ihrem mobilen Endgerät die Moodle Mobile App installiert haben, jedoch über den Browser auf Moodle zugreifen).

Diese Links haben folgende Syntax: moodlemobile://https://username@domain.com?token=TOKEN&privatetoken=PRIVATETOKEN&redirect=http://domain.com/course/view.php?id=2.

Beachten Sie, dass diese Links erst ab Moodle App 3.7.0 unterstützt werden. Wenn Sie eine ältere App-Version nutzen, müssen Sie das alte Format moodlemobile://link=https://yourmoodlesite.org/mod/... verwenden.

Für mehr Informationen dazu lesen Sie die Entwicklerdokumentation: Open the Moodle app from another app.

Alternative Inhalte in der Moodle-App anzeigen

In manchen Fällen funktionieren Inhalte, die in einem Webbrowser (Moodle-LMS) einwandfrei funktionieren, in der Moodle-App möglicherweise nicht wie vorgesehen, beispielsweise bestimmte Iframes oder komplexe Einbettungen. Seit Version 5.1 der Moodle-App können Sie nun mithilfe von zwei HTML-Attributen alternative Texte oder Links speziell für App-Nutzer/innen bereitstellen.

Dazu müssen Sie den Quellcode Ihres Inhalts (das HTML) bearbeiten und die folgenden Attribute zu einem Element hinzufügen, um dessen Inhalt zu ersetzen:

• data-app-alt-msg: Der Text, der innerhalb des Elements angezeigt werden soll. Falls dieser nicht vorhanden ist, wird nur data-app-alt-url angezeigt.
• data-app-alt-url: Eine anklickbare URL, die hinter dem Nachrichtentext erscheint.

Hinweise:

1. Diese Attribute ersetzen den Inhalt (die untergeordneten Elemente) des Elements, auf dem sie platziert sind, nicht jedoch das Element selbst. Platzieren Sie diese Attribute stets auf einem übergeordneten Container (wie z.B. <div> oder <p>).
2. Diese Attribute werden möglicherweise durch die Filterung Ihrer Moodle-Seite entfernt, je nach den Werten der folgenden Einstellungen: Content-Bereinigung überall (forceclean), falls diese Option aktiviert ist, und Trusted-Content-System aktivieren (enabletrusttext), falls diese Option deaktiviert ist.

Beispiel: Ersetzen eines inkompatiblen iframes

Wenn Sie einen iframe haben, der im Moodle-LMS einwandfrei funktioniert, in der Moodle-App jedoch nicht, können Sie ihn in einen <div> einbetten, um einen Fallback-Link für App-Nutzer/innen bereitzustellen:

<div data-app-alt-url="https://videourl.com" data-app-alt-msg="Dieses Video ist mit der App nicht kompatibel. Bitte klicken Sie auf den Link, um es in einem Browser zu öffnen.">
  <iframe src="https://videonotappcompatible.com"></iframe>
</div>

Was Nutzer/innen sehen:

• Auf dem Dsktop: Der Iframe wird normal dargestellt.
• In der Moodle-App: Es wird die Meldung Dieses Video ist mit der App nicht kompatibel. Bitte klicken Sie auf den Link, um es in einem Browser zu öffnen. angezeigt, gefolgt von dem in „data-app-alt-url“ angegebenen Link.

Mehr dazu

• Freier Kurs auf Moodle Academy Moodle App configuration
• Diskussionsbeitrag auf moodle.org: Try the Moodle Mobile app with a mobile-friendly course.
• How to make third party question types work in Mobile - Dokumentation für Entwickler/innen