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

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.

Unterrichtsablauf

Inhalt
Sozial- / Aktionsform

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.

Schon Premium-Mitglied?
Noch kein Premium-Mitglied? Jetzt informieren

Download

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.

Autor

Avatar
Dr. Ralf Seliger

Zum Profil

Lizenzinformation

Frei nutzbares Material
Die von Lehrer-Online angebotenen Materialien können frei für den Unterricht genutzt und an die eigene Zielgruppe angepasst werden.