From 6b33a79d9c3889e48af27d7eccebf8eb5b92a75c Mon Sep 17 00:00:00 2001 From: Michael Czechowski Date: Thu, 7 May 2026 14:21:19 +0200 Subject: [PATCH] =?UTF-8?q?dhbw=2001=5Fweb=5Feng:=20=C3=BCber-mich=20aktua?= =?UTF-8?q?lisiert=20(systems=20&=20platform=20engineer,=20dhbw-mail),=20o?= =?UTF-8?q?nboarding-block=20(werkzeuge/os,=20node-install=20pro=20os=20mi?= =?UTF-8?q?t=20lts=20node=2024,=20versionsmanager,=20alternative=20runtime?= =?UTF-8?q?s=20deno/bun,=20editor,=20browser-devtools,=20http-clients,=20g?= =?UTF-8?q?it=20setup,=20projekt-skeleton),=20html-block=20aus=20hdm=20(wa?= =?UTF-8?q?s=20ist=20html,=20anatomie,=20metadaten,=20tags+attribute,=20na?= =?UTF-8?q?tive=20html),=20css-block=20aus=20hdm=20(selektoren,=20spezifit?= =?UTF-8?q?=C3=A4t,=20box-modell,=20farben,=20einheiten,=20pseudo-klassen,?= =?UTF-8?q?=20responsive),=20mandala-PNG=20mit=20erkl=C3=A4rungs-folie,=20?= =?UTF-8?q?font=201.7=E2=86=921.4rem,=20semesterplan=20+=20pr=C3=BCfungsle?= =?UTF-8?q?istung=20details,=20ascii-browser-request=20raus=20(PNG=20bleib?= =?UTF-8?q?t),=20kleine=20fixes=20(chromium=20statt=20chrome,=20cli=20aufg?= =?UTF-8?q?el=C3=B6st,=20brew-link,=20jetbrains=20edu,=20hoppscotch,=20sol?= =?UTF-8?q?id=20abk=C3=BCrzungen=20aufgel=C3=B6st)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- slides/dhbw/01_web_eng.md | 964 ++++++++++++++++++++++++++++++++++---- 1 file changed, 862 insertions(+), 102 deletions(-) diff --git a/slides/dhbw/01_web_eng.md b/slides/dhbw/01_web_eng.md index 50feaf0..62731b0 100644 --- a/slides/dhbw/01_web_eng.md +++ b/slides/dhbw/01_web_eng.md @@ -18,7 +18,7 @@ section.invert { --color-foreground: #fff; } section { - font-size: 1.7rem; + font-size: 1.4rem; } h1 { color: #005f8a; @@ -69,14 +69,18 @@ a { --- -# Wer bist du, was machst du? +# Über mich -- B.Sc. Wirtschaftsinformatik (Leibniz-FH Hannover) -- Angestellt bei PONS Langenscheidt GmbH in Stuttgart -- Honorardozent und Berater +**Michael Werner Czechowski** -**Bisherige Vorlesungen (DHBW/Leibniz-FH):** -- Social Engineering, Mobile Medien, Web Eng +- Systems and Platform Engineer +- Schwerpunkte: + - Web-Technologien, Barriere-Armut, Open Source +- Hintergrund: + - Philosophie (Uni Stuttgart) + - Wirtschaftsinformatik (Leibniz-FH Hannover) +- Honorardozent (DHBW Stuttgart, HdM Stuttgart, Leibniz-FH) +- Kontakt: michael.czechowski@lehre.dhbw-stuttgart.de --- @@ -100,7 +104,7 @@ a { # Prüfungsleistung – Übersicht -Eigenes Projekt: **Web-App** ODER **Backend** (API/CLI). +Eigenes Projekt: **Web-App** ODER **Backend** (API/CLI — Command-Line Interface). **Grundanforderungen (75 Punkte)** @@ -131,7 +135,12 @@ Eigenes Projekt: **Web-App** ODER **Backend** (API/CLI). - `README.md` (clone, start, contribute) - **KISS** – Keep It Simple, Stupid -- **SOLID** – SRP, OCP, LSP, ISP, DIP +- **SOLID:** + - **S**ingle Responsibility Principle + - **O**pen/Closed Principle + - **L**iskov Substitution Principle + - **I**nterface Segregation Principle + - **D**ependency Inversion Principle - **DI** – Dependency Injection - **Testing-Pyramide** (Unit, Integration, E2E) - **Exception/Error Handling** @@ -165,23 +174,6 @@ Details: https://git.dailysh.it/DHBW/pruefungsleistung --- -# 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 ------------| -``` - ---- - @@ -208,26 +200,249 @@ Content-Type: application/json --- -# Entwicklungsumgebung + + + -**Tools:** -- Node.js + npm -- VS Code -- Git -- Chrome DevTools +# Onboarding +## Tools, Runtimes, Workflows --- -# Versionierung mit Git +# Werkzeuge & Betriebssystem + +**Was du brauchst:** +- Terminal (zsh/bash/fish/pwsh) +- Editor (siehe folgende Folie) +- JavaScript-Runtime (Node.js / Bun / Deno) +- Browser mit DevTools (Chromium / Firefox / Safari) +- Git + +**OS-Empfehlung:** + +| OS | Status | +|----|--------| +| **macOS** | First-class, viele Tools "just work" | +| **Linux** | First-class, beste Server-Parität | +| **Windows + WSL2** | Empfohlen — Windows-CLI hat Edge Cases | +| **Windows nativ** (PowerShell) | Funktioniert, aber holpriger Pfad | + +--- + +# Node.js installieren – macOS + +Empfohlen: **LTS** (aktuell **Node.js 24** — Stand 2026). + +Paketmanager: **[Homebrew](https://brew.sh)** ```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 +# Homebrew installieren (falls nicht vorhanden) +/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" + +# Node.js LTS installieren +brew install node@24 + +# Version prüfen +node --version +npm --version ``` +Alternative: Installer von [nodejs.org](https://nodejs.org) + +--- + +# Node.js installieren – Linux + +Empfohlen: **LTS** (aktuell **Node.js 24**). + +**Debian / Ubuntu** ([NodeSource](https://github.com/nodesource/distributions)): +```bash +curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash - +sudo apt install -y nodejs +``` + +**Arch / Manjaro:** +```bash +sudo pacman -S nodejs npm +``` + +**Fedora / RHEL:** +```bash +sudo dnf module install nodejs:24/common +``` + +→ Distro-Pakete sind oft **veraltet**. Versionsmanager (folgende Folie) bevorzugen. + +--- + +# Node.js installieren – Windows + +Empfohlen: **LTS** (aktuell **Node.js 24**). + +**Option 1: winget** (empfohlen, Win 10/11): +```powershell +winget install OpenJS.NodeJS.LTS +``` + +**Option 2: Chocolatey** ([chocolatey.org](https://chocolatey.org)): +```powershell +choco install nodejs-lts +``` + +**Option 3: Scoop** ([scoop.sh](https://scoop.sh)): +```powershell +scoop install nodejs-lts +``` + +**Option 4:** Installer von [nodejs.org](https://nodejs.org) + +→ **Empfehlung:** WSL2 + Linux-Workflow nutzen. + +--- + +# Direkt-Install: Nachteil + +Egal welcher Weg — System-Install kennt nur **eine** Node-Version gleichzeitig. + +Verschiedene Projekte → verschiedene Node-Versionen → **Versionsmanager**. + +--- + +# Node-Versionsmanager + +Verschiedene Projekte brauchen oft verschiedene Node-Versionen. **Lösung:** Versionsmanager. + +| Tool | Sprache | Geschwindigkeit | Plattform | +|------|---------|-----------------|-----------| +| **nvm** | Bash | langsam (Shell-Funktion) | macOS, Linux | +| **fnm** | Rust | sehr schnell | macOS, Linux, Windows | +| **asdf** | Bash | mittel, multi-language | macOS, Linux | +| **volta** | Rust | schnell, pinning per `package.json` | alle | + +```bash +# fnm +curl -fsSL https://fnm.vercel.app/install | bash +fnm install --lts # aktuell Node 24 +fnm use lts-latest + +# .nvmrc / .node-version automatisch +echo "lts/*" > .nvmrc +fnm use # liest .nvmrc +``` + +--- + +# Alternative Runtimes + +| Runtime | Erschienen | Engine | USP | +|---------|------------|--------|-----| +| **Node.js** | 2009 | V8 (C++) | Standard, größtes Ökosystem | +| **Deno** | 2020 | V8 (Rust) | Sicherheit, TypeScript nativ, Std-Lib | +| **Bun** | 2022 | JavaScriptCore (Zig) | Geschwindigkeit, all-in-one | + +```bash +# Deno +curl -fsSL https://deno.land/install.sh | sh +deno run main.ts + +# Bun +curl -fsSL https://bun.sh/install | bash +bun install +bun run dev +``` + +→ Im Kurs primär **Node.js**. Du darfst gerne Bun/Deno nutzen. + +--- + +# Editor + +- **VS Code** (empfohlen) — kostenlos, große Plugin-Auswahl +- **JetBrains WebStorm** — sehr mächtig, kostenpflichtig + - kostenlos für Studierende via [JetBrains Education](https://www.jetbrains.com/community/education/#students) +- **Neovim / Helix** — für CLI-Profis +- **Zed** — modern, schnell + +--- + +# Browser DevTools + +Chromium / Firefox / Safari — `F12` oder `Cmd+Opt+I` + +Chromium = Open-Source-Basis von Chrome, Edge, Brave, Opera, Vivaldi etc. + +**Wichtigste Panels:** +- **Network** — HTTP-Requests, Responses, Timing +- **Console** — `console.log`, JS-Errors, REPL +- **Elements** — DOM-Inspektor, Live-CSS-Editor +- **Sources** — Debugger, Breakpoints, Source-Maps +- **Performance** — Profiling, Frame-Rate, FPS +- **Application** — LocalStorage, Cookies, Service Workers + +--- + +# HTTP-Clients + +- **Bruno** ([usebruno.com](https://usebruno.com)) — open source, git-friendly +- **Hoppscotch** ([hoppscotch.io](https://hoppscotch.io)) — open source, browser-basiert (vormals Postwoman) +- **Insomnia** / **Postman** — etabliert, freemium +- **curl** / **httpie** — CLI (Command-Line Interface, scriptbar) + +--- + +# Git Setup & Workflow + +**Einmalige Konfiguration:** +```bash +git config --global user.name "Dein Name" +git config --global user.email "du@example.com" +git config --global init.defaultBranch main +git config --global pull.rebase true +``` + +**SSH-Key für GitHub/GitLab:** +```bash +ssh-keygen -t ed25519 -C "du@example.com" +cat ~/.ssh/id_ed25519.pub # → in GitHub-Settings einfügen +``` + +**Tägliche Befehle:** +```bash +git status # was hat sich geändert? +git add # für Commit vormerken +git commit -m "feat: ..." # Conventional Commits +git push # hochladen +git pull --rebase # neueste Änderungen holen +``` + +--- + +# Projekt-Skeleton + +```bash +mkdir mein-projekt && cd mein-projekt +git init +npm init -y # erzeugt package.json +echo "node_modules" > .gitignore +echo ".env" >> .gitignore +npm install express +``` + +**`package.json` minimal:** +```json +{ + "name": "mein-projekt", + "version": "0.1.0", + "type": "module", + "scripts": { + "start": "node index.js", + "dev": "node --watch index.js" + } +} +``` + +`.env` für Secrets (nie committen!), `.env.example` mit Dummy-Werten committen. + --- @@ -238,60 +453,285 @@ git push -u origin main --- -# HTML Grundlagen +# Was ist HTML? (1/2) + +**H**yper**T**ext **M**arkup **L**anguage + +- **Keine** Programmiersprache +- Am ehesten eine Formattierungssprache +- Beschreibt **Struktur und Aufbau** einer Webseite + +```html +

Das ist ein Absatz.

+ +``` + +Erfunden 1989 von Tim Berners-Lee. Aktuelle Version: HTML5 (seit 2014). + +--- + +# Was ist HTML? (2/2) + +- Mit HTML werden **HTML-Dokumente** beschrieben (`index.html`) +- Ein HTML-Dokument beschreibt das **Document Object Model (DOM)** +- Der DOM ist eine **hierarchische Baumstruktur** (Eltern, Kinder, Geschwister) + - *parent* nodes / elements + - *child* nodes / elements + - *sibling* nodes / elements + +In HTML sprechen wir von **Elementen**, in JavaScript eher von **Nodes**. + +--- + +# HTML-Anatomie (1/2) + +Formattierungssprache mit strenger Syntax: + +``` + ... +``` + +- Öffnende und schließende Tags müssen identisch sein +- Schließendes Tag hat ein `/` nach der Spitzklammer + +--- + +# HTML-Anatomie (2/2) + +Wir unterscheiden **umschließende** und **selbst-schließende** Tags. + +**Umschließend:** +- ` ... ` – fett-gedruckter Text (inline) +- ` ... ` – Hyperlink +- ` ... ` – sichtbarer Teil eines HTML-Dokuments +- `
...
` – Aufklapp-Text / Akkordion + +**Selbst-schließend:** +- `` – Bild, Vektorgrafik +- `` – Eingabefeld +- `` – Metadaten + +--- + +# Darstellungsebene und Metadaten + +```html + + + METADATEN + + + DARSTELLUNGSEBENE + + +``` + +Ein HTML-Dokument besteht aus zwei Teilen: +- ` ... ` – Metadaten für Browser, Suchmaschinen, Social Sharing +- ` ... ` – darzustellender Inhalt, Text, Formulare + +--- + +# HTML Metadaten + +```html + + + DHBW Stuttgart + + + + ... + +``` + +*Webseiten besuchen nicht nur Menschen, sondern auch Suchmaschinen, Bots, Screen-Reader. Metadaten helfen beim "Verstehen" der Inhalte.* + +--- + +# HTML Metadaten – Vertiefung + +| Tag | Funktion | +|-----|----------| +| `` | Browser-Tab, Suchergebnis-Titel | +| `<meta charset>` | Zeichenkodierung (Umlaute!) | +| `<meta viewport>` | Mobile Darstellung | +| `<meta description>` | Suchergebnis-Snippet (max 160 Zeichen) | + +**Open Graph** (Social-Media-Vorschau): +```html +<meta property="og:title" content="Artikel-Titel"> +<meta property="og:image" content="https://example.com/preview.jpg"> +``` + +→ Wirkt auf Mastodon, LinkedIn, Signal, Slack, MS Teams ... + +**SEO:** Google nutzt `<title>` + `<meta description>` für Ranking + Snippet. + +--- + +# HTML-Tags und Attribute + +![bg right:35%](./assets/demos/tag-attribut.png) + +```html +<body> + <p class="wichtig">Das ist ein wichtiger Absatz.</p> + <p>Das ist ein gewöhnlicher Absatz.</p> +</body> +``` + +| Teil | Bezeichnung | +|------|-------------| +| `<p>` | Opening Tag | +| `class="wichtig"` | Attribut | +| `Das ist ein wichtiger Absatz.` | Inhalt | +| `</p>` | Closing Tag | + +--- + +# HTML-Tags und Attribute (selbst-schließend) + +![bg right:35%](./assets/demos/input-date.png) + +```html +Geburtsdatum <input type="date" /> +``` + +| Teil | Bezeichnung | +|------|-------------| +| `<input ...` | Eingabefeld | +| `type="date"` | Attribut *type* mit Wert *date* | +| `... />` | Schließendes `/` im (öffnenden) Tag | + +--- + +# Vollständiges Grundgerüst + +![bg right:35%](./assets/demos/grundgeruest.png) ```html <!DOCTYPE html> <html lang="de"> <head> - <meta charset="UTF-8"> - <title>Meine Seite + Portfolio von ... + + -

Überschrift

-

Textabsatz

+

Hallo Welt!

+

Das ist mein erster Absatz.

``` --- -# Semantisches HTML +# Die wichtigsten Tags + +| Tag | Bedeutung | +|-----|-----------| +| `

` … `

` | Überschriften (h1 = größte) | +| `

` | Absatz (Paragraph) | +| ` ... ` | Hyperlink | +| `` | Bild | +| `

    `, `
      `, `
    1. ` | Listen | +| `
      ` | Container / Box | +| `` | Inline-Container | +| `` | Eingabefeld | + +Semantische Tags (`
      `, `
      `, `
      `, `