Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- de:modul:m291:learningunits:lu01:theorie:a_intro [2026/01/24 16:27] – gkoch
+++ de:modul:m291:learningunits:lu01:theorie:a_intro [2026/02/02 13:18] (aktuell) – gkoch
@@ Zeile 1: / Zeile 1: @@
-====== UI-Elemente lesen (Figma → HTML) ======
+====== LU01a - UI-Designs lesen und interpretieren (Figma → HTML) ======
 <WRAP center round box 80%>
 **Ziel:** Sie können ein UI (z.B. Figma Design) in **Bausteine** zerlegen, diese **gruppieren** und daraus eine saubere HTML-Struktur ableiten.
 </WRAP>
+<WRAP center round download 60%>
+Figma Software hier downloaden: [[https://www.figma.com/downloads/|Figma Download]] \\
+</WRAP>
 ==== Lernziele ====
@@ Zeile 17: / Zeile 21: @@
   - **Layout überlegen:** 2-Spalten? Zentriert? Wrap auf Mobile? (meist Flexbox/Responsive)
   - **Wiederholungen erkennen:** Komponenten (Button-Stile, Text-Stile, Spacing-Regeln, Farben)
+<WRAP center round box 80%>
+{{ :de:modul:m291:learningunits:lu01:theorie:m291_lu01_intro_large.gif?nolink |}}
+//Animation: Schrittweise das UI-Design unterteilen in Header/Main, Section, Gruppen.//
+</WRAP>
 <WRAP center round box 80%>
@@ Zeile 22: / Zeile 31: @@
 </WRAP>
-==== UI → HTML Mapping (Mini-Tabelle) ====
+==== UI → HTML Mapping ====
+<WRAP center round box 80%>
 ^ UI-Teil ^ Typ ^ Sinnvolles HTML ^ Layout-Idee ^
-| Logo | Anzeige | ''a'' + ''img'' | in Flexbox-Reihe im Header |
+| Logo | Anzeige & Navigation | ''a'' + ''img'' | in Flexbox-Reihe im Header |
 | Menu-Items | Navigation | ''nav'' + ''ul/li/a'' | ''display:flex'' + ''gap'' |
 | Hero-Textblock | Anzeige | ''h1/h3/p'' in Container | Spalte links |
 | Buttons (2 Stück) | Formular/Interaktion | ''button'' in Wrapper | Wrapper: ''display:flex'' |
 | “Features” (2 Bulletpoints) | Anzeige | ''ul/li'' (oder ''div/span'') | Icons via ''::before'' |
-| Dark/Light Switch | Formular/Interaktion | ''input type=checkbox'' (role=switch) | CSS-Switch Pattern |
+| Dark/Light Switch | Formular/Interaktion | ''input type=checkbox'' | SVG-Icons werden über checkbox gelegt.|
 | Hero-Bild | Anzeige | ''img'' (evtl. ''srcset'') | Spalte rechts |
+</WRAP>
-==== Übung (10–12 Min.) ====
-  * Markieren Sie im Design (Screenshot) mit Stift:
-    - Header
-    - Navigation
-    - Hero Section
-    - Button-Gruppe
-    - Feature-Gruppe
-  * Schreiben Sie daneben je einen möglichen **HTML-Klassen-Name oder ID-Name** (z.B. ''hero-content'', ''hero-actions'', ''site-nav'').
-==== Qualitätscheck (2 Min.) ====
-  - Sind Menu-Links als **Liste** umgesetzt?
-  - Gibt es pro Seite nur **1× h1**?
-  - Haben Bilder sinnvolle **alt**-Texte?
-  - Sind Gruppen wirklich **gruppiert** (Wrapper vorhanden)?