skrabanek
7 days ago
14 changed files with 23 additions and 1124 deletions
@ -1,249 +0,0 @@ |
|||
# 🤖 AI Projekty - Příprava na Bootstrap |
|||
|
|||
Tyto projekty byly vytvořeny pro důkladné procvičení HTML, CSS a JavaScript konceptů před začátkem práce s Bootstrap frameworkem. |
|||
|
|||
## 📋 Přehled projektů |
|||
|
|||
### 🎨 AI 01 - CSS Grid & Responzivní Layout |
|||
**Složitost:** ⭐⭐ Střední |
|||
**Čas:** 45-60 minut |
|||
**Zaměření:** CSS Grid, pokročilé selektory, media queries |
|||
|
|||
**Co se naučíte:** |
|||
- CSS Grid (grid-template-columns, gap) |
|||
- nth-child, first-child, last-child selektory |
|||
- Responzivní design s media queries |
|||
- CSS transformace při hover |
|||
|
|||
**Soubory:** |
|||
- `ai_01_grid_responsive/ZADANI.md` - Detailní zadání |
|||
- `ai_01_grid_responsive/index.html` - Startovací HTML |
|||
- `ai_01_grid_responsive/style.css` - CSS šablona |
|||
- `ai_01_grid_responsive/reseni.html` - Kompletní řešení |
|||
- `ai_01_grid_responsive/reseni.css` - CSS řešení s komentáři |
|||
|
|||
--- |
|||
|
|||
### 🏗️ AI 02 - Sémantické HTML5 & CSS Positioning |
|||
**Složitost:** ⭐⭐⭐ Náročné |
|||
**Čas:** 60-90 minut |
|||
**Zaměření:** Sémantické elementy, positioning, jednotky |
|||
|
|||
**Co se naučíte:** |
|||
- HTML5 sémantické elementy (nav, main, section, article, aside) |
|||
- Position: fixed, sticky, relative, absolute |
|||
- CSS jednotky: rem, em, vh, vw |
|||
- Strukturu moderní webové stránky |
|||
|
|||
**Soubory:** |
|||
- `ai_02_semantic_portfolio/ZADANI.md` |
|||
- `ai_02_semantic_portfolio/index.html` |
|||
- `ai_02_semantic_portfolio/style.css` |
|||
- `ai_02_semantic_portfolio/reseni.html` |
|||
- `ai_02_semantic_portfolio/reseni.css` |
|||
|
|||
--- |
|||
|
|||
### ✅ AI 03 - Pokročilá Validace Formulářů |
|||
**Složitost:** ⭐⭐⭐ Náročné |
|||
**Čas:** 90-120 minut |
|||
**Zaměření:** JavaScript validace, event handling, RegEx |
|||
|
|||
**Co se naučíte:** |
|||
- addEventListener vs inline events |
|||
- Form validation s JavaScriptem |
|||
- Regulární výrazy (RegEx) |
|||
- DOM manipulace (classList, innerHTML) |
|||
- Real-time validace s visual feedbackem |
|||
|
|||
**Soubory:** |
|||
- `ai_03_form_validation/ZADANI.md` |
|||
- `ai_03_form_validation/index.html` |
|||
- `ai_03_form_validation/style.css` |
|||
- `ai_03_form_validation/script.js` |
|||
- `ai_03_form_validation/reseni.html` |
|||
- `ai_03_form_validation/reseni.css` |
|||
- `ai_03_form_validation/reseni.js` |
|||
|
|||
--- |
|||
|
|||
### 🚀 AI 04 - Komplexní Bootstrap Prep Projekt |
|||
**Složitost:** ⭐⭐⭐⭐ Velmi náročné |
|||
**Čas:** 4-6 hodin |
|||
**Zaměření:** Komplexní projekt kombinující VŠE |
|||
|
|||
**Co se naučíte:** |
|||
- Všechny předchozí koncepty dohromady |
|||
- CSS proměnné (custom properties) |
|||
- Pokročilé animace |
|||
- Scroll efekty |
|||
- Modal okna, accordions |
|||
- Mobile-first přístup |
|||
|
|||
**Soubory:** |
|||
- `ai_04_prep_bootstrap/ZADANI.md` - Komplexní zadání |
|||
- `ai_04_prep_bootstrap/index.html` |
|||
- `ai_04_prep_bootstrap/css/style.css` |
|||
- `ai_04_prep_bootstrap/css/animations.css` |
|||
- `ai_04_prep_bootstrap/js/main.js` |
|||
- `ai_04_prep_bootstrap/js/validation.js` |
|||
- `ai_04_prep_bootstrap/js/scroll.js` |
|||
- `ai_04_prep_bootstrap/RESENI_PRIKLAD.md` - Tips & příklady |
|||
|
|||
--- |
|||
|
|||
## 🎯 Doporučený postup |
|||
|
|||
### Týden 1: |
|||
- **Den 1-2:** AI 01 - CSS Grid (+ opakování Grid konceptů) |
|||
- **Den 3-4:** AI 02 - Sémantika & Positioning (+ opakování HTML5) |
|||
|
|||
### Týden 2: |
|||
- **Den 1-3:** AI 03 - Validace formulářů (+ opakování JavaScript) |
|||
- **Den 4-5:** Příprava na AI 04 (zopakovat vše) |
|||
|
|||
### Týden 3: |
|||
- **Celý týden:** AI 04 - Komplexní projekt |
|||
- **Prezentace:** Konec týdne |
|||
|
|||
### Týden 4: |
|||
- **Začátek Bootstrap!** 🎉 |
|||
|
|||
--- |
|||
|
|||
## 📚 Co budete znát po dokončení všech projektů |
|||
|
|||
### HTML: |
|||
✅ Sémantické HTML5 elementy |
|||
✅ Formuláře a jejich atributy |
|||
✅ Správná struktura dokumentu |
|||
✅ Accessibility best practices |
|||
|
|||
### CSS: |
|||
✅ CSS Grid systém |
|||
✅ Flexbox |
|||
✅ Positioning (všechny typy) |
|||
✅ Media queries & responzivita |
|||
✅ CSS proměnné |
|||
✅ Jednotky (rem, em, vh, vw) |
|||
✅ Pseudo-třídy a pseudo-elementy |
|||
✅ Animations & transitions |
|||
✅ Gradienty, shadows, filters |
|||
|
|||
### JavaScript: |
|||
✅ DOM manipulace |
|||
✅ Event handling (addEventListener) |
|||
✅ Form validation |
|||
✅ Podmínky a cykly |
|||
✅ Funkce (function declaration, arrow functions) |
|||
✅ Regulární výrazy (RegEx) |
|||
✅ Práce s objekty a poli |
|||
|
|||
--- |
|||
|
|||
## 🔍 Proč tyto projekty před Bootstrapem? |
|||
|
|||
Bootstrap je mocný framework, ale bez pochopení základních konceptů můžete: |
|||
- Neumět framework přizpůsobit svým potřebám |
|||
- Vytvářet neefektivní kód |
|||
- Záviset na frameworku místo pochopení problému |
|||
- Mít problém při debugování |
|||
|
|||
**Po těchto projektech budete:** |
|||
- Rozumět, co Bootstrap dělá "pod kapotou" |
|||
- Umět rozhodnout, kdy Bootstrap použít a kdy ne |
|||
- Efektivně přizpůsobovat Bootstrap komponenty |
|||
- Psát lepší a čistší kód |
|||
|
|||
--- |
|||
|
|||
## 💡 Tips pro studenty |
|||
|
|||
### Při řešení projektů: |
|||
1. **Nejdřív HTML struktura** - Vždy začněte správnou HTML strukturou |
|||
2. **Pak mobile styling** - CSS začněte od mobile verzí (mobile-first) |
|||
3. **JavaScript na konec** - Interaktivitu přidávejte, když máte hotové HTML & CSS |
|||
4. **Časté testování** - Testujte často v browseru, nečekejte na konec |
|||
5. **Developer tools** - Používejte Chrome DevTools (F12) pro debugování |
|||
6. **Commit často** - Pokud používáte Git, commitujte po každé sekci |
|||
|
|||
### Užitečné VS Code extensions: |
|||
- Live Server - pro live reload |
|||
- Prettier - pro formátování kódu |
|||
- Auto Rename Tag - automatické přejmenování párových tagů |
|||
- CSS Peek - rychlý náhled CSS definic |
|||
|
|||
### Keyboard shortcuts: |
|||
- `Ctrl + /` - zakomentovat/odkomentovat |
|||
- `Alt + Shift + F` - formátovat dokument |
|||
- `Ctrl + D` - vybrat další výskyt slova |
|||
- `Alt + Up/Down` - přesunout řádek nahoru/dolů |
|||
|
|||
--- |
|||
|
|||
## 🆘 Když si nevíte rady |
|||
|
|||
1. **Přečtěte si zadání znovu** - Často je odpověď v zadání |
|||
2. **Podívejte se na předchozí lekce** - V `01_uvod` až `11_json` najdete příklady |
|||
3. **Použijte console.log()** - Pro debugging JavaScriptu |
|||
4. **Zkontrolujte Developer Tools** - Konzole často ukazuje chyby |
|||
5. **Postupujte po malých krocích** - Neřešte vše najednou |
|||
6. **Koukněte na reseni.html/css/js** - Ale zkuste to sami nejdřív! |
|||
|
|||
--- |
|||
|
|||
## 📊 Self-assessment checklist |
|||
|
|||
Po dokončení všech projektů byste měli umět odpovědět ANO na tyto otázky: |
|||
|
|||
### HTML: |
|||
- [ ] Znám rozdíl mezi `<div>` a sémantickými elementy? |
|||
- [ ] Umím vytvořit správnou strukturu formuláře? |
|||
- [ ] Vím, kdy použít `<section>`, `<article>`, `<aside>`? |
|||
|
|||
### CSS: |
|||
- [ ] Rozumím rozdílu mezi Grid a Flexbox? |
|||
- [ ] Umím vytvořit responzivní layout bez frameworku? |
|||
- [ ] Znám všechny typy positioningu a kdy je použít? |
|||
- [ ] Umím pracovat s rem, em jednotkami? |
|||
- [ ] Vím, jak fungují media queries? |
|||
|
|||
### JavaScript: |
|||
- [ ] Umím validovat formulář pomocí JavaScriptu? |
|||
- [ ] Rozumím event listenerům? |
|||
- [ ] Umím manipulovat s DOM? |
|||
- [ ] Znám základy RegEx? |
|||
- [ ] Umím vytvořit jednoduchou interaktivitu? |
|||
|
|||
**Pokud máte většinu zaškrtlou, jste připraveni na Bootstrap!** 🎉 |
|||
|
|||
--- |
|||
|
|||
## 📈 Co dál po Bootstrap? |
|||
|
|||
Po zvládnutí Bootstrap můžete pokračovat v: |
|||
- **Tailwind CSS** - utility-first framework |
|||
- **React** - JavaScript library pro UI |
|||
- **Vue.js** - progresivní JavaScript framework |
|||
- **SASS/SCSS** - CSS preprocessor |
|||
- **Node.js & Express** - backend JavaScript |
|||
- **Databáze** - MySQL, MongoDB |
|||
- **Full-stack projekty** |
|||
|
|||
--- |
|||
|
|||
## 🙏 Acknowledgments |
|||
|
|||
Projekty vytvořeny pro předmět **Webové Technologie** (WTL) |
|||
Cílová skupina: Studenti 3. ročníku IT |
|||
Generováno: 2025 |
|||
|
|||
--- |
|||
|
|||
**Hodně štěstí s projekty! Pokud máte jakékoliv dotazy, neváhejte se zeptat.** 🚀 |
|||
|
|||
--- |
|||
|
|||
## 📞 Kontakt na učitele |
|||
|
|||
Při problémech nebo dotazech se obraťte na vyučujícího během konzultačních hodin nebo přes školní email. |
|||
@ -1,21 +0,0 @@ |
|||
Ahoj, |
|||
|
|||
posílám seznam témát které budeme dělat na programovaní, na náš kurzu na amos "PRG 1 - ročník 25/26" (máme společně s Radkem Rybákem, máme je rozdělené na skupiny) |
|||
moje skupina má studijní materiály z hodiny zde: https://git.asgard.odbornaskola.cz/skrabanek/1i_prg |
|||
|
|||
Seznam témat: |
|||
- input, podminky, cykly |
|||
- ošetření chyb |
|||
- základní moduly (random, os, time, datetime) |
|||
- seznamy |
|||
- práce se soubory |
|||
- funkce |
|||
- pokročilá práce s funkcemi |
|||
- práce s textem a stringy |
|||
- instalace knihoven a pip |
|||
- CLI aplikace |
|||
- Objektově orientované programování (OOP) |
|||
- JSON & HTTP requests |
|||
|
|||
Děkuji, snad jsem na nic nezpoměl |
|||
Jakub Škrabánek |
|||
@ -1,428 +0,0 @@ |
|||
# Individuální studijní plán - Webové technologie (WTL) |
|||
## 3. ročník IT - školní rok 2025/2026 |
|||
|
|||
--- |
|||
|
|||
## Základní informace |
|||
|
|||
**Předmět:** Webové technologie (WTL) |
|||
**Ročník:** 3. ročník IT |
|||
**Vyučující:** [Jméno vyučujícího] |
|||
**Studijní materiály:** https://[odkaz na váš repozitář] |
|||
|
|||
--- |
|||
|
|||
## Celkový přehled kurzu |
|||
|
|||
Kurz Webových technologií je rozdělen do **dvou pololetí**: |
|||
|
|||
### **1. pololetí (září - leden)** |
|||
- Základy HTML, CSS a JavaScriptu |
|||
- Responzivní webdesign |
|||
- Bootstrap framework |
|||
- Webová bezpečnost (XSS útoky) |
|||
- Komplexní frontend projekty |
|||
|
|||
### **2. pololetí (únor - červen)** |
|||
- PHP základy |
|||
- Databáze (MySQL/MariaDB) |
|||
- Backend web development |
|||
- Webové aplikace (frontend + backend) |
|||
- Závěrečný projekt |
|||
|
|||
--- |
|||
|
|||
## 📋 Seznam témat - 1. pololetí (Frontend) |
|||
|
|||
### 1. Úvod do HTML |
|||
- Struktura HTML dokumentu |
|||
- Sémantické elementy (header, nav, main, footer, article, section, aside) |
|||
- Nadpisy, odstavce, seznamy |
|||
- Odkazy a obrázky |
|||
- Tabulky |
|||
- **Výstup:** Základní webová stránka |
|||
|
|||
### 2. HTML Formuláře |
|||
- Formulářové elementy (input, textarea, select, button) |
|||
- Typy inputů (text, email, password, number, date, atd.) |
|||
- Atributy formulářů (required, placeholder, pattern) |
|||
- **Výstup:** Kontaktní formulář |
|||
|
|||
### 3. Úvod do CSS |
|||
- Selektory (element, třída, ID) |
|||
- Box model (margin, padding, border) |
|||
- Barvy a pozadí |
|||
- Typografie (fonts, text styling) |
|||
- Pseudo-třídy (:hover, :visited, :focus) |
|||
- Gradienty |
|||
- **Výstup:** Nastylovaná webová stránka |
|||
|
|||
### 4. CSS Layout |
|||
- Display property (block, inline, inline-block) |
|||
- Float a clear (legacy layout) |
|||
- Základy pozicování (static, relative, absolute, fixed) |
|||
- **Výstup:** Vícesloupcový layout |
|||
|
|||
### 5. Úvod do JavaScriptu |
|||
- Proměnné (let, const, var) |
|||
- Datové typy (string, number, boolean, object, array) |
|||
- Operátory |
|||
- Podmínky (if, else, switch) |
|||
- Cykly (for, while) |
|||
- Funkce (function declaration, arrow functions) |
|||
- **Výstup:** Jednoduché JS skripty |
|||
|
|||
### 6. JavaScript + HTML |
|||
- DOM (Document Object Model) |
|||
- Manipulace s HTML elementy |
|||
- querySelector, getElementById |
|||
- innerHTML, innerText, textContent |
|||
- Vytváření a odstraňování elementů |
|||
- **Výstup:** Dynamická webová stránka |
|||
|
|||
### 7. JavaScript + CSS + DOM |
|||
- Manipulace s CSS přes JavaScript |
|||
- classList (add, remove, toggle) |
|||
- Změna stylů (style property) |
|||
- Event handling (onclick, addEventListener) |
|||
- **Výstup:** Interaktivní elementy (toggle, show/hide) |
|||
|
|||
### 8. JavaScript Formuláře |
|||
- Event handling u formulářů |
|||
- Validace formulářů s JavaScriptem |
|||
- preventDefault() |
|||
- Získávání hodnot z formulářů |
|||
- **Výstup:** Validovaný formulář |
|||
|
|||
### 9. Media Queries & Responzivní Design |
|||
- Viewport meta tag |
|||
- Media queries (@media) |
|||
- Breakpoints (mobile, tablet, desktop) |
|||
- Mobile-first přístup |
|||
- Responzivní obrázky |
|||
- **Výstup:** Responzivní webová stránka |
|||
|
|||
### 10. CSS Flexbox |
|||
- display: flex |
|||
- flex-direction, justify-content, align-items |
|||
- flex-wrap, gap |
|||
- Flex položky (flex-grow, flex-shrink, flex-basis) |
|||
- **Výstup:** Flexbox layout |
|||
|
|||
### 11. JSON & AJAX |
|||
- Formát JSON |
|||
- Fetch API |
|||
- Asynchronní JavaScript (promises, async/await) |
|||
- REST API základy |
|||
- **Výstup:** Aplikace načítající data z API |
|||
|
|||
### 12. CSS Grid |
|||
- display: grid |
|||
- grid-template-columns, grid-template-rows |
|||
- gap, grid-gap |
|||
- Grid areas |
|||
- Rozdíl Grid vs Flexbox |
|||
- **Výstup:** Grid-based layout |
|||
|
|||
--- |
|||
|
|||
## 🤖 AI Přípravné projekty (před Bootstrapem) |
|||
|
|||
### AI 01 - CSS Grid & Responzivní Layout |
|||
- Pokročilé Grid techniky |
|||
- nth-child selektory |
|||
- Komplexní responzivní design |
|||
- **Hodnocení:** 10 bodů |
|||
|
|||
### AI 02 - Sémantické HTML5 & CSS Positioning |
|||
- Sémantická struktura stránky |
|||
- Position: sticky, absolute, fixed, relative |
|||
- CSS jednotky (rem, em, vh, vw) |
|||
- **Hodnocení:** 15 bodů |
|||
|
|||
### AI 03 - Pokročilá Validace Formulářů |
|||
- addEventListener |
|||
- Regulární výrazy (RegEx) |
|||
- Real-time validace |
|||
- Visual feedback |
|||
- **Hodnocení:** 20 bodů |
|||
|
|||
### AI 04 - Komplexní Bootstrap Prep Projekt |
|||
- Kombinace všech předchozích konceptů |
|||
- CSS custom properties (variables) |
|||
- Pokročilé animace |
|||
- Modal, accordion implementace |
|||
- **Hodnocení:** 30 bodů |
|||
|
|||
**Celkem za AI projekty: 75 bodů** |
|||
|
|||
--- |
|||
|
|||
## 🎨 Bootstrap Framework |
|||
|
|||
### 13. Bootstrap Úvod |
|||
- Instalace a setup Bootstrapu |
|||
- Bootstrap grid systém |
|||
- Container, row, col |
|||
- Utility třídy |
|||
|
|||
### 14. Bootstrap Layout |
|||
- Responzivní breakpoints |
|||
- Grid options |
|||
- Flexbox utilities |
|||
- Spacing utilities (m-, p-) |
|||
|
|||
### 15. Bootstrap Komponenty |
|||
- Buttons, badges, alerts |
|||
- Cards |
|||
- Navbar |
|||
- Forms (Bootstrap form styling) |
|||
- Tables |
|||
|
|||
### 16. Bootstrap Carousel |
|||
- Carousel komponenta |
|||
- Indicators, controls |
|||
- Automatické přepínání |
|||
- **Výstup:** Fotogalerie s carousel |
|||
|
|||
### 17. Bootstrap Modal |
|||
- Modal dialog |
|||
- Triggery pro modal |
|||
- Modal velikosti |
|||
- **Výstup:** Aplikace s modal dialogy |
|||
|
|||
### 18. Bootstrap Form Validation |
|||
- Bootstrap validační třídy |
|||
- JavaScript validace s Bootstrapem |
|||
- Custom validation styles |
|||
- **Výstup:** Profesionální registrační formulář |
|||
|
|||
--- |
|||
|
|||
## 🔒 Webová bezpečnost |
|||
|
|||
### 19. XSS (Cross-Site Scripting) Demo |
|||
- Co je XSS útok |
|||
- Reflected XSS |
|||
- Stored XSS |
|||
- Prevence XSS útoků |
|||
- HTML sanitizace |
|||
- **Výstup:** Demo aplikace s XSS zranitelností a její oprava |
|||
|
|||
--- |
|||
|
|||
## 🚀 Komplexní Frontend projekty |
|||
|
|||
### 20. TODO List aplikace |
|||
- CRUD operace (Create, Read, Update, Delete) |
|||
- LocalStorage |
|||
- Bootstrap UI |
|||
- JavaScript manipulace s daty |
|||
- **Výstup:** Funkční TODO list |
|||
|
|||
### 21. AJAX & API Integration |
|||
- Fetch API pokročile |
|||
- Práce s REST API |
|||
- Error handling |
|||
- Loading states |
|||
- **Výstup:** Aplikace pracující s externím API |
|||
|
|||
--- |
|||
|
|||
## 📋 Seznam témat - 2. pololetí (Backend) |
|||
|
|||
### 22. Úvod do PHP |
|||
- PHP syntaxe |
|||
- Proměnné a datové typy |
|||
- Podmínky a cykly |
|||
- Funkce v PHP |
|||
- Superglobals ($_GET, $_POST, $_SERVER) |
|||
|
|||
### 23. PHP & Formuláře |
|||
- Zpracování formulářů (GET, POST) |
|||
- Validace na straně serveru |
|||
- Sanitizace vstupů |
|||
- CSRF ochrana |
|||
|
|||
### 24. PHP & Soubory |
|||
- Čtení a zápis souborů |
|||
- Nahrávání souborů |
|||
- Práce s adresáři |
|||
- File permissions |
|||
|
|||
### 25. Úvod do databází |
|||
- Relační databáze |
|||
- MySQL/MariaDB |
|||
- phpMyAdmin |
|||
- SQL příkazy (SELECT, INSERT, UPDATE, DELETE) |
|||
|
|||
### 26. PHP & MySQL |
|||
- Připojení k databázi (mysqli, PDO) |
|||
- Prepared statements |
|||
- SQL injection prevence |
|||
- Databázové dotazy z PHP |
|||
|
|||
### 27. Sessions & Cookies |
|||
- HTTP sessions |
|||
- Cookies |
|||
- Autentizace uživatelů |
|||
- Session security |
|||
|
|||
### 28. Registrace & Login systém |
|||
- Uživatelská registrace |
|||
- Hash hesel (password_hash, password_verify) |
|||
- Login/logout funkcionalita |
|||
- Ochrana stránek (middleware) |
|||
|
|||
### 29. CRUD Webová aplikace |
|||
- Create, Read, Update, Delete operace |
|||
- Databázové operace |
|||
- Admin rozhraní |
|||
- **Výstup:** Blog nebo e-shop backend |
|||
|
|||
### 30. REST API v PHP |
|||
- JSON responses |
|||
- API endpoints |
|||
- HTTP metody (GET, POST, PUT, DELETE) |
|||
- API authentication |
|||
|
|||
### 31. Závěrečný projekt |
|||
- Komplexní webová aplikace |
|||
- Frontend (HTML, CSS, JS, Bootstrap) |
|||
- Backend (PHP, MySQL) |
|||
- Funkční features (registrace, login, CRUD) |
|||
- Responzivní design |
|||
- **Hodnocení:** 100 bodů |
|||
|
|||
--- |
|||
|
|||
## 🎯 Očekávané výstupy kurzu |
|||
|
|||
Po dokončení kurzu by studenti měli umět: |
|||
|
|||
### Frontend: |
|||
✅ Vytvořit sémanticky správnou HTML strukturu |
|||
✅ Nastylovat moderní responzivní web pomocí CSS |
|||
✅ Používat CSS Grid a Flexbox pro layout |
|||
✅ Psát čistý a efektivní JavaScript kód |
|||
✅ Manipulovat s DOM a zpracovávat eventy |
|||
✅ Validovat formuláře |
|||
✅ Pracovat s JSON a API pomocí Fetch |
|||
✅ Používat Bootstrap framework |
|||
✅ Rozumět základům webové bezpečnosti (XSS) |
|||
|
|||
### Backend: |
|||
✅ Psát PHP skripty |
|||
✅ Zpracovávat formuláře na serveru |
|||
✅ Pracovat s MySQL databází |
|||
✅ Vytvořit registrační a přihlašovací systém |
|||
✅ Implementovat CRUD operace |
|||
✅ Zabezpečit webovou aplikaci (SQL injection, XSS, CSRF) |
|||
✅ Vytvořit jednoduché REST API |
|||
|
|||
### Soft skills: |
|||
✅ Debugovat kód pomocí Developer Tools |
|||
✅ Používat Git pro verzování kódu |
|||
✅ Psát čitelný a udržovatelný kód |
|||
✅ Testovat aplikace v různých prohlížečích |
|||
✅ Pracovat samostatně i v týmu |
|||
|
|||
--- |
|||
|
|||
## 📊 Hodnocení |
|||
|
|||
### 1. pololetí: |
|||
- **AI projekty:** 75 bodů (AI 01-04) |
|||
- **Průběžné projekty:** 50 bodů |
|||
- **Aktivita a domácí úkoly:** 25 bodů |
|||
- **Test z frontend technologií:** 50 bodů |
|||
- **Celkem:** 200 bodů |
|||
|
|||
### 2. pololetí: |
|||
- **PHP & MySQL projekty:** 50 bodů |
|||
- **Závěrečný projekt:** 100 bodů |
|||
- **Aktivita a domácí úkoly:** 25 bodů |
|||
- **Test z backend technologií:** 25 bodů |
|||
- **Celkem:** 200 bodů |
|||
|
|||
### Celkové hodnocení za rok: 400 bodů |
|||
|
|||
**Klasifikace:** |
|||
- 90-100% (360-400 bodů): Výborný (1) |
|||
- 75-89% (300-359 bodů): Chvalitebný (2) |
|||
- 60-74% (240-299 bodů): Dobrý (3) |
|||
- 45-59% (180-239 bodů): Dostatečný (4) |
|||
- 0-44% (0-179 bodů): Nedostatečný (5) |
|||
|
|||
--- |
|||
|
|||
## 🛠️ Doporučené nástroje |
|||
|
|||
### Editor: |
|||
- **Visual Studio Code** (primární doporučení) |
|||
- Extensions: Live Server, Prettier, Auto Rename Tag, CSS Peek |
|||
|
|||
### Prohlížeče: |
|||
- **Google Chrome** (primární pro vývoj) |
|||
- Firefox, Edge (testování kompatibility) |
|||
- Chrome DevTools (F12) pro debugging |
|||
|
|||
### Backend (2. pololetí): |
|||
- **XAMPP** nebo **WAMP** (Apache + MySQL + PHP) |
|||
- **phpMyAdmin** (správa databáze) |
|||
|
|||
### Ostatní: |
|||
- **Git** pro verzování kódu |
|||
- **GitHub/GitLab** pro sdílení projektů |
|||
|
|||
--- |
|||
|
|||
## 📚 Užitečné zdroje |
|||
|
|||
### Dokumentace: |
|||
- [MDN Web Docs](https://developer.mozilla.org/) - HTML, CSS, JavaScript |
|||
- [Bootstrap dokumentace](https://getbootstrap.com/docs/) |
|||
- [PHP dokumentace](https://www.php.net/manual/en/) |
|||
- [MySQL dokumentace](https://dev.mysql.com/doc/) |
|||
|
|||
### Online nástroje: |
|||
- [CodePen](https://codepen.io/) - Online playground |
|||
- [regex101.com](https://regex101.com/) - RegEx tester |
|||
- [Can I Use](https://caniuse.com/) - Browser compatibility |
|||
- [CSS-Tricks](https://css-tricks.com/) - CSS tutoriály |
|||
|
|||
### Komunita: |
|||
- [Stack Overflow](https://stackoverflow.com/) - Q&A |
|||
- [CSS Tricks](https://css-tricks.com/) |
|||
- [JavaScript.info](https://javascript.info/) |
|||
|
|||
--- |
|||
|
|||
## 📞 Kontakt |
|||
|
|||
**Vyučující:** [Jméno vyučujícího] |
|||
**Email:** [email] |
|||
**Konzultační hodiny:** [časy] |
|||
**Repozitář:** [odkaz na Git repozitář] |
|||
|
|||
--- |
|||
|
|||
## 📝 Poznámky |
|||
|
|||
- Všechny projekty a úkoly budou zadávány průběžně během školního roku |
|||
- Studenti jsou povinni dodržovat termíny odevzdání |
|||
- Plagiátorství (kopírování kódu) bude sankcionováno |
|||
- Aktivní účast na hodinách je důležitá pro pochopení látky |
|||
- Doporučuje se pravidelné opakování a procvičování |
|||
- Studenti mohou využít konzultační hodiny pro pomoc s projekty |
|||
|
|||
--- |
|||
|
|||
**Vytvořeno:** [datum] |
|||
**Předmět:** Webové Technologie (WTL) |
|||
**Cílová skupina:** 3. ročník IT |
|||
**Školní rok:** 2025/2026 |
|||
|
|||
--- |
|||
|
|||
*Tento studijní plán může být upraven na základě potřeb studentů a aktuálního pokroku ve výuce.* |
|||
@ -1,31 +0,0 @@ |
|||
Ahoj, |
|||
|
|||
posílám seznam témat které budeme dělat na Webových technologiích, na náš kurzu "WTL - 3. ročník 25/26" |
|||
studijní materiály z hodiny zde: [odkaz na repozitář] |
|||
|
|||
Seznam témat - 1. pololetí (Frontend): |
|||
- úvod do HTML (struktura, sémantika, formuláře, tabulky) |
|||
- úvod do CSS (selektory, box model, barvy, typografie) |
|||
- CSS layout (float, positioning, flexbox, grid) |
|||
- media queries a responzivní design |
|||
- úvod do JavaScriptu (proměnné, podmínky, cykly, funkce) |
|||
- JavaScript + DOM (manipulace s HTML, querySelector, innerHTML) |
|||
- JavaScript eventy a validace formulářů |
|||
- JSON & Fetch API (asynchronní JavaScript, REST API) |
|||
- Bootstrap framework (grid systém, komponenty, utilities) |
|||
- Bootstrap pokročile (carousel, modal, form validation) |
|||
- webová bezpečnost (XSS útoky, prevence, sanitizace) |
|||
- komplexní frontend projekty (TODO list, AJAX aplikace) |
|||
|
|||
Seznam témat - 2. pololetí (Backend): |
|||
- úvod do PHP (syntaxe, proměnné, podmínky, cykly, funkce) |
|||
- PHP formuláře (GET, POST, validace, sanitizace) |
|||
- PHP práce se soubory (čtení, zápis, upload) |
|||
- úvod do databází (MySQL, SQL příkazy) |
|||
- PHP & MySQL (připojení, dotazy, prepared statements) |
|||
- sessions & cookies (autentizace, zabezpečení) |
|||
- registrace & login systém (hash hesel, ochrana) |
|||
- závěrečný full-stack projekt (frontend + backend + databáze) |
|||
|
|||
Děkuji, snad jsem na nic nezapomněl |
|||
[Tvoje jméno] |
|||
@ -1,351 +0,0 @@ |
|||
# 👨🏫 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 |
|||
Loading…
Reference in new issue