dhbw: import original web-eng inhalte (testing, typescript, docker, best practices) + framework-übersicht, native html, prüfungsleistung-detail, sose 2026
This commit is contained in:
@@ -4,7 +4,7 @@ theme: gaia
|
||||
paginate: true
|
||||
backgroundColor: #fff
|
||||
header: "Web Engineering – DHBW Stuttgart"
|
||||
footer: "Michael Czechowski – SoSe 2025"
|
||||
footer: "Michael Czechowski – SoSe 2026"
|
||||
---
|
||||
|
||||
<style>
|
||||
@@ -259,6 +259,184 @@ transition: background 0.2s, transform 0.1s;
|
||||
|
||||
---
|
||||
|
||||
# CSS Specificity
|
||||
|
||||
Welcher Selektor gewinnt? **Punktezählung:**
|
||||
|
||||
```
|
||||
ID – 0,1,0,0
|
||||
Class / Attr / Pseudo-Class – 0,0,1,0
|
||||
Tag / Pseudo-Element – 0,0,0,1
|
||||
Inline Style – 1,0,0,0
|
||||
!important – setzt alles außer Kraft
|
||||
```
|
||||
|
||||
```css
|
||||
#main .btn:hover /* 0,1,2,0 */
|
||||
.btn.primary /* 0,0,2,0 */
|
||||
button[type="submit"] /* 0,0,1,1 */
|
||||
```
|
||||
|
||||
→ Faustregel: möglichst flach. `!important` vermeiden.
|
||||
|
||||
---
|
||||
|
||||
# CSS Frameworks
|
||||
|
||||
| Framework | Stil |
|
||||
|-----------|------|
|
||||
| **Bootstrap** | Komponenten + Grid, opinionated |
|
||||
| **Tailwind CSS** | Utility-First, atomar |
|
||||
| **Bulma** | klassisch, ohne JS |
|
||||
| **shadcn/ui** | kopierbare Komponenten (Tailwind-basiert) |
|
||||
| **Flowbite** | Tailwind-Komponentenbib. |
|
||||
|
||||
---
|
||||
|
||||
# Tailwind CSS – Beispiel
|
||||
|
||||
```html
|
||||
<button class="bg-blue-600 hover:bg-blue-700
|
||||
text-white font-semibold
|
||||
px-4 py-2 rounded-lg
|
||||
transition shadow-sm">
|
||||
Klick mich
|
||||
</button>
|
||||
```
|
||||
|
||||
- Keine eigenen CSS-Klassen mehr
|
||||
- JIT-Compiler erzeugt nur genutzte Klassen
|
||||
- Design-System via `tailwind.config.js`
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: invert -->
|
||||
<!-- _backgroundColor: #001520 -->
|
||||
|
||||
# No JavaScript, No Cry
|
||||
|
||||
## Native HTML statt JS-Komponenten
|
||||
|
||||
---
|
||||
|
||||
# Native HTML – Was früher JS brauchte
|
||||
|
||||
| Komponente | Native Alternative |
|
||||
|------------|--------------------|
|
||||
| Accordion / Collapsible | `<details>` + `<summary>` |
|
||||
| Modal / Dialog | `<dialog>` |
|
||||
| Date Picker | `<input type="date">` |
|
||||
| Time Picker | `<input type="time">` |
|
||||
| Color Picker | `<input type="color">` |
|
||||
| Range Slider | `<input type="range">` |
|
||||
| Progress Bar | `<progress>` |
|
||||
| Auto-Complete | `<datalist>` |
|
||||
|
||||
→ Baseline Widely Available (Chrome, Firefox, Safari, Edge).
|
||||
|
||||
---
|
||||
|
||||
# `<details>` + `<summary>`
|
||||
|
||||
```html
|
||||
<details>
|
||||
<summary>Mehr Infos</summary>
|
||||
<p>Hier steht der ausklappbare Inhalt.</p>
|
||||
</details>
|
||||
```
|
||||
|
||||
- Keine Zeile JS
|
||||
- Tastatur-zugänglich
|
||||
- Animierbar mit `::details-content` (CSS only)
|
||||
|
||||
---
|
||||
|
||||
# `<dialog>` – Native Modal
|
||||
|
||||
```html
|
||||
<dialog id="myDialog">
|
||||
<form method="dialog">
|
||||
<p>Wirklich löschen?</p>
|
||||
<button value="cancel">Abbrechen</button>
|
||||
<button value="ok">OK</button>
|
||||
</form>
|
||||
</dialog>
|
||||
|
||||
<button onclick="myDialog.showModal()">Öffnen</button>
|
||||
```
|
||||
|
||||
- `showModal()` blockt Hintergrund + ESC schließt
|
||||
- Backdrop via `dialog::backdrop`
|
||||
- Form mit `method="dialog"` schließt + liefert `returnValue`
|
||||
|
||||
---
|
||||
|
||||
# `<input type="date">` & Co.
|
||||
|
||||
```html
|
||||
<input type="date" min="2026-01-01" max="2026-12-31">
|
||||
<input type="time" step="60">
|
||||
<input type="color" value="#005f8a">
|
||||
<input type="range" min="0" max="100" step="5" value="50">
|
||||
<input type="number" min="1" max="300">
|
||||
```
|
||||
|
||||
- Plattform-native UI (Touch-Datepicker auf Mobile)
|
||||
- Validierung "for free"
|
||||
- Locale-Awareness vom Browser
|
||||
|
||||
---
|
||||
|
||||
# `<progress>` – Native Progress Bar
|
||||
|
||||
```html
|
||||
<progress value="70" max="100">70%</progress>
|
||||
|
||||
<!-- indeterminate -->
|
||||
<progress></progress>
|
||||
```
|
||||
|
||||
```css
|
||||
progress {
|
||||
width: 100%;
|
||||
height: 0.5rem;
|
||||
}
|
||||
progress::-webkit-progress-bar { background: #eee; }
|
||||
progress::-webkit-progress-value { background: #005f8a; }
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
# Form Validation – Native
|
||||
|
||||
```html
|
||||
<form>
|
||||
<input type="email" required
|
||||
pattern=".+@dhbw\.de"
|
||||
title="Bitte DHBW-Mail eingeben">
|
||||
<input type="password" minlength="8" required>
|
||||
<button>Login</button>
|
||||
</form>
|
||||
```
|
||||
|
||||
- `required`, `min`, `max`, `pattern`, `step`
|
||||
- `:invalid` / `:valid` CSS-Pseudoklassen
|
||||
- `form.checkValidity()` / `input.setCustomValidity()`
|
||||
|
||||
---
|
||||
|
||||
# Wann doch JS?
|
||||
|
||||
- Komplexe Interaktion über mehrere Komponenten
|
||||
- State, der nicht ins DOM gehört
|
||||
- Async / Server-Sync
|
||||
- Animationen mit komplexer Logik
|
||||
- Cross-Browser-Polyfills (selten heute)
|
||||
|
||||
→ **Default: HTML/CSS. JS nur wenn nötig.**
|
||||
|
||||
---
|
||||
|
||||
# Fragen?
|
||||
|
||||
1. Was bedeutet `div > p` vs `div p`?
|
||||
|
||||
Reference in New Issue
Block a user