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Í:

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

Úvod do počítačových sítí (NSWI141)

Větší část tohoto kurzu týkající se sítí vyučuje RNDr. Libor Forst, já budu učit část přednášek o webu.

Odkaz na stránky kurzu: Úvod do počítačových sítí.

Programování 1 (DVPP)

Kurz pro učitele v rámci celoživotního vzdělávání. Online.

Odkaz na stránky kurzu: Programování 1.