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)
This commit is contained in:
+66
-30
@@ -611,17 +611,37 @@ Erfunden 1989 von Tim Berners-Lee. Aktuelle Version: HTML5 (seit 2014).
|
||||
|
||||
# HTML-Anatomie (1/2)
|
||||
|
||||
Formattierungssprache mit strenger Syntax:
|
||||
|
||||
```
|
||||
<element attribute="value"> ... </element>
|
||||
Opening tag Closing tag
|
||||
│ │
|
||||
▼ ▼
|
||||
<p> My cat is very grumpy </p>
|
||||
└────────┬─────────┘
|
||||
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
|
||||
┌───────────────┐
|
||||
<p class="editor-note"> My cat is very grumpy </p>
|
||||
```
|
||||
|
||||
- **Attribute** stehen im opening tag
|
||||
- Format: `name="wert"` (Anführungszeichen empfohlen)
|
||||
- Mehrere Attribute durch Leerzeichen getrennt: `<input type="text" name="email" required>`
|
||||
|
||||
---
|
||||
|
||||
# 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
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
@@ -1632,6 +1658,8 @@ const count = ref(0);
|
||||
|
||||
# Svelte – Counter
|
||||
|
||||
|
||||
|
||||
```svelte
|
||||
<script>
|
||||
let count = 0;
|
||||
@@ -1650,6 +1678,8 @@ const count = ref(0);
|
||||
|
||||
# Astro – Content-First
|
||||
|
||||
|
||||
|
||||
```astro
|
||||
---
|
||||
const greeting = "Hallo DHBW";
|
||||
@@ -1680,6 +1710,8 @@ const greeting = "Hallo DHBW";
|
||||
|
||||
# Build Tools – Webpack
|
||||
|
||||
|
||||
|
||||
- Module Bundling (JS, CSS, Images)
|
||||
- Module Loaders + großes Plugin-Ökosystem
|
||||
- Code Splitting, HMR
|
||||
@@ -1691,6 +1723,8 @@ const greeting = "Hallo DHBW";
|
||||
|
||||
# Build Tools – Vite
|
||||
|
||||
|
||||
|
||||
```javascript
|
||||
// vite.config.js
|
||||
import { defineConfig } from "vite";
|
||||
@@ -1715,6 +1749,8 @@ export default defineConfig({
|
||||
|
||||
# Build Tools – Parcel
|
||||
|
||||
|
||||
|
||||
```json
|
||||
{
|
||||
"name": "my-project",
|
||||
|
||||
Reference in New Issue
Block a user