Informatik · Klasse 10

Ideen für aktives Lernen

GUI-Programmierung: Grundlagen

Aktives Lernen funktioniert besonders gut bei der GUI-Programmierung, weil Schülerinnen und Schüler hier sofort sehen, wie ihre Code-Änderungen das Verhalten und die Benutzerfreundlichkeit beeinflussen. Die Kombination aus visuellem Feedback und logischen Abläufen macht abstrakte Konzepte wie Event-Handler greifbar und nachvollziehbar.

KMK BildungsstandardsKMK: STD.02KMK: STD.06
30–50 Min.Partnerarbeit → Ganze Klasse4 Aktivitäten

Aktivität 01

Projektbasiertes Lernen45 Min. · Partnerarbeit

Pair Programming: Button-Event-App

Paare erstellen eine GUI mit zwei Buttons: Einer ändert Textfarbe, der andere startet eine Zählfunktion. Sie testen Events schrittweise und debuggen gemeinsam. Abschluss: Präsentation der App vor der Klasse.

Wie trennt man die Programmlogik von der visuellen Darstellung?

ModerationstippFordern Sie in der Pair-Programming-Phase gezielt dazu auf, dass ein Partner die Layout-Definition übernimmt und der andere die Event-Handler schreibt, um die Trennung zu erzwingen.

Worauf zu achten istLassen Sie die Schülerinnen und Schüler auf einer Karteikarte den Unterschied zwischen einem Widget und einem Event Handler in eigenen Worten beschreiben. Geben Sie ihnen ein einfaches GUI-Beispiel (z. B. ein Button, der beim Klicken eine Zahl erhöht) und bitten Sie sie, zu erklären, welche Ereignisse auftreten und welche Routine darauf reagiert.

AnwendenAnalysierenBewertenErschaffenSelbststeuerungBeziehungsfähigkeitEntscheidungsfähigkeit
Komplette Unterrichtsstunde erstellen

Aktivität 02

Projektbasiertes Lernen50 Min. · Kleingruppen

Stationen-Rotation: Layout-Vergleich

Vier Stationen mit vorgegebenen GUIs: Grid, Border und Flow Layout testen. Gruppen notieren Vor- und Nachteile, implementieren eine Variante und rotieren. Plenum diskutiert beste Praktiken.

Was bedeutet ereignisorientierte Programmierung im Kontext von Buttons und Menüs?

ModerationstippStellen Sie bei der Stationen-Rotation sicher, dass jede Gruppe ein anderes GUI-Framework testet, damit der Vergleich zwischen Layout-Optionen und Event-Verhalten direkt sichtbar wird.

Worauf zu achten istZeigen Sie den Schülerinnen und Schülern ein kurzes Code-Snippet einer GUI-Anwendung, das einen Button und dessen Event Handler zeigt. Stellen Sie folgende Fragen: 'Welches Ereignis wird hier behandelt?' und 'Welche Aktion wird als Reaktion auf dieses Ereignis ausgeführt?'

AnwendenAnalysierenBewertenErschaffenSelbststeuerungBeziehungsfähigkeitEntscheidungsfähigkeit
Komplette Unterrichtsstunde erstellen

Aktivität 03

Projektbasiertes Lernen40 Min. · Ganze Klasse

Whole Class Challenge: Menü-Entwicklung

Klasse entwirft gemeinsam ein Menü für eine Notizen-App: Menüpunkte definieren, Handler programmieren. Lehrer moderiert Live-Coding, Schüler voten über Features. Iteration basierend auf Feedback.

Welche Design-Prinzipien machen eine Software intuitiv bedienbar?

ModerationstippBeobachten Sie während der Menü-Entwicklung die Diskussionen in den Kleingruppen genau, um zu erkennen, wo die Schülerinnen und Schüler die Verbindung zwischen Menüoptionen und zugehörigen Funktionen herstellen.

Worauf zu achten istDie Schülerinnen und Schüler erstellen eine einfache GUI mit mindestens zwei interaktiven Elementen. Sie tauschen ihre Programme mit einem Partner aus. Jeder Partner prüft: 'Sind die Elemente klar beschriftet?' und 'Reagieren die Elemente wie erwartet auf Klicks?' Partner geben sich gegenseitig ein kurzes Feedback zur Benutzerfreundlichkeit.

AnwendenAnalysierenBewertenErschaffenSelbststeuerungBeziehungsfähigkeitEntscheidungsfähigkeit
Komplette Unterrichtsstunde erstellen

Aktivität 04

Projektbasiertes Lernen30 Min. · Einzelarbeit

Individual Prototyping: Persönliche GUI

Jede Schülerin und jeder Schüler baut eine einfache App mit Eingabe-Feld und Button, z. B. Rechner. Selbsttest und Peer-Review folgen. Portfolio-Eintrag mit Reflexion.

Wie trennt man die Programmlogik von der visuellen Darstellung?

ModerationstippGeben Sie beim Individual-Prototyping klare Zeitlimits vor, damit die Schülerinnen und Schüler sich auf die Kernfunktionen konzentrieren und nicht in Design-Details verlieren.

Worauf zu achten istLassen Sie die Schülerinnen und Schüler auf einer Karteikarte den Unterschied zwischen einem Widget und einem Event Handler in eigenen Worten beschreiben. Geben Sie ihnen ein einfaches GUI-Beispiel (z. B. ein Button, der beim Klicken eine Zahl erhöht) und bitten Sie sie, zu erklären, welche Ereignisse auftreten und welche Routine darauf reagiert.

AnwendenAnalysierenBewertenErschaffenSelbststeuerungBeziehungsfähigkeitEntscheidungsfähigkeit
Komplette Unterrichtsstunde erstellen

Vorlagen

Vorlagen, die zu diesen Informatik-Aktivitäten passen

Nutzen, bearbeiten, drucken oder teilen.

Einige Hinweise zum Unterrichten dieser Einheit

Erfahrene Lehrkräfte beginnen mit minimalen Beispielen und bauen darauf schrittweise auf, um die Grundprinzipien der GUI-Programmierung zu vermitteln. Sie vermeiden komplexe Frameworks in der Einstiegsphase und nutzen stattdessen einfache Bibliotheken wie Tkinter oder JavaFX, um die Konzepte sichtbar zu machen. Wichtig ist, dass Schülerinnen und Schüler von Anfang an Feedback zur Benutzerfreundlichkeit erhalten, um ein Gespür für intuitive Interaktionen zu entwickeln.

Erfolgreiches Lernen zeigt sich darin, dass Schülerinnen und Schüler klar zwischen Programmlogik und UI-Code trennen können und selbstständig einfache GUIs mit funktionalen Interaktionen erstellen. Sie erkennen, wie Ereignisse Benutzeraktionen auslösen und welche Rolle der Event-Loop dabei spielt.

Vorsicht vor diesen Fehlvorstellungen

  • Während der Pair-Programming-Aktivität 'Button-Event-App' beobachten Sie, wie Schülerinnen und Schüler Logik direkt in die Layout-Methode schreiben.

    Fordern Sie die Paare auf, ihren Code nach dem MVC-Muster zu strukturieren: Legen Sie eine separate Klasse für die Logik an und binden Sie diese in den Event-Handler ein. Fragen Sie gezielt nach, warum diese Trennung sinnvoll ist und welche Vorteile sie für spätere Erweiterungen bietet.

  • Während der Stationen-Rotation 'Layout-Vergleich' erwarten Schülerinnen und Schüler, dass Button-Clicks sofort und linear ausgeführt werden.

    Fügen Sie in einer der Stationen eine Verzögerung von 2 Sekunden ein, bevor der Event-Handler reagiert. Diskutieren Sie im Anschluss gemeinsam, warum die Anwendung trotz Verzögerung noch responsiv bleibt und wie der Event-Loop im Hintergrund arbeitet.

  • Beim Individual-Prototyping 'Persönliche GUI' setzen Schülerinnen und Schüler auf überladene Designs mit vielen Farben und Effekten.

    Geben Sie in der Aufgabenstellung explizit vor, dass maximal drei Farben und zwei Schriftarten verwendet werden dürfen. Lassen Sie die Schülerinnen und Schüler ihre Designs in einer kurzen Präsentation erklären und begründen, warum ihre Wahl die Benutzerfreundlichkeit verbessert.

In dieser Übersicht verwendete Methoden

Mehr in Objektorientierte Modellierung und Programmierung

Einführung in die Objektorientierung

Die Schülerinnen und Schüler lernen die Grundkonzepte der Objektorientierung kennen und identifizieren Objekte in realen Szenarien.

3 methodologies

Klassen und Objekte definieren

Die Schülerinnen und Schüler entwerfen Klassen als Baupläne und instanziieren Objekte mit spezifischen Eigenschaften.

3 methodologies

Methoden und Attribute

Die Schülerinnen und Schüler implementieren Methoden zur Interaktion mit Objekten und verwalten deren interne Zustände durch Attribute.

3 methodologies

Konstruktoren und Objektinitialisierung

Die Schülerinnen und Schüler nutzen Konstruktoren zur initialen Konfiguration von Objekten und verstehen deren Lebenszyklus.

3 methodologies

Vererbung: Hierarchien bilden

Die Schülerinnen und Schüler wenden das Prinzip der Vererbung an, um Klassenhierarchien zu erstellen und Code-Duplizierung zu vermeiden.

3 methodologies