Digitale Tafel mit Excalidraw

Was ist Excalidraw?
Excalidraw (https://draw.kits.blog/) ist ein mächtiges Zeichen- und Schreibwerkzeug, welches kollaborativ, interaktiv, synchron sowie asynchron eingesetzt werden kann. Es ist somit mehr als die digitale Entsprechung einer herkömmlichen Kreidetafel und ähnelt eher einem digitalen Whiteboard. Jedoch bietet Excalidraw nicht nur eine unendlich groß wirkende Arbeitsfläche, sondern auch diverse Zusatz- und Komfortfunktionen, u.a. für das Zeichnen, Schreiben, Speichern und Wiederverwenden (Export- und Importfunktion von Excalidraw-Zeichnungen). Das Einfügen von Bildern wird aktuell per Drag & Drop unterstützt. Links (URLs) werden als Text angezeigt. Video- und Audiodateien können bisher nicht eingebunden werden.

Excalidraw ist plattform- und Geräte-unabhängig, folglich ist der Einsatz mit allen (mobilen) digitalen Endgeräten, egal ob Tablet mit iPadOS/Android oder herkömmlicher PC/Laptop mit Windows, Mac oder Linux möglich. Die Steuerung/Unterstützung durch Tastatur-Shortcuts steht ebenfalls zur Verfügung.

Welche Funktionen hat Excalidraw?

Zunächst noch einmal ausführlich die Eigenschaften von Excalidraw:

  • Die Datenschutzkonformität ist gewährleistet. Es ist kein Benutzer:innenkonto erforderlich.
  • Jede Person kann die Arbeit mit Excalidraw beginnen und mit oder ohne andere Personen fortsetzen.
  • Es kann kollaborativ synchron (live) oder asynchron (zeitversetzt) gearbeitet werden.
  • Bei der Live-Zusammenarbeit wird eine Ende-zu-Ende-Verschlüsselung verwendet. Alles bleibt privat.
    Auch die kits Server sehen nicht, was erstellt wird. Wenn eine Person die Sitzung für sich beendet, also die "Verbindung zum Raum" getrennt wird, können die anderen zuvor beteiligten Person weiter gemeinsam an der Zeichnung arbeiten.
  • Das Speichern und Wiederverwenden (Export- und Importfunktion von Excalidraw-Zeichnungen) wird angeboten. Der Export als Bilddatei erfolgt als PNG oder SVG. Die Excalidraw-Datei liegt im JSON-Format vor und kann ausschließlich mit Excalidraw verwendet werden.

Excalidraw umfasst folgende Zeichen-Werkzeuge:

excalidraw - Werkzeuge

Excalidraw - Werkzeuge

Rechteck
Farbe
Hintergrundfarbe
Füllung (Schraffiert, Kreuzschraffiert, Deckend)
Strichstärke (Dünn, Fett, Extra Fett)
Konturstil (Durchgezogen, Gestrichelt, Gepunktet)
Sauberkeit (Architekt, Künstler, Karikaturist)
Kanten (Scharf, Rund)
Deckkraft (frei einstellbar von 0-100%)
Anordnung der Objekte mittels Ebenen
Raute, Ellipse
Farbe
Hintergrundfarbe
Füllung (Schraffiert, Kreuzschraffiert, Deckend)
Strichstärke (Dünn, Fett, Extra Fett)
Konturstil (Durchgezogen, Gestrichelt, Gepunktet)
Sauberkeit (Architekt, Künstler, Karikaturist)
Deckkraft (frei einstellbar von 0-100%)
Anordnung der Objekte mittels Ebenen
Pfeil
Farbe
Strichstärke (Dünn, Fett, Extra Fett)
Konturstil (Durchgezogen, Gestrichelt, Gepunktet)
Sauberkeit (Architekt, Künstler, Karikaturist)
Kanten (Scharf, Rund)
Pfeilspitzen (bzw. -enden) links und rechts (Keine, Pfeil, Balken, Punkt)
Deckkraft (frei einstellbar von 0-100%)
Anordnung der Objekte mittels Ebenen
Linie
Farbe
Hintergrundfarbe
Füllung (Schraffiert, Kreuzschraffiert, Deckend)
Strichstärke (Dünn, Fett, Extra Fett)
Konturstil (Durchgezogen, Gestrichelt, Gepunktet)
Sauberkeit (Architekt, Künstler, Karikaturist)
Kanten (Scharf, Rund)
Deckkraft (frei einstellbar von 0-100%)
Anordnung der Objekte mittels Ebenen
Stift/Zeichnen
Farbe
Strichstärke (Dünn, Fett, Extra Fett)
Deckkraft (frei einstellbar von 0-100%)
Anordnung der Objekte mittels Ebenen
Textfeld
Farbe
Schriftgröße (S-XL, darüber hinaus skalierbar)
3 Schriftfamilien
Textausrichtung (linksbündig, zentriert, rechtsbündig)
Deckkraft (frei einstellbar von 0-100%)
Anordnung der Objekte mittels Ebenen

Wie wird Excalidraw verwendet?

Einführung in Excalidraw am Beispiel Mindmaps (Screencast):

"Mindmap kollaborativ mit Excalidraw - Methoden für kooperatives Lernen KOOL"

Quelle: https://kits.blog/mindmaps-mit-excalidraw-screencast/



Methodisch und/oder didaktische Hinweise/Tipps

Im Blog der kits Tools werden verschiedene Beispiele für die Nutzung von Excalidraw demonstriert und diskutiert, siehe: https://kits.blog/kits-konkret-digitale-tafelbilder-mit-excalidraw-nutzen/ .

Sicherlich ist bei der Einführung von Excalidraw auf eine begrenzte Anzahl von Personen zu achten, die kollaborativ, also gleichzeitig, ein digitales Tafelbild  bearbeitet. Alle haben die gleichen Rechte und somit kann jede Person alle Objekte verändern und auch löschen, nicht nur die selbst erstellten.

Für Gruppenarbeiten ist Excalidraw sehr gut geeignet. Das Tafelbild bildet in diesem Fall die Ergebnissicherung auf der einen Seite. Auf der anderen Seite motiviert und inspiriert die gemeinsame Arbeit an einem Thema auf der gleichen Arbeitsfläche die einzelnen Gruppen bzw. Schülerinnen und Schüler deutlich.

Ist die Methode und das Werkzeug der Lerngruppe bekannt, können aus technischer Sicht auch 30 Personen und mehr gleichzeitig an einem Tafelbild arbeiten.

Welche Alternativ-Anbieter gibt es?

IServ
Als Open Source Software wurde Excalidraw seit Sommer 2022 auch bei IServ integriert und steht als Modul "Tafeln" zur Verfügung (https://doku.iserv.de/modules/excalidraw/). Ggf. muss das Modul noch durch die Administration freigeschaltet werden.
digiscreen

Das Projekt digiscreen ist unter der GNU General Public License v3.0. lizensiert und wurde von Emmanuel Zimmert auf GitLab (https://gitlab.com/ladigitale/digiscreen) veröffentlicht. Entsprechend kann es selbst kompiliert, via H5P eingebunden oder auf dem eigenen Server installiert werden.

Eine Demo befindet sich unter https://digiscreen.elearningdienst.de/ . Weitere Hinweise zum Einbinden hat Ulrich Ivens zusammengestellt (https://www.ulrichivens.de/index.php/2022/01/28/digiscreen-ein-freier-self-hosted-classroomscreen/).

WBO Digitale Tafel
Eine weiterere freie digitale Tafel zum Hosten auf dem eigenen Server stellt WBO digitale Tafel dar (https://github.com/lovasoa/whitebophir).

Funktionserläuterung anhand eines Unterrichtsbeispiels


Character network

In der folgenden Aufgabe haben sich die Schüler:innen einer 12. Klasse im Fach Englisch mit dem Thema “Männlichkeit“ im Film “Gran Torino“ beschäftigt. Dazu haben sie in ein Netzwerk der Film-Charaktere ihre Notizen simultan eingetragen. Die konkrete Aufgabenstellung ist unten notiert.


Anhand dieses Unterrichtsbeispiels folgende wichtige Hauptfunktionen von Excalidraw veranschaulicht:

Laden/Importieren von digitalen Tafelbildern
Speichern/Exportieren von digitalen Tafelbildern
Kollaboratives Arbeiten/Live-Zusammenarbeit
Link/URL zum digitalen Tafelbild versenden per QR Code
Bilder importieren per Drag & Drop
HReihenfolge von Bildern (Ebenen) verändern
Deckkraft/Transparenz von Bildern/Objekten verändern

Masculinity, Manhood, Male worlds - in Gran Torino - How the men behave

1a) Examine how the men, especially in this segment, behave (watch 52:35 - 1:22:47 again). 

Pay special attention to: 

  1. Walt
  2. Thao
  3. Spider
  4. Mitch, Walt's son
  5. Martin, the barber
  6. Tim Kennedy, the super at the construction site
  7. The members of the Hmong gang
  8. Father Janovich (not represented in the segment)

Focus on the following aspects:

  • the way they talk
  • their ideas of suitable work 
  • the way they treat others 
  • the role violence plays in their lives

1b) Add your notes to Excalidraw here: https://draw.kits.blog/#room=ae0be000cba7919093f3,ZErlGrkDR7Tu1EHXVaAiFw ;

Add your notes/text for your character and connect them with an arrow --> .

Use two fingers to move the canvas or to resize it (pinch-to-zoom).

Use one finger to select an object.

Be aware that you need to collaborate and you might interfere/delete the work of others.

1c) Study all notes and take them in mind for future tasks.


Nach: „Schwerpunktthema Abitur Englisch, Sekundarstufe II“. Cornelsen, 2018, Seite 108.


Unterrichtsbeispiele

Beispiel 1: kits konkret – Digitale Tafelbilder mit Excalidraw nutzen

Die Bausteine der DNA wurden zuhause vorbereitet. Die Datei (Download) kannst du jetzt entweder an die Schülerinnen und Schüler einzeln verteilen oder mit allen gemeinsam bearbeiten. Bei einer Gruppenarbeit sollte die bearbeitende Gruppe nicht zu groß sein. Am Ende steht ein fertiges Tafelbild. Dieses kannst du als Bild (PNG) exportieren und den Lernenden zur Verfügung stellen. 

Weiterlesen bei https://kits.blog/kits-konkret-digitale-tafelbilder-mit-excalidraw-nutzen/


Beispiel 2: Digitale Lesestrategien: Flussdiagramme
Kochrezepte, Aufbauanleitungen oder Gesellschaftsspielregeln. Viele Textformen des Alltags verlangen von ihren Leserinnen und Lesern das Erkennen klarer Reihenfolgen und bestimmter Handlungsanweisungen. Kommt erst die Milch in den Teig oder die Eier? Das ganze Ei oder nur das Eigelb? Diese Informationen innerhalb linearer Texte zu verstehen, stellt für Lernende oft eine Hürde dar.
Flussdiagramme sind eine effektive Lesestrategie WÄHREND DES LESENS, um komplexe Vorgänge anschaulich zu sequenzieren. Denn durch die Rekonstruktion von Abläufen in Form dieser Darstellungsweise werden Lernende dazu aktiviert, Textaussagen zu filtern und selbst neu zu arrangieren. Flussdiagramme sind für Lernende auch NACH DEM LESEN eine wichtige Hilfe, wenn sie als Grundlage einer eigenen Textproduktion oder als Vorbereitung auf eine Präsentation oder Prüfung losgelöst vom Ursprungstext dienen sollen.
Mit Excalidraw bieten wir dir ein Werkzeug an, mit dem du und deine Schülerinnen und Schüler einfach und sogar kollaborativ ein Flussdiagramm und andere Visualisierungsformen gestalten können! Als kollaboratives Werkzeug eignet sich Excalidraw hervorragend zur Differenzierung. Die digitalen Flussdiagramme können beliebig oft überarbeitet und erweitert werden. Die Progressive Web App speichert deine Zeichnungen solange ausschließlich in deinem Browser, bis du sie exportierst oder mit anderen teilst. In diesem Flussdiagramm ist zum Beispiel die Ausbildung zum Tierarzt dargestellt.

Beispiel 3: Einen Text schreiben – Der Umweg ist oft der bessere Weg

Ihre Lernenden haben einen digitalen Lehrbuchtext mit diversen Lesestrategien intensiv bearbeitet und verstanden. Nun stellen Sie die Hausaufgabe: Schreibe einen eigenen Text zu dem Thema.
Bei der Durchsicht der Schreibprodukte werden Sie feststellen, dass viele Lernende Textpassagen geringfügig verändert per Copy-Paste-Taste »abgeschrieben« haben. Sie sind unzufrieden; die eigene Leistung der Lernenden ist Ihnen zu gering.

Betrachten wir die Situation aus der Sicht der Schülerinnen und Schüler. Diese haben einen Text vorliegen, den sie hinsichtlich des Umfangs und der Qualität nicht erreichen können. Sie klammern sich an diesen Text, sie vermögen sich nicht von ihm zu lösen. Was bleibt ihnen anders übrig, als ihn geringfügig verändert abzuschreiben? Würden sie den Text zur Seite legen und sich bemühen, ohne weitere Hilfe einen eigenen Text zu schreiben, dann fühlten sich die Lernenden überfordert. Sie brauchen ein Gerüst, eine Struktur, eine fachliche und sprachliche Unterstützung, etwas das ihnen ein erfolgreiches Schreiben in Aussicht stellt. Das limbische System signalisiert entweder Erfolgs- oder Misserfolgserwartung. Als Lehrende müssen wir alles tun, damit sich Erfolge einstellen.

Geben Sie den Schülerinnen und Schülern für das verstehende intensive Lesen des Textes Leseaufträge. Diese Leseaufträge führen in der Bearbeitung zu analogen oder digitalen Leseprodukten, z. B. eine Tabelle, eine Zeichnung, ein Strukturdiagramm, ein Flussdiagramm, Standbild, Objekt, … Die Idee lautet: Die Lernenden übertragen den Text1 in eine andere analoge oder digitale Darstellungsform und produzieren damit einen eigenen Text2.

TeamMapper und Excalidraw sind zwei digitale Tools, mit denen Sie diese Idee digital umsetzen können. Der Text1 bestimmt, in welche Darstellungsform dieser übertragen werden kann.

Weiterlesen bei https://kits.blog/einen-text-schreiben-der-umweg-ist-oft-der-bessere-weg/ 

Hinweis zum Verfasser
Die Inhalte dieser Seiten steht unter der Lizenz CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/deed.de). Als Namensnennung im Sinne der Lizenz ist vorgesehen: Ben Quinkenstein im Auftrag des Niedersächsischen Landesinstituts für schulische Qualitätsentwicklung (NLQ Hildesheim).