My cat is very grumpy
+ └────────┬─────────┘ + Content + └─────────────────────────────────┘ + Element ``` +- **Opening tag** + **Content** + **Closing tag** = **Element** - Öffnende und schließende Tags müssen identisch sein - Schließendes Tag hat ein `/` nach der Spitzklammer --- +# HTML-Anatomie — Attribute + +``` + Attribute + ┌───────────────┐ +My cat is very grumpy
+``` + +- **Attribute** stehen im opening tag +- Format: `name="wert"` (Anführungszeichen empfohlen) +- Mehrere Attribute durch Leerzeichen getrennt: `` + +--- + # HTML-Anatomie (2/2) Wir unterscheiden **umschließende** und **selbst-schließende** Tags. @@ -1050,20 +1070,13 @@ button:focus { outline: none; } --- -# Barrieren vermeiden — Praxis-Checkliste +# Barrierefreiheit testen - +Automatisierte Tools finden nur etwa **30 %** der Probleme. Manuelles Testen unverzichtbar — Gold-Standard: echte Nutzer:innen mit Assistiven Technologien. -**Tastatur-Test:** -- Alle Funktionen mit Tab + Enter erreichbar -- Fokus immer sichtbar -- Logische Tab-Reihenfolge, "Skip to main" als erstes +**Tastatur-Test** — Maus weglegen, nur Tab / Shift+Tab / Enter / Pfeiltasten: -**Screenreader-Test:** -- VoiceOver auf Mac (`Cmd + F5`) oder NVDA auf Windows -- Formular ausfüllen, Navigation prüfen - -**Gold-Standard:** Usability-Tests mit Menschen, die Assistive Technologien täglich nutzen — nicht nur "Augen schließen" als Simulation. + --- @@ -1115,26 +1128,21 @@ p { # CSS-Anatomie - - ```css -selector { - property: value; +/* ID selector */ +#description { + color: orangered; +/* │ └──── Indicates the value of the expression + │ + └──── Indicates the property of the expression */ } ``` -**Beispiel:** -```css -h1 { - color: #333333; - font-size: 2rem; - margin-bottom: 1rem; -} -``` - -Selektor → was wird gestylt -Property → welche Eigenschaft -Value → welcher Wert +- **Selector** — was wird gestylt (`#description` = Element mit `id="description"`) +- **Property** — welche Eigenschaft (`color`) +- **Value** — welcher Wert (`orangered`) +- **Declaration** — `property: value;` (Semikolon trennt Deklarationen) +- **Declaration block** — alles zwischen `{` und `}` --- @@ -1464,6 +1472,20 @@ p::first-letter { --- +# ECMAScript + +- **Ecma International** — European Computer Manufacturers Association +- Seit **1997** standardisiert als **ECMA-262** +- Implementierungen: **JavaScript** (Netscape, später Mozilla), **JScript** (Microsoft), **ActionScript** (Adobe Flash) etc. +- Aktuelle Version: **ECMAScript 2024 (ES15)**, jährliche Releases + +**Browser-Kompatibilität:** +- Faustregel: **ES2017+** läuft in allen modernen Browsern +- Ältere Targets via Transpiler (Babel, esbuild, swc, tsc) +- Kompatibilitätstabelle: [kangax.github.io/compat-table](https://kangax.github.io/compat-table/) + +--- + # JavaScript Grundlagen ```javascript @@ -1589,6 +1611,8 @@ Interaktive version: [nextlevelshit.github.io/web-engineering-mandala](https://n # React – Counter (JSX) + + ```jsx import { useState } from "react"; @@ -1611,6 +1635,8 @@ function MyButton() { # Vue 3 – Composition API + + ```vue