Erstellung von Webpräsentationen im und für den DaF-Unterricht Ein Blick hinter die Kulissen Markus Gunske von Kölln Fukushima

Eine Webseite betrachten  Weitere Informationen: Browser: Netscape, Mozilla Firefox, Internet Explorer Computer mit Web-Browser (Client) URL Internet Webserver IP Adresse HTML Daten der Webseite Computer mit FTP-Programm “Telefonbuch” DNS URL → IP Adresse

Statische Webseiten Seiten werden mit Text- oder HTML-Editor als HTML-Dateien vorbereitet Fertige Seiten werden per FTP, Telnet oder Webinterface bereitgestellt Nur vorbereitete Seiten mit statischem Inhalt können präsentiert werden Zugriff auf den Webserver zur Bereitstellung nur mit einem Benutzernamen und Passwort, daher Seitenmodifikationen aus Sicherheitsgründen nur durch eine Person sinnvoll  Weitere Informationen: HTML und HTML-Editor; Protokolle: FTP, HTTP

Client Webserver Computer mit FTP-Programm Webserver Client Computer mit FTP-Programm Und was passiert im Server?  Weitere Informationen: Server: Linux, *nix, Windows; Web-Server: Apache, Microsoft IIS Datei- system Tür mit Hausnummer Port 80, 8080, etc. Webserver Software

„Semi-Dynamische“ Seiten Prinzipielle Vorbereitung der Daten wie bei statischen Seiten Zusätzlich stehen kleine Programme zur Verfügung, die entweder auf Server- oder Clientseite ausgeführt werden Bei Ausführung auf Clientseite müssen die Programme wie HTML-Daten übertragen werden Der Client muss fähig sein, die Programme auszuführen (z.B. Virtual Machine (VM) für Java, Macromedia Player) (Nicht-)Ausführung der Programme ist browserabhängig! Der Client muss die Ausführung der Programme erlauben (Sicherheitslücken, z.B. Angriffe via Javascript) Bei Ausführung auf Serverseite werden die Ergebnisse in die HTML-Daten „injiziert“ bevor diese zum Client gelangen  Weitere Informationen: DHTML, JavaScript, Java, Flash, SSI = Server Side Includes

Der Client muss arbeiten Neben den HTML Daten für die Homepage enthält die Antwort vom Server noch auszuführende Programme Der Webbrowser muss in der Lage sein, diese Informationen zu verarbeiten → U.U. Installation zusätzlicher Software wie z.B. Flash Player Client Webserver Client schickt eine normale Anfrage an den Server (URL)

Dynamische Webseiten Aufbereitung der Daten erfolgt im Server, keine Abhängigkeit vom Client und der dort vorhandenen Software Vorbereitung des Grundgerüsts (z.B. Dokumentenvorlagen, CSS etc.) auf lokalem Computer oder online im Netz Sämtliche Daten können auf dem Server in einer Datenbank gespeichert und modifiziert werden, daher sofortiger Zugriff für alle Anwender möglich Seiten werden der aktuellen "Datenlage" entsprechend aufgebaut und präsentiert Lesender wie modifizierender Zugriff jederzeit für alle Benutzer, die über entsprechende Benutzerrechte verfügen, möglich Semi-dynamisches Verhalten kann integriert werden  Weitere Informationen: Programmiersprachen, Datenbanken, Templates

Jetzt ist der Server dran Server Client Datei- system Webserver Software Daten- bank Programmiersprache HTML- & CSS- Dateien Programmcode Dokumentvorlagen Benutzerdaten HTML- & CSS- Dateien Programmcode Dokumentvorlagen Benutzerdaten  Weitere Informationen: Programmiersprachen: PHP, Perl, Python, ASP, Ruby...

Vorteile dynamischer Präsentationen I Seiten unterliegen häufiger und normalerweise erwarteter Veränderung Browserunabhängig: Webseite wird dynamisch erzeugt, das Ergebnis wird als statische HTML- Informationen zum Browser geliefert Alle Daten können, und viele Daten werden, regelmäßig und häufig automatisch auf dem neuesten Stand gehalten (programmierte Logik) Seiteninhalte und zusätzliche Informationen bei der Präsentation entsprechen dem aktuellsten Stand

Vorteile dynamischer Präsentationen II Zentrale Bearbeitung von Daten und Inhalten zu jeder Zeit und von jedem Internetzugang möglich Vorteile durch programmierbare Logik: Vielfältige Möglichkeiten für Benutzer-/Server- Interaktionen sowohl auf der Betrachter- als auch auf der Dateneingabeseite Möglichkeit für fein-abgestimmte Benutzungs- und Zugangsrechte Datenvalidierung und -verifikation Vielfältige Datensicherungs- und Protokollierungs- möglichkeiten

Nachteile dynamischer Präsentationen Seiten unterliegen häufiger und möglicherweise unerwarteter Veränderung Neben der Webserver-Software wird eine Datenbank- und Programmierungssoftware benötigt Technische Anforderungen an die Serverseite ist verhältnismäßig hoch (vor allem Anbieter von freien Webseiten werden diesen oft nicht gerecht) Leistungsanforderungen an den Server und das Internet sind höher als bei statischen Seiten, daher kann die Darstellung der Präsentation u.U. langsamer sein Zur Installation und Wartung einer solchen Einrichtung sind entsprechende Kenntnisse vonnöten

Vorteile für die Lehrenden I Zu jeder Zeit und an jedem Ort zentrale Übersicht und Verwaltungsmöglichkeit aller Aspekte die mit "dem Unterricht" und "den LernerInnen" zu tun haben Transparente und aktuelle Unterrichtsvor- und -nachbereitung welche von den Lernenden eingesehen werden können, und u.U. nur von den Lehrenden zu editieren ist Jederzeit Zugriff auf aktuelle Ergebnisse und Arbeiten, Korrekturen können direkt im Text, als Kommentar oder ganz separat erfolgen Durch mögliche Benutzer- und Gruppenverwaltung Einsatz bei Einzel-, Partner-, Gruppen- und Klassenarbeit möglich Sofortige Benachrichtigung bei Änderungen in bestimmten Bereichen (z.B. eine Frage wurde im Hilfeforum gestellt)

Vorteile für die Lehrenden II Einfache Vorbereitung, Veröffentlichung und Aktualisierung von Stundenprotokollen, Vorlesungsverzeichnissen, Unterrichtsmaterialien, etc. Dateiarchive und Seitenanhänge erlauben einfache Verfügbarmachung von zusätzlichen Dateien, wie z.B. Videos, Bilder, Audiodateien, Word-Dokumente, etc. Durch Protokollierungs- und Vergleichssysteme jederzeit feststellbar, wer, wann, was geändert/beigetragen hat Durch Einbindung externer Webseiten und Links (z.B. Hot Potatoes) sind vielfältige, authentische Aufgabenstellungen möglich

Vorteile für die Lernenden I Zu jeder Zeit und an jedem Ort Zugriff auf aktuelle unterrichtsrelevante Informationen und Materialien (sowohl die vom Lehrenden als auch eigene) Über den Unterricht hinausgehende Möglichkeiten zur Kommunikation, Präsentation und Beschäftigung (z.B. eigene BenutzerInnenseite oder sogar Spiele) Durch Zugriffsrechte eigene, private Bereiche, in denen ohne Scheu gearbeitet, kommuniziert und experimentiert werden kann

Vorteile für die Lernenden II Ergebnisse können von Anfang an, oder erst nach endgültiger Fertigstellung, einer authentischen Öffentlichkeit präsentiert werden Die Öffentlichkeit (bis hin zum/zur anonymen BenutzerIn) aber auch Mitlernende oder Lehrende können z.B. durch Kommentare eine aktive und authentische Rückmeldung geben

Beispiele für dynamische Webpräsentationen Anwendungs-Software Moodle, PukiWiki, Drupal, PostNuke, *Nuke, etc. Hot Potatoes Autorensoftware für webbasierte, interaktive Übungen Javascript → halbdynamisches Verhalten TikiWiki Wiki/CMS (Content Management System)/Groupware Sites, Portale, Intra- und Extranets PHP und SQL-Datenbank → dynamisches Verhalten

Was ist Hot Potatoes? Computerprogramme zur Erstellung von Aufgaben im WWW (Seiten werden auf lokalem PC erstellt und auf Webseiten veröffentlicht) Freie Benutzung für nicht-kommerzielle Unterrichtseinrichtungen, wenn die Ergebnisse frei im Web verfügbar gemacht werden Erstellt von einem Forschungs- & Entwicklungsteam des Humanities Computing and Media Centre an der University of Victoria (British Columbia, Kanada) Aufgaben und Antwortfelder werden beim Client (Lernende) dargestellt; Navigationsmöglichkeiten, Hilfestellungen und anderes Feedback wird mit Javascript erzeugt und eingebunden Evaluation erfolgt lokal im Client, oder Antworten können per an die Lehrenden verschickt werden  Weitere Informationen: Hot Potatoes Homepage:

Was bietet Hot Potatoes? JBC Multiple-Choice Fragen JQuiz Freie Texteingabe/Fragen/Antworten JMix Schüttelsätze/ -wörter JCross Kreuzworträtsel JMatch Zu- bzw. Anordnungen JCloze Lückentexte Masher zur Kombination von Übungen

Was ist TikiWiki Web-basierte Kommunikationsplattform zur Erstellung von Webpräsentationen vielfältiger Art GNU-LGPL Lizenz: komplett freie Verwendung der Software oder einzelner Teile daraus Open Source: jedeR kann den Programmcode einsehen (Sicherheit!) oder anpassen Internationale Gemeinschaft von z.Zt registrierten Benutzern und ca. 290 Entwicklern weltweit  Weitere Informationen: TikiWiki Homepage:

Was bietet TikiWiki Kommunikationsmöglichkeiten, wie z.B.: Chaträume, Foren, Mitteilungsbretter, Wiki, Rundbriefe, Nachrichten, Megaphon, Kommentareinrichtung, Terminkalender, Umfragen, Befragungen, etc. Präsentationsmöglichkeiten, wie z.B.: Wiki, Bildergalerien, Artikel, HTML-Seiten, Grafiken & Bilder, FAQs, Banner, Dateiarchive, etc. Einbindungsmöglichkeiten weiterer Software, wie z.B.: Hot Potatoes, eigene und externe, sowohl statische als auch dynamische Webangebote, etc. Anpassung an gegebene Verhältnisse und Wünsche, wie z.B. durch: Darstellungsthemen, z.Zt. 26 verschiedene Sprachen, Dokumentenvorlagen, Benutzer- und Gruppeneinrichtung, System von Zugriffsrechten, etc.

Wiki? - Was ist das? Wikis, auch WikiWikis oder WikiWebs, sind Seitensammlungen, die von den Benutzern nicht nur gelesen, sondern auch online geändert werden können Wikiwiki = hawaiianisch für "schnell" Wiki-Syntax ist gegenüber HTML-Syntax vereinfacht, sie erlaubt schnelles Text-Formatieren während des Schreibens Wiki-Syntax erlaubt nur eine Untermenge der HTML- Formatierungen → kein schädlicher Code (z.B. Javascript) kann in eine Seite injiziert werden Original Wiki-Idee: JedeR kann alles ändern Möglichem Vandalismus kann durch Versionierung begegnet werden (archivierte Vorgänger-Versionen ersetzen verwüstete Seiten)  Weitere Informationen: Wikipedia, die freie Enzyklopädie:

Unterschiedliche Bedingungen Generische Funktionen und Erscheinungsbild sind normalerweise „eingebaut“ aber Individuelles Erscheinungsbild & Funktionen müssen programmiert bzw. erstellt werden Inhalte sind davon unabhängig und können durch vorhandene Funktionen eingefügt, editiert und präsentiert werden Ideal: strikte Trennung von Funktion  Erscheinung  Inhalt Programmcode  HTML/CSS  Bedienung eines Webbrowsers  Weitere Informationen: Templates: Smarty Template-Engine, CSS = Cascading Style Sheets

Vorraussetzungen für den Betrieb einer dynamischen Webpräsentation Serverumgebung (Serversoftware, Hardware) Installation des Softwarepakets auf einem Server (Software einspielen, Datenbank einrichten, Grundeinstellungen vornehmen) Wartung der Installation (Updates, Sicherheitspatches) Abhängig von den Wünschen entsprechende Fachkenntnisse der Betreiber (PHP, CSS, HTML) Besteht die Möglichkeit des Outsourcens? (über Freunde/Bekannte, prof. Anbieter, Zusammenschluss in einer Gruppe mit entsprechenden Fachleuten) Phantasie, Motivation und viel Geduld

Weitere Informationen Finden Sie natürlich im Internet Besonders: Wikipedia und Google! Fachliteratur, Zeitschriften, etc. Diesen Vortrag und das Deutschlandreiseplan- Projekt unter Ein TikiWiki zum Ausprobieren: Vielen Dank für‘s Zuhören und Ihre Geduld!  Weitere Informationen: (Computer-)Spielen ist wichtig!!!

Grafiken Webbrowser Textfeld  Weitere Informationen: Wikipedia