3I_WTL_2025/AI_extra_material/UCITEL_INFO.md

👨‍🏫 Informace pro učitele - AI Projekty

📊 Analýza současného stavu studentů

✅ Co studenti již zvládají:

HTML:

• Základní struktura, nadpisy (h1-h6)
• Odkazy, obrázky
• Formuláře (input, textarea, select, button)
• Tabulky a seznamy
• Částečně sémantické elementy (header, footer, aside, article)

CSS:

• Základní selektory (element, třída, ID)
• Box model (margin, padding, border)
• Pseudo-třídy (:hover, :visited)
• Gradienty a transitions
• Flexbox (základy)
• Media queries (základy)
• Float-based layout (starší přístup)

JavaScript:

• Proměnné (let, const, var)
• Datové typy a objekty
• Podmínky a cykly
• Funkce
• DOM manipulace (getElementById, innerHTML, innerText)
• Event handling (inline onclick)
• JSON a Fetch API

⚠️ Co chybí před Bootstrapem:

KRITICKÉ mezery:

1. CSS Grid - chybí úplně
2. addEventListener - používají jen inline onclick
3. Pokročilé CSS selektory (nth-child, ::before, ::after)
4. CSS jednotky - používají jen px, ne rem/em/vh/vw
5. Position: sticky a absolute - nepoužito
6. Form validace s JS - jen základní

DOPORUČUJI doplnit: 7. CSS proměnné (custom properties) 8. Pokročilé animace 9. Scroll efekty 10. Mobile-first přístup

---

🎯 Účel AI projektů

Projekty byly navrženy tak, aby:

1. Systematicky doplnily mezery v znalostech
2. Postupně zvyšovaly náročnost (od jednoduchého po komplexní)
3. Připravily na Bootstrap filozofii (grid systém, utility třídy, komponenty)
4. Poskytly praktickou zkušenost s real-world projekty

---

📋 Přehled projektů pro učitele

AI 01 - CSS Grid & Responzivní Layout

Čas: 1-2 vyučovací hodiny Obtížnost: Střední Cíl: Naučit CSS Grid před Bootstrap grid systémem

Klíčové koncepty:

• display: grid
• grid-template-columns
• gap
• Pokročilé selektory (nth-child)
• Media queries pro responzivitu

Výstup: Responzivní galerie s 9 položkami

---

AI 02 - Sémantické HTML5 & CSS Positioning

Čas: 2-3 vyučovací hodiny Obtížnost: Náročné Cíl: Sémantický HTML5 a všechny typy positioning

Klíčové koncepty:

• Sémantické elementy (nav, main, section, article, aside)
• Position: fixed, sticky, relative, absolute
• CSS jednotky: rem, em, vh, vw
• Správná struktura moderní stránky

Výstup: Portfolio stránka s fixní navigací a sticky sidebar

---

AI 03 - Pokročilá Validace Formulářů

Čas: 2-3 vyučovací hodiny Obtížnost: Náročné Cíl: Real-time validace s JS (Bootstrap má validační třídy)

Klíčové koncepty:

• addEventListener místo inline events
• RegEx pro validaci
• DOM manipulace (classList)
• Real-time feedback
• UX best practices

Výstup: Registrační formulář s kompletní validací

---

AI 04 - Komplexní Bootstrap Prep Projekt

Čas: 4-6 vyučovacích hodin (nebo domácí práce) Obtížnost: Velmi náročné Cíl: Komplexní projekt kombinující všechny koncepty

Klíčové koncepty:

• Všechny předchozí koncepty
• CSS proměnné
• Scroll efekty
• Modal, accordion
• Mobile-first

Výstup: Plně funkční landing page

---

📅 Doporučený harmonogram

Varianta A - Intenzivní (2 týdny)

Týden 1:
Po: AI 01 + AI 02 začátek
St: AI 02 dokončení + AI 03 začátek
Pá: AI 03 dokončení

Týden 2:
Po-Pá: AI 04 (průběžně)
Pá: Prezentace AI 04

Týden 3:
Bootstrap start!

Varianta B - Standardní (3 týdny)

Týden 1:
Lekce 1: AI 01
Lekce 2: AI 02

Týden 2:
Lekce 1: AI 03 část 1
Lekce 2: AI 03 část 2

Týden 3:
Lekce 1-2: AI 04 (práce ve třídě)
DÚ: Dokončení AI 04

Týden 4:
Bootstrap start!

Varianta C - Volnočasová (4 týdny)

Týden 1: AI 01
Týden 2: AI 02
Týden 3: AI 03
Týden 4: AI 04

Týden 5: Bootstrap start!

---

🎓 Hodnocení projektů

AI 01 (10 bodů)

• HTML struktura (2b)
• CSS Grid implementace (3b)
• Media queries (2b)
• Pokročilé selektory (2b)
• Responzivita (1b)

AI 02 (15 bodů)

• Sémantická struktura (4b)
• Position: fixed, sticky (3b)
• Position: relative, absolute (3b)
• CSS jednotky (rem, em, vh) (2b)
• Responzivita (3b)

AI 03 (20 bodů)

• addEventListener použití (4b)
• Validační funkce (6b)
• RegEx implementace (3b)
• Visual feedback (4b)
• Submit handling (3b)

AI 04 (30 bodů)

• HTML struktura (5b)
• CSS Grid & Flexbox (6b)
• Positioning (4b)
• JavaScript interaktivita (6b)
• Responzivita (4b)
• Design & UX (3b)
• Clean code (2b)

Celkem: 75 bodů

---

💡 Tips pro učitele

Při výuce AI 01:

1. Začněte s vysvětlením rozdílu Grid vs Flexbox
2. Ukažte Chrome DevTools - Grid overlay
3. Procvičte nth-child na příkladech
4. Zdůrazněte mobile-first přístup

Při výuce AI 02:

1. Narýsujte positioning na tabuli (fixed, sticky, relative, absolute)
2. Ukažte proč používat rem místo px
3. Vysvětlete z-index context
4. Zdůrazněte důležitost sémantiky pro SEO

Při výuce AI 03:

1. Živě ukažte addEventListener vs onclick
2. Procvičte RegEx na regex101.com
3. Vysvětlete event.preventDefault()
4. Ukažte console.log() debugging

Při výuce AI 04:

1. Nechte studenty pracovat samostatně
2. Buďte dostupní pro konzultace
3. Povzbuďte kreativitu
4. Na konci nechte studenty prezentovat

---

🔧 Troubleshooting - Časté problémy studentů

CSS Grid:

Problem: "Grid nefunguje" Řešení: Zkontrolujte display: grid na kontejneru, ne na položkách

Positioning:

Problem: "Absolute element je mimo stránku" Řešení: Parent musí mít position: relative

addEventListener:

Problem: "Funkce se volá hned při načtení" Řešení: Nepsat validateName() ale jen validateName (bez závorek)

RegEx:

Problem: "RegEx nefunguje" Řešení: Otestujte na regex101.com, možná chybí escape znaky

Media queries:

Problem: "Responzivita nefunguje" Řešení: Zkontrolujte <meta name="viewport"> v head

---

📊 Očekávané výsledky

Po dokončení všech projektů by studenti měli:

Znát:

✅ Rozdíl mezi Grid a Flexbox a kdy co použít ✅ Všechny typy CSS positioning ✅ Jak vytvořit responzivní layout bez frameworku ✅ Jak validovat formuláře v JavaScriptu ✅ addEventListener a event handling ✅ Základy RegEx ✅ Mobile-first přístup

Umět:

✅ Vytvořit komplexní responzivní stránku ✅ Implementovat interaktivní funkce ✅ Validovat formuláře s visual feedbackem ✅ Používat pokročilé CSS selektory ✅ Debugovat pomocí Developer Tools

Být připraveni na:

✅ Bootstrap grid systém (pochopí jak funguje) ✅ Bootstrap komponenty (pochopí co řeší) ✅ Bootstrap utilities (pochopí proč existují) ✅ Přizpůsobení frameworku vlastním potřebám

---

🎯 Přechod na Bootstrap

Po dokončení AI projektů vysvětlete studentům:

1. Co Bootstrap řeší:

   • "Vzpomínáte, jak jste v AI 01 vytvářeli grid systém? Bootstrap to má už hotové."
   • "Vzpomínáte na validaci formuláře v AI 03? Bootstrap má validační třídy."

2. Proč jsme to dělali ručně:

   • "Teď rozumíte, co Bootstrap dělá pod kapotou."
   • "Když něco nebude fungovat, budete vědět proč."
   • "Umíte to bez frameworku = jste lepší developer."

3. Kdy použít Bootstrap vs custom CSS:

   • Bootstrap: Rychlé prototypování, standardní projekty
   • Custom: Unikátní design, optimalizace, portfolio projekty

---

📞 Podpora

Pokud najdete chyby v projektech nebo máte návrhy na zlepšení, kontaktujte:

• GitHub Issues v repozitáři
• Email učiteli
• Během konzultačních hodin

---

📝 Poznámky k implementaci

Struktura souborů:

ai_XX_project_name/
├── ZADANI.md          # Detailní zadání pro studenty
├── index.html         # Startovací HTML (s TODO komentáři)
├── style.css          # CSS šablona (s TODO komentáři)
├── script.js          # JS šablona (s TODO komentáři)
├── reseni.html        # Kompletní řešení
├── reseni.css         # CSS s podrobnými komentáři
└── reseni.js          # JS s podrobnými komentáři

Filozofie:

• Startovací soubory obsahují TODO a strukturu
• Řešení obsahuje detailní komentáře vysvětlující každý řádek
• ZADANI.md obsahuje learning objectives a užitečné odkazy

---

🎉 Závěr

Tyto projekty důkladně připraví studenty na Bootstrap. Investovaný čas se vrátí v:

• Lepším pochopení frameworku
• Schopnosti přizpůsobení
• Debugovacích dovednostech
• Celkově lepších web development skills

Hodně štěstí při výuce! 🚀

---

Vytvořeno: 24. října 2025 Předmět: Webové Technologie (WTL) Cílová skupina: 3. ročník IT