Malý repozitář pro WTL 3.I 2025/2026

11 KiB

Raw Blame History

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

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

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:

Online nástroje:

CodePen - Online playground
regex101.com - RegEx tester
Can I Use - Browser compatibility
CSS-Tricks - CSS tutoriály

Komunita:

📞 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.

11 KiB Raw Blame History