Informationstechnik: Willkommen im Fachportal

Diese Unterrichtsreihe stellt Berufsschulen Materialien zur Verfügung, die eine Einführung in die Mikrocontroller-Programmierung am Beispiel des Arduino ermöglichen. Dabei kann gänzlich auf Hardware verzichtet werden, denn die Simulation bietet eine vollständige und leicht bedienbare Virtualisierung. Der Beitrag entstand im Rahmen des von der Deutsche Telekom Stiftung geförderten Projekts "Berufsschule digital". Der Arduino ist ein Mikrocontroller und Open Source-Projekt von Massimo Banzai und David Cuartielles aus dem Jahr 2005. Hard- und Software sind im Internet unter einer Creative-Commons-Lizenz frei verfügbar. Ein Mikrocontroller besteht aus einem Prozessor und verschiedenen Peripherie-Elementen. In vielen Haushaltsgeräten oder Maschinen werden Mikrocontroller für zahlreiche Aufgaben eingesetzt. So findet man diese in Waschmaschinen, Fernsehgeräten, Fernbedienungen, Druckern, aber auch in Fahrzeugen, zum Beispiel für die Steuerung von Fensterhebern, Airbags oder Klimaanlagen. Dieses Unterrichtsmaterial für die Berufsschulfächer Elektrotechnik und Metalltechnik umfasst eine Einführung für die Lehrkraft sowie die Schülerinnen und Schüler in Form einer PowerPoint-Präsentation. Vorbereitet sind sieben Unterrichtseinheiten , für die lediglich pro Schülerin oder Schüler ein Computer mit Internetverbindung benötigt wird. Die Programmier-Aufgaben lassen sich komplett am Bildschirm bearbeiten. Die Unterrichtseinheiten orientieren sich an einem Pkw, der mit Sensoren und Programmen in seinen Funktionen erweitert wird , zum Beispiel durch ein automatisches Abblendlicht, einen Parksensor und eine automatische Abstandsregelung. Vorkenntnisse Die Lernenden benötigen keine Vorkenntnisse in Programmierung. Sie sollten aber über grundlegende Computerkenntnisse verfügen. Didaktische Analyse Das Thema Programmieren ist generell von Relevanz für alle Schülerinnen und Schüler, denn die Digitalisierung bringt immer mehr Automatisierung und Künstliche Intelligenz (KI) in den Alltag der Menschen. Die Schülerinnen und Schüler von heute sollten im Hinblick auf ihre Zukunft grundlegende Zusammenhänge der Programmierung kennen, um die Möglichkeiten aber auch Beschränkungen von Software zu erfassen. Heutiges Programmieren findet kaum noch auf einem leeren Blatt Papier statt. Programmcode wird heute aus dem Internet geladen, analysiert, wiederverwendet und abgeändert. Wichtig ist es, wiederverwendeten Programmcode vollständig verstanden zu haben, um ihn für eigene Projekte zu benutzen. Die Lehrkraft sollte die Schülerinnen und Schüler zu dieser Vorgehensweise anhalten. Mithilfe einer detaillierten Kommentierung des Programmcodes kann sichergestellt werden, dass bei den Lernenden das notwendige Verständnis vorhanden ist. Methodische Analyse Die Lerneinheiten sowie die Lösungen sind auf tinkercad.com vorbereitet und werden auch dort von den Lernenden bearbeitet. Die Lehrkraft kann die Schülerinnen und Schüler bei TinkerCAD als Klasse einladen oder Einzel-Accounts durch die Schülerinnen und Schüler erstellen lassen, die dann auch zuhause genutzt werden können. Weiterhin ist es möglich, die Aufgaben mit realen Bauteilen und Mikrocontrollern zu bearbeiten, weil sowohl Programmier-Code als auch Hardware identisch in der Simulation abgebildet werden. Entsprechende Hardware-Sets sind kostengünstig frei erhältlich. Für Schülerinnen und Schüler mit Vorkenntnissen enthält jede Unterrichtseinheit eine Aufgabe für "Profis". Fachkompetenz Die Schülerinnen und Schüler lernen grundlegende Programmier-Techniken kennen. lernen einen Mikrocontroller (Arduino) kennen. nutzen eine Virtualisierung für Programmierzwecke (tinkercad.com). Medienkompetenz Die Schülerinnen und Schüler nutzen digitale Werkzeuge für die Lösung alltäglicher Aufgaben mithilfe von Elektronik. erkennen Algorithmen und ändern diese für die Lösung der Aufgaben ab. Sozialkompetenz Die Schülerinnen und Schüler lernen selbstorganisiert mit vorbereitetem Material. unterstützen sich gegebenenfalls in Partnerarbeit bei der Lösung der Aufgaben.

Der dritte und letzte Teil der Unterrichtsreihe befasst sich mit den clientseitigen Funktionen der Webanwendung. Diese Funktionen dienen dazu, Zustandsveränderungen des serverseitigen Modells auf die grafische Benutzeroberfläche abzubilden. Der dritte Teil der Unterrichtssequenz hat das Ziel, die clientseitigen Kommunikationskomponenten der Webanwendung (JavaScipt-Skripte) zu implementieren und zu einer funktionsfähigen AJAX-Webanwendung zu integrieren. Dabei handelt es sich um eine sehr anspruchsvolle Aufgabe, die die Lernenden mit vielen vermutlich neuen Aspekten der Sprache JavaScript konfrontiert. Architekturprinzip der Webanwendung Tic Tac Toe Jeder serverseitigen Komponente, die in Form eines PHP-Skripts vorliegt, wird genau ein clientseitiger Partner in Form eines JavaScript-Skripts gegenübergestellt. Diese beiden Teilkomponenten kommunizieren via XMLHttpRequest miteinander, wenn eine Benutzeraktion dies erfordert. Die Integration der Komponenten erfolgt clientseitig mithilfe globaler Variablen. Eine Möglichkeit dies zu tun zeigt die Demoanwendung. Funktionsweise Wenn die Lernenden schließlich die grundsätzliche Funktionsweise der Client-Server-Kommunikation via XMLHttpRequest sowie eine mögliche Form der Umsetzung verstehen, kann die konkrete Implementierung der Komponenten und deren Integration in Angriff genommen werden. Dies soll von den Schülerinnen und Schülern selbstständig mithilfe der zur Verfügung gestellten Informationsquellen durchgeführt werden. Didaktische Reduktion Der Code zur Erzeugung des XMLHttpRequest-Objekts sowie die Methoden für die programmatische Benutzung dieses Objekts innerhalb der clientseitigen Kommunikationskomponenten werden den Lernenden in Form des ContentLoader-Objekts (Datei: contentloader.js) bereitgestellt. Dieses Objekt muss von den clientseitigen Komponenten erzeugt und seine Methoden auf geeignete Art und Weise aufgerufen werden. Als konkretes Beispiel dafür wird die Register-Komponente zur Registrierung neuer Benutzer ebenfalls vorgegeben (Datei: register.js). Ablauf der Unterrichtseinheit Das AJAX-Kommunikationsmodell In dieser Unterrichtsstunde erarbeiten die Schülerinnen und Schüler die Prinzipien der Client-Server-Kommunikation mit dem XMLHttpRequest-Objekt. Implementierung der clientseitigen Komponenten In der letzten Stunde der dreiteiligen Unterrichtssequenz setzen die Schülerinnen und Schüler die AJAX-Webanwendung für das Spiel "Tic Tac Toe" komplett um. Fachkompetenz Die Schülerinnen und Schüler sollen JavaScript-Objekte mit geeigneten Event Handlern entwickeln, die mit den serverseitigen Komponenten via XMLHttpRequest kommunizieren. die Komponenten clientseitig zu einer funktionierenden Anwendung integrieren. Methodenkompetenz Die Schülerinnen und Schüler sollen Informationen in deutsch- und englischsprachigen Internetforen und -tutorien beschaffen, auswerten und für die Entwicklungsarbeit benutzen. englischsprachige Fachtexte übersetzen und verstehen. zur Verfügung gestellte JavaScript-Bibliotheken integrieren und benutzen. Thema AJAX III: Clientseitige Funktionen Autor Dr. Ralf Seliger Fach Web-Programmierung, Informationstechnik, Informatik Zielgruppe Informationstechnische Assistentinnen und Assistenten (Oberstufe) Zeitraum etwa 16 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 III Begriffsdefinitionen und Unterschiede Anhand der Übersetzung des englischen Originaltextes, mit dem der Begriff AJAX von Jesse James Garrett im Jahr 2005 geprägt wurde, sollen sich die Schülerinnen und Schüler die Prinzipien der Client-Server-Kommunikation mit dem XMLHttpRequest-Objekt erarbeiten. Darüber hinaus erläutert der Autor sehr anschaulich die Unterschiede zur herkömmlichen Client-Server-Kommunikation. Registrierung neuer Benutzer Die Komponente Register registriert neue Benutzer in der Datenbank des Servers, wenn der gewünschte Benutzername noch nicht vergeben ist. Diese Komponente wird den Lernenden vorgegeben, damit sie sich anhand einer Codeanalyse die grundsätzliche Funktionsweise und das Zusammenwirken der client- und serverseitigen Kommunikationskomponenten erschließen können. Umsetzung Gegenstand der folgenden Aufgabenstellungen ist die schrittweise Implementierung der clientseitigen Kommunikationskomponenten und ihre Integration zu der vollständigen Webanwendung Tic Tac Toe. Auf den Aufgabenblättern bekommen die Lernenden jeweils Hinweise, mit welchen JavaScript-Sprachelementen das Problem auf jeden Fall lösbar ist. Zur konkreten Umsetzung werden jedoch noch Recherchen auf den einschlägigen Webseiten erforderlich sein. Am einfachsten dürfte die Implementierung der Spiellogik mithilfe einiger globaler Variablen sein (siehe Demoanwendung). Clientseitige Validierung der Formulardaten Es ist nur sinnvoll, Daten zum Server zu übertragen, nachdem diese plausibilisert worden sind. So ist zu überprüfen, ob tatsächlich ein Benutzername und ein Kennwort in das Loginformular eingetragen wurden. In Bezug auf das Registrierungsformular ist zusätzlich zu überprüfen, ob das Kennwort und seine Wiederholung identisch sind. Die clientseitigen Kommunikationskomponenten werden zweckmäßigerweise in der folgenden Reihenfolge implementiert. Die Polling-Komponente ist dabei laufend um zusätzliche Funktionalitäten zu ergänzen. Register (vorgegeben) Login Poller Offer (Poller ergänzen) Accept (Poller ergänzen) Move (Poller ergänzen) ResetGame

Der zweite Teil der AJAX-Unterrichtssequenz befasst sich mit den serverseitigen Elementen der Anwendung. Dabei handelt es um die MySQL-Datenbank und die PHP-Scripte zur Interaktion mit der Datenbank und der Kommunikation mit den Clients. Diese Unterrichtsstunden haben zum Ziel die serverseitigen Komponenten der Webanwendung (MySQL-Datenbank und PHP-Skripte) zu implementieren. Die Basis dafür ist die Demoanwendung, die im Hinblick auf dieses Ziel zu analysieren ist. Die Lerngruppe erarbeitet das Datenmodel (Datenbanktabellen und Tabellenfelder) sowie die Anwendungs- und Kommunikationsfälle (Use Cases), mit denen die Anwendungslogik realisiert werden kann. Verwendung von Skripten Die Implementierung der PHP-Skripte soll von den Lernenden selbstständig mithilfe der zur Verfügung gestellten Informationsquellen durchgeführt werden. Um Zeit zu sparen, bietet es sich hier an, arbeitsteilig vorzugehen: Die zu implementierenden Skripte werden auf Gruppen aufgeteilt. Das ist ohne Lernverlust möglich, weil die Skripte weitgehend gleichartig strukturiert sind. Die Lehrperson kann situationsabhängig entscheiden, ob Teile der Demoanwendung vorgegeben werden. Didaktische Reduktion PHP ist eine mächtige und objektorientierte Programmiersprache, von der im Rahmen dieses Projekts nur ein vergleichsweise kleiner Teil benötigt und behandelt wird. Eine Hilfsklasse namens MySQL_class in der die PHP-Funktionen des MySQL Application Interface (API) gekapselt sind, wird vorgegeben. Diese Klasse erleichtert die Implementierung der erforderlichen Datenbankoperationen. Als konkretes Beispiel für die Anwendung dieser Klasse dient das Skript register.php, mit dem neue Benutzer in der Datenbank registriert werden. Ablauf der Unterrichtseinheit Das Datenmodel der Anwendung Die Schülerinnen und Schüler erstellen eine MySQL-Datenbank, indem sie die serverseitig erforderlichen Daten erarbeiten und entsprechend umsetzen. Serverseitige Kommunikationskomponenten Die Schülerinnen und Schüler lernen verschiedene Komponenten eines PHP-Scripts kennen und versuchen, eine Server-Client-Kommunikation aufzubauen. Implementierung der Kommunikationskomponenten Die Schülerinnen und Schüler programmieren in der PHP-Programmiersprache und beginnen die Funktionsweise des Scripts zu verstehen. Fachkompetenz Die Schülerinnen und Schüler sollen die Funktionalität der Anwendung analysieren und ausgehend von den Ergebnissen eine MySQL-Datenbank entwickeln und implementieren. PHP-Skripte implementieren, die mit der Datenbank und den Clients kommunizieren. Methodenkompetenz Die Schülerinnen und Schüler sollen Informationen in deutsch- und englischsprachigen Internetforen und -tutorien beschaffen, auswerten und für die Entwicklungsarbeit benutzen. eine zur Verfügung gestellte PHP-Klasse für die Interaktion mit der Datenbank integrieren und benutzen. Thema AJAX II: Implementierung der serverseitigen Komponenten 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 II Die Entwicklung des Datenmodells für die Webanwendung Tic Tac Toe bis zur Implementierung der Datenbank gliedert sich in vier Schritte: Analyse der Anwendungsfälle (Use Cases) der Anwendung (Registrierung, Anmeldung, Angebotsabgabe, Angebotsannahme, Spiel, Reset) Erarbeitung der für die Organisation der Anwendungsfälle serverseitig erforderlichen Daten Realisierung in Form einer relationalen MySQL-Datenbank Implementierung der Datenbank Einrichtung Die entwickelte Datenbank wird mithilfe der Webanwendung phpMyAdmin auf dem Server implementiert. Gleichzeitig wird ein Datenbankbenutzer mit den erforderlichen globalen Rechten SELECT, INSERT, UPDATE und DELETE eingerichtet. Falls erforderlich, sind die Lernenden darauf hinzuweisen, dass mit geeigneten Maßnahmen dafür zu sorgen ist, dass sich niemand doppelt anmelden kann. Komponentenerstellung Um die serverseitigen Funktionalitäten der Webanwendung in möglichst übersichtliche, klar voneinander abgegrenzte Pakete beziehungsweise Module zu unterteilen, sollte für jeden Anwendungsfall eine eigene so genannte Kommunikationskomponente erstellt und in Form eines PHP-Skripts implementiert werden. So wird zudem verhindert, dass zu stark divergierende Ergebnisse entstehen. Komponententabelle Aus den erarbeiteten Anwendungsfällen ergeben sich unmittelbar die folgenden Komponenten: Komponente Zweck register.php Registrierung eines neuen Benutzers login.php Anmeldung eines registrierten Benutzers offer.php Veröffentlichung eines Spielangebots accept.php Annahme eines veröffentlichten Angebots move.php Verarbeitung eines ankommenden Spielzugs resetGame.php Zurücksetzen des Zustands der Anwendung poller.php Beantwortung der periodischen Client Requests Polling-Komponente Die Polling-Komponente poller.php ist dafür zuständig, serverseitig diese regelmäßig eintreffenden Requests entgegen zu nehmen, zu verarbeiten und zu beantworten. Darüber hinaus soll sie die Datensätze von Benutzern entfernen, die längere Zeit keine Requests mehr gesendet haben und somit offline sind (Demoanwendung: drei Sekunden bei einem Polling-Intervall von einer Sekunde). Insgesamt ist die Polling-Komponente deutlich aufwändiger und komplexer als die übrigen Komponenten. Für die Client-Server-Kommunikation wird das Hypertext Transfer Protocol (HTTP) verwendet: Die Clients senden Requests zum Server; die Requests werden vom Server beantwortet. Der Server hat keine Möglichkeit, die Clients aktiv anzusprechen und ihnen Daten zu übertragen; er beantwortet ausschließlich Requests. Es ist daher erforderlich, dass die Clients den Server in regelmäßigen Intervallen ansprechen (Polling), um über den aktuellen Zustand der Anwendung informiert zu werden (aktuell angemeldete Benutzer, aktuell vorliegende Spielangebote, Angebotsannahmen, ein neuer Zug des aktuellen Gegners) Nachdem die zu programmierenden Komponenten im Unterricht anhand der Anwendungsfälle identifiziert wurden, sollen die Lernenden mithilfe des folgenden Aufgabenblatts die Input- und Outputdaten sowie die Algorithmen entwickeln, die in den Komponenten zu implementieren sind. Die Datei util.php, welche die Klasse MySQL_class enthält, ist den Lernenden zur Verfügung zu stellen. Assoziative Arrays Ein wichtiger Aspekt der Programmiersprache PHP sind die "Assoziativen Arrays". Im Gegensatz zu nummerisch indizierten Arrays kann man auf die Elemente (Werte beziehungsweise Values) assoziativer Arrays mithilfe von Strings (Schlüssel beziehungsweise Keys) zugreifen. Dies sollte für die Verarbeitung der Datenbankabfragen ausgenutzt werden, weil es die Lesbarkeit des Codes stark verbessert. Testcode für die PHP-Scripte Die korrekte Funktionsweise der Skripte kann während der Entwicklung zum Beispiel mithilfe eines einfachen XHTML-Formulars getestet werden. Das folgende Listing zeigt den XHTML-Code des Testformulars für das Anmeldeskript login.php: Nach Absendung des Formulars zeigt ein Blick in die Datenbank mit phpMyAdmin sowie auf das zurück gelieferte XML-Dokument, ob das Skript login.php wie gewünscht funktioniert. Für die anderen Skripte ist das Formular entsprechend zu modifizieren. Informationsblätter Als konkretes Beispiel für die Implementierung kann das ausführlich kommentierte Skript register.php herangezogen werden, das auf dem folgenden Infoblatt exemplarisch abgedruckt ist und auf dem auch die Hilfsklasse MySQL_class dokumentiert wird. Programmierung Als Konsequenz der Tatsache, dass die Client-Server-Kommunikation mithilfe von AJAX (Asynchronous JavaScript and XML) realisiert wird, müssen die serverseitigen Komponenten XML-Dokumente produzieren und zurückliefern. Als Root-Element des XML-Dokuments wird in der Demoanwendung in allen Skripten verwendet. Grundsätzlich ist die Namenswahl natürlich beliebig. Es ist jedoch auf Konsistenz zwischen Client und Server zu achten. Hinweis Wenn ein anderer Name für den Root-Tag gewählt werden sollte, muss dies auch in der Datei util.php geändert werden. Innerhalb der XML-Elemente sind etwa unterschiedliche Benutzernamen durch definierte Zeichen wie zum Beispiel senkrechte Striche ( | ) voneinander zu trennen, damit sie clientseitig wieder voneinander getrennt werden können.

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.

Die Unterrichtseinheit zu Präsentationsregeln in Vorträgen vermittelt Regeln zur Präsentation mit PowerPoint. Die Lernenden werden in die Lage versetzt, Arbeitsinhalte ansprechend vorzustellen oder in Diskussionen Meinungsbildungsprozesse zu initiieren - ohne dabei den Sachkern zugunsten von technischen Effekten zu vernachlässigen.Bei manchem Vortrag entsteht der Eindruck, dass PowerPoint exzellent eingesetzt, aber damit im Grunde wenig dargestellt wird. Hauptsache die Verpackung stimmt und die Präsentation ist mit Animationen gespickt. Die Fähigkeit, Fachinhalte oder Ergebnisse zielgruppenorientiert zu strukturieren und zu visualisieren, ist aber eine bedeutende Kompetenz. Unter Verwendung einer Standardanwendungssoftware erwerben die Lernenden in diesem Lernarrangement allgemeine methodische Fähigkeiten, Sachinformationen in einer computergestützten Form aufzubereiten und vorzutragen. Die Methodik des richtigen Präsentierens und Vortragens wird dabei selbst zum Gegenstand der Aufgabenstellung. Die Lerngruppe erarbeitet auf der Basis von Internetrecherchen Präsentationsregeln, die bei einer gelungenen Themendarstellung beachtet werden sollen.Das didaktische Verlaufsmodell der Stunde ist eine handlungsorientierte Lernschleife, in die eine Lernspirale eingebettet ist. Die Lernspirale gliedert das Thema in Arbeitsinseln, welche einzeln in mehrstufigen EVA-Aktivitäten bearbeitet werden. Dabei wird das Thema unter Verwendung unterschiedlicher Zugänge wie Lesen oder freies Vortragen bearbeitet. Die Verwendung der Lernspirale erlaubt die wiederholte Beschäftigung mit dem Lerngegenstand unter Nutzung verschiedener Sozialformen (Einzelarbeit, Partnerarbeit, Plenum) und Sinneskanäle. Das selbstständige Erarbeiten der Inhalte steigert die Akzeptanz und verbessert die Nachhaltigkeit des Lernens. Die Unterrichtseinheit lässt sich problemlos als Übung in die Erarbeitung einer Präsentation zu Fachthemen integrieren. Ferner können die Erkenntnisse fächerübergreifend Verwendung finden, wenn Partnerarbeiten oder Referate zu präsentieren sind. Unterrichtsablauf und Einsatz der Materialien Hier finden Sie detaillierte Hinweise zur Unterrichtseinheit "Präsentationsregeln in Vorträgen" und zum Einsatz der Arbeitsmaterialien. Fachkompetenz Die Schülerinnen und Schüler erweitern ihre kognitive Kompetenz, indem sie Wissen über gelungene Präsentationen erarbeiten und ausgewählte Aspekte softwarebasiert visualisieren. Methodenkompetenz Die Schülerinnen und Schüler entwickeln die Fähigkeit, Informationen im Internet zu recherchieren, eine Auswahl von Quellen vorzunehmen und die zentralen Aspekte zusammenzufassen. erarbeiten Präsentationsregeln und üben sich darin, die erworbenen Einsichten in einem Vortrag an Dritte weiterzugeben. erweitern ihre Visualisierungskompetenz und IT-Methodenkompetenz im dosierten und gezielten Einsatz von PowerPoint zur Darstellung von Sachinformationen. In einem problematisierenden, hinführenden Einstieg wird eine Präsentation gezeigt, die in mancherlei Hinsicht gegen die Regeln einer guten Präsentation verstößt. Die Eindrücke der Schülerinnen und Schüler dienen als Einstieg, um sie in der Analyse dafür zu sensibilisieren, was eine gute von einer schlechten Präsentation unterscheidet. Im Folgenden erhält die Klasse den Arbeitsauftrag. Dieser enthält unterschiedliche Arbeitsphasen, die sukzessive durchlaufen werden. Es empfiehlt sich deshalb, das Arbeitsblatt so zu falten, dass jeweils nur der aktuelle Arbeitsauftrag zu lesen ist, oder die Arbeitsphasen einzeln in die Lerngruppe zu geben. Die Schülerinnen und Schüler recherchieren zunächst im Internet zum Thema Präsentationsregeln. Alternativ können Links oder Dokumente vorgegeben werden. Sie sichten gefundene Informationen und wählen Dateien aus, mit denen sie im Folgenden weiterarbeiten möchten. Danach halten die Lernenden in dieser Einzelarbeitsphase fünf Regeln fest, die aus ihrer Sicht für eine gelungene Präsentation wesentlich sind. Zum Abschluss bereiten sie einen Kurzvortrag für die zweite Arbeitsphase vor. Dazu können sie sich anhand der Methodenkarte über wichtige Aspekte eines Kurzvortrags informieren. In der zweiten Phase wird in Tandems gearbeitet. Die Lernenden setzen sich im wechselseitigen Vortrag mit den Inhalten des Unterrichts aktiv auseinander. Sie bearbeiten den Lerninhalt in einem sinnstiftenden Unterrichtsgespräch, in dem Fachinhalte in eigenen Worten zusammengefasst und vorgetragen werden. Falls ein Tandem mit den bisher gefundenen Ergebnissen nicht zufrieden ist, können die verwendeten Informationsquellen erneut bearbeitet oder weitere Informationen recherchiert werden. Im Anschluss erstellen die Teams eine Kurzpräsentation mit fünf Regeln. Dabei besteht die Möglichkeit, zusätzlich auf die Methodenkarte zum Thema Präsentation zurückzugreifen. Die Teams präsentieren im Anschluss ihre fünf Regeln zur gelungenen Präsentation. Die Lernenden sind aufgefordert, dabei die Hinweise für einen Vortrag sowie die von ihnen angeführten Regeln zu beachten. In dieser Unterrichtsphase können die ausgewählten Regeln miteinander verglichen und der Auswahlprozess thematisiert werden. Mit den auftretenden Fragen bieten sich Anknüpfungspunkte zur Stundenreflexion, in der die Stärken und Schwächen der PowerPoint-Präsentationen thematisiert und daran Impulse zur Verbesserung von softwarebasierten Präsentationen erarbeitet werden. Die Ergebnisse der Stunde werden darüber gesichert, dass jeder Schüler die Methodenkarte sowie die Präsentation mit den Präsentationsregeln zur Verfügung hat. TIM Techniken Ideen Materialien, Heft 1 2006, Leitfaden für eine gute Präsentation Klippert, H., Kommunikationstraining, Beltz: Weinheim und Basel Mattes, W., Methoden für den Unterricht, 75 kompakte Übersichten für Lehrende und Lernende, Schöningh: Braunschweig, Paderborn und Darmstadt

Die Unified Modeling Language (UML) ist eine standardisierte Sprache zur Modellierung von Software und anderen Systemen. Als Modellelement bestimmt eine Assoziation das Verhältnis von Klassen. Die folgende Unterrichtseinheit vermittelt anhand solcher Assoziationen wichtige statische Elemente zur Software- und Datenbankentwicklung. Bei der Entwicklung komplexer Software wird eine gute Planung notwendig und so ist es inzwischen zum Standard geworden, objektorientierte Programme und Datenbanken in UML zu planen und zu dokumentieren. Binäre Assoziationen dienen in UML-Klassendiagrammen der Abbildung von Interaktionen zwischen Klassen: Welche Klasse muss also welche Instanzen von anderen Klassen enthalten? Die Unterrichtsstunde veranschaulicht dies am konkreten Beispiel des Auftrags eines Mainboardherstellers zur Abbildung seiner Kundenbeziehungen . In der Unterrichtsstunde werden durch die Assoziationen wichtige statische Elemente zur Software- und Datenbankentwicklung vermittelt. Im Anschluss bieten sich die Behandlung der Generalisierung, der Aggregation und der Komposition an. Die Schülerinnen und Schüler arbeiten sich in die Darstellung von Assoziationen in Expertengruppen ein. In Stammgruppen werden die Informationen aus den Expertengruppen weitergegeben. Unterschiedliche Leistungsstände werden in den Gruppen kompensiert. Die Darstellung der Leserichtung, der Eigenschaft und der Einschränkung ist in "Objecteering" nicht direkt umsetzbar. Die Navigierbarkeit ist auch in UML nicht eindeutig umsetzbar. Diese offenen Probleme sind bewusst eingeplant, um Diskussionen anzuregen. Problematisch ist die Arbeitsteilung in den Expertengruppen: Auf dem Arbeitsauftrag wird daher der bewusste Informationsaustausch gefordert, damit jede Expertin in der Stammgruppe allen anderen Gruppenmitgliedern die Ergebnisse vermitteln kann. In jeder Stammgruppe wird nur je ein PC verwendet, um die Aufmerksamkeit zu kanalisieren. Obgleich die Darstellung der Assoziationen in "Objecteering" vom UML-Standard abweicht, wird die Anwendung genutzt, um einen Praxisbezug herzustellen und Detailfragen zu diskutieren. Unterrichtsablauf und Einsatz der Materialien Der Ablauf der Unterrichtsstunde und die Einbindung der Materialien werden hier von der Problemstellung bis zur Anknüpfungsmöglichkeit der Folgestunde erläutert. Die Schülerinnen und Schüler können eine Assoziation mit Leserichtung, Rolle, Sichtbarkeit, Eigenschaft, Einschränkung und Navigierbarkeit in einem UML-Klassendiagramm (Version 2.0) darstellen und erläutern. vertiefen die Schreibweise und Darstellung einer Assoziation mit Assoziationsnamen und Multiplizität in einem UML-Klassendiagramm (Version 2.0). können in "Objecteering" eine Assoziation mit Assoziationsnamen, Multiplizität, Rolle und Sichtbarkeit umsetzen. Titel Assoziationen in UML-Klassendiagrammen - Auftrag eines Mainboardherstellers zur Abbildung seiner Kundenbeziehungen (Gruppenpuzzle) Autor Alexander Biehounek Fächer Mathematik, Technische Informatik Zielgruppe Technisch orientierte Bildungsgänge Zeitumfang 1 Unterrichtsstunde Technische Voraussetzungen Lehrerrechner mit Beamer, ein Computer pro 2-3 Schülerinnen und Schüler, mindestens Word 2000, Acrobat Reader (kostenloser Download), Objecteering , Lernplattform (z. B. lo-net² , Moodle) Planung Assoziationen in UML-Klassendiagrammen Der Einstieg in den Unterricht erfolgt über den Auftrag eines Mainboardherstellers zur Abbildung seiner Kundenbeziehungen in UML (Version 2.0) und in "Objecteering". Die Schülerinnen und Schüler lesen das Schreiben mit dem Anhang und formulieren die Problemfrage in fachlichem Zusammenhang. Methodik Zur Bearbeitung in Gruppen wird die neue Methode "Gruppenpuzzle" kurz vorgestellt. Auf diese Weise wird die Differenzierung und Zusammenstellung deutlich. Die Schülerinnen und Schüler arbeiten in den Stammgruppen regulär zu dritt, in den Spezialistengruppen regulär zu viert. Da aus jeder Stammgruppe mindestens ein Mitglied in eine Spezialistengruppe entsendet wird, muss die Anzahl der Gruppen im Vorfeld geplant werden. In der Stammgruppe erhalten die Lernenden zunächst jeweils einen Arbeitsauftrag. Danach sollen sich die Schülerinnen und Schüler aus jeder Stammgruppe eine Spezialistenrolle suchen. In der Spezialistengruppe erhalten sie ein Arbeitsblatt und einen Lösungsvordruck. Mit diesem kann der Arbeitsauftrag für diese Spezialistengruppe als Transfer gelöst werden. In den Stammgruppen werden die Ergebnisse der Spezialisten ausgetauscht und auf einem Lösungsvordruck eingetragen. Arbeitsblätter In den folgenden Downloads finden Sie die Konkretisierung des Auftrags, die detaillierte Zusammenstellung von Assoziationen und ein Lösungsvordruck zur vereinfachten Darstellung der Beziehungen. Exemplarisch stellt eine Stammgruppe ihre Lösung am Whiteboard und über den Beamer vor. Abweichende Ergebnisse der anderen Stammgruppen werden besprochen. Die Schülerinnen und Schüler notieren die entwickelten Lösungen. Zur Übung und Festigung des neu Erlernten sollte eine Hausaufgabe aufgegeben werden. Für die Folgestunde bietet sich die Behandlung der Generalisierung, der Aggregation und der Komposition in UML-Klassendiagrammen an.

Die angemessene Gestaltung einer Präsentation ist gar nicht so einfach. Eine heikle Gestaltungsfrage ist stets die Einbindung animierter Schrift- und Grafik-Elemente. Hier kann man nämlich leicht zu viel des Guten tun. Der Entwurf einer Präsentation mit PowerPoint gehört zum Standard-Know-how kaufmännisch orientierter Berufe. Der steigende Legitimierungsbedarf des eigenen Handelns in Unternehmen und auch von außen macht es immer häufiger erforderlich, über Präsentationen eigene Positionen zu verdeutlichen. Der erfolgreiche Umgang mit Präsentationsmedien ist deshalb eine wichtige Befähigung im beruflichen Alltag eines kaufmännischen Mitarbeiters. Die Unterrichtsstunde kann Teil einer Unterrichtsreihe sein, in der Schülerinnen und Schüler arbeitsteilig zu "Grundlagen der EDV" eigene Präsentationen erstellen. Die vorgestellte Unterrichtsstunde kann aber problemlos in anderen Kontexten genutzt werden. Die Stunde dient dazu, Gütekriterien für den Einsatz von Animationen zu entwickeln und umzusetzen. Die erworbenen Fähigkeiten und Fertigkeiten sollen in der Folgestunde auf von Schülern und Schülerinnen selbst erstellte Präsentationen angewendet werden. Die Stunde ist so konzipiert, dass die Eigenständigkeit der Schülerinnen und Schüler, Informationen aufzunehmen und zielorientiert zu verarbeiten, gestärkt wird. Ablauf des Unterrichts und Einsatz der Materialien Voraussetzung für eine erfolgreiche Durchführung der Stunde ist die grundlegende Kenntnis über die Erstellung von Präsentationen in MS PowerPoint (Erstellung von Präsentationen mit der Folienlayoutfunktion, zwischen Ansichten wechseln, Folien verschieben, kopieren, löschen). Die Schülerinnen und Schüler erarbeiten sich Gütekriterien für den Einsatz von Animationen und können diese bei der Gestaltung einer Präsentation anwenden. erkennen, wann Animationen angemessen oder unangemessen sind. lernen mit einem MS Office-Tool umzugehen. trainieren ihre Fähigkeit, sich aufgrund schriftlicher Anweisungen eine Anwendungstechnik anzueignen. sammeln erste Erfahrungen, wie man mit einem Beamer angemessen präsentiert. Titel Präsentationen sinnvoll animieren Autorin Dr. Gabriele Rother Fächer Wirtschaftsinformatik, Informationswirtschaft, Organisationslehre Zielgruppe Kaufmännisch orientierte Bildungsgänge Zeitumfang Eine Unterrichtsstunde Technische Voraussetzungen Mindestens ein Computer für drei Lernende, MS PowerPoint 2003, Beamer Planung Verlaufsplan Animation Der Einstieg in den Unterricht erfolgt über eine schlecht gestaltete Präsentation (Präsentation in action.ppt). Die Präsentation soll den Schülern und Schülerinnen verdeutlichen, dass diese Art der Animation nicht geeignet ist, um angemessen Inhalte zu transportieren. Die Schüler und Schülerinnen werden motiviert, ihre Kritik an der vorgestellten Präsentation zu äußern. Sie halten ihre Beiträge an der Tafel fest. Die Schülerinnen und Schüler arbeiten in dieser Phase in Dreiergruppen. Sie erhalten ein Arbeitsblatt mit Informationen zu einer der hier ausgewählten Animationsmöglichkeiten. Ziel ist es, dass die Schüler und Schülerinnen eine Präsentation (Textanimation.ppt, Animationsschema.ppt, Folienübergang.ppt) mithilfe vorgegebener Informationen animieren. Die Klasse bearbeitet die Aufgaben arbeitsteilig und in Parallelgruppen. Eine weitere Aufgabe besteht darin, Tipps zur erfolgreichen Gestaltung von Animationen auf der Rückseite des Arbeitsblattes zu sammeln. Drei Gruppen stellen ihre jeweiligen Ergebnisse am Beamer vor. Nach der Darstellung ihrer animierten Präsentation benennen diese Gruppen Gütekriterien für die Animation von Präsentationen. Diese Kriterien werden an der Tafel festgehalten. Die Schülerinnen und Schüler tragen die gesammelten Ergebnisse auf der dafür vorgesehenen Rückseite ihres Arbeitszettels ein. Die Stunde kann in einer Hausarbeit münden, wenn die Schülerinnen und Schüler eigene Präsentationen ausarbeiten. Der Arbeitsauftrag lautet, Ideen zu erarbeiten, wie die eigene Präsentation auf der Basis der entwickelten Gütekriterien angemessen gestaltet werden kann. In der Folgestunde sollen die Schüler und Schülerinnen gemäß des Gruppenmixverfahrens (jeweils ein Schüler/eine Schülerin aus Gruppe 1, 2 und 3) ihre Ideen für eine gute Präsentation in einer eigenen Präsentation verarbeiten.

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.

Die Gestaltung von Internetseiten bietet heute viele Möglichkeiten - eine gestalterische Form sind Imagemaps (Grafiken mit Markierungen und verweisenden Bereichen). Die Schülerinnen und Schüler sollen den Internetauftritt des Modellunternehmens "Rand OHG" komplettieren, indem sie aus dem Organigramm eine Imagemap erstellen. Imagemaps sind Grafiken, die in anklickbare Bereiche aufgeteilt sind. Die anklickbaren Flächen werden Hot-Spots genannt und dem User verdeutlicht, indem der Mauszeiger zur Hand wird. Wird ein Hot-Spot angeklickt, erfolgt eine Aktion, in der Regel wird dadurch einem Link gefolgt. Dies erhöht die Möglichkeit ansprechende Seiten zu erstellen. Die Form der Hot-Spots kann rund oder eckig sein, je nachdem, wie sie programmiert sind. In der Unterrichtseinheit erstellen die Schülerinnen und Schüler ein Imagemap und gestalten darüber die Navigation zwischen verschiedenen HTML-Dokumenten. Man unterscheidet grundsätzlich clientseitige und serverseitige Imagemaps. Bei den clientseitigen Imagemaps übernimmt der Browser die Auswertung der Koordinaten und lädt das Dokument, auf das die Hot-Spot verweist. Bei den serverseitigen Imagemaps werden die Koordinaten an einen Server übermittelt, der die Auswertung übernimmt. Da in der Praxis überwiegend clientseitige Imagemaps eingesetzt werden, wird im Unterricht auschließlich dieses Prinzip behandelt. Mit dem Modellunternehmen Rand OHG wird hautpsächlich im Fach Informationswirtschaft gearbeitet. Für die Arbeit in dieser Unterrichtsstunde werden alle notwendigen Daten zur Rand OHG vorgegeben. Unterrichtsablauf Der Ablauf der Unterrichtsstunde und die Einbindung der Arbeitsmaterialien werden hier vom Einstieg bis zur Sicherung erläutert. Die Schülerinnen und Schüler sollen erkennen, dass Imagemaps eine weitere Möglichkeit der Navigation zwischen und innerhalb von HTML-Dokumenten darstellen. eine Grafik als Imagemap in ihrem HTML-Dokument kennzeichnen. mithilfe eines Grafikprogramms die Koordinaten für die Bereiche (Hot-Spots) ermitteln, die den Benutzer zu HTML-Dokumenten verweisen. diese Hot-Spots definieren und entsprechende Verweise einrichten. die Imagemap in ihr HTML-Dokument einbinden. selbstständig am PC arbeiten und dabei alle nötigen Tools benutzen (Editor, Internet Explorer, Grafikprogramm). Thema Erstellen von Imagemaps mit rechteckigen Hot-Spots Autor Patrick Uhlemann Fach Wirtschaftsinformatik, Organisationslehre Zielgruppe Zweijährige Berufsfachschule für den Bereich Wirtschaftsinformatik, Informationstechniker, Kaufleute Zeitumfang 1 Unterrichtsstunde Technische Voraussetzungen Computer mit Internetzugang, Editor, Bildbearbeitungsprogramm Planung Erstellen von Imagemaps Zuber J.: HTML 4.0 in der Schule - Arbeitsbuch, 4. Auflage, Troisdorf 2002. Falls im Computerraum kein Beamer zur Verfügung steht, können die Folien und Arbeitsschritte über den Lehrer-PC auf den Schülerbildschirm dargestellt werden. Gleichzeitig ermöglicht eine u-förmige Anordnung der PC-Arbeitsplätze die Kommunikation mit und in der Lerngruppe. Gegenstand der geplanten Unterrichtsstunde ist der Internetauftritt der Rand OHG. In der Unterrichtsstunde geht es um die Verknüpfung der einzelnen Abteilungsseiten (Leitung.htm, Einkauf.htm, Verkauf.htm, Lager.htm, Fibu.htm und Verwaltung.htm) mit der Seite Abteilungen.htm. Inhalt dieser Seite ist ein Organigramm der Rand OHG (imgorga.jpg), das in der geplanten Stunde als Abbildungsplan (Imagemap) genutzt wird. Die einzelnen Abteilungsseiten enthalten Informationen über die Mitarbeiter und die Aufgaben der jeweiligen Abteilungen. Für die geplante Unterrichtsstunde ist es erforderlich, dass diese sieben Seiten vorliegen. Sie können entweder von der Lehrkraft vorbereitet und verteilt oder von den Schülerinnen und Schülern in vorhergehenden Stunden erstellt werden. Sowohl die sieben HTML-Seiten (fragmentarisch, das heißt ohne Links und Imagemap), als auch ein Arbeitsauftrag zur Erstellung durch die Lernenden (imagemap_arbeitsauftraege.rtf) stehen hier als Download zur Verfügung. Als Einstieg dient eine Abbildung (Folie) einer möglichen Verweisstruktur (imagemap_sitemap 1.ppt) für den Internetauftritt der Rand OHG. Anhand der Folie wird diskutiert, wo die bereits erstellten oder zur Verfügung gestellten Seiten zu den einzelnen Abteilungen am sinnvollsten anzuordnen sind. Imagemap_sitemap_2.ppt zeigt das Ziel der Stunde, nämlich die Verlinkung der einzelnen Abteilungsseiten mit der Seite Abteilungen.htm. Anschließend wird darüber diskutiert, wie die einzelnen Abteilungsseiten mit der Seite Abteilungen.htm am sinnvollsten zu verlinken sind. Hierzu zeigt die Lehrkraft ein Beispiel der Seite Abteilungen.htm. Am sinnvollsten erscheint hier eine Verknüpfung mit Hilfe eines Imagemap. Dabei werden die im Organigramm als Kästchen dargestellten Abteilungen selbst zum Link. Die grundsätzliche Vorgehensweise bei der Erstellung von Imagemaps wird im gelenkten Unterrichtsgespräch erörtert, die Schülerantworten werden an der Tafel festgehalten. Die Schülerinnen und Schüler erstellen ein Imagemap und verlinken so die einzelnen Seiten. Zur Anleitung und Unterstützung erhalten sie ein Arbeits- und Informationsblatt. Zur Sicherung führen einige Schülerinnen und Schüler ihre Lösungsschritte und Quelltexte vor.

In dieser Unterrichtseinheit zu den Grundlagen der Typografie lernen die Schülerinnen und Schüler, wie sie durch eine ansprechende Formatierung bei der Gestaltung einer Webseite die Botschaft der Texte adäquat unterstützen und somit die Nutzerfreundlichkeit erhöhen können.Das "Layouten" am Computer eröffnet umfassende typografische Gestaltungsmöglichkeiten, die allerdings bei falschem Einsatz schnell zu einer schlechten Lesbarkeit von Texten führen können. Diese Unterrichtseinheit führt in die Grundlagen der Typografie ein und sensibilisiert die Schülerinnen und Schüler für typografische Fragen.Die Grundlagen der Typografie erarbeiten sich die Schülerinnen und Schüler selbstständig im Rahmen eines Gruppenpuzzles. Ablauf der Unterrichtseinheit Diese Unterseite erläutert den Ablauf der Unterrichtseinheit "Die Grundlagen der Typografie", außerdem können Sie dort die Arbeitsblätter einzeln anklicken und herunterladen. Die Schülerinnen und Schüler erklären typografische Grundbegriffe. unterscheiden Schriftarten und nennen Auswahlkriterien. beschreiben das Raster als Hilfsmittel im Layout. nennen Regeln für den Schriftsatz und wenden sie an. Im Rahmen eines Gruppenpuzzles werden die Schülerinnen und Schüler zunächst in vier Gruppen eingeteilt: "Typografische Grundbegriffe", "Schriftarten und Schriftauswahl", "Typografie im Raster", "Typografischer Knigge". Nach dem Lesen der Unterlagen in Einzelarbeit treffen sich die Schülerinnen und Schüler mit demselben Thema in einer Expertenrunde und klären offene Fragen. Dann werden Unterrichtsgruppen gebildet, in denen je ein Experte oder eine Expertin für ein Thema sitzt. In diesen Gruppen stellt jeder Experte sein Themengebiet vor und beantwortet Fragen. Zur Ergebnissicherung wird das Informationsblatt "Typografie" an alle Schülerinnen und Schüler ausgegeben. Zur Vertiefung und Anwendung steht das Arbeitsblatt "Typografie: Übungen" zur Verfügung. Als Einstieg in das Unterrichtsthema kann anhand von Zeitschriften oder Webseiten die Bedeutung der Typografie verdeutlicht werden. Dabei kann zum Beispiel kurz überlegt werden, warum bestimmte Schriften in bestimmten Größen gewählt wurden (zum Beispiel in der Bild-Zeitung im Vergleich zu anderen Zeitungen).