Dynamische Webseiten

Virtueller Campus Projekt, PHBern

StartseiteJavaScriptCSSJSPPHPMySQLDrucken

Schriftgrösse: kleiner - zurücksetzen - grösser

Didaktisches Konzept

Das Projekt stellt eine umfangreiche interaktive Lernumgebung zur Verfügung. Das Spektrum reicht vom einfachen Webdesign-Versuchen bis zum Programmieren von proffesionellen Datenbank-Applikationen.
Unter den Tabs in der Titelleiste findet man systematisch aufgebaute Lernprogramme zu

Die Lernprogramme eignen sich zum Selbststudium aber auch für den Unterricht. Am Ende jedes Kapitels findet man jeweils auch einige Übungsaufgaben.

Die vielfältigen Programmiertechniken bei Webdesign, Gestaltung von dynamischen Webseiten und Online Datenbanken werden an Hand von praxisbezogenen lauffähigen Programmbeispielen erklärt. Das Lernprogramm stellt kein lückenloses Tutorial dar, sondern es werden exemplarisch einige Applikationen ausgewählt und bearbeitet. Die Programmcodes aller aufgeführten Beispiele sind ersichtlich oder stehen als Download zur Verfügung.

Die Lernumgebung ist für Einsteiger konzipiert, bietet aber auch für erfahrene Webdesigner weiterführende Lerninhalte zu den wichtigsten Techniken für die Gestaltung von dynamischen Webseiten mit Java Script, CSS, PHP, Java Server Pages und MySQL.

Im Wesentlichen basiert die Lernumgebung auf folgenden Entwicklungen:
Übersichtliche Navigation
Die Website enthält ca. 150 Menü-Punkte, verfügt aber trotzdem über eine einfache Navigation. Das Auffinden von Punkten und das Bewegen innerhalb einer Site sind leicht verständlich und intuitiv für den Benutzer.

CSS-Switcher
Der CSS-Switcher demonstriert anschaulich die Funktion und Bedeutung von CSS. Mit einem Mausklick kann das Erscheinungsbild der ganzen Website, samt Navigation geändert werden.

Online-Editor für CSS
Dem Benutzer wird eine HTML-Seite mit dem passenden CSS zur Verfügung gestellt. Das CSS kann in einem Editorfenster angepasst werden, die Änderungen sind im Browser sofort sichtbar.

Lauffähige Musterbeispiele
Die komplexen Zusammenhänge werden didaktisch reduziert an Hand von einfachen lauffähigen Musterbeispielen erklärt. Alle Beispiele können online getestet werden, der zugehörige Programmcode wird angezeigt und kann kopiert oder herunter geladen werden.

Lexikon
Für die wichtige Fachbegriffe und Schlüsselwörter wurde ein websiteübergreifendes Lexikon eingerichtet. Die Begriffe und ihre kurze Definition werden in einer MySQL Datenbank gespeichert. Die Schlüsselwörter sind im Webseitentext markiert, beim Darüberfahren wird in einem kleinen Fenster die Erklärung angezeigt.

Accessibility (Barrierefreies Webdesign)
Als Musterbeispiel haben wir versucht unsere Website nach den Kriterien eines barrierenfreien Internets zu gestalten, d.h. sie ist auch für Blinde, Sehbehinderte und motorisch Behinderte (Mausbedienung) zugänglich.
- Titel sind grundsätzlich als Text und nicht als Grafik definiert
- Grafiken sind beschriftet, damit sie vom Screenreader gelesen werden können
- Die Schriftgrösse kann per Mausklick vergrössert werden
- Die Navigieren ist auch ohne Maus möglich: Hauptmenüpunkte mit Alt + Anfangsbuchstabe, Tab-Taste springt über alle Menüpunkte und alle Links, Enter bestätigt die Auswahl