Veröffentlicht in Apps, KI, Programmieren, WebApp

Vibe-Coding: Was ist das? Und kann ich das auch?

Veröffentlicht am von Thomas Moch

Vibe-Coding ermöglicht es Lehrkräften, komplexe Web-Apps allein durch natürliche Sprache zu erstellen. Der Artikel zeigt, wie KI-Modelle den Programmiercode erstellen, um maßgeschneiderte, barrierefreie Lernanwendungen für den inklusiven Unterricht zu entwickeln ohne dass eine einzige Zeile Code selber geschrieben werden muss.

Die rasante Entwicklung von KI-Modellen ermöglicht uns auch das Erstellen eigener Apps. Während visuelle Programmier-Umgebungen wie Scratch wertvolle Einstiege in die Welt des Programmierens bieten, stoßen sie bei komplexen, funktionalen Anwendungen oft an Grenzen. Hier setzt Vibe-Coding an. Es beschreibt einen Prozess, bei dem nicht mehr die Beherrschung einer Programmiersprache im Vordergrund steht, sondern die präzise Beschreibung einer Idee. Für die Sonderpädagogik eröffnet dies die Chance, digitale Hilfsmittel exakt auf die individuellen Bedürfnisse von Lernenden zuzuschneiden.

Beispiele

https://go.lernsachen.online/silbenhelfer

https://go.lernsachen.online/jukebox

https://go.lernsachen.online/timer

Was ist Vibe-Coding?

Vibe-Coding bedeutet, dass die KI den gesamten Programmcode schreibt. Der Nutzer agiert als Architekt und Ideengeber. Anstatt Zeile für Zeile Code zu tippen, vermittelt man der KI den „Vibe“ – also das Aussehen, das Verhalten und die Funktionen des gewünschten Programms. Die Kompetenz verschiebt sich vom Schreiben von Code hin zum instruktiven Design und zur Fehleranalyse im Dialog.

Welche Werkzeuge werden benötigt?

Grundsätzlich kann jedes Large Language Model (LLM), also jeder Chatbot Code generieren. Für optimale Ergebnisse haben sich jedoch spezialisierte oder besonders fähige Modelle etabliert:

  • Claude 3.5 Sonnet (Anthropic): Gilt aktuell als eines der stärksten Modelle für Coding-Aufgaben, da es sehr präzise Logik liefert.
  • ChatGPT (OpenAI / Codex): Der Klassiker, der besonders durch seine weite Verbreitung und gute Dokumentation überzeugt.
  • Gemini 1.5 Pro (Google): Punktet durch ein sehr großes Kontextfenster, was bei umfangreicheren Programmen hilfreich ist.

Der Prozess: Von der Beschreibung zur fertigen App

Die Programmentwicklung verläuft iterativ in einem Chat-Dialog:

  1. Initialer Prompt: Erstellen Sie eine detaillierte Beschreibung. Beispiel: „Erstelle eine Web-App mit einem großen roten Button. Wenn man ihn drückt, erscheint ein zufälliges Tierbild und der Name des Tieres wird vorgelesen.“
  2. Strukturvorgabe: Definieren Sie das Layout (z. B. „nutze ein klares, kontrastreiches Design für Schüler mit Sehbeeinträchtigung“).
  3. Debugging & Testing: Das Programm wird lokal getestet. Funktioniert etwas nicht? Kopieren Sie die Fehlermeldung zurück in den Chat. Die KI korrigiert den Code umgehend.
  4. Verfeinerung: In kleinen Schritten werden Funktionen hinzugefügt (z. B. eine Belohnungsanimation nach fünf richtigen Antworten).

Das Zielformat: Die Web-App

Für den schulischen Einsatz ist die Erstellung einer Web-App (bestehend aus HTML, CSS und JavaScript) am effizientesten.

  • Vorteile: Sie benötigen keine Installation. Eine einzige .html-Datei reicht aus, um die App im Browser zu öffnen – sei es am Smartboard, am PC oder am iPad (z. B. via Documents by Readdle).
  • Einschränkungen: Es handelt sich meist um statische Webseiten. Das bedeutet, Daten (wie Spielstände) werden nach dem Neuladen der Seite gelöscht, sofern kein lokaler Speicher des Browsers genutzt wird.
  • Externe Libraries: Um Funktionen wie komplexe Diagramme oder physikalische Simulationen zu nutzen, kann die KI externe Bibliotheken einbinden (z. B. p5.js für kreatives Programmieren oder Howler.js für fortgeschrittene Audio-Funktionen).

Umgang mit Bildern

Da eine Web-App oft nur aus einer Textdatei besteht, können Bilder nicht einfach „beigelegt“ werden. Hier gibt es vierStrategien:

  • Emojis: Die einfachste Lösung für Symbole und einfache Grafiken.
  • Font Awesome / Lucide Icons: Einbindung von Icon-Bibliotheken via URL, um professionelle Symbole zu nutzen.
  • Verlinkung: Es können Bilder, die im Internet zu Verfügung stehen, über Verlinkungen angezeigt werden. Es müssen hierfür natürlich Lizenzrechte beachtet werden
  • Base64-Codierung: Das Bild wird komplett in eine lange Textkette umgewandelt und direkt in den Code eingebettet. Die KI kann dies auf Anfrage für kleine Icons erledigen.

Sonderpädagogischer Bezug und Einsatzmöglichkeiten

Vibe-Coding ist ein mächtiges Werkzeug für die Diklusion (Digitale Inklusion), da es Lehrkräften ermöglicht, Barrieren abzubauen, für die es keine kommerziellen Lösungen gibt:

  • Individuelle Assistenz-Tools: Erstellung von spezialisierten Kommunikationstafeln oder Schritt-für-Schritt-Anleitungen mit Sprachausgabe für Schüler im Förderschwerpunkt geistige Entwicklung.
  • Barrierefreie Lern-Lektionen: Umwandlung von analogen Arbeitsblättern in interaktive Formate mit einstellbaren Schriftgrößen, hohen Kontrasten und Screenreader-Optimierung.
  • Verhaltenstraining: Kleine Apps zur Selbstregulation (z. B. ein visueller Timer oder ein digitales Mood-Board), die exakt die Verstärker nutzen, auf die ein spezifischer Schüler anspricht.
  • Kognitive Entlastung: Erstellung extrem reduzierter Benutzeroberflächen („Minimal Interfaces“), die Ablenkungen minimieren und den Fokus auf eine einzige Aufgabe lenken.

Veröffentlicht in Apps, Internet, Unterrichtshilfe, Unterrichtsvorbereitung, WebApp

Silben-Lesehilfe – Update manuelle Silbentrennung

Veröffentlicht am von Thomas Moch

Mein Programm Silben-Lesehilfe hat gestern ganz schöne Wellen geschlagen. Danke für das zahlreiche positive Feedback. Es freut mich, wenn die Software verwendet wird um schöne Angebote für die Schüler zu machen.

https://go.lernsachen.online/silbenhelfer

Heut habe ich gleich ein erstes Update veröffentlicht:

Die automatische Silbentrennung funktioniert vor allem bei einfachen Begriffen recht gut. Trotzdem kommen Fehler vor und manche Wörter werden falsch in Silben zerlegt. Deshalb gibt es ab jetzt die Möglichkeit, die Fehler durch manuelle Korrekturen zu verbessern.

Dazu bearbeitet man das falsch zerlegte Wort und fügt an die richtigen Stellen ein Pipe Symbol ( | ) ein. Mit der Tastatur [Alt Gr] + [<]. Dann werden die Silben an diesen Stellen gebildet.

Eine ausführliche Beschreibung findet ihr im Hilfetext in der App.

Veröffentlicht in Unterrichtshilfe, Unterrichtsvorbereitung, WebApp

Silben-Lesehilfe – Silbenfärbung und Wortbilder per Klick

Veröffentlicht am von Thomas Moch

Endlich! Ein neues Jahr, ein neues Programm. Ich darf Euch meine neue Web-App Silben-Lesehilfe vorstellen. Sie ermöglicht es, Texte mit wenigen Klicks visuell und auditiv zu unterstützen – sei es durch die klassische Silbenfärbung, visuelle Unterstützung durch Piktogramme oder eine integrierte Sprachausgabe.

https://go.lernsachen.online/silbenhelfer

Funktionsumfang im Überblick

Die Webapp läuft direkt im Browser und erfordert keine Installation. Der Fokus liegt auf einer reduzierten, ablenkungsfreien Oberfläche. Zu den Kernfunktionen gehören:

  • Silbenfärbung: Automatische Segmentierung und Färbung (blau/rot) der Sprechsilben mittels integriertem Algorithmus.
  • Wortbilder (Piktogramme): Automatische Verknüpfung von Nomen, Verben und Adjektiven mit Symbolen aus der bekannten ARASAAC-Datenbank.
  • Vorlesefunktion (TTS): Synthetische Sprachausgabe mit Karaoke-Effekt (Wort-Highlighting) und anpassbarer Geschwindigkeit.
  • Schriftbild: Nutzung der für Lesbarkeit optimierten Schriftart „Lexend“.

Praktische Umsetzung: Vom Text zum Material

Der Workflow für Lehrkräfte ist denkbar einfach gestaltet und eignet sich auch für die spontane Materialerstellung kurz vor Unterrichtsbeginn.

  1. Eingabe: Der gewünschte Text wird in das zentrale Textfeld eingetippt oder kopiert.
  2. Anpassung: Über Schalter im oberen Menü werden die Hilfen (Silben, Bilder) aktiviert. Über das Zahnrad-Symbol können unpassende Bilder ausgetauscht oder ausgeblendet werden.
  3. Export: Hier bietet das Tool drei spannende Optionen:
    • Als Bild (PNG): Ideal für gedruckte Arbeitsblätter oder zum Einfügen in Word/PowerPoint.
    • Als Player (HTML): Es wird eine einzelne Datei heruntergeladen, die offline im Browser funktioniert. Diese enthält den Text, die Bilder und die Vorlesefunktion.
    • Kopieren: Übernimmt den Text mit Formatierung in die Zwischenablage.

Sonderpädagogischer Bezug

Der „Silben-Lesehelfer“ deckt verschiedene Förderbereiche ab und ist besonders für den Einsatz in Förderschulen und im inklusiven Unterricht relevant:

  • Lese-Rechtschreib-Schwäche (LRS): Die Segmentierung in blau-rote Sprechsilben ist eine bewährte Methode, um den Leseprozess zu verlangsamen und die phonologische Bewusstheit zu stärken. Das „Verschwimmen“ von Buchstaben wird reduziert.
  • Unterstützte Kommunikation (UK) & Autismus: Durch die Integration der ARASAAC-Symbole erhalten nicht-sprechende Kinder oder Kinder im Autismus-Spektrum visuelle Anker, die das Textverständnis sichern.
  • Deutsch als Zweitsprache (DaZ): Die Kombination aus Schrift, Bild und Ton (multimodales Lernen) hilft beim Wortschatzaufbau und der korrekten Aussprache.
  • Sehbeeinträchtigung: Die Schriftgröße lässt sich stufenlos anpassen, und das Schriftbild ist kontrastreich gestaltet.

Methodische und didaktische Hinweise

Um das Potenzial der App voll auszuschöpfen, bieten sich folgende Einsatzszenarien an:

  • Binnendifferenzierung von Arbeitsblättern: Erstellen Sie vom gleichen Sachtext drei Varianten:
    1. Nur Text (Schriftart Lexend).
    2. Text mit Silbenfärbung.
    3. Text mit Silbenfärbung und Piktogrammen. Drucken Sie diese Varianten als PNG aus oder stellen Sie sie digital bereit.
  • Interaktives Lesetraining (HTML-Export): Die Export-Funktion als „HTML-Player“ ist ein didaktisches Highlight. Diese Datei kann per Lernplattform (Moodle, mebis, Logineo) an die Schüler verteilt werden.
    • Szenario: Schüler lesen den Text leise. Bei unbekannten Wörtern klicken sie auf „Vorlesen“, um die korrekte Aussprache zu hören (Selbstkontrolle).
    • Vorteil: Da die HTML-Datei offline funktioniert, ist keine ständige Internetverbindung am Schülergerät nötig, sobald die Datei geladen ist.
  • Wortschatzarbeit: Projizieren Sie den Text via Smartboard. Nutzen Sie die Funktion, Bilder gezielt auszutauschen, um mit der Klasse über Wortbedeutungen zu diskutieren („Welches Bild passt besser zu diesem Satz?“).

Datenschutz und Technik

Für den Schuleinsatz ist der Datenschutz essenziell. Der „Silben-Lesehelfer“ verfolgt einen „Privacy by Design“-Ansatz. Die Textverarbeitung und Silbentrennung finden lokal im Browser statt. Es wird kein Text auf Servern gespeichert.

Hinweis: Für die Wortbilder (ARASAAC) und Schriftarten werden externe Schnittstellen angefragt. Dies ist technisch notwendig, aber datenschutzrechtlich im Regelfall unbedenklich, da keine personenbezogenen Daten der Schüler (wie Namen oder Login) übertragen werden, sondern nur die Textinhalte zur Bildsuche.