# Mini-Tools mit KI gestalten ## Was sind Mini-Tools? Mini-Tools sind kleine, interaktive Webanwendungen mit einer klaren, einfachen Funktion. Sie eignen sich ideal zum Experimentieren, Lernen und Teilen. Mit Hilfe von KI können sie schnell konzipiert und umgesetzt werden. ### Drei Beispiele: - 🎲 **Zufallsgenerator für Materialvorhaben** [https://ebildungslabor.github.io/materialideen/](https://ebildungslabor.github.io/materialideen/) - 🎰 **Slot-Maschine mit Konfetti** [https://ebildungslabor.de/slotmaschine](https://ebildungslabor.de/slotmaschine) - 🤖 **Wie nutzt du KI?** https://allesKiOderWas.de --- ## Wie gehe ich bei der Entwicklung vor? ### 1. Was will ich genau haben? - Was sieht man auf der Website? - Was kann man damit machen? - Wer soll es nutzen? > 📝 **Tipp:** Klare Vorstellungen helfen der KI! Beschreibe dein Ziel so konkret wie möglich. ➡️ Beispiel für gutes "Erklären" (und das Gegenteil davon): <iframe width="560" height="400" src="https://www.youtube.com/embed/FN2RM-CHkuI?si=1995meoobXzpwSk2" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe> --- ### 2. Wie will ich das gestalten? Je klarer deine Beschreibung, desto besser kann die KI unterstützen! #### Grundlegender Aufbau: - **Statische Website** mit HTML - **Funktionalität** durch JavaScript - **Design** optional via CSS oder mit einfachen Frameworks wie: - [simplecss.org](https://simplecss.org) - [picocss.com](https://picocss.com) #### Beispielstruktur: `index.html` ```html <!doctype html> <html lang="de"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://cdn.simplecss.org/simple.css"> <title>Seitentitel</title> <script src="script.js" defer></script> </head> <body> Inhalte der Website </body> </html> ``` Weitere Seiten können z. B. `name.html`, `about.html` usw. heißen. ## 3. Wie entwickle ich es? ### Anliegen erläutern und nachfragen → „Ich möchte ein Tool, das …“ → „Hast du das verstanden?“ → Lass uns nacheinander den Code generieren. ### Code generieren lassen und lokal testen → Code kopieren, speichern, im Browser öffnen: Funktioniert es? ### Optimieren → Teile konkrete Fehler mit oder beschreibe, was du ändern willst → z. B. „Die Ausgabe soll zufällig sein“ oder „Der Button funktioniert nicht“ ### Zum Lernen nutzen → Frage die KI z. B.: „Was macht diese Funktion?“, „Wie funktioniert dieses Event?“ ### Veröffentlichung via GitHub Pages → Anleitung: [https://pages.github.com/](https://pages.github.com/) --- ## Übergreifende Empfehlungen ### 🔁 Bestehende Tools remixen → z. B. auf: [https://github.com/ebildungslabor](https://github.com/ebildungslabor) ### 🧪 Mit einfachen Ideen starten → Später komplexer werden – z. B. mit Tools über: - [https://glitch.com](https://glitch.com) - Beispiel: [https://glitch.com/~brainstormrank](https://glitch.com/~brainstormrank) ### ⏱️ Zeitlimit setzen → Was bis dahin nicht funktioniert, wird erstmal zurückgestellt oder einfacher gemacht!