Grundlagen der Webprogrammierung

Einführung

In der Veranstaltung Fortgeschrittene Programmierung werden seit dem Sommersemester 2016 Webtechnologien vermittelt. Im Wesentlichen handelt es sich dabei um den Technologiestack aus

• HTML: Hypertext Markup Language, Beschreibungssprache für Dokumente zur Darstellung im Browser. In HTML-Dokumenten werden die Struktur der Benutzeroberfläche und die Inhalte gespeichert.
• CSS: Cascading Style Sheets, Beschreibungssprache für das Aussehen der Benutzeroberfläche. Style Sheets werden an Oberflächenelemente des HTML-Dokuments gekoppelt und bestimmen deren Darstellung.
• JavaScript: Interpretierte Programmiersprache zur Implementierung von Oberflächendynamik und Funktionalität der Anwendung

Entwicklungsumgebung

Bitte setzen Sie die Entwicklungsumgebung Eclipse entsprechend der Hinweise auf.

Ein weiterer wesentlicher Bestandteil der Entwicklungsumgebung ist der Webbrowser ​Chrome. Er enthält umfangreiche Entwicklertools inkl. JavaScript Debugger. Die Entwicklertools können über das Menü -> Weitere Tools -> Entwicklertools (unter Windows Ctrl-Shift-I) geöffnet werden.

Serverbasierte Webanwendungen

Foliensatz

Oberflächenbeschreibung mit Storyboards

Storyboards sind eine einfach verständliche Möglichkeit, die wesentlichen funktionalen Elemente und Abläufe einer grafischen Benutzeroberfläche zu beschreiben.

Modellelemente

Storyboards bestehen im Wesentlichen aus den folgenden Elementen:

Element	Verwendung
	Anwendungsteil / Dialog / Control Elemente dieser Art können ineinander geschachtelt werden, um Abstraktionen zu erreichen (Anwendungsteile enthalten Dialoge sowie deren Zusammenhänge und Dialoge enthalten Controls)
	Kontroll- / Dialogfluss
	Verzweigung von Dialog- / Kontrollfluss
	Ereignis / Zustand
	Kommentar, kann an beliebige Elemente gesetzt werden
	Verbindung von Elementen des Storyboards in verschiedenen Darstellungen

Beispiel eines Storyboards für das Login einer Webanwendung

Abstraktion und Konkretisierung mittels Schachtelung

TODO

Personas

TODO