5.4 Wiederholungsfragen
Werbung
dokumentation gebrauchsanweisung EINFÜHRUNG CSS http://www.sudy.at.tt/css mag. gabriele s. sudy bhak wien 10 INHALT 1 ZIELSETZUNG ........................................................................................... 3 2 EINGANGSVORAUSSETZUNGEN ............................................................... 3 3 EINSATZ ................................................................................................... 4 4 METHODIK UND DIDAKTIK ...................................................................... 4 5 AUFBAU .................................................................................................... 5 5.1 OPTIMIERT FÜR .......................................................................................... 5 5.2 NAVIGATION .............................................................................................. 5 5.3 BEISPIELE ................................................................................................. 6 5.4 WIEDERHOLUNGSFRAGEN .......................................................................... 10 5.4.1 HOT-POTATOES ........................................................................................... 10 5.4.1.1 Lückentexte ........................................................................................... 10 5.4.1.2 Zuweisungsabfragen .............................................................................. 11 5.4.1.3 Kreuzworträtsel ..................................................................................... 11 5.4.1.4 Multiple Choice-Fragen ........................................................................... 12 5.4.2 FLASH-QUIZ ............................................................................................... 13 5.4.3 PRAKTISCHE ÜBUNGEN .................................................................................. 15 5.5 TIPPS UND HILFE...................................................................................... 16 6 GEBRAUCHSANWEISUNG ....................................................................... 17 1 Zielsetzung CSS ist eine Ergänzungssprache von HTML und dient der Erstellung von Webseiten. Hiermit soll garantiert werden, dass eine klare Trennung von Strukur (HTML) und Formatierung bzw. Design (CSS) erreicht wird. Schafft man diese Forderung hat man: - ein W3-konformes Webdokument erstellt, das rasch und einfach erzeugt und mit wenigen Handgriffen auch nachträglich verändert werden kann. Voraussetzung für eine erfolgreiche Umsetzung ist allerdings immer eine ausführliche und detaillierte Planung der Webumsetzung. Mit nachfolgendem Programm können und sollen sich Schüler in eigenständiger Form alle Kenntnisse über die Formatierungsmöglichkeiten mittels Cascading Style Sheets (CSS) aneignen. Das Programm (die Website) wurde erstellt, da es derzeit noch kein Schulbuch gibt, dass dieses Thema ausführlich behandelt. Diverse Internetsseiten, anhand denen Schüler dieses Thema erarbeiten könnten, sind meist ohne Überprüfung des Wissens (Tests) und teilweise sehr nüchtern und ohne Schulbezug aufgebaut. Das Programm ist weiters schon „schülererprobt“, da ich es selbst schon im Unterricht eingesetzt habe. Das Programm ist in folgende Hauptkapitel unterteilt: - Einführung Einbindung Schrift Listen Hintergrund Größe Rahmen Links Position Tipps und Hilfe Jedes Kapitel ist in weitere Unterkapitel zerlegt worden. Die Schüler können sich Kapitel für Kapitel leicht erarbeiten, da der Aufbau immer der selbe ist. Nach einer kurzen theoretischen Einleitung wird anhand von Beispielen und Musterlösungen jede Formatierungsanweisung anschaulich erklärt. Um so viele Sinne wie möglich zu aktivieren und die Lernfähigkeit zu erhöhen wurden auch vertonte Videos eingebaut, in denen jeder einzelne Schritt genau vorgeführt und dokumentiert wird. Zur Überprüfung der Kenntnisse sind zum Schluss jedes Kapitels interaktive Tests (mit sofortiger Rückmeldung) und Anweisungen für Übungsaufgaben eingebaut. 2 Eingangsvoraussetzungen Die Schüler müssen bereits sehr gute HTML-Kenntnisse besitzen, da es sich bei CSS um eine Ergänzungssprache von HTML handelt. Das Programm wurde für den Internet Explorer optimiert. Auch bei niedriger Auflösung (800 x 600) ist es noch gut lesbar und einsetzbar. 3 Einsatz Zum Erarbeiten ist ein Internetzugang und entsprechender Browser notwendig. Für die Übungen benötigt man einen einfachen Editor (zB. Windows-Editor unter Start – Programme – Zubehör, der standardmäßig mit dem Betriebssystem ausgeliefert und installiert wird). Die Videos sind als Flash-Datei abgespeichert und vertont. Man benötigt daher einen Flashplayer (ist in den neueren Browsern schon integriert, er wird ansonsten auch gratis von Macromedia zur Verfügung gestellt www.macromedia.com) und Lautsprecher bzw. im Klassenverband sind Kopfhörer zu empfehlen. Die Referenzlisten im letzten Kapitel sind als pdf-Files abgespeichert, man benötigt daher einen Acrobat-Reader. In folgenden Jahrgängen bzw. Gegenständen ist das Programm einsetzbar: II. Jahrgang Handelsakademie Digital Business im Gegenstand Telekommunikation, Multimedia und Contentmanagement. III. Jahrgang Handelsakademie Informationstechnologie im Gegenstand Telekommunikation, Multimedia und Contentmanagement. III. Jahrgang Handelsakademie im Gegenstand Wirtschaftsinformatik oder IV. Jahrgang Handelsakademie im Gegenstand Wirtschaftsinformatik und Organisation. I. Semester Kolleg Digital Business und Kolleg Informationstechnologie. 4 Methodik und Didaktik Die Website ist zum Selbststudium im Rahmen eines E-Learning-Systems konzipiert. Den Schülern sollte zu Beginn zumindest eine kurze Einführung und Erklärung zum Thema E-Learning gegeben werden, um die Vorteile und Notwendigkeit von E-Learning aber auch die kritische Reflexion zu fördern. Für die gesamte Website können 10 bis 15 Unterrichtseinheiten eingeplant werden. Es können Teile auch als Hausübung vergeben werden. Man sollte den Schülern ein Zeitlimit geben (zB in 2 Stunden muss das erste Kapitel erarbeitet sein) und danach sollte zur Förderung der Leistung der Schüler und zur Förderung der Motivation eine Überprüfung der Kenntnisse stattfinden. Es ist zu empfehlen, die Schüler darauf hinzuweisen, dass sie sich selbst Notizen machen und die wichtigsten Formatierungsanweisungen selbst mit dokumentieren (dient auch der Festigung des Lehrstoffs) sollten. Außerdem sollten die einzelnen genannten Beispiele auch aktiv von den Schülern nachgebildet werden. Um CSS in Reinform zu erlernen wird der Einsatz des Windows-Editors empfohlen (Start – Programme – Zubehör – Editor). 5 Aufbau 5.1 Optimiert für Das Programm ist optimiert für den Internet Explorer 6.0 und auch bei einer Auflösung von 800 x 600 noch gut lesbar. Zur Bearbeitung ist ein Browser notwendig, Bilder und Javascript sollten nicht unterdrückt sein. Die Referenzliste ist als pdf-file abgespeichert und zur Betrachtung ist der Acrobat Reader notwendig. Für die Videos benötigt man einen Flashplayer und Kopfhörer. 5.2 Navigation Der Schüler kann jedes einzelne Kapitel und die entsprechenden Unterkapitel mit Hilfe der linken Navigationsleiste aufrufen. Weiters werden die Schüler auch von Seite zur Seite weitergeführt. An jedem Seitenende kann man einen Schritt vor und auch wieder einen Schritt zurück springen. Die Theorie ist recht einfach und für Schüler verständlich formuliert. Damit man weiß, wo man sich befindet, ist jede Seite mit einer klaren Überschrift versehen ([Kapitel] [Unterkapitel]). Ist die Seite zum Scrollen, so befinden sich dazwischen immer wieder rote Pfeile auf der rechten Seiten für den direkten Weg zum Seitenbeginn. 5.3 Beispiele Für jede Formatierung wird mindestens ein Übungsbeispiel mit Quelltext (doppelt eingerahmt) und die entsprechende Vorschau des Ergebnisses, sprich Musterlösung (Hier sehen Sie das Ergebnis) angeboten. Ergebnis (es öffnet sich ein kleines neues Browserfenster mit der Lösung) Weiters werden zum besseren Verständnis dazwischen auch kleine Videosequenzen eingesetzt (Videokamera anklicken), in denen der Schüler den gesamten Vorgang am Bildschirm beobachten und verfolgen kann. Jeder Schritt wird außerdem von einer Frauenstimme dokumentiert. Klickt man auf die Kamera öffnet sich ein kleines neues Browserfenster und eine „unsichtbare“ Hand schreibt den Quelltext, man ist also „live“ dabei und außerdem wird jeder Schritt genau erklärt. Nachdem der Quelltext geschrieben und erklärt wurde, wird er abgespeichert und der Schüler sieht auch sofort das Ergebnis. Zum Schluss wird im Video noch einmal in den soeben erstellten Quelltext gewechsel, der Schüler kann sich den Code genau betrachten und erhält zusätzliche Informationen. Der Schüler ist aufgefordert die Beispiele nachzubilden und selbst auszuprobieren. 5.4 Wiederholungsfragen Am Ende jedes Kapitels (bzw. bei der Schriftenformatierung auch dazwischen) befinden sich zahlreiche interaktive Wiederholungsfragen bzw. Tests. Dabei handelt es sich teilweise um „hotpotatoes“ Übungen mit sofortiger Überprüfung der Eingaben, um Flash-Quiz-Dateien mit einer Ergebnisliste zum Schluss und um aktive eigenen Übungsaufgaben für die Schüler. 5.4.1 Hot-Potatoes 5.4.1.1 Lückentexte Der Schüler füllt die Lücken aus und mit einen Klick auf Check, wird seine Lösung überprüft. Falls er die Aufgabe überspringen möchte, kann er auch sofort zur nächsten Aufgabe springen. Check: 5.4.1.2 Zuweisungsabfragen Bei den Zuweisungsaufgaben ist einer Frage die richtige Lösung aus einer Menge von Lösungsvarianten zuzuordnen. 5.4.1.3 Kreuzworträtsel Mit einem Klick auf die blaue Zahl erscheint die Frage, diese wird dann in der Eingabezeile eingetippt und automatisch in den Kästchen eingesetzt. 5.4.1.4 Multiple Choice-Fragen 5.4.2 Flash-Quiz Es wurden zur Abwechslung auch 2 Flash-Quiz eingebaut (bei der Schriftformatierung). Hier ist die Oberfläche etwas anders und die Ergebnisse werden anders ausgewertet. Es werden auch hier wieder diverse Fragetechniken verwendet (Multiple-Choice-Fragen, Einsetzfragen, richtig-falsch-Fragen). Mit einem Click auf Check erhält man sofort die Rückmeldung ob die Antwort richtig ist und manchmal bekommt man noch eine 2. Chance. Zum Schluss erhält der Schüler eine Ergebnisseite: 5.4.3 Praktische Übungen Um nicht nur Faktwissen abzuprüfen sind die Schüler auch zum Arbeiten aufgefordert. Nach den Quizfragen ist eine zusätzliche Übungsseite mit klaren Arbeitsanweisungen. 5.5 Tipps und Hilfe Auf dieser Seite werden den Schülern einige Hilfsmittel angeboten und weitere Links zum Üben bzw. Vertiefen ihres Wissens. Die Referenzlisten sind als pdf-file abgespeichert, man benötigt den Acrobat Reader zum Lesen. 1. Referenzliste mit klarer Angabe, welche Browser, welche Anweisungen unterstützen. 2. Referenzliste dient als Nachschlagewerk und diese kann man den Schülern auch als Unterstützung bei diversen Mitarbeitskontrollen einsetzen lassen. 6 Gebrauchsanweisung Im Menü <<home>> gibt es den Link zur Gebrauchsanweisung, in der kurz und bündig noch einmal auf das Lehrziel, Eingangsvorraussetzungen usw. eingegangen wird.
