Mgr. Klára Pešková, Ph.D.

1. CVIČENÍ:

• podmínky splnění kurzu
• instalace Pythonu
• prostředí IDLE
• Proměnné
• Matematické operátory
• Vstup, výstup, první skript
• Podmínky
• ReCodEx a domácí úkoly

• Python na w3schools
• Cvičení kolegy Martina Mareše z doby onlinové (příklady, videa, ...)
• Stránky kolegy Adama Dingla

2. CVIČENÍ:

• obecné povídání o programování, Pythonu (netypovaný, interpretovaný, "glue" jazyk) a algoritmizaci (složitost jako počet elemetárních kroků)
• několik algoritmů: součet čísel, hledání největší hodnoty, ciferný součet, test prvočíselnosti
• komentáře
• while cyklus
• Vnořené podmínky: elif
• příklady na cyklus a podmínku

3. CVIČENÍ:

• příklad: hádání čísla
• zakové řetězce - indexy, operátor in, for cyklus
• příklady na procvičení

4. CVIČENÍ:

• seznamy
  • seznamy
  • indexy, slicing
  • operátor in
  • for cyklus
  • range
• příklady na procvičení

5. CVIČENÍ:

• nasobilka.png
• Funkce
• Funkce - příklady na procvičení funkcí: funkce_priklady.txt
• split, join
• krokování, ladění

6. CVIČENÍ:

• n-tice (tuple) - n-tice
• list comprehensions - list comprehensions

7. CVIČENÍ:

• třídící algoritmy: select sort, bubble sort

8. CVIČENÍ:

9. CVIČENÍ:

• Slovníky (typ dictionary) slovníky

Morseovka ke zkopírování:

A     .-
B     -...
C     -.-.
D     -..
E     .
F     ..-.
G     --.
H     ....
I     ..
J     .---
K     -.-
L     .-..
M     --
N     -.
O     ---
P     .--.
Q     --.-
R     .-.
S     ...
T     -
U     ..-
V     ...-
W     .--
X     -..-
Y     -.--
Z     --..

10. CVIČENÍ:

• Množiny (typ set) množiny
• Práce se soubory soubory

11. CVIČENÍ:

• Objekty - základy objekty

12. CVIČENÍ:

• Objekty - kouzelné metody (magic methods) odkaz na pythoní dokumentaci

13. CVIČENÍ:

• Výjimky výjimky
• knihovny (moduly) v Pythonu Prezentace - knihovny

4. října

přednáška: Sylabus, podmínky splnění kurzu, prezentace "Jak funguje web", "Webové technologie v příkladech".

• 00_o_kurzu.pdf
• 01_jak_funguje_web.pdf
• 02_webove_technologie.pdf

cvičení: Vytvoření adresáře WWW a zprovoznění "Hello world" stránky.

11. října

přednáška:

• 03_html.pdf
• 04_pristupnost.pdf

cvičení:

• Návrh layoutu (responsivní, pro alespoň 3 velikosti)
• Ochočení nějakého HTML editoru
• Vytvoření HTML stránky, umístění do svého adresáře WWW - použití HTML5 tagů

18. října

přednáška:

• 04_css.pdf

cvičení:

• CSS - tři způsoby vkládání css

• Přidejte si do stránky CSS styly (v samostatném souboru)
  • nastavte vlastnosti písma
  • nastavte barvu písma a pozadí jednotlivých částí
  • vhodný padding, margin, border...
  • ... a další základní CSS vlastnosti. Kde je to vhodné, použijte CSS proměnné.
  • přidejte obrázek s popiskem pomocí HTML5 tagů
• Přidejte si na stránku prvky s CSS transition
  • obrázek, který se při přejetí myší maličko přiblíží. Můžete použít kostru: kostra pro přibližující se obrázek (důležitá je vlastnost overflow: hidden; )
  • a další obrázek, který z původně částečně průhledného obrázku (opacity: 0.2) udělá při přejetí myší neprůhledný obrázek (opacity: 1)
• Přidejte na stránku CSS animace
  • vytvořte CSS animaci - tři tečky, které se postupně zvětšují (při načítání stránky)
  • vytvořte další libovolnou CSS animaci

25. října

přednáška:

• 05_layout.pdf
• 06_flexbox.pdf
• 07_responsivni_layout.pdf

cvičení:

• zahrajte si Flexbox Froggy
• upravte flexbox layout z w3schools tak, aby vpravo na liště s menu byl odkaz na anglickou verzi
• vytvořte pomocí flex následující layouty: koníčky, zarovnání na střed, celá stránka s záhlavím dole

1. listopadu

přednáška:

• 08_grid.pdf

cvičení:

• zahrajte si hru Grid Garden
• vytvořte responsivní layout (nejlépe podle návrhu z prvního cvičení) pro tři velikosti displaye, použijte grid nebo flexbox

8. listopadu

přednáška:

• 09_bootstrap.pdf

cvičení:

• bootstrap_knihovny.txt
• bootstrap_sablona.txt, bootstrap_sablona.html
• ctyri_sloupce_html.html
• ctyri_sloupce_final.png

• Vytvořte stánku používající Bootstrap 5, jejíž obsah je rozdělen do několika sloupců
• Použijte komponentu Modal pro zobrazení většího obrázku
• Použijte alespoň tři další složitější komponenty (např. Carousel, Offcanvas, Scrollspy...)

15. listopadu

• Přizpůsobte bootstrap pomocí Sass-u - změňte základní barvy
• Sass na w3schools
• bootsrap_a_sass_navod.txt

přednáška:

• 11_formulare.pdf

cvičení:

• Vyrobte si (pomocí HTML 5 a stylů) krásný formulář
  • všechny typy formulárových prvku (input, radio, checkbox, select, textarea, submit, datalist)
  • nejaký další speciální HTML5 input
  • labely
  • rozdelení do fieldsetu
  • barevně označit povinná pole, aktivní pole
  • alespoň jeden prvek - kontrola HTML5
  • alespoň jeden prvek - kontrola JavaScriptem
• Vyrobte si formulář pomocí Bootstrapu
  • vyzkoušejte si bootstrapové třídy pro formulářové prvky
  • vyrobte input pomocí input group
  • použijte třídy pro validaci před odesláním + vysvětlivky, co mělo být vyplněno
  • vyrobte přepínač (toggle) mezi light a dark modem

22. listopadu

prezentace:

• 12_javascript.pdf

cvičení:

• rozbal_kostra.html rozbal_final.html
• pexeso_kostra.html pexeso.html
• odpocitavani.html

6. prosince

• 13_php.pdf
• 14_formulare.pdf
• 15_databaze.pdf
• 16_databaze_php.pdf

cvičení:

• Vytvořte si ve své databázi dvě tabulky pro jednoduchou knihu návštěv
• tabulka uživatelů - do knihy bude možné psát po přihlášení
• tabulka pro příspěvky
• Kniha návštěv
  • používá databázi - vypsání příspěvků
  • přihlášení do session, ověření proti databázi

10. ledna

• bezpecnost.pdf