Kachel: LOGINEO NRW | Inklusionssensibler Unterricht in einer digitalen Welt

LOGINEO NRW

In diesem Modul lernt ihr alles zu der Plattform LogineoNRW, die auf Moodle basiert und von vielen Schulen in NRW als Lernplattform genutzt wird. Zum Beispiel arbeiten die Versuchsschulen der Universität Bielefeld mit dieser Plattform.

Ein Dank gilt dem Team von Meko:Bus, deren Kursmaterialien die Grundlage einzelner, hier verwendeter, Bausteine sind.
- H5P
  
  H5P bietet euch die Möglichkeit interaktive Aufgaben direkt im LernraumPlus bzw. in LogineoNRW zu erstellen und einzubetten. Inzwischen gibt es ein großes Sammelsurium und Aktivitäten, die man erstellen kann. Ihr kennt davon bereits einige aus unserem Kursraum, es gibt jedoch noch viele mehr. Vorteil der H5P Inhalte, sie können nicht nur in Moodle hinterlegt werden, sondern zusätzlich auf Websites wie z.B. Wordpress und somit unabhängig von der Lernplattform. Außerdem sind H5P Inhalte in der Regel wieder verwendbar. Heißt, wenn ihr irgendwo ein Beispiel seht, könnt ihr es meist herunterladen und auf eurer eigenen Plattform hochladen und verändern (remixen). Um einen Überblick über die unterschiedlichen Möglichkeiten der Verwendung zu bekommen, folgen hier hilfreiche Seiten. Wie immer gilt natürlich, dass auch Schüler*innen selbst H5P Inhalte erstellen können und so ihr Wissen festigen.
  
  Nele Hirsch hat zu H5P eine eigene Übersicht erstellt, auf der sie sowohl die Aktivität und einen beispielhaften Einsatz in Schule zeigt, wie auch kurze Videos zur Erstellung zur Verfügung stellt.
  
  H5P im Überblick
  
  Hier findet ihr konkrete Beispiele, die direkt in H5P erstellt sind.
  
  Link
  
  LOGINEO NRW
  
  In diesem Handbuch findest Du ganz konkret die Aktivitäten, die du in LOGINEO NRW [Stand März 2021] verwenden kannst.
- Lumi ist eine Desktop-App, die es Dir ermöglicht H5P-Inhalte zu erstellen und zu verwenden, ohne auf ein Lernmanagementsystem wie Moodle zurückgreifen zu müssen. Ein Video wie ihr damit arbeitet und wie ihr es mit Schüler*innen teilen könnt, findet ihr hier.
  
  Hinweis: Die erstellten H5P-Inhalte können auch in andere Systeme eingebettet werden.
- Tipps & Tricks bei Moodle
  
  2.9 MB
  
  Eine sehr empfehlenswerte Übersicht über einige Kniffe, mit denen man - ohne großartige Programmier-Kenntnisse zu haben - den eigenen Moodle-Kursraum verschönern und attraktiver gestalten kann.
- Moodle Aktivität: Lektion
  
  122.3 KB
  
  Eine super Übersicht, um schnell einen Überblick über die Aktivität Lektion zu erhalten, die bei Moodle einbaubar ist (Vor- und Nachteile sowie Einsatzmöglichkeiten).
- Mundo in Moodle einbinden
  
  Mundo - eine länderübergreifende Plattform, die digitale Unterrichtsmaterialien (qualitativ und lizenzrechtlich geprüft) bereitstellt. Seit letztem Schuljahr ist es möglich das Medienportal per Plug-in direkt in Moodle einzubinden. Weitere Infos zum Einbinden solcher Lerninhalte in den Moodle-Kursraum findest du hier. Oder schau dir das Video dazu an.
  
  Quelle: Youtube | SEM VidT | Standard Youtube-Lizenz
  
  In der nächsten Aktivität kannst du dir ein Beispiel aus der Mundo Datenbank anschauen. Dieses wurde, wie in dem Video beschrieben, über die Funktion externes Tool eingebettet.
- Weiterführendes Material
  
  Beispiele für fertige Unterrichtseinheiten findet ihr im Moodle-Treff oder bei QUA-LiS NRW (vom Schulministerium NRW erstellte Selbstlerneinheiten).
  
  Werft gerne einen Blick in "Hybrides Lernen mit Moodle" von Tanja Kräwinkel (viele Praxisbeispielen, kurze Anleitungen zum Erstellen von Arbeitsmaterialien und verlinkte Erklärfilmen), welches ihr hier kostenlos als EBook herunterladen könnt.
  
  Um aktiv in die Arbeit mit Moodle einzusteigen, könnt ihr den Selbstlernkurs vom LMZ Baden-Würtemmberg durchgehen, in dem ihr die Grundlagen der Plattform kennenlernt, Tipps bekommt, wie ihr Kurse sinnvoll strukturieren und aufbauen und insgesamt Unterricht mit Moodle gestalten könnt.
  
  Abschließend sei die Moodlebande zu empfehlen, die sich immer donnerstags um 20 Uhr trifft oder deren Beiträge über #moodlebande (beispielsweise bei X, BlueSky und Mastodon) zu lesen sind.
  
  "#MoodleKannMehr – nicht nur im Distanzunterricht!" sammelt verschiedene Perspektiven von 56 Autor:innen zu didaktischen Möglichkeiten mit der Plattform Moodle, auf der unter anderen auch LOGINEO NRW und die Lernräume der Uni Bielefeld basieren. https://visual-books.com/moodle-kann-mehr/
- Ideen für euren Lernraum
  
  Die html-Codes zu diesen "Gestaltungsmöglichkeiten" findet ihr in dem Dokument Tipps & Tricks bei MoodleDatei
  
  Text hervorheben
  
  Um Überschriften, Textteile oder ganze Texte hervorzuheben, wird vor und nach dem vorzuhebenden Teil der Befehl im html-Code angegeben.
  
  <div class="alert alert-success" role="alert"> Text </div>
  
  Text hervorheben
  
  <div class="alert alert-primary" role="alert"><span size="4" style="font-size:
  
  large;"><strong>Text hervorheben</strong></span></div>
  
  Text hervorheben
  
  <div class="alert alert-primary" role="alert"><span size="4" style="font-size:
  
  large;"><span>Text hervorheben</span><strong> </strong></span> </div>
  
  Barrierefreiheit
  
  Besonders interessant dabei ist, dass...
  
  <div class="alert alert-primary" role="alert"><span size="4" style="font-size:
  
  large;"><span>Text hervorheben</span><strong> </strong></span>
  
  </div>
  
  <p><div class="alert alert-primary" role="alert"><span size="4" style="font-size: </p>
  
  <p>large;"><span>Text hervorheben</span><strong>&nbsp;</strong></span> <span style="font-size: 0.9375rem;"></div></span></p><br>
  
  <div class="alert alert-markierung1">
  
  <div style="margin: 0 auto .5rem; overflow: hidden;
  
  border-left: 10px solid #6E6E6E;">
  
  <div style="padding: 0 1rem;">
  
  <p style="font-size: x-large; font-weight: bold
  
  <h3 class=;"><span style="font-size: xxlarge;"><strong>Barrierefreiheit</strong></span></p>
  
  <hr class="my-4">
  
  <p style="font-size: x-large; font-weight: bold
  
  <h3 class=;"><span style="font-size: medium;">Besonders interessant dabei ist, dass...</span></p>
  
  </div>
  
  </div>
  
  </div>
  
  Text klappen
  
  Das Einklappen von Texten wird im html-Code hinterlegt. Hierfür <detail><summary> einzuklappender Teil </summary> </detail> vor und hinter dem zu klappenden Teil einfügen.
  
  Für die Überschrift mit Icon und klappbaren Textfeld darunter kann der html-Code beispielsweise so aussehen:
  <div style="margin: 0 auto .5rem; overflow: hidden;">
  <div style="padding: 0 1rem;">
  <div style="font-size: x-large; font-weight: bold; margin-bottom: .5rem; padding: .75rem .25rem; border-bottom: 1px solid #AAA;"><img role="presentation" src="https://upload.wikimedia.org/wikipedia/commons/7/7c/Book_red%3B_question_marks.svg" alt="" width="40" height="40"> Text einklappen</div>
  </div>
  </div>
  <details><summary>
  einzuklappender Text
  </summary> </details>
  
  Icons anfügen
  
  Das Einfügen von kleinen Icons und Gifs erfolgt über den Befehl div class="container". Der Befehl style gibt vor, ob das Icon links oder rechts eingebunden wird.
  
  Hier könnte ein Tipp für dich stehen.
  
  Der dazugehörige html-Code:
  
  <div class="container" style="padding-right: 30px;">
  <div style="position: relative; top: -30px; right: -15px; float: right;"><img src="https://upload.wikimedia.org/wikipedia/commons/9/93/Bulb_Idea_Flat_Icon_GIF_Animation.gi
  f" width="80px"></div>
  <div style="border-radius: 10px; background-color: #003c8120; padding: 20px; margin: 30px 0 20px 5px;">
  <p>Hier könnte ein <strong>Tipp </strong>für dich stehen.</p>
  </div>
  </div>
  
  
  Hier könnte eine zu bearbeitende Aufgabe formuliert sein.
  
  Der dazugehörige Quellcode:
  
  
  <div class="container" style="padding-left: 30px;">
  <div style="position: relative; top: -30px; left: -30px; float: left;"><img src="https://upload.wikimedia.org/wikipedia/commons/3/39/Pointing_hand_cursor_vector.svg" width="80px"></div>
  <div style="border-radius: 10px; background-color: #88cf4530; padding: 20px; margin: 30px 0 20px 5px;">
  <p>Hier könnte eine zu bearbeitende <strong>Aufgabe </strong>formuliert sein.</p>
  </div>
  </div>
  
  
  Hier könnte eine Reflexionsaufgabe stehen oder etwas, worüber die Teilnehmenden nachdenken sollen.
  
  Der dazugehörige html-Code:
  
  
  <div class="container" style="padding-right: 30px;">
  <div style="position: relative; top: -30px; right: -15px; float: right;"><img src="https://upload.wikimedia.org/wikipedia/commons/0/0d/Speech-balloon.svg" width="80px"></div>
  <div style="border-radius: 10px; background-color: #ffd10030; padding: 20px; margin: 30px 0 20px 5px;">
  <p>Hier könnte eine <strong>Reflexionsaufgabe </strong>stehen oder etwas, worüber die Teilnehmenden nachdenken sollen.</p>
  </div>
  </div>
  
  
  Aufzählungszeichen
  
  Aufzählungszeichen können beispielsweise in Form von Icons gewählt werden.
  
  Auto
  
  Bahn
  
  Ziel
  
  Haus
  
  Html-Code:
  
  <ul style="list-style-image: url('https://icons.iconarchive.com/icons/roundicons/100-free-solid/16/target-icon.png');">
  <li>Auto</li>
  <li>Bahn</li>
  <li>Ziel</li>
  <li>Haus</li>
  </ul>
  
  Begriffserklärung
  
  Ein kleines Beispiel, wie man Begriffe schnell erklären kann. Hier per Mouse-Over-Tooltip. Wenn zum Beispiel von der Diklusion geredet wird, dann könnte per Mouse-Over erklärt werden, was Diklusion bedeutet. NICHT OPTIMAL für Tablet und Smartphone!
  
  Html-Code:
  
  <strong>Diklusion</strong> <button class="btn btn-secondary btn-sm" title="" type="button" data-container="body" data-toggle="tooltip" data-placement="bottom" data-original-title="[kurze Definition] nach Lea Schulz."><span style="font-family: FontAwesome;"></span></button>
  
  Anderes Beispiel, wie man Begriffe schnell erklären kann. Hier per Anklicken und Wegklicken. Wenn zum Beispiel von der Diklusion geredet wird, dann könnte per Anklicken bzw. Antippen erklärt werden, was Diklusion ist.
  
  Html-Code:
  
  <strong>Diklusion</strong><span style="font-size: 0.9375rem;"> </span><button class="btn btn-secondary btn-sm" type="button" data-container="body" data-toggle="popover" data-placement="bottom" data-content="[kurze Definition] nach Lea Schulz." data-original-title=""><span style="font-family: FontAwesome;"></span></button>
  
  Kurze Erklärungen z.B. hinter einem Fragezeichen verstecken:
  
  Hover-Effekt
  
  Html-Code:
  
  <br><br><a title="" href="#" data-toggle="tooltip" data-placement="right" data-original-title="Ist das nicht cool?!"><strong>Hover-Effekt</strong></a></p>
  
  Buttons
  
  Um Buttons zu erstellen, die direkt zu einem Links führen, wie hier:
  
  Buttons, die direkt zu einem Link führen
  
  muss folgender html-Code verwendet werden:
  
  <a class="btn" style="background-color: #3333ff; color: #fefefe; font-family: Comic Sans MS,Verdana,Helvetica;" href="LINK">Buttons, die direkt zu einem Link führen
  
  primary secondary success danger warning info light dark link
  
  Verschiedene Hintergrundfarben werden über class="btn btn-primary", "btn btn-secondary", "btn btn-success", btn btn-danger, "btn btn-warning", "btn btn-info", "btn btn-light", "btn btn-dark" oder "btn btn-link" eingestellt.
  
  Buttons zum Anklicken, die nebeneinander stehen
  
  Um Buttons zu generieren, die nebeneinander stehen, muss folgender html-Code verwendet werden:
  
  <a class="btn btn-primary" role="button" href="#collapseExample" data-toggle="collapse" aria-expanded="true" aria-controls="collapseExample"> Buttons zum Anklicken, die nebeneinander stehen </a> <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="true" aria-controls="collapseExample"> Button 2 zum Anklicken </button></p>
  
  Dieser Text soll angezeigt werden ...
  
  Um ein Textfeld zu generieren, muss folgender html-Code eingefügt werden:
  
  <div id="collapseExample" class="collapse show">
  <div class="card card-body">Dieser Text soll angezeigt werden ...</div>
  </div>