Vom Prompt zur eigenen HTML-App

1 Prompten

Nutze eine KI deiner Wahl und formuliere eine präzise Anfrage. Beschreibe das Fach, das Thema und die gewünschten Funktionen. z.B.:

2 Code speichern

Kopiere den generierten Code in die Zwischenanlage. Öffne einen Editor (z.B. Windows: Notepad, andere OS ➔Link), füge den Code ein und speichere die Datei mit der Endung .html ab (z.B. mathe-millionaer.html).

3 Apps den Schülerinnen und Schülern bereitstellen

Diese HTML-Datei kannst du nun zum Testen direkt im Browser öffnen, um sie den Schüler/innen bereit zu stellen, muss sie auf eine Lernplattform oder Websapace hochgeladen werden. (z.B. in ByCS Lernplattform über Aktivität "Datei"). Enthalten Dateien Skript-Anteile (z.B. php) oder Datenbank-Anbindungen ist oft ein Webserver oder lokaler Webserver notwendig (z.B. XAMPP).

4 Auswahl der Technik nach Bedarf

Die Spanne bei Vibecoding-Projekte kann groß sein: vom einfachen Blog, über Animationen, interaktiven Übung bis hin zu komplexen Datenbankanbindungen. Manche Funktionalitäten (wie z.B. Einbinden von Bildern, PHP, JavaScript oder SQL) benötigen eine spezielle Unterstützung im Hintergrund, daher ist es notwendig, den passenden Weg für die Veröffentlichung (weitergabe an die Schülerinnen und Schüler) auszuwählen. Hier eine kleine Entscheidungshilfe:

5 Veröffentlichen in der ByCS-Lernplattform

Aktivität "Datei": Nach Aktivierung des Bearbeitungsmodus kann die Aktivität "Datei" ausgewählt werden.

Hier kann die KI-generierte HTML-Datei hochgeladen werden

Dann steht das Lernmaterial den Schülerinnen und Schülern als Link zur Verfügung

Möchte man noch Bilder/Logos/Screenshots in der HTML-Seite darstellen (z.B. hier das Logo Wer-wird-Millionär), muss:
- zusätzlich die Bilddatei hochgeladen werden
- die HTML-Datei als "Hauptdatei" gesetzt werden

6 Vergleich von KI-Tools

Empfehlung: Vergleichen Sie die Ergebnisse verschiedener KI-Modelle. Da jedes System eine eigene Logik besitzt, können die Antworten trotz identischer Prompts erheblich variieren.