de:modul:m291:learningunits:lu01:theorie:a_intro

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Nächste Überarbeitung		 Vorhergehende Überarbeitung
de:modul:m291:learningunits:lu01:theorie:a_intro [2026/01/24 15:26] – angelegt gkochde: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%> <WRAP center round box 80%>
-**Ziel:** Sie können ein UI (z.B. Figma Screenshot) in **Bausteine** zerlegen, diese **gruppieren** und daraus eine saubere HTML-Struktur ableiten.+**Ziel:** Sie können ein UI (z.B. Figma Design) in **Bausteine** zerlegen, diese **gruppieren** und daraus eine saubere HTML-Struktur ableiten.
 </WRAP> </WRAP>
 +<WRAP center round download 60%>
 +Figma Software hier downloaden: [[https://www.figma.com/downloads/|Figma Download]] \\
 +</WRAP>
 +
  
 ==== Lernziele ==== ==== Lernziele ====
-* Sie erkennen typische UI-Elementklassen: **Layout**, **Formular**, **Navigation**, **Anzeige**. +  * Sie erkennen typische UI-Elementklassen: **Layout**, **Formular**, **Navigation**, **Anzeige**. 
-* Sie können UI-Teile sinnvoll gruppieren (Container denken) und **sprechende Namen** vergeben. +  * Sie können UI-Teile sinnvoll gruppieren und **sprechende Namen** vergeben. 
-* Sie entscheiden, welche HTML-Elemente semantisch passen (z.B. ''header'', ''nav'', ''main'', ''section'').+  * Sie entscheiden, welche HTML-Elemente semantisch passen (z.B. ''header'', ''nav'', ''main'', ''section'').
  
 ==== Vorgehen: In 6 Schritten “UI lesen” ==== ==== Vorgehen: In 6 Schritten “UI lesen” ====
-- **1. Grobscan:** Was sind die Hauptbereiche? (Header / Main / Footer) +  - **Grobscan:** Was sind die Hauptbereiche? (Header / Main / Footer) 
-- **2. Navigation finden:** Logo, Menu-Items, evtl. Switch/Buttons. +  - **Navigation finden:** Logo, Menu-Items, evtl. Switch/Buttons. 
-- **3. Sections finden:** “Hero”, “Cards”, “FAQ”, “Player” usw. +  - **Sections finden:** “Hero”, “Cards”, “FAQ”, “Player” usw. 
-- **4. Gruppieren:** Was gehört zusammen? (Buttons als Gruppe, Menu-Links als Liste, Features als Gruppe) +  - **Gruppieren:** Was gehört zusammen? (Buttons als Gruppe, Menu-Links als Liste, Features als Gruppe) 
-- **5. Layout überlegen:** 2-Spalten? Zentriert? Wrap auf Mobile? (meist Flexbox/Responsive) +  - **Layout überlegen:** 2-Spalten? Zentriert? Wrap auf Mobile? (meist Flexbox/Responsive) 
-- **6. Wiederholungen erkennen:** Komponenten (Button-Stile, Text-Stile, Spacing-Regeln, Farben)+  - **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%> <WRAP center round box 80%>
Zeile 22: Zeile 31:
 </WRAP> </WRAP>
  
-==== UI → HTML Mapping (Mini-Tabelle) ====+==== UI → HTML Mapping ==== 
 + 
 +<WRAP center round box 80%>
 ^ UI-Teil ^ Typ ^ Sinnvolles HTML ^ Layout-Idee ^ ^ 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'' | | Menu-Items | Navigation | ''nav'' + ''ul/li/a'' | ''display:flex'' + ''gap'' |
 | Hero-Textblock | Anzeige | ''h1/h3/p'' in Container | Spalte links | | Hero-Textblock | Anzeige | ''h1/h3/p'' in Container | Spalte links |
 | Buttons (2 Stück) | Formular/Interaktion | ''button'' in Wrapper | Wrapper: ''display:flex'' | | Buttons (2 Stück) | Formular/Interaktion | ''button'' in Wrapper | Wrapper: ''display:flex'' |
 | “Features” (2 Bulletpoints) | Anzeige | ''ul/li'' (oder ''div/span'') | Icons via ''::before'' | | “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 | | Hero-Bild | Anzeige | ''img'' (evtl. ''srcset'') | Spalte rechts |
- +</WRAP>
-==== Übung (10–12 Min.) ==== +
-* Markieren Sie im Design (Screenshot) mit Stift/Sticky: +
-  - Header +
-  - Navigation +
-  - Hero Section +
-  - Button-Gruppe +
-  - Feature-Gruppe +
-* Schreiben Sie daneben je **1 Container-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)?+
  
  • de/modul/m291/learningunits/lu01/theorie/a_intro.1769264761.txt.gz
  • Zuletzt geändert: 2026/01/24 15:26
  • von gkoch