Výuka
V zimním semestru 2023/24 vyučuji tyto předměty:
- Programování 1 pro matematiky (NMIN111)
- Úvod do počítačových sítí (NSWI141) - poslední 3 přednášky
- Základy tvorby webu (NUIN019)
- Programování 1 (DVPP)
Programování 1 pro matematiky (NMIN111)
Podmínky pro získání zápočtu:
- alespoň 70 % bodů z úloh v systému ReCodEx (https://recodex.mff.cuni.cz), "hranice přežití": 50 %
- alespoň 70 % docházka
Co jsme dělali na cvičení:
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
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
cyklusrange
- 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Í:
zrušenoZáklady tvorby webu (NUIN019)
1 | 4.10.2023 | Úvod, jak funguje web |
2 | 11.10.2023 | HTML, přístupnost |
3 | 18.10.2023 | CSS |
4 | 25.10.2023 | Responsivní layout, flexbox |
5 | 1.11.2023 | Grid |
6 | 8.11.2023 | Bootstrap (HTML+CSS+Javascript framework) |
7 | 15.11.2023 | Formuláře |
8 | 22.11.2023 | Vanilla javascript |
9 | 29.11.2023 | výuka zrušena |
10 | 6.12.2023 | React (Javascript framework) - p. Weber |
11 | 13.12.2023 | Databáze |
12 | 20.12.2023 | Nette (PHP framework) - p. Papula |
13 | 3.1.2024 | Blazor (C# framework) - p. Truchan |
14 | 10.1.2024 | Bezpečnost / Wordpress |
4. října
přednáška: Sylabus, podmínky splnění kurzu, prezentace "Jak funguje web", "Webové technologie v příkladech".
cvičení: Vytvoření adresáře WWW a zprovoznění "Hello world" stránky.
11. října
přednáška:
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:
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)
- 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
- 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:
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:
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:
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:
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:
cvičení:
Ú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.