EWA Semesterplan und Themenübersicht¶
Hier finden sich die Inhalte der wöchentlichen Vorlesungseinheiten (erkennbar an der ersten Zahl im Titel), unterteilt nach Leitfragen und entsprechenden Lehrmaterialien. Die Ausrichtung der Inhalte an Leitfragen folgt Erkenntnissen aus der Gehirnforschung und soll das Lernen und Verständnis fördern.
Nutzen Sie die Lehrmaterialen zur Vorbereitung und die Leitfragen zur Lernzielkontrolle.
Die erste Zahl im Titel bezieht sich auf die jeweilige Vorlesungswoche (vergleichen Sie hierzu den EWA Semesterplan für das aktuelle Semester in Moodle), die zweite Zahl auf eine ggf. vorhandene thematische Unterteilung.
EWA-Discord-Channel: https://discord.gg/AC97TNBSJ6
Teil 0: Einführung¶
Einheit #1: Organisation¶
Leitfragen:
- Wie ist die Veranstaltung organisiert ?
- Welche Unterstützungsangebote gibt es; wo bekomme ich Hilfe ?
- Was erwartet mich und was wird von mir erwartet ?
Lehrmaterialien
- Der Einführungsfoliensatz
- Die Vorlesungs- und Praktikumstermine
- Für Interessierte: Ein Ausflug in die Entstehung des World Wide Web
Teil I: Statische Webseiten¶
Einheit #2:1: Grundlagen zur Erzeugung von Web-Inhalten¶
Leitfragen:
- Internet und Web – ist das dasselbe ?
- Wie erzeugt man Inhalte für das Web ?
- Welche Tools benötigt man zum Erstellen von Webseiten ?
- Wie funkioniert ein Webserver ?
- Wie werden die Inhalte im Web beschrieben ?
- Woraus besteht eine Webseite ?
Lehrmaterialen
- Foliensatz: Kap. 1.1 & 1.2
- Lehrvideo: Einleitung – (00:00:00 - 00:17:20)
- Lehrvideo: Statische Webseiten – (00:00:00 - 00:47:19)
Einheit #2.2: HTML¶
Leitfragen:
- Welche HTML-Elemente gibt es ?
- Wie baut man eine HTML-Seite auf ?
- Wie wird eine HTML-Seite im Browser dargestellt ?
idvs.class– wofür benötigt man welches Attribut ?- Wie speichert man Daten in Webseiten ? – das wunderbare
data-Attribut
Lehrmaterialen
- Foliensatz: Kap. 1.3 - 1.3.2
- Lehrvideo: Statische Webseiten – (00:47:20 - 01:05:54)
Einheit #2.3: Datenaustausch¶
Leitfragen:
- Wie tauschen Webseiten Daten aus ?
- Was sind Formulare und wie funktionieren diese ?
- Wie funktioniert ein Webserver ?
Lehrmaterialen
- Foliensatz: Kap. 1.3.3 & 1.3.4
- Lehrvideo: Statische Webseiten – (01:05:55 – 01:28:50)
- Lehrvideo: Infrastruktur und Querschnittsthemen II – (HTTP/S: 00:00:00 – 00:21:48)
Teil II: Dynamische Webseiten¶
Einheit #3: Dynamische Seitengenerierung mittels PHP¶
- Wie funktioniert PHP ?
- Wie erstellt man dynamische Inhalte mittels PHP ?
- Wie tauschen PHP-Seiten Daten aus ?
- Welche Sicherheitsstandards müssen beachtet weden ?
Lehrmaterialen
- Foliensatz: Kap. 2 - 2.1 & 2.4
- Lehrvideo: Dynamische Webseiten I – (00:00:00 – 01:24:28)
- Für Interessierte: Anleitungsvideo für das Debuggen mit PhpStorm und Docker
Einheit #4: Datenbankzugriff mit PHP¶
- Was benötigt man für den DB-Zugriff mittels PHP ?
- Wie erstellt man eine Datenbank mittels phpmyadmin ?
- Wie liest man Daten aus einer DB aus und bindet diese in eine mit PHP generierte Webseite ein ?
- Welche Sicherheitsanforderungen muss man berücksichtigen ?
Lehrmaterialen
- Foliensatz: Kap. 2.2
- Lehrvideo: Dynamische Webseiten I – (01:24:30 – 01:49:07)
Einheit #5.1: Besseres PHP durch Seitenklassen¶
- Welche Schwachstellen ergeben sich aus der bisher kennengelerneten PHP-Entwicklung ?
- Wie sind Seitenklassen aufgebaut ?
- Wie funktionieren Seitenklassen ?
- Welche Nachteile bieten Seitenklassen und wie lassen sich diese verbessern ?
Lehrmaterialen
- Foliensatz: Kap. 2.3 & Kap 2.4
- Lehrvideo: Dynamische Webseiten II – (00:00:00 – 01:10:30)
Einheit #5.2: Cookies und Sessions¶
- Was sind Cookies und wie funktionieren diese ?
- Wie lässt sich mittels Cookies Nutzerverhalten ausspionieren ?
- Was sind Sessions ?
- Warum funktionieren Sessions nur in Verbindung mit Cookies wirklich gut ?
Lehrmaterialen
- Foliensatz: Kap. 2.5
- Skriptum von Prof. Zander zu Cookies und Sessions
- Lehrvideo: Dynamische Webseiten II – (01:10:32 – 01:44:12)
Teil III: Interaktive Webseiten¶
Einheit #6: JavaScript – Sprachgrundlagen¶
Neue Einführung in JavaScript
Wichtig: Hier weichen wir etwas vom Skript ab und es erfolgt eine eigene, umfassendere und tiefergehende Einführung in JavaScript.
Verpassen Sie also nicht die entsprechenden Vorlesungseinheiten!
- Welche grundlegenden Konzepte unterscheiden JavaScript von gängigen OO-Programmiersprachen ?
- Wodurch unterscheiden sich Primitive von Reference Types ?
- Wie behandelt JavaScript Funktionen ?
- Welche Möglichkeiten ergeben sich aus der Behandlung von Funktionen als “First-Class Citizen” ?
- Wie werden Objekte in JavaScript erzeugt und behandelt ?
- Wie funktioniert Vererbung in JavaScript ?
Lehrmaterialen
- Ergänzende Slides von Prof. Zander
- Foliensatz: Kap. 3 - 3.1.1
- Lehrvideo: Interaktive Webseiten I – (00:00:00 – 00:44:39)
- Das IMHO beste Buch zur Einführung in JavaScript: The Principles of Object-Oriented JavaScript
– mit ein wenig “Suchgeschick” findet man auch eine PDF-Version - Zur Vertiefung
- Buch: Understanding ECMAScript 6 (hier die Sourcen)
- Mozilla Web Documents: Einführung in Objekt-orientiertes JavaScript
Einheit #7: JavaScript im Browser¶
- Was ist das DOM ?
- Welche Sprachmittel bietet JavaScript für die Arbeit mit dem DOM ?
- Was sind Handler ?
- Wie lassen sich Handler mittels JavaScript implementieren ?
Lehrmaterialen
- Foliensatz: Kap. 3.1.2 - 3.1.4
- Lehrvideo: Interaktive Webseiten I – (00:44:40 – 01:42:48)
- Youtube-Video zu JavaScript-Handlern
Einheit #8: Forschrittliche Sprachkonzepte¶
- Wie setzt man Error-Handling in JavaScript richtig ein ?
- Was sind Closures und wofür werden sie verwendet ?
- Wie funktioniert asynchrones JavaScript ?
- Welche JavaScript Sprachkonstrukte ermöglichen die asynchrone Ausführung von Programmcode ?
Lehrmaterialen
- Ergänzende Slides von Prof. Zander
- Closures
- Gute Artikel zu Promises
- Async/Await: JavaScript async and await - in plain English, please
- MDN Artikel zu Inheritance in JavaScript
Einheit #9: Asynchronous JavaScript and XML (AJAX)¶
- Was ist AJAX und welche Rolle spielt es in Single Page Applications (SPA)s ?
- Wie läuft eine AJAX-basierte Kommunikation in einer Web-Applikation ab ?
- Welche Rolle spielt JSON beim asynchronen Datenaustausch ?
Lehrmaterialen
- Foliensatz: Kap. 3.2.1 - 3.2.4
- Lehrvideo: Interaktive Webseiten II – (00:00:00 – 01:12:32)
Teil IV: Gestaltung von Websites¶
Einheit #10: Cascading Style Sheets (CSS)¶
- Was ist die Grundidee hinter CSS ?
- Wie erfolgt die Zuordnung von CSS-Stilregeln zum DOM ?
- Welche CSS-Selektoren gibt es ?
- Wie entscheidet der Browser, welche CSS-Stilregel angewandt wird ?
- Wie funktioniert die Float-Eigenschaft ?
- Wie lässt sich das Positionierungsverhalten von DOM-Elementen bestimmen ?-
Lehrmaterialen
- Foliensatz: Kap. 4 - 4.4
- Lehrvideo: Gestaltung von Webseiten I – (00:00:00 – 01:31:48)
Einheit #11: Fortschrittliches CSS für dynamisches Layout (Flexbox etc)¶
- Warum ist ein statisches / Tabellen-basiertes Layout nicht mehr zeitgemäß ?
- Welche Layoutansätze gibt es im Web ?
- Was ist das Flexbox-Modul und welche Möglichkeiten bietet es ?
- Wie erstellt man ein responsives Design mit Mediaqueries und Flexbox ?
Lehrmaterialen
- Foliensatz: Kap. 4.5 - 4.7
- Lehrvideo: Gestaltung von Webseiten I – (00:00:00 – 01:31:48)
- Zur Vertiefung: Sehr gute und anschauliche Einführung in die Funktionsweise der Flexbox
- Für Interessierte: Ein Vergleich der CSS Präprozessoren SASS vs. LESS
Teil V: Infrastruktur & Querschnittsthemen¶
Einheit #12: UI-Tests von Web-Applikationen¶
- Wie lassen sich Webseiten mit Selenium testen ?
- Welche Besonderheiten besitzen Web-Applikationen gegenüber traditionellen Desktop-Applikationen ?
Lehrmaterialen
- Foliensatz: Kap. 5.7.4 – Folie 436 & 437
- Lehrvideo: Infrastruktur und Querschnittsthemen III – (00:50:53 - 00:58:50)
Letztes Update:
17. September 2024