Wir wollen mit Hilfe von ChatGPT eine einfache ToDo-Webseite erstellen, die auf PCs, Tablets und Smartphones nutzbar ist und die ToDo-Items im Speicher des Browsers speichert. Das Ergebnis, von Schülerinnen und Schülern der Mittelschule Unterschleißheim, kannst du hier finden: https://apps.unsere-schule.org/todo/ oder per Code: D915

Inhalt

• Vorbereitung
• Wichtige Befehle
• 1) Start: grundlegende Webseite erstellen
• 2) Es soll ein Logo hinzugefügt werden
• 3) Das Logo soll angepasst werden
• 4) Die Hintergrundfarbe verändern
• 5) Das Logo soll besser zu sehen sein
• 6) Weitere Anpassungen

Vorbereitung

Soll die Künstliche Intelligenz (KI) eine Webseite erstellen, wird Code für die drei Hauptbestandteile einer Webseite erzeugt:

1. Code für das HTML einer Webseite: Dieser ist für den strukturellen Aufbau der Webseite verantwortlich und definiert die verschiedenen Elemente wie Überschriften, Absätze, Bilder, Links usw.
2. Code für das CSS der Webseite: Das CSS wird verwendet, um das Aussehen und das Layout der Webseite zu definieren. Es enthält Regeln für Farben, Schriftarten, Abstände, Positionen und andere visuelle Eigenschaften der Webseite.
3. Code für das JavaScript der Webseite: Das ist der Programmiercode, der die Interaktivität der Webseite ermöglicht. Dieser kann verwendet werden, um Benutzereingaben zu verarbeiten, Animationen zu erstellen, dynamische Inhalte zu generieren und vieles mehr.

Um die Vorschläge von ChatGPT ausprobieren zu können, nutzt du am besten unseren einfachen Online Code Editor für Schülerinnen und Schüler:

In diesen kannst du einfach den Code in die passenden Dateien (HTML, JS oder CSS) kopieren und das Ergebnis wird dir sofort auf der rechten Seite angezeigt.

Wichtige Befehle

Wichtiges Vokabular zur Erstellung der App:

• Webseite
• Responsive Design (Design, welches sich an unterschiedliche Auflösungen der Geräte anpasst. z.B.: PC, Tablet oder Smartphone.)
• Local Storage (Lokaler Speicher des Browsers.)
• Pixel (Wird bei Webseiten für die Größe von Elementen oder Bildern verwendet.)
• Header (Ist der Kopfbereich einer Webseite.)
• Footer (Ist der untere Bereich einer Webseite.)

1) Start: grundlegende Webseite erstellen

Jetzt kann es losgehen. Öffne die Webseite ChatGPT und gib die in den blauen Kästen befindlichen Befehle ein:

Erstelle eine einfache ToDo-Webseite, die ein Responsive Design hat und die ToDo-Items im Local Storage des Browsers speichert.

Die KI gibt dann verschiedene Codefenster für HTML, CSS und JavaScript aus:

Den generierten Code kopierst du nun in die passenden Dateien und kannst anschließend die „index.html“ Datei öffnen.

Die erste Version der ToDo-App sieht schon einmal sehr gut aus. Das Speichern funktioniert auch.

2) Es soll ein Logo hinzugefügt werden

Neben dem Titel soll ein Logo eingefügt werden.

Es wird der HTML-Code angepasst und im Header-Bereich ein Bild mit Namen „logo.png“ hinzugefügt. Um sein eigenes Logo nutzen zu können, musst du einfach ein PNG-Bild in den Ordner deiner Webseite einfügen:

Hier das aktuelle Ergebnis:

Das Bild ist recht groß und soll eigentlich neben dem Titel angezeigt werden.

3) Das Logo soll angepasst werden

Das Logo soll links neben dem Titel und nicht größer als 50 Pixel sein.

Jetzt generiert die KI einen angepassten HTML-Code und speziell für das Logo ergänzenden CSS-Code. Der HTML-Code kann direkt in „index.html“ eingefügt werden und ersetzt den alten Code. Der CSS-Code ist nur eine Ergänzung und kann am Ende der „style.css“ Datei angefügt werden.

Jetzt schaut die Webseite schon recht gut aus:

Nur die Hintergrundfarbe soll verändert werden, damit das Schullogo besser zur Geltung kommt.

4) Die Hintergrundfarbe verändern

Ändere die Hintergrundfarbe des Headers in ein blau.

Hier wird nur eine andere Farbe ausgegeben, die an passender Stelle in der CSS-Datei eingefügt werden muss:

Das Logo ist immer noch nicht gut sichtbar. Wir wollen dem Logo einen weißen Hintergrund und eine Umrandung geben.

5) Das Logo soll besser zu sehen sein

Das Logo soll einen weißen Hintergrund und eine dicke weiße Umrandung haben, welche abgerundete Ecken hat.

Dieser von der KI erstellte Code ersetzt den bereits in der „style.css“ vorhandenen Code des Logos:

Das Ergebnis kann sich sehen lassen:

6) Weitere Anpassungen …

Jetzt bist du an der Reihe. Folgende Sachen könntest du der App noch hinzufügen:

• Das Eingabefeld soll einen dunklen Rahmen bekommen, damit man es besser sieht.
• Es soll möglich sein, dass bereits erfasste ToDo-Items verändert werden können.
• …

Da ChatGPT immer neuen Code generiert, wird deine ToDo-App sicherlich etwas anders aussehen als meine. Gerne kannst du mir ein Bild oder einen Link von deiner Webseite zukommen lassen.