Durch die Trennung von Formatierung und Inhalt einer HTML-Seite vereinfachen Cascading Style Sheets die Verwaltung einer Website. Diese Unterrichtseinheit führt in die Grundlagen von CSS ein und festigt diese durch mehrere Übungen. Ursprünglich wurden bei der Erstellung von Webseiten in HTML der Inhalt in jedem Tag formatiert. So wurde bei der Änderung des Überschriftenformats jeder Befehl für eine Überschrift geändert. Das ist sehr aufwändig und führt dazu, dass der Quellcode unübersichtlich wird. Durch den Einsatz von Cascading Style Sheets (CSS) wird dies vermieden. Die Formatierungen werden in einer separaten Datei definiert, so dass jede Änderung in dieser Datei automatisch alle betreffenden Formatierungen ändert. In der Regel profitiert auch das Seitenlayout sehr von einer CSS-Datei, da sich der Entwickler auf eine Formatauswahl beschränkt und "Wildwuchs" vermieden wird. Seit der Etablierung von XHTML wird der Einsatz von CSS noch bedeutsamer, da kommende Versionen von XHTML den Einsatz von CSS unbedingt erfordern. Zum Einsatz dieser Unterrichtsreihe benötigen die Schülerinnen und Schüler Vorkenntnisse im Bereich XHTML. Sie sollten einfache XHTML-Seiten selbst erstellen und im Browser testen können.Zunächst wird anhand einer Folie verdeutlicht, wozu Cascading Style Sheets eingesetzt werden und welche Vorteile der Einsatz bringt. Diese Erkenntnisse und Grundlagen von CSS werden auf Informationsblättern erarbeitet und gesichert. Unterrichtsablauf und Einsatz der Materialien CSS bietet mit der möglichen Positionierung von Inhalten auf Webseiten ferner Möglichkeiten, die mit HTML allein nicht bestehen. Diese Möglichkeiten werden auf Informationsblättern vorgestellt und von den Schülern getestet. Mithilfe einer Übersicht von CSS-Befehlen und von drei Übungsaufgaben mit steigendem Schwierigkeitsgrad setzen die Schülerinnen und Schüler CSS selbst ein. Die Schülerinnen und Schüler sollen den Begriff CSS erklären können. den Einsatz von CSS begründen können. wichtige CSS-Anweisungen kennen lernen. interne und externe CSS-Formatierungen erstellen. CSS zur Positionierung von Inhalten einsetzen. Thema Formatieren mit Cascading Style Sheets Autor Dr. Stefan Staiger Fach Computertechnik Zielgruppe berufliche und allgemein bildende Gymnasien, Berufskollegs Zeitraum 4 Unterrichtsstunden Technische Voraussetzungen Editor, Browser Sachanalytische Hinweise In HTML wird die Formatierung direkt an jedem zu formatierenden Objekt (zum Beispiel dem Text "Überschrift") vorgenommen. Beim Einsatz von XHTML wird die Überschrift mit der "Formatvorlage h1" formatiert. Welche Formatierung dann diese Formatvorlage enthält, wird in einer separaten so genannten CSS-Datei festgelegt. Dieses Konzept kann man mit den Formatvorlagen in WORD vergleichen, die vielen Schülerinnen und Schülern sicher bekannt sind. Der Hauptvorteil dieser Formatierung liegt in der Trennung von Format und Inhalt. Damit kann durch Änderung des Formats an einer Stelle (CSS-Datei) eine Änderung der Formatierungen auf vielen einzelnen Webseiten, die alle mit derselben CSS-Datei verknüpft sind, erfolgen. Die gezeigte Darstellung vereinfacht die Realität: Auch in HTML kann mit CSS gearbeitet werden. Dies wird auch auf vielen HTML-Seiten so durchgeführt. Ferner kann bei den XHTML-Dokumenttypen Transitional und Frameset auch ohne CSS formatiert werden wie bisher in HTML. Die gezeigte CSS-Formatierung ist nur bei der Variante Strict unbedingt erforderlich, jedoch auch in vielen anderen Fällen sinnvoll. Da es in Zukunft aber nur den Typ "Strict" geben wird, ist ein Einsatz von CSS in jedem Fall notwendig. Einstieg Anhand der Folie "Folie_Formatierungen" wird der Unterschied zwischen der Formatierung in HTML unmittelbar über Tags zur Formatierung und der Formatierung mittels Cascading Style Sheets bei XHTML gezeigt. Folie_Formatierungen.doc (22kB) CSS Grundlagen Die Schüler erarbeiten die Grundlagen der Cascading Style Sheets (CSS) selbstständig anhand der Informationsblätter. Positionierung mit CSS CSS können auch zur Positionierung von Inhalten auf Webseiten eingesetzt werden. Mithilfe der Informationsblätter können die Schülerinnen und Schüler diese Positionierung selbst anhand von Beispielen ausprobieren. Übersicht Zur Vereinfachung der Arbeit an den Übungsaufgaben erhalten die Schülerinnen und Schüler eine Übersicht mit wichtigen CSS-Befehlen. Diese Übersicht kann auch kurz an einigen Beispielen besprochen werden. Übungen Das Aufgabenblatt enthält drei Übungen zum Thema CSS mit steigendem Schwierigkeitsgrad: In der ersten Aufgabe werden einige einfache Formatierungen als interne CSS-Formatangaben angelegt. Dabei wird noch keine separate CSS-Datei benötigt. In der zweiten Aufgabe sollen die Formatierungen der ersten Aufgabe in einer externen CSS-Datei abgelegt werden. Die dritte Aufgabe umfasst die Erstellung einer Rechnung mit fünf vorgegebenen CSS-Klassen und der Erstellung einer externen CSS-Datei. Lösungen der Aufgaben Die Lösungen der Aufgaben können am Beamer besprochen werden. Zudem kann jedem Schüler eine Lösung ausgehändigt bzw. über Netzlaufwerke verteilt werden.

Der erste Teil der dreiteiligen Unterrichtssequenz befasst sich mit der Erstellung der aktiven grafischen Benutzerschnittstelle mithilfe von XHTML, CSS und JavaScript. 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. 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. 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. Thema AJAX I: Realisierung der grafischen Benutzerschnittstelle Autor Dr. Ralf Seliger Fach Web-Programmierung, Informationstechnik, Informatik Zielgruppe Informationstechnische Assistentinnen und Assistenten (Oberstufe) Zeitraum etwa 12 Unterrichtsstunden Medien Computer, Internet Technische Voraussetzungen Rechnerraum mit Internetzugang und Beamer Fachliche Lernvoraussetzungen Die Lernenden sollen über praktische Kenntnisse in der prozeduralen Programmierung verfügen. Planung Verlaufsplan AJAX I Um sicherzustellen, dass die Lerngruppe die grundsätzliche Funktionsweise einer Webanwendung versteht und erläutern kann, dient die Aufgabe auf Arbeitsblatt 1. Komponenten Die Schülerinnen und Schüler sollen sich über die für das Projekt erforderliche Entwicklungs- und Support-Software Gedanken machen. Dabei stellen sie bereits die ersten Planungsüberlegungen für die spätere Realisierung an. Als Grundlage für die Überlegungen dient das Ergebnis der ersten Aufgabe und die folgende Aufgabenstellung. Empfohlene Konfiguration Natürlich gibt es eine Vielzahl von Möglichkeiten, eine leistungsstarke Entwicklungsplattform zu konfigurieren. Die Demoversion der Anwendung wurde jedenfalls unter Windows XP mithilfe der folgenden lizenzfreien Komponenten erstellt: XAMPP Dieses Softwarepaket enthält neben einigen anderen Anwendungen einen Apache Webserver, einen PHP Interpreter, ein MySQL Datenbankmanagementsystem und die Webanwendung phpMyAdmin zur manuellen Datenbankadministration. FFW Firefox Webbrowser mit den Extensions IE Tab, Firebug und Web Developer: Der bei der Firefox-Installation optionale DOM Inspector muss aktiviert werden (benutzerdefinierte Installation wählen). HTML-Editor Phase5 optional Versionsverwaltungssystem Subversion optional TortoiseSVN Eine grafische Benutzeroberfläche für Subversion (optional) XAMPP-Paket Das XAMPP-Paket bietet den Vorteil, dass der Webserver, das Datenbankmanagementsystem, der PHP-Interpreter und phpMyAdmin fertig konfiguriert und aufeinander abgestimmt installiert werden. Firefox Browser Der Internet Explorer ist für Entwicklungszwecke nur eingeschränkt zu gebrauchen. Stattdessen sollte der Firefox Browser benutzt werden, der die Installation von Extensions erlaubt, die unverzichtbar für die Entwicklung von Webanwendungen sind. Insbesondere handelt es sich dabei um den Debugger Firebug und die Web Developer Toolbox. Sehr wichtig ist auch der DOM-Inspector, mir dem man sich das Document Object Model einer XHTML-Seite anschauen kann. Mit der Extension IE-Tab kann bei Bedarf das Erscheinungsbild der Seite im Internet Explorer überprüft werden. HTML-Editor Phase5 Der optionale HTML-Editor Phase5 erleichtert die Arbeit unter anderem deshalb, weil er für HTML, JavaScript und PHP Syntax Highlighting Funktionen bereitstellt. Grundsätzlich würde aber ein normaler Texteditor wie zum Beispiel Notepad ausreichen. Subversion Schließlich sei das Versionsverwaltungssystem Subversion erwähnt, das als ausdrücklich empfohlene Option anzusehen ist. Insbesondere bei Anwendungen, die aus vielen unterschiedlichen Dateien bestehen, ist eine Versionskontrolle wichtig, um jederzeit in der Lage zu sein, alte Entwicklungsstadien wieder herzustellen. Demoversion Da der Quellcode der Anwendung in lesbarer Form vorliegt, sollte die Demoanwendung nicht auf den Rechnern der Lernenden installiert werden. Es ist somit erforderlich, dass die Lehrperson die Demoanwendung vorführt und die Funktionalität bis zur Durchführung der Anmeldung mit Hilfe eines Beamers demonstriert. Programmiersprachen Der XHTML-, CSS- und JavaScript-Sprachumfang ist außerordentlich groß. Aus diesem Grund ist es ratsam, den Unterricht auf die für die Anwendung erforderlichen Elemente, Styles und Funktionen zu beschränken. Das vorrangige Ziel der gesamten Unterrichtssequenz ist die Entwicklung der Webanwendung nach dem Model-View-Controller Konzept und weniger die Schaffung eines vollständigen Überblicks über die verwendeten Technologien. Analyse der Ansicht Im ersten Abschnitt sollen die Schülerinnen und Schüler aufgrund der Demoanwendung diejenigen Elemente identifizieren, aus denen die Ansicht besteht, und recherchieren, mit welchen Mitteln sie realisiert und gestaltet werden können. Implementierung der statischen Ansicht Jetzt geht es um die Implementierung und CSS-Formatierung der identifizierten XHTML-Elemente. Als Ergebnis sollen die Schülerinnen und Schüler individuelle XHTML-Dateien und Stylesheets produzieren. Der während dieser Phase produzierte Code ist keinesfalls als endgültig aufzufassen. Es wird im Laufe der weiteren Entwicklung oftmals erforderlich sein, ihn zu modifizieren, zu erweitern oder neu zu strukturieren. Dieses so genannte Refactoring ist gängige Praxis in der Softwareentwicklung. Umschalten zwischen Registrierungs- und Logindialog Die Ansicht existiert nun in statischer Form. Damit können jetzt die ersten dynamischen Funktionalitäten eingebaut werden, wobei die Schülerinnen und Schüler zum ersten Mal mit dem Document Object Model, JavaScript, Events und Event Handlern konfrontiert werden. Die Anwendung besitzt drei unterschiedliche Teilansichten, nämlich den Registrierungsdialog, den Logindialog und das Spielfeld nach erfolgreicher Anmeldung. Zwischen diesen Ansichten ist zustands- beziehungsweise benutzerabhängig umzuschalten. Die von den Schülerinnen und Schülern zu diesem Zweck zu entwickelnden JavaScript-Funktionen werden in eine Datei util.js ausgelagert.

Im Rahmen einer dreiteiligen Unterrichtssequenz soll eine komplexe AJAX-unterstützte Web-2.0-Anwendung handlungsorientiert entwickelt werden.Als Beispiel dient das Spiel Tic Tac Toe, das nach erfolgreicher Implementierung der Anwendung von jeweils zwei Spielenden an beliebigen Computern über das Internet gespielt werden kann. Zielgruppe der Unterrichtssequenz ist die Oberstufe eines Bildungsganges für Informationstechnische Assistentinnen und Assistenten. Bei dem Lerngegenstand handelt es sich um eine typische Web-2.0-Anwendung. Sie ist für die Schülerinnen und Schüler der Zielgruppe praktisch relevant, weil die Bedeutung von AJAX-unterstützten Webanwendungen in der Informationstechnik in Zukunft weiter zunehmen wird.Die Schülerinnen und Schüler sind bereit und in der Lage, eine komplexe Webanwendung zu implementieren, indem sie moderne Internet-Technologien und Software-Werkzeuge zielorientiert miteinander kombinieren und anwenden. Sie orientieren sich bei der Entwicklung an dem Model-View-Controller-Prinzip, um das Datenmodell der Anwendung von der Benutzerschnittstelle zu trennen. Dreiteilung der Unterrichtseinheit Die Schülerinnen und Schüler sollen die Demoanwendung weitgehend selbstständig reproduzieren. Der gesamte Entwicklungsprozess wird in drei Hauptabschnitte gegliedert, die sich im Wesentlichen an der MVC-Architektur orientieren (Teil 1 behandelt die Ansicht, Teil 2 das Modell und Teil 3 die Steuerung). Auf diesem Wege werden sich die Schülerinnen und Schüler das Wesen und die Merkmale der Model-View-Controller-Architektur sukzessive selbstständig erschließen. AJAX I: Realisierung der grafischen Benutzerschnittstelle Der erste Teil der dreiteiligen Unterrichtssequenz befasst sich mit der Erstellung der aktiven grafischen Benutzerschnittstelle mithilfe von XHTML, CSS und JavaScript. AJAX II: Implementierung der serverseitigen Komponenten Der zweite Teil der AJAX-Unterrichtssequenz hat die serverseitigen Elemente der Anwendung zum Thema. AJAX III: Clientseitige Funktionen Der dritte und letzte Teil der Unterrichtsreihe beschäftigt sich mit den clientseitigen Funktionen der Webanwendung. Häusliche Entwicklungsarbeit Um das Projekt zu einem erfolgreichen Ergebnis zu führen, ist es unabdingbar, dass sich die Schülerinnen und Schüler auch zu Hause mit dem Projekt befassen. In der Praxis bedeutet das, dass im wöchentlichen Unterricht lediglich die Grundlage für die häusliche Entwicklungsarbeit der jeweils folgenden Woche gelegt wird. Nützlich ist dabei, wenn die Lerngruppe auch während dieser Zeit Gelegenheit hat, Fragen zu stellen und Probleme zu diskutieren (etwa via E-Mail oder mithilfe einer Lernplattform wie Moodle . Es ist unerlässlich, dass für die Unterrichtsgespräche ein gemeinsames Vokabular zur Verfügung steht, das sowohl Lehrkraft als auch Schülerinnen und Schüler sicher beherrschen. Insbesondere handelt es sich dabei um die folgenden Begriffe: Klassen, Objekte, Attribute und Methoden Der Punktoperator zum programmatischen Zugriff auf Attribute und Methoden eines Objekts Ereignisse (Events) und Ereignis-Behandlungsroutinen (Event Handler) Darüber hinaus ist es erforderlich, dass die Schülerinnen und Schüler über praktische Kenntnisse in der prozeduralen Programmierung (vorzugsweise mit C) verfügen. Elemente und Begriffe wie die folgenden dürfen keine Fremdwörter sein, sondern sollten von den Schülerinnen und Schülern aktiv für die Implementierung von Algorithmen angewendet werden können. Datentypen, globale oder lokale Variablen, Wertzuweisungen Arrays Funktionen for-, while- und do-, while-Schleifen if-, else if-, else- und switch-/case-Kontrollstrukturen Diese Kenntnisse stellen eine notwendige Grundlage für die erfolgreiche Arbeit mit JavaScript und PHP im Rahmen der gesamten Unterrichtssequenz dar. Demoversion Eine Demoversion liegt vor und muss vor Beginn der Unterrichtssequenz auf dem Lehrerarbeitsplatz funktionsfähig installiert sein. Dazu gehört auch die weiter unten beschriebene Entwicklungssoftware. Zeitplanung Insgesamt orientiert sich der Unterricht am Modell der vollständigen Handlung . Besonders für die verschiedenen Planungsphasen (Beschaffung und Konfiguration der Entwicklungswerkzeuge, Analyse der Funktionalitäten der Demoanwendung) sollte hinreichend viel Zeit eingeplant werden. Entwicklung und Implementierung der Webanwendung Die folgenden Ausführungen, Informations- und Arbeitsblätter sind der Versuch, die Entwicklung und Implementierung der Webanwendung sowohl fachlich als auch didaktisch in möglichst folgerichtige Schritte aufzuteilen, so dass die Anwendung von den Lernenden innerhalb von etwa 40 Unterrichtsstunden programmiert werden kann. In Hinblick auf die Zweckmäßigkeit der gewählten Aufteilung kann es durchaus unterschiedliche Meinungen geben. Da der gesamte, weitgehend kommentierte Quellcode der getesteten und funktionsfähigen Demoanwendung vorliegt, kann jederzeit von dem vorgeschlagenen Weg abgewichen werden. Lehrkraft als Berater Unabdingbar ist allerdings, dass die Lehrperson den Code und die Funktionsweise der Demoanwendung sehr gut kennt, um den Lernenden nötigenfalls Hinweise und Hilfestellungen geben zu können. Freier Aufbau der Implementierungen möglich Es ist dagegen nicht notwendig, dass die Schülerinnen und Schüler den Code der Demoanwendung 1:1 reproduzieren. Sowohl serverseitig als auch clientseitig sind, bedingt durch den Sprachumfang von JavaScript und PHP, viele unterschiedliche Implementierungen denkbar.