From 82407679b5882e8ed5741a3b7b236832ad543701 Mon Sep 17 00:00:00 2001 From: Michael Czechowski Date: Thu, 7 May 2026 17:21:25 +0200 Subject: [PATCH] dhbw 01_web_eng: ecmascript-history slide (ecma international, ECMA-262, ES15, kompat-tabelle), html-anatomie ascii-diagramm (opening/closing tag, content, element, attribute), css-anatomie ascii-annotation (#description-beispiel mit pfeilen auf property+value), framework-logos als bg right:25% auf react/vue/svelte/astro/webpack/vite/parcel slides, a11y-test-slide layout fix (image inline statt bg-right wie hdm) --- slides/dhbw/01_web_eng.md | 96 +++++++++---- slides/dhbw/assets/logos/frameworks/astro.svg | 1 + .../dhbw/assets/logos/frameworks/gatsby.svg | 7 + .../dhbw/assets/logos/frameworks/nextjs.svg | 10 ++ slides/dhbw/assets/logos/frameworks/nuxt.svg | 1 + .../dhbw/assets/logos/frameworks/parcel.png | Bin 0 -> 49027 bytes slides/dhbw/assets/logos/frameworks/react.svg | 9 ++ .../dhbw/assets/logos/frameworks/svelte.svg | 20 +++ slides/dhbw/assets/logos/frameworks/vite.svg | 132 ++++++++++++++++++ slides/dhbw/assets/logos/frameworks/vue.svg | 2 + .../dhbw/assets/logos/frameworks/webpack.svg | 1 + 11 files changed, 249 insertions(+), 30 deletions(-) create mode 100644 slides/dhbw/assets/logos/frameworks/astro.svg create mode 100644 slides/dhbw/assets/logos/frameworks/gatsby.svg create mode 100644 slides/dhbw/assets/logos/frameworks/nextjs.svg create mode 100644 slides/dhbw/assets/logos/frameworks/nuxt.svg create mode 100644 slides/dhbw/assets/logos/frameworks/parcel.png create mode 100644 slides/dhbw/assets/logos/frameworks/react.svg create mode 100644 slides/dhbw/assets/logos/frameworks/svelte.svg create mode 100644 slides/dhbw/assets/logos/frameworks/vite.svg create mode 100644 slides/dhbw/assets/logos/frameworks/vue.svg create mode 100644 slides/dhbw/assets/logos/frameworks/webpack.svg diff --git a/slides/dhbw/01_web_eng.md b/slides/dhbw/01_web_eng.md index eb6fc26..031c177 100644 --- a/slides/dhbw/01_web_eng.md +++ b/slides/dhbw/01_web_eng.md @@ -611,17 +611,37 @@ Erfunden 1989 von Tim Berners-Lee. Aktuelle Version: HTML5 (seit 2014). # HTML-Anatomie (1/2) -Formattierungssprache mit strenger Syntax: - ``` - ... + Opening tag Closing tag + │ │ + ▼ ▼ +

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 -![bg right:35% fit](./assets/demos/keyboard-a11y.png) +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. +![w:900 center](./assets/demos/keyboard-a11y.png) --- @@ -1115,26 +1128,21 @@ p { # CSS-Anatomie -![bg right:35%](./assets/demos/css-anatomie.png) - ```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) +![bg right:25% fit](./assets/logos/frameworks/react.svg) + ```jsx import { useState } from "react"; @@ -1611,6 +1635,8 @@ function MyButton() { # Vue 3 – Composition API +![bg right:25% fit](./assets/logos/frameworks/vue.svg) + ```vue