Websites und Präsentationen kollaborativ erstellen mit CodiMD

CodiMD ist das von mir mit Abstand am häufigsten genutzte offene Webtool. Aufgrund der vielfältigen Nutzungsmöglichkeiten des Tools, lohnt es sich unbedingt, sich damit näher zu beschäftigen.

📄 CodiMD erklärt

CodiMD ist ein kollaborativer Editor, mit dem Inhalte in so genannten Hackpads erstellt und geteilt werden können. Geschrieben wird dabei in der Formatierungssprache Markdown (daher auch das MD im Namen). Diese Nutzung von Markdown macht CodiMD zunächst zwar etwas weniger intuitiv nutzbar, als z.B. ein einfaches Etherpad. Zugleich ergeben sich daraus aber sehr vielfältige Möglichkeiten zur Nutzung. Insbesondere kann nicht nur Text gestaltet werden, sondern auch Bilder, Videos oder H5P-Inhalte integriert werden. Besonders schön ist an CodiMD, dass die erstellten Inhalte ‘normal’ als Website als auch als Präsentation dargestellt werden können.

CodiMD ist OpenSource. Die Software kann also auf einem eigenen Server installiert und dann dort genutzt werden. Alternativ gibt es aber auch zahlreiche offen nutzbare Installationen im Netz mit denen Du direkt beginnen kannst.

So gehst Du bei der Erstellung Schritt für Schritt vor.

  1. Hackpad einrichten mit Klick auf ‘Neue Gast-Notiz’ (z.B. auf der Demoseite oder von dieser Liste)
  2. Interaktion und Inhalte ergänzen: links in Markdown schreiben – rechts siehst Du das Ergebnis (Du musst kein Markdown können; nutze einfach den Editor)
  3. Kurzlink gestalten, um das Hackpad einfach mit anderen teilen zu können (z.B. via kurzelinks.de)
  4. Je nach Einsatzzweck präsentieren, weiter schreiben und austauschen
  5. Fertig :tada:

Optional kannst Du die Inhalte vielfältiger und insbesondere Präsentationen auch sehr schick gestalten. Der beste Weg dazu ist es, die Inhalte aus einem bestehenden Hackpad zu kopieren und anzupassen. Auf diese Weise lernst Du die unterschiedlichen Möglichkeiten sehr schnell kennen. Für ein Dokument mit vielfältigen Inhalten findest Du hier eine Mustervorlage. Und hier eine Mustervorlage für eine Präsentation.

Im folgenden Auszug aus dem OERcamp Webtalk sind die oben dargestellten Schritte zur Einrichtung und Nutzung von CodiMD gezeigt.

📝 Übung: Erstelle Dein erstes CodiMD

Jetzt bist Du dran: Wenn Du Dir den obigen Webtalk-Auszug angesehen hast bzw. direkt der dargestellten Schritt-für-Schritt Anleitung folgst, dann hast Du in wenigen Minuten ein erstes Hackpad erstellt, das Du teilen kannst. Um vielfältige Inhalte einzufügen bzw. eine Präsentation zu gestalten, kopierst Du Dir  – wie im Webtalk gezeigt – am besten die Inhalte der Muster-Vorlagen in ein neues Hackpad und gestaltest sie um. Auf diese Weise kannst Du Dir relativ schnell das nötige technische Grundwissen zu CodiMD erarbeiten, um das Tool anschließend gewinnbringend zum Lehren und Lernen nutzen zu können.

Wenn Du nicht weiterkommst oder Unklarheiten hast, dann frage mich per Mail via support@ebildungslabor.de

Antworten auf die häufigsten Fragen, die während des Webtalks und auch über Social Media und per Mail immer wieder gestellt wurden, habe ich hier zusammengestellt:

💬 Austausch: CodiMD zum Lehren und Lernen nutzen!

CodiMD ist wie dargestellt ein sehr vielfältiges Tool. Insbesondere kannst Du es sowohl nutzen, um als lehrende Person Inhalte für Lernende zur Verfügung zu stellen, als auch um kollaborativ in einer Lerngruppe etwas zu gestalten.

Die erste Möglichkeit haben z.B. Lehrkräfte während der Corona-bedingten Schulschließungen im Frühjahr 2020 häufig genutzt. Dafür haben sie Hackpads mit Text, Bildern, Videos und auch Selbstlernübungen zu einem bestimmten Thema zusammengestellt und den Link zur veröffentlichten Version mit Schülerinnen und Schülern geteilt.

Bei der Erstellung von Hackpads durch Lernende selbst, kommt zusätzlich die Kollaborationsfunktion von CodiMD zum Einsatz. Zum Beispiel kann als Ergebnis einer Gruppenarbeit gemeinsam eine Präsentation erstellt werden. Ich nutze CodiMD außerdem gerne, um während eines Workshops oder einer Fortbildung den Teilnehmenden einen kollaborativen Mitschrieb zu ermöglichen.

Und Du? Wie hast Du CodiMD genutzt bzw. welche Nutzungsideen zum Lehren und Lernen hast Du? Teile sie in den Kommentaren!

Zurück zu: Offene Webtools für offenes Lehren und Lernen > Best-Of Webtools unter der Lupe
8 Comments
  1. Hallo Nele, der Start mit der Page war leicht, aber ich kann irgendwie keinen Code finden, mit dem ich Bilder oder PDFs direkt auf der Webseite einfügen kann (immer nur als Link…) und die Templates helfen mir da leider auch nciht weiter. kann es sein, dass ich dafür die Bilder und PDFs erst noch woanders hochladen muss, bevor ich sie auf der Seite einbinden kann?

    Reply
  2. Hier ist mein Erstergebnis – vielleicht kannst du mir ja weiterweilfen`? ich habe Platzhalter eingefügt….
    https://kurzelinks.de/unsere-moselreise

    Reply
    • Mit Link ist richtig. Jetzt sieht es in Deiner Präsentation ja schon richtig super aus! Glückwunsch 🙂
      Wenn Du einfach ein Bild hochladen willst, was noch nicht online ist, kannst Du dafür https://imgur.com/ nutzen. Bei hackmd.io ist diese Bilddatenbank direkt in das Tool integriert.

      Reply
  3. Danke schon einmal – Das Bildproblem habe ich also gelöst.
    Hast du noch einen Tipp für die PDF-Einbindung?
    Außerdem scheint meine Youtube-Verlinkung nicht ganz geklappt zu haben – drückt man auf den Youtube-Start-Knopf, erscheint eine Fehlermeldung….Was fehlt da noch in meinem Code???
    Nochmals vielen Dank!

    Reply
    • Hallo Cindy,,
      Dein Code bei Youtube ist so richtig. Allerdings erlauben nicht alle Youtube-Video-Bereitsteller:innen, dass ihr Video eingebettet wird. Deshalb erscheint ‘Video nicht verfügbar’. (Falls Du schon einmal selbst ein Video hochgeladen hast bei Youtube, dann weißt Du, dass es da eine Checkbox zum Anhaken gibt).

      Anstelle des iframes, kannst Du auch einen Shortcode verwenden. Ich habe Dir diesen eingefügt: Einmal nochmals mit dem Video, das ja nicht funktioniert, weil Einbettung nicht erlaubt ist. Einmal mit der Webtalk-Bonusfolge. Hier siehst Du, dass das Abspielen klappt.

      Zum pdf: Da bräuchten wir auch einen Link – so wie bei den Bildern. Du kannst dann diesen Shortcode verwenden:
      {%pdf https://xxx.pdf %}.

      Reply
  4. Danke! ich habe mein Projekt jetzt abgeschlossen und mach mich nun ans nächste Webtool. 🙂

    Reply
  5. Hallo,

    endlich hab ich es mal geschafft, mit CodiMD was auszuprobieren. Aus Zeitmangel keine neuen Inhalte. Ist auch noch nicht fertig, aber mehr geht heute nicht. Hier mein Link: https://md.ccc-mannheim.de/s/B1os9TvGP#
    Ich hatte allerdings Probleme, den embed-Code unter dem Video von dir, Nele, ganz zu kopieren. Und das Einbetten hab ich nicht hingekriegt, daher bin ich auf die YT-Seite gegangen und habe dort das Video gesucht und den Code dann eingefügt. Das hat geklappt.

    Reply
  6. Hallo Ihr Lieben,

    funktioniert der Präsentationsmodus jetzt?
    Ich glaube, diese Funktion wurde deaktiviert, oder funktioniert sie nur bei mir nicht?
    Es wird ein schwarzes Bild gezeigt und da kommt danach nichts, habt Ihr auch dasselbe Problem?

    Reply

Leave a Reply to Cindy Bruhn Cancel Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>