Suchergebnisse für „h5p“

H5P-Elemente offline erstellen und in HTML exportieren mit Lumi

28. Februar 2022 Florian Hagen

In diesem Beitrag werfen wir einen Einblick auf die Open-Source-Software Lumi. Lumi ist als Desktopanwendung verfügbar für Windows, macOS und Linux und ermöglicht die Erstellung von H5P-Elementen. H5P ist eine freie, quelloffene Software und steht für HTML5 Package. Mit ihr lassen sich interaktive Inhalte wie Videos (Element „Interactive Video“), Grafiken (Element „Image Hotspots“), Quizze (Element „Personality Quiz“) und verschiedene Formen von Lückentexten (z. B. Element „Fill in the Blanks“) ohne Programmierkenntnisse erstellen und in Blogbeiträge, Hackpads, Padlets oder Learning Management Systems (LMS) einbinden.

*Mit Lumi lassen sich auch ohne Programmierkenntnisse leicht kreative und interaktive (Lern-)Inhalte erstellen (Abbildung von Florian Hagen, CC0/Public Domain)*

Ein Vorteil von Lumi gegenüber anderen H5P-Editoren: Lumi lässt sich offline nutzen. Eine Webseite (u. a. www.h5p.org), ein LMS (bspw. Stud.IP) oder ein Content-Management-System (z. B. WordPress) wird somit nicht benötigt, um eigene interaktive Lernelemente zu kreieren. Ein weiterer Vorteil: die mit Lumi erstellten Elemente lassen sich per Mausklick als HTML-Datei exportieren. Diese können auf fast allen Geräten ohne großen Aufwand genutzt werden. Aktuell (Stand: 28.02.2022) stehen 48 Inhaltstypen zur Verfügung.

Die Eindrücke zu Lumi in diesem Beitrag basieren auf der Version 0.8.3 für macOS. Der Beitrag ist in folgende Abschnitte eingeteilt:

1.) Download und erste Schritte,
2.) Editier- und Vorschaumodus,
3.) Speichern und Export von H5P-Elementen,
4.) Sonstiges.

Die Software wird ausschnitthaft am Beispiel des Elements „Image Hotspots“ vorgestellt.

1. Download und erste Schritte

Lumi lässt sich über https://lumi.education/#download herunterladen. Hier muss lediglich das passende Betriebssystem ausgewählt werden.

*Lumi-Download-Optionen (Screenshot „Downloadseite“, nicht unter freier Lizenz)*

Nach einer kurzen Installation können wir Lumi starten und haben zunächst die Wahl zwischen „H5P-Editor“ und „Lumi Analytics“. Da wir ein H5P-Element erstellen bzw. bearbeiten möchten, wählen wir den Editor aus (1.) und landen in einem weiteren Optionsfenster. Hier (2.) können wir wählen, ob wir bereits existierende Dateien bearbeiten wollen („EIN VORHANDENES H5P ÖFFNEN“) oder ein neues H5P-Element erstellen wollen („EIN NEUES H5P ERSTELLEN“).

1. Auswahl des H5P-Editors (Screenshot „H5P-Editor“, nicht unter freier Lizenz)
2. Wahl zwischen öffnen eines bestehenden H5P-Elements oder Erstellung eines neuen Elements (Screenshot „H5P-Auswahl“, nicht unter freier Lizenz)

Wählen wir die zweite Option „EIN NEUES H5P ERSTELLEN“, so haben wir nun die Wahl zwischen verschiedenen Inhaltstypen. Die Auswahlmaske ist im Grunde komplett identisch mit den gängigen H5P-Online-Editoren, die über ein WordPress-Plugin oder www.h5p.org genutzt werden können.

*Auswahl eines H5P-Inhaltstyps (Screenshot „H5P-Elementauswahl“, nicht unter freier Lizenz)*

Beim ersten Start der Software sind zunächst nicht alle Inhaltstypen installiert. Dies lässt sich aber schnell mit wenigen Mausklicks nachholen. Erkennbar sind die nicht installierten H5P-Elemente am Hinweis „Übernehmen“. Auf neuere Versionen der Elemente wird durch den Hinweis „Aktualisierung verfügbar“ aufmerksam gemacht. Wählt man das erste Mal ein H5P-Element aus, so wird von Lumi auf die Möglichkeit eines Kurztutorials hingewiesen.

*Hinweis auf vorhandene Tutorials (Screenshot „Tutorialhinweis“, nicht unter freier Lizenz)*

Später können diese Tutorials nach Auswahl eines Elements und Klick auf „Tutorial“ am oberen Bildschirmrand eingesehen werden.

*Zugriff auf Tutorials (Screenshot „Tutorialbutton“, nicht unter freier Lizenz)*

Apropos Tutorials. Die über Lumi einzeln abrufbaren Einführungen zu H5P-Elementen lassen sich auch direkt über die Rubrik „Examples & downloads“ auf www.h5p.org abrufen. Eine richtig tolle Beispielsammlung bietet auch „H5P im Überblick“. Hier werden zu den meisten Elementen neben Beispielen ganz offen Ideen für den Einsatz und Schritt-für-Schritt-Anleitungen zur Erstellung geteilt.

*„H5P im Überblick“ bietet eine umfangreiche Anleitung mit Ideen und Anleitungen (Abbildung von Nele Hirsch | eBildungslabor, CC0/Public Domain)*

2. Editier- und Vorschaumodus

Hat man sich für ein Element entschieden (hier ausgewählt: „Image Hotspots“), so öffnet sich der leere Editierbildschirm.

*Leere Editiermaske eines H5P-Elements (Screenshot „Editiermaske“, nicht unter freier Lizenz)*

Über die unterschiedlichen Eingabe- und Optionsfelder lässt sich das eigene Lernelement nun gestalten. Für „Image Hotspots“ (und andere Elemente) sollte zunächst ein Titel vergeben werden, bevor ein Hintergrundbild hinzugefügt, Alternativtexte festgelegt und Hotspot-Symbole positioniert und angepasst werden. Diese Hotspot-Symbole sorgen dafür, dass später auf Grafiken klickbare Symbole vorhanden sind, die beispielsweise weitere Informationen zur angeklickten Bildposition beinhalten.

Zur Veranschaulichung eines befüllten Editierbildschirmes habe ich nachfolgend über „H5P-Datei öffnen“ am linken Bildschirmrand das H5P-Element „Workflow Finanzierung Zeitschriftenartikel“ geöffnet, welches auch im Rahmen der Open Access Week 2021 im Blogbeitrag Wie finanziere ich meinen Zeitschriftenartikel? eingebunden wurde.

*In einer bestehenden Editiermaske kann mit Klick auf „H5P-Datei öffnen“ auf bereits erstellte Materialien zurückgegriffen werden (Screenshot „Element öffnen“, nicht unter freier Lizenz)*

Dieses Element kann im verlinkten Beitrag über einen Klick auf „Reuse“ einfach runtergeladen werden, um selbst ein wenig mit Lumi zu experimentieren. Ein weiteres „Image Hotspots“-Element zum Ausprobieren steht auch über den tub.torials-Beitrag Was bedeutet eigentlich Open Science? zur Verfügung.

*Mit Klick auf „Reuse“ lassen sich H5P-Elemente runterladen und mit H5P-Editoren wie Lumi editieren (Screenshot „Zeitschriftenartikel“ von Isabo Schick und Florian Hagen)*

Um zu sehen, wie unser Lernelement in der praktischen Nutzung aussieht, kann nun in Lumi die Vorschau-Option über Klick auf die Registerkarte „Vorschau“ genutzt werden.

*Auswahl der Vorschau-Option (GIF „Zeitschriftenartikel“ von Isabo Schick und Florian Hagen)*

Diese Option von Lumi ist in meinen Augen ein großer Vorteil gegenüber vielen H5P-Online-Editoren, da in Lumi ohne große Wartezeiten auf Mausklick angezeigt wird, wie das Lernelement in der Praxis aussieht. Bei Online-Lösungen muss vor der Wahl der Vorschau-Option immer gespeichert werden. Andernfalls werden die Änderungen nicht in der Vorschau abgebildet. Werden nun im eigenen Workflow wieder und wieder Kleinigkeiten geändert und häufig über die Vorschau überprüft, war dies zumindest für mich in der praktischen Nutzung von Online-Editoren häufiger störend, da der Speichervorgang selbst sowie das hin- und herschalten zwischen Editier- und Vorschaumodus des Öfteren einige Augenblicke dauerte. Der Wechsel zwischen Editier- und Vorschauperspektive bei H5P-Online-Editoren sorgt auch dafür, dass nicht gespeicherte Änderungen verloren gehen. Dies ist bei Lumi nicht der Fall. Dennoch sollte natürlich auch hier das regelmäßige Speichern nicht vergessen werden. Wird die Anwendung geschlossen, ohne zu speichern, so gibt es leider keine Option wie „Auto-Wiederherstellung“.

3. Speichern und Export von H5P-Elementen

Erfreulicherweise funktioniert der Speichervorgang in Lumi schnell und unkompliziert. Dieser kann sowohl per Shortcut („Cmd“-Taste + „S“) als auch Auswahl von „Datei“ am oberen linken Bildschirmrand und Klick auf „Speichern“ ausgelöst werden.

*Gespeichert werden kann mit Lumi durch Shortcuts oder Klick auf „Datei“ und Auswahl von „Speichern“ (Screenshot „Speichern“, nicht unter freier Lizenz)*

Ein erfolgreicher Speichervorgang wird durch einen grün hinterlegten Hinweis „H5P gespeichert!“ bestätigt. Das Element liegt nun als H5P-Datei vor und kann in Lernplattformen wie Stud.IP oder Content-Management-Systeme wie WordPress eingebunden werden, wenn ein H5P-Plugin aktiviert ist. Wird eine dieser Möglichkeiten für die Abbildung von H5P genutzt, so lassen sich die Elemente auch in Open-Source-Anwendungen wie HedgeDoc (Weiteres zu HedgeDoc und Markdown haben wir in den Beiträgen Online-Fortbildungen mit HedgeDoc und Greenshot dokumentieren und Schreiben mit Markdown festgehalten) einbetten, um zum Beispiel für Seminare, Workshops und andere Veranstaltungen Arbeitsumgebungen für Aufgaben zur Verfügung zu stellen, die gemeinsam bearbeitet werden können. Wer dies einmal schnell ausprobieren möchte:

Über diesen Link lässt sich die TU-Installation von HedgeDoc aufrufen,
Auswahl von „Neue Gastnotiz“ (oberer Bildschirmrand, rechts) erzeugt ein leeres Dokument,
Aufruf eines H5P-Elements (zum Beispiel dieses interaktive Video),
Klick auf die Schaltfläche „Embed“ am unteren Rand des H5P-Elements,
Einfügen des Links in das Hackpad.

Das H5P-Element sollte nun im Hackpad zu sehen und verwendbar sein.

Lumi bietet für H5P-Elemente mit der Export-Option zudem eine weitere Möglichkeit des Teilens. Wenn wir am oberen Bildschirmrand auf „Datei“ klicken, können wir „Exportieren…“ auswählen und einen HTML-Export erstellen. Mit Auswahl von „All-in-One-HTML-Datei“ entsteht so zum Beispiel ein H5P-Element, das auf Computern mit Internetbrowser durch einen einfachen Doppelklick auf die generierte HTML-Datei geöffnet und genutzt werden kann. Erfolgreich ausprobiert habe ich dies bisher mit den Browsern Safari, Firefox und Chrome. Lernende können so also interaktive H5P-Elemente nutzen, ohne dass weitere Anwendungen installiert werden müssen oder eine Internetverbindung benötigt wird (außer für den Download der HTML-Datei).

Die Option des HTML-Exports ist auch im Hinblick auf Repositorien wie TUHH Open Research (TORE) interessant, da HTML zu den unterstützten Formaten von TORE gehört. Somit ist es möglich auch für interaktive Open Educational Resources (OER) einen Digital Object Identifier (DOI) zu erzeugen. Diese Form des Identifikators ist – ähnlich der ISBN in Büchern – eindeutig und dauerhaft. Quellenbelege in der Wissenschaft setzen daher immer bevorzugt auf DOIs statt klassische URLs, um nicht mehr funktionierenden Links vorzubeugen. Wie dies in der Praxis aussehen kann, zeigt das Lernelement „4 Step Creation Method“ von Jan Küchenhof und Hanna Marie Bickmeier. In diesem H5P-Element, das im Rahmen der Hamburg Open Online University (HOOU) an der TUHH entstanden ist, kann mehr über eine Methode zur systematischen Neugewinnung von Innovationen erfahren werden.

*TORE-Eintrag „4 Step Creation Method“ (Screenshot „TORE-Eintrag“, nicht unter freier Lizenz)*

4. Sonstiges

Lumi ist zum Erstellen und teilen von H5P-Elementen eine tolle Sache. Einige Schritte der H5P-Erstellung lassen sich so angenehmer und effizienter für mich umsetzen und Lerninhalte können zusätzlich über andere Wege zugänglich gemacht werden. Was ich mir neben einer automatischen Zwischenspeicheroption für den Fall der Fälle (man kennt es ja, auch heute vergisst man ab und an in Eile durchaus mal das Speichern 😉 ) noch wünschen würde, wäre eine Option wie „Zuletzt verwendete H5P-Elemente öffnen“. Für aktive Sitzungen mit Lumi werden alle zuletzt geöffneten H5P-Elemente am linken Rand eingeblendet, sobald das Programm aber geschlossen bzw. neu gestartet wird, werden zuletzt geöffneten Dateien nicht mehr angezeigt. Abstürze oder andere Probleme habe ich mit Lumi bislang ansonsten nach vielen Monaten der Nutzung noch keine gehabt.

Was haltet ihr von Lumi und H5P-Elementen? Nutzt ihr Letztere zum Lehren, Lernen und andere Zwecke oder greift ihr auf Alternativen zurück? Teilt eure Erfahrungen gerne offen über die Kommentarfunktion oder andere Kanäle 🙂

Weiternutzung als OER ausdrücklich erlaubt: Dieses Werk und dessen Inhalte sind – sofern nicht anders angegeben – lizenziert unter CC BY 4.0. Nennung gemäß TULLU-Regel bitte wie folgt: „H5P-Elemente offline erstellen und in HTML exportieren mit Lumi“ von Florian Hagen, Lizenz: CC BY 4.0. Der Beitrag und dazugehörige Materialien stehen auch im Markdownformat und als PDF zum Download zur Verfügung.

Anwendungen und Tools, Arbeitswelt, Bibliothek, Digitale Welt, Featured Lumi, OER, OER-Erstellung

Schriftzug Excalidraw in blau auf hellrotem Untergrund

Kreativ zusammenarbeiten: Handgezeichnete Diagramme mit Excalidraw erstellen

17. August 2023 Florian Hagen Kommentar hinterlassen

Im Rahmen unseres Seminars Wissenschaftliches Arbeiten tauschen wir uns mit Studierenden regelmäßig zu Tools und Methoden aus, die im Studienalltag genutzt werden. Auch dieses Jahr ging es dabei um Werkzeuge zum Skizzieren und Weiterdenken von Ideen. Erwähnt wurde das eine oder andere Mal u. a. Excalidraw. Gehört habe ich den Namen schon öfters, über einen längeren Zeitraum ausprobiert hatte ich Excalidraw bisher aber noch nicht. Anlass genug, dies nun endlich nachzuholen.

Kurz zusammengefasst ist Excalidraw ein Open-Source-Whiteboard. Alleine oder gemeinsam mit anderen können hier zum Beispiel Diagramme erstellt, Skizzen entworfen sowie Notizen zusammengefasst und visuell aufbereitet werden. Von den Studierenden wurden als Use Case neben dem Zeichnen von Diagrammen konkret Wireframes und die Abbildung von Softwarearchitektur erwähnt.

Ein Hauptunterscheidungsmerkmal gegenüber Programmen mit teilweise ähnlichen Funktionen wie zum Beispiel Diagrams.net (ehemals Draw.io) ist vor allem der handschriftliche Look von Visualisierungen. Mir persönlich gefällt die Handhabung von Excalidraw nach längerem Ausprobieren sehr. Auch die Möglichkeit, synchron ohne viel Aufwand gemeinsam an Inhalten zu arbeiten, funktioniert gut. Zu ausgewählten Basisfunktionen habe ich daher eine kurze Übersicht aufgeschrieben. Die Abbildungen lassen sich durch einen Mausklick vergrößern.

1. Grundfunktionen

Rufen wir https://excalidraw.com auf, so gelangen wir direkt auf die Oberfläche von Excalidraw. Es gibt keine umständliche Registrierung. Kein Warten auf Bestätigungsemails. Keine ausufernde virtuelle Einführungstour. Wir sehen ein leeres Whiteboard und können es direkt nutzen.

Mittig am oberen Fensterrand befindet sich die Werkzeugleiste. Ausgewählt werden können hier Einstellungen, Werkzeuge und vor allem Formen, die für die Arbeit auf dem Whiteboard genutzt werden können. Letztere lassen sich mit einem Klick auf das entsprechende Symbol oder das jeweilige Tastaturkürzel aktivieren.

In der aktuellen Version (Stand: 17.08.2023) sind enthalten:

Auswahl (V oder 1)
Rechteck (R oder 2)
Raute (D oder 3)
Ellipse (O oder 4)
Pfeil (A oder 5)
Linie (L oder 6)
Zeichnen (P oder 7)
Text (T oder 8)
Bild einfügen (9)
Radierer (E oder 0)
Weitere Werkzeuge (Rahmenwerkzeuge Web-Einbettung)

*Die Werkzeug- und Formenauswahl erfolgt per Klick oder Tastaturkürzel*

Die Bedienoberfläche ist insgesamt sehr übersichtlich gestaltet. Solange noch keine Funktion ausgewählt wurde, weisen kurze Infotexte auf einige Optionen hin.

2. Erste Schritte

Die verschiedenen Formen lassen sich nach Auswahl per Klick und Ziehen des Elements – wie von vielen Computerprogrammen mit Formwerkzeugen gewohnt – auf dem Whiteboard platzieren. Gut veranschaulichen lassen sich die Anpassungsmöglichkeiten direkt mithilfe der Formwerkzeuge. Für diesen Beitrag nehme ich die in der Werkzeugliste zuerst aufgeführte Form Rechteck (R oder 2 auf der Tastatur). Dieses platziere ich in der gewünschten Größe auf dem Whiteboard mittels Maus. Das Rechteck lässt sich nun über das am linken Bildschirmrand erschienene Menü formatieren.

Anpassen lassen sich hier u. a. neben der Farbe von Linien oder dem Hintergrundmuster der Form auch Strichstärke, Konturstil und Sauberkeit.

2.1 Strich (Stroke)

Die Farbe der von uns erstellten Form lässt sich über einen Klick auf „Strich“ am linken Bildschirmrand anpassen.

2.2 Hintergrund (Background) & Füllung (Fill)

Die Formhintergründe lassen sich durch die Auswahl von „Hintergrund“ farblich füllen. Sobald wir eine Farbe gewählt haben, lässt sich auch die Form der Füllung anpassen. Als voreingestelltes Muster ist „Schraffiert“ (Hachure) ausgewählt. Über das Menü „Füllung“ an der linken Bildschirmseite stehen zusätzlich die Optionen „Kreuzschraffiert“ (cross-hatch) und „Deckend“ (solid) zur Verfügung. Die drei Optionen werden nachfolgend in unterschiedlichen Farben dargestellt:

*Hintergrund- und Fülloptionen von Formen*

2.3 Strichstärke & Konturstil (Stroke width & Stroke Style)

Die Strichstärke von Excalidraw bietet die Optionen „Dünn“, „Fett“ und „Extra Fett“. Beim Konturstil kann zwischen „Durchgezogen“, „Gestrichelt“ und „Gepunktet“ ausgewählt werden.

*Einstellung von Strichstärke und Konturstil*

2.4 Sauberkeit (Sloppiness)

Im Gegensatz zu anderen Anwendungen ist vor allem der Menüpunkt „Sauberkeit“ mit den Optionen „Architekt“, „Künstler“ und „Karikaturist“ ungewöhnlich. Hier können wir die Art, in welcher Formen gezeichnet werden, verändern. „Architekt“ sorgt für saubere, klare Linien, während „Künstler“ und „Karikaturist“ die Linien jeweils lockerer bzw. skizzenhafter wirken lassen.

*Die Eigenschaft „Sauberkeit“ bietet die Optionen „Architekt“, „Künstler“ und „Karikaturist“*

2.5 Kanten (Edges)

Bei der Auswahl von Objekten wie Rechteck, Linien und Pfeilen gibt es gegenüber der Ellipse noch die zusätzliche Option, Kanten auf „Scharfkantig“ oder „Rund“ zu setzen.

Über die genannten Möglichkeiten hinaus bietet das Menü an der linken Bildschirmseite auch noch Optionen für die Deckkraft von Objekten oder die Arbeit auf verschiedenen Ebenen.

*Optionen für Kanten, Deckkraft und Ebenen einer Form*

2.6 Weitere Werkzeuge

Excalidraw bietet in der Werkzeugleiste hinter der Option „Weitere Werkzeuge“ mit dem „Rahmenwerkzeug“ und „Web Embed“ noch weitere Optionen für das Whiteboard.

Das Rahmenwerkzeug ermöglicht u. a. zusätzliche Organisationsoptionen sowie künstlerisch kreative Möglichkeiten. Zum einen lassen sich zum Beispiel Inhalte wie Texte, Illustrationen oder Aufgaben, die in Abhängigkeit zueinanderstehen, einem Frame zuordnen. Wie eine Präsentationsfolie oder Karteikarte bleiben diese Elemente zusammen, können frei verschoben oder inhaltlich innerhalb des Frames weiter bearbeitet werden. Unterschiedliche Frames können auf dem Whiteboard auch miteinander verbunden werden. Eine Option, die also bspw. in Lehrveranstaltungen und Workshops unterstützen kann, den roten Faden nicht zu verlieren bzw. visuell zu verdeutlichen.

Gestalterisch ermöglicht die Frame-Option darüber hinaus auch „Cut-outs“. Dabei können Formen und Farben so übereinander gelegt, kombiniert oder abgeschnitten werden, dass zum Beispiel neue Muster, Bilder oder Designelemente entstehen. Nachfolgend ist diese Möglichkeit stark vereinfacht mithilfe einiger (abgeschnittener) Formen abgebildet:

*Mit Frames lassen sich Formen innerhalb eines angelegten Rahmens anordnen*

Durch Web Embed lassen sich die Einsatzmöglichkeiten des Whiteboards für weitere Szenarien erweitern. In der aktuellen Excalidraw-Browservariante (Stand: 17.08.2023) lassen sich bspw. bislang Inhalte von Youtube, Vimeo, Figma, Github oder eben Platzhalter einbinden. Plug-ins von Excalidraw sind hier zum Teil schon einen Schritt weiter. Innerhalb von Obsidian – ein Markdowneditor, der u. a. das Verlinken von Dokumenten hin zu einem Ideennetzwerk ermöglicht und durch Erweiterungen auf individuelle Bedürfnisse beim Wissensmanagement angepasst werden kann – kann mithilfe eines Excalidraw-Plug-ins bereits ohne (bisher zumindest von mir wahrgenommene) Einschränkungen jeder Webinhalt eingebunden werden. So lassen sich Videos, Texte, Webseiten oder auch interaktive Lehr-Lernmaterialien (bspw. H5P-Elemente) direkt auf dem Whiteboard nutzen. Ohne Excalidraw zu verlassen kann somit direkt ein externer Inhalt kommentiert und diskutiert werden. Hier ist zu hoffen, dass zukünftig auch in der Browserversion weitere Webangebote eingebunden werden können.

*Web-Inhalte lassen sich in ein Whiteboard einbinden und direkt verwenden*

3. Gemeinsam arbeiten

Um gemeinsam auf einem Whiteboard zu arbeiten, bietet Excalidraw oben rechts auf der Benutzeroberfläche die Option „Live Zusammenarbeit …“ (Personen-Symbol).

*Über „Live-Zusammenarbeit …“ kann ein gemeinsames Whiteboard eingerichtet werden*

Sobald ein Whiteboard über diesen Button gestartet wird, gibt es die Möglichkeit einen Zugangslink zu kopieren, der mit Personen geteilt werden kann.

*Über einen Link können weitere Personen eingeladen werden*

Alle aktiven Personen auf einem Board sind durch Farben und frei wählbare Namen unterscheidbar. Ein gezielter Sprung zur Position einer Person ist über einen Klick auf das jeweilige Namenskürzel am oberen rechten Bildschirmrand möglich.

*Aktive Personen auf einem gemeinsamen Whiteboard*

Wenn eine Person ein kollaboratives Excalidraw-Whiteboard verlässt, nimmt diese den aktuellen Status des gemeinsam bearbeiteten Whiteboards mit und kann lokal weiter an den Inhalten arbeiten.

4. Eigene Beispiele

Für den Einstieg in Excalidraw habe ich zunächst eine Abbildung aus älteren Powerpoint-Foliensätzen von mir als Vorlage genommen (Thema Selbstmanagement). So wollte ich ohne viel Aufwand sehen, wie schnell und im Vergleich ggf. ansehnlich sich Mindmaps mit Excalidraw umsetzen lassen:

Als zweiten Testballon habe ich eine eigene Abbildung der Eisenhower-Matrix genutzt (Methode zur Priorisierung von Aufgaben nach Kategorien), die ich in Corona-Zeiten kurzfristig für eine Veranstaltung erstellt hatte. Diese wollte ich schon länger gerne in einer saubereren, aber dennoch eher „handgemachten“ Form haben. Zum Vergleich kann in der nachfolgenden Abbildung der Regler nach links und rechts verschoben werden:

*Schnelle Überarbeitung einer Eisenhower-Matrix-Abbildung*

Da die Erstellung der Matrix sehr gut von der Hand ging, ist neben der theoretischen Abbildung des Eisenhower-Prinzips auch eine zusätzliche Abbildung mit konkreteren Handlungsschritten entstanden, die auch im Blogbeitrag Wichtig und dringend? Aufgaben priorisieren mit dem Eisenhower-Prinzip verwendet wurde.

5. Fazit

Wie bereits eingangs erwähnt, mir gefällt Excalidraw. Überlegungen zu einem Thema oder reduzierte Zeichnungen lassen sich schnell und einfach umsetzen. Auch die Arbeit im Team hat bisher ohne Verzögerungen oder andere technische Probleme geklappt. Fairerweise muss aber gesagt werden, dass wir in einer Gruppe mit bis zu vier Leuten „natürlich“ gearbeitet haben. Einen gezielten Stresstest durch das Einbinden unzähliger Videos oder Ähnliches haben wir also nicht durchgeführt.

Darüber hinaus gibt es viele weitere (hier nicht genannte oder nur angedeutete) Features und Möglichkeiten, Excalidraw einzusetzen. Dazu zählen u. a. eine aktive Community, gute Funktionalität über Smartphone und Tablet, eine Element-Bibliothek mit brauchbaren Formvorlagen oder auch ein integrierter Color-Picker. Inhalte lassen sich lokal im Excalidraw-Format speichern, per Link teilen oder als PNG bzw. SVG exportieren. Schade finde ich allerdings, dass das (optionale) Speichern und Organisieren von Whiteboardinhalten im Programm selbst Nutzer*innen des kostenpflichtigen Excalidraw+ vorbehalten zu sein scheint.

Alles in allem kann ich allen (auch nur entfernt) interessierten Menschen guten Gewissens empfehlen, Excalidraw zumindest einmal mit einem einfachen Sketch auszuprobieren. Der Einstieg ist unkompliziert und eine Mindmap zu typischen To-dos eines Arbeitstages, die Abbildung von regelmäßigen Arbeitsschritten und Prozessketten oder eine einfache Pro-Contra-Liste zu Ideen/gelesenen Texten ist schnell umgesetzt. Im Idealfall ist die eigene Toolbox für Arbeit und Studium so ohne großen Aufwand am Ende um ein nützliches Open-Source-Werkzeug reicher.

Weiternutzung als OER ausdrücklich erlaubt: Dieses Werk und dessen Inhalte sind – sofern nicht anders angegeben – lizenziert unter CC BY 4.0. Nennung gemäß TULLU-Regel bitte wie folgt: „Kreativ zusammenarbeiten: Handgezeichnete Diagramme mit Excalidraw erstellen“ von Florian Hagen, Lizenz: CC BY 4.0. Der Beitrag und dazugehörige Materialien stehen auch im Markdownformat und als PDF zum Download zur Verfügung.

Anwendungen und Tools, Featured, Open Source Excalidraw

1 2 3 … 7 »