Bei der folgenden Unterrichtseinheit handelt es sich um den ersten von drei Teilen einer umfangreichen handlungsorientierten Unterrichtssequenz, deren Gegenstand die Entwicklung und Umsetzung einer AJAX-unterstützten Webanwendung nach dem Model-View-Controller Prinzip ist. Als Beispiel dient das ebenso bekannte wie einfache Spiel "Tic Tac Toe". Die Lernenden implementieren eine komplexe Webanwendung, indem sie moderne Internet-Technologien und Software-Werkzeuge zielorientiert miteinander kombinieren und anwenden.
AJAX I: Realisierung der grafischen Benutzerschnittstelle
Unterrichtseinheit
Der erste Teil der dreiteiligen Unterrichtssequenz befasst sich mit der Erstellung der aktiven grafischen Benutzerschnittstelle mithilfe von XHTML, CSS und JavaScript.
- Informationstechnik
- Sekundarstufe II
- etwa 12 Unterrichtsstunden
- entdeckendes Lernen, Ablaufplan
- 2 Arbeitsmaterialien
Beschreibung der Unterrichtseinheit
Unterrichtsablauf
Inhalt
-
Einstieg
Grundsätzliche Funktionsweise von Webanwendungen
-
Vorbereitung
Beschaffung, Installation und Konfiguration der Komponenten der Entwicklungsplattform
-
Analyse
Elemente der Benutzerschnittstelle
der Demoanwendung
-
Implementierung
Implementierung des statischen GUI (XHTML, CSS)
-
Implementierung
Implementierung der dynamischen Umschaltfunktionen zwischen den Ansichten (JavaScript/DOM)
Didaktisch-methodischer Kommentar
Schwerpunkte
Der erste Teil der Unterrichtssequenz hat zwei Schwerpunkte: Zum einen geht es um die Beschaffung und Konfiguration der erforderlichen Entwicklungswerkzeuge, zum anderen soll die grafische Benutzerschnittstelle so vollständig wie möglich implementiert werden. Dazu gehört die statische Strukturierung und Formatierung der Seite mit XHTML und CSS sowie die dynamische Umschaltung zwischen verschiedenen Ansichten (Registrierungsdialog und Logindialog) mit JavaScript.
Umsetzung
Die Implementierung soll von den Schülerinnen und Schülern weitgehend selbstständig mithilfe der zur Verfügung stehenden Informationsquellen erfolgen. In Bezug auf die konkrete Gestaltung, zum Beispiel der Farben, Rahmen, Positionierung, werden keine zwingenden Vorgaben gemacht. Hier dürfen die Lernenden ihre Kreativität ausleben. Abhängig von der Leistungsfähigkeit der Lerngruppe kann die Lehrperson situationsabhängig entscheiden, ob Teile der Demoanwendung vorgegeben werden.
Ablauf der Unterrichtseinheit
- Entwicklung der Webanwendung
Die Schülerinnen und Schüler beschäftigen sich mit der Struktur einer Webanwendung und lernen die vom Autor empfohlene Konfiguration kennen. - Das User Interface
Die Schülerinnen und Schüler schauen sich die Demoanwendung an, anhand derer sie selbstständig eine Benutzerschnittstelle erstellen.
Den Zugriff auf das Unterrichtsmaterial erhalten Sie mit einer Premium-Mitgliedschaft.
Download
- ajax_teil1_material.zip
In der ZIP-Datei finden Sie alle Arbeitsmaterialien für diese Unterrichtseinheit.
Im Classroom-Manager speichern - Demoanwendung.zip
Hier finden Sie die Demoversion des Spiels "Tic Tac Toe", die während der gesamten Unterrichtssequenz zur Orientierung dient.
Im Classroom-Manager speichern
Vermittelte Kompetenzen
Fachkompetenz
Die Schülerinnen und Schüler sollen
- die Benutzerschnittstelle mithilfe geeigneter XHTML-Elemente strukturieren.
- die Benutzerschnittstelle mit Cascading Style Sheets (CSS) formatieren.
- Benutzerinteraktionen mithilfe von Event Handlern und dem Document Object Model (DOM) implementieren.
Methodenkompetenz
Die Schülerinnen und Schüler sollen
- Informationen in deutsch- und englischsprachigen Internetforen und -tutorien beschaffen, auswerten und für die Entwicklungsarbeit benutzen.
- die erforderlichen Entwicklungswerkzeuge beschaffen, konfigurieren und benutzen.
Zusatzinformationen
- Links zum Thema
Diese ausgewählten Internetadressen dienen der Recherche im Unterricht oder bei der Unterrichtsvorbereitung.
