From 841a7ced76dc7bbc8f68245ad9071f11e071babc Mon Sep 17 00:00:00 2001 From: Michael Czechowski Date: Mon, 4 May 2026 20:05:46 +0200 Subject: [PATCH] =?UTF-8?q?dhbw:=20neuer=20kurs=20technik=20I=20=E2=80=94?= =?UTF-8?q?=204=20kapitel=20+=20demo=20assets?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- slides/dhbw/01_web_eng.md | 418 ++++++++++++++++++ slides/dhbw/02_css_extended.md | 266 +++++++++++ slides/dhbw/03_nodejs_basics.md | 228 ++++++++++ slides/dhbw/04_nodejs_advanced.md | 258 +++++++++++ slides/dhbw/assets/.gitkeep | 0 .../assets/demos/browser-server-sequence.html | 146 ++++++ .../assets/demos/browser-server-sequence.png | Bin 0 -> 99804 bytes .../assets/demos/docker-orchestration.html | 167 +++++++ .../assets/demos/docker-orchestration.png | Bin 0 -> 100541 bytes .../assets/demos/js-frameworks-overview.html | 105 +++++ .../assets/demos/js-frameworks-overview.png | Bin 0 -> 189912 bytes slides/dhbw/assets/demos/nodejs-usecases.html | 85 ++++ slides/dhbw/assets/demos/nodejs-usecases.png | Bin 0 -> 147567 bytes .../assets/demos/test-automation-trophy.html | 63 +++ .../assets/demos/test-automation-trophy.png | Bin 0 -> 87311 bytes .../dhbw/assets/demos/ts-js-compilation.html | 124 ++++++ .../dhbw/assets/demos/ts-js-compilation.png | Bin 0 -> 128342 bytes .../assets/demos/web-ecosystem-rings.html | 107 +++++ .../dhbw/assets/demos/web-ecosystem-rings.png | Bin 0 -> 223276 bytes 19 files changed, 1967 insertions(+) create mode 100644 slides/dhbw/01_web_eng.md create mode 100644 slides/dhbw/02_css_extended.md create mode 100644 slides/dhbw/03_nodejs_basics.md create mode 100644 slides/dhbw/04_nodejs_advanced.md create mode 100644 slides/dhbw/assets/.gitkeep create mode 100644 slides/dhbw/assets/demos/browser-server-sequence.html create mode 100644 slides/dhbw/assets/demos/browser-server-sequence.png create mode 100644 slides/dhbw/assets/demos/docker-orchestration.html create mode 100644 slides/dhbw/assets/demos/docker-orchestration.png create mode 100644 slides/dhbw/assets/demos/js-frameworks-overview.html create mode 100644 slides/dhbw/assets/demos/js-frameworks-overview.png create mode 100644 slides/dhbw/assets/demos/nodejs-usecases.html create mode 100644 slides/dhbw/assets/demos/nodejs-usecases.png create mode 100644 slides/dhbw/assets/demos/test-automation-trophy.html create mode 100644 slides/dhbw/assets/demos/test-automation-trophy.png create mode 100644 slides/dhbw/assets/demos/ts-js-compilation.html create mode 100644 slides/dhbw/assets/demos/ts-js-compilation.png create mode 100644 slides/dhbw/assets/demos/web-ecosystem-rings.html create mode 100644 slides/dhbw/assets/demos/web-ecosystem-rings.png diff --git a/slides/dhbw/01_web_eng.md b/slides/dhbw/01_web_eng.md new file mode 100644 index 0000000..89e9ba2 --- /dev/null +++ b/slides/dhbw/01_web_eng.md @@ -0,0 +1,418 @@ +--- +marp: true +theme: gaia +paginate: true +backgroundColor: #fff +header: "Web Engineering – DHBW Stuttgart" +footer: "Michael Czechowski – SoSe 2025" +title: Web Engineering +--- + + + + + + + +![bg cover opacity:0.2](./assets/background.png) + +# Web Engineering + +**DHBW Stuttgart** · Informatik / Wirtschaftsinformatik + +**Sommersemester 2025** + +--- + + + +# Willkommen! + +## 1. Sitzung: 09.05.2025 + +--- + +# Wer bist du, was machst du? + +- B.Sc. Wirtschaftsinformatik (Leibniz-FH Hannover) +- Angestellt bei PONS Langenscheidt GmbH in Stuttgart +- Honorardozent und Berater + +**Bisherige Vorlesungen (DHBW/Leibniz-FH):** +- Social Engineering, Mobile Medien, Web Eng + +--- + +# Vorlesungsplan + +| Sitzung | Datum | Thema | +|---------|-------|-------| +| 1 | 09.05. | Formalia, Kennenlernen, Internet 101 | +| 2 | 16.05. | HTML und CSS (Frameworks) | +| 3 | 23.05. | JS (Frameworks) und npm | +| 4 | 30.05. | nodeJS: Scripting, Running and Building | +| 5 | 06.06. | Express API, CRUD und "Middlewares" | +| 6 | 13.06. | Testing (unit, integration, end-to-end) | +| 7 | 20.06. | TypeScript | +| 8 | 27.06. | Docker, Proxies and DBs | +| 9 | 04.07. | Präsentationen | + +--- + +# Prüfungsleistung + +**LN** – Lernnachweis (50%) +- Projekte / Hausaufgaben +- Präsentation + +--- + +# Internet 101 – Zeitleiste + +| Jahr | Ereignis | +|------|----------| +| 1966 | ARPANET | +| 1969 | RFCs | +| 1986 | IETF | +| 1992 | Internet Society | +| 1974 | TCP/IP und HTTP(S) | +| 1987 | Domain Names und DNS | +| 1993 | "Erster" Browser: Mosaic | +| 1994 | W3C (HTML, XML, CSS, SVG, WCAG etc.) | +| 1995 | ECMAScript (JS) | +| 2006/08 | V8 JS Runtime Engine | +| Heute | 1,3 Mio. km Unterseekabel | + +--- + +# Internet 101 – Browser Request + +``` +Browser Server + | | + |-- GET /products -------------->| + |<-- HTTP 200 + index.html -----| + | | + |-- GET /script.js ------------->| + |<-- HTTP 200 + script.js ------| + | | + |-- GET /api/products ---------->| + |<-- HTTP 200 + JSON ------------| +``` + +--- + + + + +![bg fit](./assets/demos/browser-server-sequence.png) + + +--- + +# HTTP – Hypertext Transfer Protocol + +**Request:** +``` +GET /products HTTP/1.1 +Host: localhost:8080 +``` + +**Response:** +``` +HTTP/1.1 200 OK +Content-Type: application/json + +[{"id": 1, "name": "Produkt A"}, ...] +``` + +--- + +# Entwicklungsumgebung + +**Tools:** +- Node.js + npm +- VS Code +- Git +- Chrome DevTools + +--- + +# Versionierung mit Git + +```bash +git init +git add . +git commit -m "initial commit" +git remote add origin https://github.com/user/repo.git +git push -u origin main +``` + +--- + + + + + +# HTML – Hypertext Markup Language + +--- + +# HTML Grundlagen + +```html + + + + + Meine Seite + + +

Überschrift

+

Textabsatz

+ + +``` + +--- + +# Semantisches HTML + +```html +
Navigationsbereich
+ +
+
+
+

Überschrift

+

Inhalt

+
+
+
+ +``` + +--- + +# HTML – Tabellen und Listen + +```html + + + + + + + +
NamePreis
Produkt A29,99 €
+ + +``` + +--- + + + + + +# CSS – Cascading Style Sheets + +--- + +# CSS Grundlagen + +```css +/* Element */ +body { font-family: Arial, sans-serif; } + +/* Klasse */ +.button { background: #005f8a; color: white; } + +/* ID */ +#header { height: 60px; } + +/* Attribut */ +input[type="text"] { border: 1px solid #ccc; } +``` + +--- + +# CSS Layout – Flexbox + +```css +.container { + display: flex; + justify-content: space-between; + align-items: center; +} +``` + +--- + +# CSS Layout – Grid + +```css +.grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 20px; +} +``` + +--- + +# CSS – Box Model + +```css +.box { + margin: 10px; + border: 2px solid #005f8a; + padding: 20px; + width: 200px; + box-sizing: border-box; +} +``` + +--- + +# CSS Responsive + +```css +@media (max-width: 768px) { + .grid { + grid-template-columns: 1fr; + } +} +``` + +--- + + + + + +# JavaScript + +--- + +# JavaScript Grundlagen + +```javascript +// Variablen +let name = "Welt"; +const alter = 25; + +// Funktionen +function gruss(name) { + return `Hallo, ${name}!`; +} + +// Arrow Functions +const add = (a, b) => a + b; + +// Arrays +const arr = [1, 2, 3]; +arr.map(x => x * 2); // [2, 4, 6] +``` + +--- + +# DOM Manipulation + +```javascript +// Element auswählen +const title = document.querySelector('h1'); + +// Inhalt ändern +title.textContent = 'Neue Überschrift'; + +// Event Listener +button.addEventListener('click', () => { + alert('Geklickt!'); +}); +``` + +--- + +# Fetch API + +```javascript +fetch('/api/products') + .then(res => res.json()) + .then(data => { + console.log(data); + }) + .catch(err => console.error(err)); +``` + +--- + +# Async/Await + +```javascript +async function loadProducts() { + try { + const res = await fetch('/api/products'); + const data = await res.json(); + return data; + } catch (err) { + console.error('Fehler:', err); + } +} +``` + +--- + + + + +![bg fit](./assets/demos/web-ecosystem-rings.png) + + +--- + +# Fragen? + +1. Was ist der Unterschied zwischen `let` und `const`? +2. Wie funktioniert `fetch()`? +3. Was macht `box-sizing: border-box`? \ No newline at end of file diff --git a/slides/dhbw/02_css_extended.md b/slides/dhbw/02_css_extended.md new file mode 100644 index 0000000..fa5f78d --- /dev/null +++ b/slides/dhbw/02_css_extended.md @@ -0,0 +1,266 @@ +--- +marp: true +theme: gaia +paginate: true +backgroundColor: #fff +header: "Web Engineering – DHBW Stuttgart" +footer: "Michael Czechowski – SoSe 2025" +--- + + + + + + + +# CSS: Extended + +--- + +# CSS Selectors – Tag, Class, ID, Attribute + +```css +/* Tag */ +p { color: #333; } + +/* Class */ +.button { background: blue; } + +/* ID */ +#header { height: 60px; } + +/* Attribute */ +input[type="text"] { border: 1px solid #ccc; } +input[disabled] { background: #eee; } +``` + +--- + +# CSS Selectors – Attribut-Selektoren + +```css +/* presence */ +[disabled] { opacity: 0.5; } + +/* exact value */ +[type="email"] { border-color: blue; } + +/* contains word */ +[class~="btn"] { cursor: pointer; } + +/* starts with */ +[href^="https"] { color: green; } + +/* ends with */ +[src$=".png"] { border: 1px solid #ccc; } + +/* contains substring */ +[class*="icon"] { padding-left: 20px; } +``` + +--- + +# CSS Combinators + +```css +/* Child (direkt) */ +div > p { margin: 0; } + +/* Descendant (Nachkomme) */ +div p { margin: 0; } + +/* Next Sibling */ +h1 + p { font-size: 1.2em; } + +/* Subsequent Sibling */ +h1 ~ p { color: #666; } + +/* Selector List */ +h1, h2, h3 { font-weight: bold; } +``` + +--- + +# Pseudo Classes + +```css +/* User Interaction */ +:hover { color: red; } +:active { background: blue; } +:focus { outline: 2px solid orange; } + +/* Structure */ +:first-child { margin-left: 0; } +:last-child { margin-right: 0; } +:nth-child(odd) { background: #f9f9f9; } + +/* Links */ +:visited { color: purple; } +:link { color: blue; } +``` + +--- + +# Pseudo Classes – More + +```css +/* Form States */ +:valid { border-color: green; } +:invalid { border-color: red; } +:placeholder-shown { color: #999; } + +/* Content */ +:before { content: "→ "; } +:after { content: " [Wichtig]"; } +:first-letter { font-size: 2em; } +:first-line { font-weight: bold; } + +/* NOT */ +:not(.disabled) { pointer-events: auto; } +:not(:last-child) { border-bottom: 1px solid #ccc; } +``` + +--- + +# Shorthand Properties + +```css +/* margin: top right bottom left */ +margin: 10px 20px 10px 20px; + +/* centering */ +margin: 0 auto; + +/* padding same */ +padding: 20px; + +/* border: width style color */ +border: 1px solid #333; + +/* background: color image position/size repeat */ +background: #fff url(logo.png) 0 0 no-repeat; + +/* font: style variant weight size/line-height family */ +font: italic normal bold 16px/1.5 Arial, sans-serif; +``` + +--- + +# Flexbox Shorthands + +```css +/* flex: grow shrink basis */ +flex: 1 0 auto; + +/* place-items: align-items justify-items */ +place-items: center stretch; + +/* place-content: align-content justify-content */ +place-content: space-between center; + +/* gap: row-gap column-gap */ +gap: 20px 40px; +``` + +--- + +# CSS Custom Properties (Variables) + +```css +:root { + --primary-color: #005f8a; + --spacing: 20px; + --radius: 8px; +} + +.button { + background: var(--primary-color); + padding: var(--spacing); + border-radius: var(--radius); +} +``` + +--- + +# CSS Functions + +```css +/* calc */ +width: calc(100% - 40px); + +/* min/max/clamp */ +width: min(100%, 600px); +font-size: clamp(14px, 2vw, 20px); + +/* var with fallback */ +color: var(--text-color, #333); + +/* rgb/rgba/hsl/hsla */ +color: hsl(200, 100%, 50%); +background: rgba(0, 0, 0, 0.5); +``` + +--- + +# Transition & Animation + +```css +/* transition: property duration timing-function */ +transition: all 0.3s ease-in-out; +transition: background 0.2s, transform 0.1s; + +/* animation */ +@keyframes fadeIn { + from { opacity: 0; } + to { opacity: 1; } +} + +.fade-in { + animation: fadeIn 0.5s ease-out; +} +``` + +--- + +# Fragen? + +1. Was bedeutet `div > p` vs `div p`? +2. Wann nutzt du `nth-child(even)`? +3. Warum `--variable` statt direkt `#fff`? \ No newline at end of file diff --git a/slides/dhbw/03_nodejs_basics.md b/slides/dhbw/03_nodejs_basics.md new file mode 100644 index 0000000..de85129 --- /dev/null +++ b/slides/dhbw/03_nodejs_basics.md @@ -0,0 +1,228 @@ +--- +marp: true +theme: gaia +paginate: true +backgroundColor: #fff +header: "Web Engineering – DHBW Stuttgart" +footer: "Michael Czechowski – SoSe 2025" +--- + + + + + + + +# Node.js – Scripting, Running and Building + +--- + +# Node.js – Was ist das? + +- JavaScript Runtime (V8 Engine) +- Server-side JavaScript +- npm Package Manager +- Ideal für: APIs, CLI Tools, Automation + +--- + + + + +![bg fit](./assets/demos/nodejs-usecases.png) + + +--- + +# node --check und node -e + +```bash +# Syntax check only +node --check script.js + +# One-liner +node -e "console.log('Hallo Welt')" +``` + +--- + +# node -e Beispiele + +```bash +# String +node -e "console.log('Hello ' + process.argv[2])" Welt + +# File reading +node -e "console.log(require('fs').readFileSync('data.json'))" + +# JSON parsen +node -e "console.log(JSON.parse(process.argv[1]))" '{"a":1}' +``` + +--- + +# require() – Module laden + +```javascript +// Eigene Datei +const utils = require('./utils'); + +// npm Modul +const express = require('express'); + +// Built-in +const fs = require('fs'); +const path = require('path'); +``` + +--- + +# __dirname und __filename + +```javascript +// Aktuelles Verzeichnis (Node.js) +console.log(__dirname); // /home/user/project/src +console.log(__filename); // /home/user/project/src/app.js + +// Pfad joinen +const configPath = path.join(__dirname, '..', 'config.json'); +``` + +--- + +# HTTP Server mit Node.js (Built-in) + +```javascript +const http = require('http'); + +const server = http.createServer((req, res) => { + res.writeHead(200, { 'Content-Type': 'text/html' }); + res.end('

Hallo Welt!

'); +}); + +server.listen(3000, () => { + console.log('Server läuft auf Port 3000'); +}); +``` + +--- + +# fs – Dateien lesen/schreiben + +```javascript +const fs = require('fs'); + +// Async +fs.readFile('data.json', 'utf8', (err, data) => { + if (err) throw err; + console.log(JSON.parse(data)); +}); + +// Sync +const content = fs.readFileSync('data.json', 'utf8'); + +// Write +fs.writeFile('output.txt', 'Hallo Welt', (err) => { + if (err) throw err; +}); +``` + +--- + +# package.json – Das Herzstück + +```json +{ + "name": "mein-projekt", + "version": "1.0.0", + "main": "index.js", + "scripts": { + "start": "node index.js", + "dev": "node --watch index.js", + "test": "node --test" + }, + "dependencies": { + "express": "^4.18.0" + }, + "devDependencies": { + "nodemon": "^3.0.0" + } +} +``` + +--- + +# npm Scripts + +```bash +# npm run