Web-Technologien¶
Herzlich willkommen zur WebTech-Veranstaltung im Sommersemester 2025!
Grober Inhalt¶
In dieser Veranstaltung lernen Sie, was das World Wide Web ist und wie man eigene Webseiten und -anwendungen realisiert. Sie lernen die Protokolle und Sprachen http, HTML, CSS, JavaScript und TypeScript kennen und machen sich mit Angular, Node.js und REST vertraut. Zentrales Thema ist der sogenannte MEAN-Stack, d.h. Sie lernen die Entwicklung mithilfe von MongoDB, Express.js, Angular und Node.js kennen. Allerdings verwenden wir statt MongoDB hier als Datenbank PostgreSQL, um dichter an unserem Datenbankmodul im Studiengang zu sein. Der Stack heißt komischerweise trotzdem MEAN (und nicht PEAN).
Nachfolgend der vorläufige Wochenplan (wird eventuell angepasst).
| Woche | Themen (Vorlesung) | Übung | Aufgabe (Stand) | Abgabe Übung bis | |
|---|---|---|---|---|---|
| 1. | 07.-11.04.2025 | Einführung und Organisatorisches | Übung 0 | - | - |
| 2. | 14.-18.04.2025 | HTML | Übung 1 | Idee | 22.04.2025 |
| 3. | 21.-25.04.2025 | CSS (Eigenschaften und Selektoren | Übung 2 | - | 29.04.2025 |
| 4. | 28.-02.05.2025 | CSS (Grid) | Übung 3 | Konzept | 06.05.2025 |
| 5. | 05.-09.05.2025 | RWD (responsive Webdesign) | Übung 4 | - | 13.05.2025 |
| 6. | 12.-16.05.2025 | JavaScript (DOM) | Übung 5 | Datenmodell | 20.05.2025 |
| 7. | 19.-23.05.2025 | Angular (Einführung und Komponenten) | Übung 6 | Schnittstelle | 27.05.2025 |
| 8. | 26.-30.05.2025 | Templates (Bindings) | Übung 7 | Frontend (c+r) | 03.06.2025 |
| 9. | 02.-06.06.2025 | Angular (Routing und Services) | Übung 8 | Frontend (u+d) | 10.06.2025 |
| 10. | 09.-13.06.2025 | Node.js + Express (REST-Server PostgreSQL) | Übung 9 | Frontend fertig | 17.06.2025 |
| 11. | 16.-20.06.2025 | Angular (Anbindung ans Backend) | Übung 10 | Backend ( c ) | 24.06.2025 |
| 12. | 23.-27.06.2025 | Nutzerverwaltung und Material | - | Backend (r + u) | 01.07.2025 |
| 13. | 30.-04.07.2025 | Signals | - | Backend (d + fertig) | 08.07.2025 |
| 14. | 07.-11.07.2025 | Wiederholung | - | fertig stellen | 15.07.2025 |
| 15. | 14.-18.07.2025 | - | Fragen | - | - |
| 16. | 21.-25.07.2025 | - | Fragen | Abgabe 1.PZ 23.7.2025, Gespräche 24.7.2025 | |
| Abgabe 2.PZ 23.9.2025, Gespräche 24.9.2025 (evtl. auch 25.9.2025) | - |
Die Erfahrung zeigt, dass die Mehrheit der Abgeben im 2.PZ erfolgt. Sie sollten allerdings bedenken, dass es zwischen dem 1. und dem 2.PZ keine Konsultationen gibt.
Organisatorisches¶
Zur erfolgreichen Durchführung der Veranstaltung müssen Sie die Übungen lösen und zu den jeweiligen Fristen per Git auf einen Server (GitHub oder GitLab) laden. Am Ende des Semesters ist eine Aufgabe abzugeben. Diese Aufgabe wird bewertet. Die Bewertung entspricht dann der Modulnote.
Hier sind die Übungen beschrieben, die Sie in jeder Woche ausführen sollen. Damit Sie dies erfolgreich erledigen können, ist jeweils angegeben, welche Themen Sie dafür durcharbeiten müssen. Das Durcharbeiten der jeweiligen Themen entspricht jeweils einer Vorlesung. Diese wird also selbständig durchgeführt.
Für die Kommunikation untereinander verwenden wir Slack. Dort können Sie alle inhaltlichen und organisatorischen Fragen stellen. Ich fände es gut, wenn ich dort möglichst wenig Fragen - zumindest die inhaltlichen - beantworten müsste, sondern eine Art internes Diskussionsforum entsteht. Es ist sehr gewünscht, dort Fragen zu stellen und noch mehr gewünscht, diese von Ihnen dort beantwortet zu sehen. Damit wäre allen geholfen und ich kann besser erkennen, wo noch Nachhol- bzw. Erläuterungsbedarf bei den meisten besteht.
Code aus der Vorlesung¶
Code aus HTML-Vorlesung
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Erste HTML-Seite</title>
</head>
<body>
<header>
<h1>Willkommen zu meiner ersten HTML-Seite!</h1>
<h2>etwas kleinere Überschrift</h2>
<h3>noch kleiner</h3>
<h6>am kleinsten</h6>
</header>
<main>
<p id="p1" class="rotHG gelbFont kursiv">hier ist ein Absatz. </p>
<a href="https://www.htw-berlin.de">HTW Berlin</a>
<a href="./html/seite1.html">Seite 1</a>
<img src="./images/fiw.jpg" alt="FIW-Logo" width="200" />
<!--
kommentar
kommentar
-->
<ul>
<li>erster Punkt</li>
<li>zweiter Punkt</li>
</ul>
<ol>
<li><h1>eins</h1></li>
<li>zwei</li>
<li>drei
<ul>
<li>Unterpunkt 1</li>
<li>Unterpunkt 2</li>
</ul>
</li>
<li>vier</li>
</ol>
<table>
<thead>
<tr>
<th>Spalte 1</th>
<th>Spalte 2</th>
<th>Spalte 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>eins eins</td>
<td>eins zwei</td>
<td>eins drei</td>
</tr>
<tr>
<td>zwei eins</td>
<td>zwei zwei</td>
<td>zwei drei</td>
</tr>
<tr>
<td>drei eins</td>
</tr>
<tr>
<td></td>
<td>vier zwei</td>
<td>vier drei</td>
</tr>
</tbody>
</table>
</main>
<footer>
<input type="text" />
<input type="password" />
<input type="checkbox" />
<input type="radio" />
<input type="button" value="Login" />
<input type="datetime-local" />
<input type="range" min="0" max="100" value="10" />
<input type="color">
</footer>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Seite</title>
</head>
<body>
<h4>Seite 1</h4>
<a href="../index.html">zurück zur index.html</a>
<img src="../images/htw.jpg" alt="HTW-Logo" width="200"/>
</body>
</html>
Code aus CSS-Vorlesung
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cascading</title>
<!-- Einbinden von CSS per externer css-Datei-->
<link rel="stylesheet" href="../styles/mystyles.css">
<style>
h1 {
text-transform: lowercase; /* CSS-Kommentare */
font-style: italic;
}
ol {
color: blue;
}
.fgYellow {
color: yellow;
}
/*
.bgBrown {
background-color: brown;
}
*/
.freigewaehlt {
font-size: 2em;
}
#firstH2 {
text-decoration: underline;
}
article p {
color: red;
}
section>p {
color: green;
}
a {
text-decoration: none;
}
a:hover {
background-color: blue;
color: white;
}
p::first-letter {
font-size: 3em;
}
</style>
</head>
<body>
<header>
<h1 style="background-color: rgb(50, 140, 140); color: rgb(249, 245, 245);">Cascading Style Sheets - CSS</h1>
</header>
<main>
<section>
<h2 id="firstH2">Section 1</h2>
<article>
<p class="fgYellow bgBrown freigewaehlt">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quae.</p>
<p class="fgYellow bgBrown">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quae.</p>
</article>
<article class="bgBrown">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quae.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quae.</p>
</article>
<p>direktes Kind einer section</p>
</section>
<section>
<h2>Section 2</h2>
<article>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quae.</p>
hallo ballo
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quae.</p>
</article>
<article>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quae.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quae.</p>
</article>
</section>
<ol>
<li>item 1
<ul>
<li>subitem</li>
<li>subitem</li>
<li>subitem</li>
</ul>
</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
</ol>
</main>
<aside>
<h2>Aside</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quae.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quae.</p>
</aside>
<footer>
<p>
<a href="./02_boxmodel.html">Boxmodel</a> ·
<a href="./03_rangfolge.html">Rangfolge</a>
<a href="https://www.htw-berlin.de">HTW Berlin</a>
</p>
</footer>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Box-Model</title>
<style>
* {
box-sizing: content-box; /* Standard */
}
img {
border: 1px solid black;
margin: 100px;
}
div {
width: 322px;
padding: 30px;
border: 5px solid gray;
margin: 0;
}
</style>
</head>
<body>
<header>
<h1>Box-Model</h1>
</header>
<main>
<img src="../images/fiw.jpg" alt="fiw logo" style="width:350px"/>
<div>Das FIW-Logo hat eine Breite von 350px (width:350px).
Der Inhalt dieser Box hat eine Breite von 320px.
Dazu kommt padding von 10px (auf beiden Seiten)
und ein Rahmen mit der Breite von 5px. Macht zusammen
350px.
</div>
</main>
<footer>
<p><a href="./01_cascading.html">Einführung</a> · <a href="./03_rangfolge.html">Rangfolge</a></p>
</footer>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Reihenfolge Selektoren</title>
<style>
a:link {
color: blue;
}
.link {
color: green;
}
#navigation a {
color: red;
}
li a {
color: magenta;
}
</style>
</head>
<body>
<header>
<h1>Reihenfolge Wirkung Selektoren</h1>
</header>
<main>
<h4>Test</h4>
<ul id="navigation">
<li><a href="./01_cascading.html" class="link">Einführung</a></li>
<li><a href="./02_boxmodel.html" class="link">Boxmodel</a></li>
</ul>
<h4>Prinzip</h4>
<dl>
<dt><em>Kategorie A</em></dt>
<dd>erhält den Wert 1, wenn CSS-Definitionen direkt im style-Attribut eines HTML-Elementes notiert sind</dd>
<dt><em>Kategorie B</em></dt>
<dd>erhält den Wert 1 bei Selektoren für Elemente mit id-Attributen</dd>
<dt><em>Kategorie C</em></dt>
<dd>Anzahl der von einem Selektor betroffenen Klassen und Pseudoklassen</dd>
<dt><em>Kategorie D</em></dt>
<dd>Anzahl der von einem Selektor betroffenen Elementnamen und Pseudo-Elemente</dd>
</dl>
<ol>
<li>Bei der Reihenfolge der Sortierung gilt: A > B > C > D, also z.B. 1 0 0 0 vor (größer als) 0 1 2 2.</li>
<li>Bei Gleichheit gilt die letzte Definition</li>
</ol>
</main>
<footer>
<p><a href="./02_boxmodel.html">Boxmodel</a> · <a href="./01_cascading.html">Einführung</a></p>
</footer>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>display</title>
<style>
p {
color: red;
}
p.ex1 {
display: none;
}
p.ex2 {
display: inline;
}
p.ex4 {
display: inline-block;
}
</style>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="./02_boxmodel.html">Boxmodel</a></li>
<li><a href="./01_cascading.html">Cascading</a></li>
<li><a href="#">Display</a></li>
<li><a href="./05_grid">Grid</a></li>
</ul>
</nav>
</header>
<main>
<h1>The display Property</h1>
<h2>display: none:</h2>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. <p class="ex1">none!</p> Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.
</div>
<h2>display: inline:</h2>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. <p class="ex2">inline!</p> Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.
</div>
<h2>display: block:</h2>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. <p class="ex3">block!</p> Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.
</div>
<h2>display: inline-block:</h2>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. <p class="ex4">neue Zeile und dann inline!</p> Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.
</div>
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/display?retiredLocale=de">Gibt noch sehr viele andere</a></li>
<li><a href="./index.html">Zurück</a></li>
</ul>
</main>
<footer>
</footer>
</body>
</html>
Semesteraufgabe¶
Am Ende des Kurses geben Sie eine Webanwendung ab. Diese wird bewertet und bildet die Modulnote für "WebTech" (es gibt also keine Klausur o.ä.). Überlegen Sie sich früh, was Sie implementieren wollen. Ihrer Kreativität sind keine Grenzen gesetzt. Es können 2 Studentinnen gemeinsam ein Projekt durchführen und abgeben. Sie erhalten dann (höchstwahrscheinlich) die gleiche Note. Es muss an den Commits erkennbar sein, welchen Anteil am Ergebnis jede der beiden Studentinnen hatte. Beachten Sie auch dringend die Regeln zum Umgang mit KI in den folgenden Mindestanforderungen!
Mindestanforderungen
Folgende Anforderungen werden an Ihr Projekt gestellt:
- das Frontend soll mit Angular entwickelt werden,
- das Backend mit Node.js,
- es soll eine Datenbank (MongoDB, kann aber auch MySQL oder PostgreSQL oder MariaDB - aber nicht Firebase) verwendet werden,
- es soll CRUD implementiert sein, d.h. Sie benötigen
- eine Komponente zur Erstellung und Speicherung eines Datenbankeintrages (Create),
- eine Komponente zur Änderung eines Datenbankeintrages (Update),
- eine Komponente zur Anzeige aller Datenbankeinträge (Read),
- eine Komponente zum Löschen eines Datenbankeintrages (Delete).
- wenn Sie die Anwendung alleine umsetzen, dann genügen 3 der 4 CRUD-Funktionalitäten
- wenn Sie die Anwendung zu zweit entwickeln, dann
- sollen alle 4 CRUD-Funktionalitäten umgesetzt werden und
- Login (Username + Passwort) und
- ich schaue mir die Commit-Hiostorie im Git genauer an, um sicherzugehen, dass beide Studentinnen gleich viel an der Anwendung mitentwickelt haben
Datenbankeinträge können Bücher, CDs, ToDos, Einkaufslisten, Vorlesungen, Kühlschrankinhalte usw. sein - wie gesagt, Ihrer Kreativität sind keine Grenzen gesetzt. Backend, Frontend und Datenbank müssen sich schon von dem unterscheiden, was wir in der Vorlesung und in der Übung gemacht haben (und somit vom Skript).
Die Anwendung soll in einem Git-Dienst (GitHub, GitLab, ...) verfügbar sein.
Verwenden Sie ein CSS-Framework, wie z.B. Materialize, Bootstrap o.ä.! Ihre Anwendung soll "modern" aussehen und responsive sein.
Erstellen Sie eine informative (ausführliche) README-Datei (README.md). Diese Datei sollte beinhalten:
- Eine Beschreibung Ihrer Anwendung. Am besten mit Screenshots, so dass sie Ihren Kommilitoninnen aus den nächsten Jahren hilft, ein Verständnis dafür zu entwickeln, was mögliche Semesteraufgaben sein können.
- Eine Anleitung zur Installation Ihrer Anwendung.
Super wäre es, wenn Sie die Datenbank, die Sie verwenden, per Skript vorausfüllen, d.h. es wäre schön, wenn zum Testen der Anwendung nur das Frontend und das Backend gestartet werden müssten und alles andere automatisch passieren würde. Super wäre es auch, wenn Sie Ihre Anwendung deployen würden.
Wenn alle Anforderungen kritiklos erfüllt sind, ist die Note schonmal eine 1.7 (bei leichter Kritik 2.0). Es zeigte sich jedoch in den letzten Jahren, dass es wirklich herausragende Lösungen gab, die dann auch mit einer 1.3 und einige (wenige) sogar mit einer 1.0 bewertet werden konnten. Die Erwartungen für solche Lösungen lassen sich nicht formulieren, denn sie gehen ja "über die Erwartungen hinaus" ;-).
Nach Abgabe vereinbaren wir ein Online-Meeting, in dem Sie mir Ihre Anwendung nochmal zeigen können und ich Ihnen Fragen zu Ihrem Code stellen werde. Ist keine Prüfung, sondern eher ein fachliches Gespräch.
Beachten Sie folgende Regeln zum Umgang mit KI :
- Die Nutzung von KI bei der Erstellung der Semesterabgabe ist grundsätzlich erlaubt.
- In der
README.mdmuss es ein Verzeichnis der verwendeten KI-Werkzeuge geben (stichpunktartig, wofür welche KI verwendet wurde). - Ihren Code müssen Sie erklären und einfache Änderungen und Ergänzungen durchführen können. Wenn Sie mehrere/alle Fragen im Gespräch nicht beantworten können, gilt die Arbeit als Täuschungsversuch.
Abgabe- und Gesprächstermine¶
Die Lösung für die Semesteraufgabe pushen Sie in Ihr Respository. In einem Gespräch führen Sie die Lösung vor und wir unterhalten uns über Ihre Lösung. Dafür stehen verschiedene Termine zur Verfügung.
-
- Prüfungszeitraum: 23.7.2025 Abgabe und 24.7.2025 Gespräch
-
- Püfungszeitraum: 23.9.2025 Abgabe und 24.9.2025 (evtl. auch 25.9.2025) Gespräch
Bitte tragen Sie sich in Moodle in den von Ihnen gewünschten Gesprächstermin ein! Wenn Sie im 1.PZ abgeben, tragen Sie sich im LSF zum ersten PZ zur Prüfung ein, ansonsten im 2.PZ.