Výuka

V zimním semestru 2024/25 vyučuji tyto předměty:

Programování 1 (NPRG030) a Algoritmizace (NPRG062)

Algoritmizace - podmínky pro získání zápočtu:

  • vypracování domácích úkolů - dosažení alespoň 70% z celkového počtu bodů, "hranice přežití": 50% (pokud získáte alespoň 50% bodů, bude možné si body doplnit vyřešením dalších náhradních úloh)
  • docházka - za každou účast na cvičení získáte 1 bod navíc (nepočítá se do základu)
  • osobní prezentace alespoň jednoho domácího úkolu

Zápočet JE podmínkou ke zkoušce.

Programování - podmínky pro získání zápočtu:

  • aktivní práce v hodinách
  • pravidelné řešení domácích úkolů zadávaných v ReCodExu - dosažení alespoň 70% z celkového počtu bodů, "hranice přežití": 50%
  • na konci semestru - praktický zápočtový test u počítačů - test se bude psát na posledním cvičení, ve zkouškovém období budete mít 2 opravné pokusy
  • vypracování zápočtového programu (včetně zpracování písemné dokumentace)

V zimním semestru zkouška není.

Úlohy z Programování

Pro získání zápočtu je potřeba mít na konci semestru alespoň 70% z celkového počtu vypsaných bodů za domácí úlohy.

Praktické úlohy budou zpravidla zadávány každý týden.

Autor řešení musí být schopen na cvičení vysvětlit svůj program.

Úkoly se budou odevzdávat pomocí systému ReCodEx https://recodex.mff.cuni.cz/

Řešení úloh je samostatná práce! Můžete se samozřejmě o úlohách bavit mezi sebou, ale řešení musí vypracovat každý sám za použití svých vlastních schopností a vlastní inteligence.

Úlohy z Algoritmizace

Pro získání zápočtu je potřeba mít na konci semestru alespoň 70% z celkového počtu vypsaných bodů za domácí úlohy.

Plán: Bude zadáno 8 úkolů po 10 bodech.

Za účast na cvičení získáte 1 bonusový bod (docházka bude evidována v ReCodExu).

Domácí úkoly z algoritmizace ("na papír") spočívají většinou v návrhu a slovním popisu efektivního algoritmu.

Úkoly se budou odevzdávat pomocí systému ReCodEx.

Praktický zápočtový test u počítačů

Bude se jednat o úlohu zadanou v ReCodExu v podobném rozsahu jako úlohy zadávané v průběhu semestru. Pro úspěšné složení testu bude potřeba získat v ReCodExu plný počet bodů, tedy musí projít všechny testy. Hodnotí se nejen funkčnost vytvořeného programu, ale i to, jak je program navržen a naprogramován. Není při tom vyžadována (časová) optimalizace algoritmu. Stačí, nejsou-li ani algorimus ani jeho implementace "vysloveně hloupé". Vzhledem k omezenému času se nepožaduje, aby byl program komentován (i když komentáře vytvářené současně s programem vám mohou práci na programu podstatně zjednodušit i zrychlit).

Student musí být schopen svoje řešení vysvětlit.

Test se bude psát na školních počítačích.

Zápočtový program

Zápočtový program je rozsáhlejší než běžné úlohy v ReCodExu. Jeho účelem je, abyste si vyzkoušeli samostatně navrhnout a vytvořit větší program včetně načítání vstupů od uživatele, ošetření jejich korektnosti, odladění, napsání dokumentace. Téma pro svůj program si vybíráte sami (já ho musím schválit).

Postup, jak vypracovat zápočtový program:

  • vybrat si téma a domluvit se na něm se mnou (do Vánoc)
  • poslat krátkou specifikaci (do Vánoc)
  • napsat samotný program
  • napsat dokumentaci k programu - uživatelskou a programátorskou
  • poslat mi hotový program včetně dokumentace, případně testovací data, a domluvit si termín předvedení
  • předvést mi program při krátké prezentaci, ukázat jeho funkce (na testovacích datech), popsat jak program pracuje, jaké algoritmy a datové struktury používá. Během předvedení byste měli být schopni program na požádání mírně upravit.

    Je možné, že s první verzí vašeho programu / dokumentace / testovacích dat / předvedení nebudu spokojená a budete je muset předělat. Proto nenechávejte předvedení až na poslední chvíli, abyste případné úpravy stihli ještě v termínu. (vše nejpozději do 7.2.2025)

Při výběru témat pro své programy se můžete inspirovat např. na stránkách Martina Mareše: témata zápočtových programů

O dokumentaci podle Martina Mareše:

Uživatelská dokumentace. To je stručný popis toho, jak se program používá (tedy třeba v jakém formátu se mu zadává vstup a v jakém vydá výstup). Nepište od ní evidentní věci, spíš to, co by bězný uživatel nečekal. Také by tam mělo být řečeno, co vlastně program dělá :)

Uživatelská dokumentace by také měla obsahovat návod, jak program spustit (jaké knihovny je potřeba doinstalovat, atd.)

Programátorská dokumentace. V ní je stručně popsáno, jak program funguje uvnitř. Nemusíte komentovat každý řádek programu, spíš popište celkovou koncepci. Pokud používáte nějaké netriviální algoritmy, je to dobré zmínit. Pokud používáte něco, co jste nevymysleli sami, je na místě citovat zdroje.

Text o dokumentaci k (nejen) zápočtovému programu od doktora Kryla: Jak psát dokumentaci zápočtového programu

Co jsme dělali na cvičení:

1. CVIČENÍ (3.10.2024):

Algoritmizace
  • podmínky získání zápočtu
  • jednoduché algoritmy, invariant

  • Kuličky

    V nádobě jsou černé a bílé kuličky. Je tam Č černých a B bílých. Kuličky budu z nádoby odebírat následujícím způsobem: Vytáhnu dvě a místo nich jednu jinou vrátím do nádoby:

      Bílá  + Bílá  --> Bílá
  Černá + Bílá  --> Černá
  Černá + Černá --> Bílá

    Jakou barvu bude mít poslední kulička co v nádobě zbyde?

Programování
  • procvičování - proměnná, podmínka, while cyklus, změna typu, vstup, výstup

2. CVIČENÍ (10.10.2024):

Algoritmizace
  • složitost jednoduchých algoritmů
  • definice velkého O
Programování
  • procvičování - seznam, indexování, slicing, operace se seznamem (.split() a další), načtení vstupu

3. CVIČENÍ (17.10.2024):

Algoritmizace

dokazování tvrzení o asymptotických složitostech

  • dokažte nebo vyvraťte (některá z tvrzení jsme dokazovali na cvičení, případné dotazy na příštím cvičení)
    1. 5n + 3 ∈ O(n)
    2. n2 ∈ O(n3)
    3. 3n3 ∈ O(n2)
    4. 2n+1 ∈ O(2n)
    5. f(n) ∈ Θ(g(n)) -> g(n) ∈ O(f(n))
    6. f1(n) ∈ O(g(n)) a f2(n) ∈ O(g(n)) -> f1(n) + f2(n) ∈ O(g(n))
    7. f1(n) ∈ O(g(n)) a f2(n) ∈ O(g(n)) -> f1(n) * f2(n) ∈ O(g(n))
    8. f(n) ∈ O(g(n)) -> k*f(n) ∈ O(g(n)) pro libovolnou konstantu k>0.
    9. f(n) ∈ O(g(n)) -> 1/f ∈ O(g(n))
    10. f(n) ∈ O(g(n)) -> 1/f ∈ O(1/g(n))
Programování
  • další procvičování seznamů, ladění ve VS Code, první funkce

4. CVIČENÍ (10.10.2024):

Algoritmizace

Procvičování algoritmů z přednášky

  • Hornerovo schéma
  • třídící algoritmy - select sort, insert sort, bubble sort, mergesort
Programování

Funkční dekompozice (rozdělení programu na funkce)

5. CVIČENÍ (31.10.2024)

Algoritmizace

Abstraktní datové typy fronta, zásobník, halda

Programování

Lineární spojové seznamy (LSS)

  • objekty - zopakování základů
  • třída pro LSS, jednoduché operace

6. CVIČENÍ (7.11.2024)

Lineární spojové seznamy (LSS) - další procvičování

7. CVIČENÍ (14.11.2024)

Algoritmizace
  • úloha:

    určete, zda zadaná posloupnost N čísel obsahuje nějakou hodnotu s více než N/2 výskyty a pokud ano, tak kterou

    různá řešení + jejich složitost (naivní řešení, inverzní pole, setřídění posloupnosti, řešení se zásobníkem)
  • první pokusy s rekurzivním generováním (nekonečná rekurze, "range", "range" tam a zpátky)
Programování
  • práce s textovými soubory
  • objekty, dekompozice
  • hra Hádání čísla

8. CVIČENÍ (21.11.2024)

Algoritmizace

Rekurzivní generování

  • Napište rekurzivní funkci, která vytiskne pro zadané n "šipku z hvězdiček": 
        *
    **
    ***
    ****
    ***
    **
    *
  • Napište rekurzivní funkci, která vypíše všechny možné řetězce délky n z nul a jedniček.
  • Napište rekurzivní funkci, která vypíše všechny možné řetězce délky n nebo kratší z nul a jedniček.
  • (Napište rekurzivní funkci, která vypíše všechny možné posloupnosti délky n z nul, jedniček, dvojek a trojek.)
  • Napište rekurzivní funkci, která vypíše všechny možné řetězce délky n z čísel od 0 do 9.
  • Naprogramujte rekurzivní funkci, která vygeneruje všechny posloupnosti 0 a 1 délky n, ve kterých je právě k jedniček.
  • Naprogramujte rekurzivní funkci, která vygeneruje všechny slova délky n, která se skládají ze slabik. Slabikou myslíme jednu souhlásku a jednu samohlásku, tedy souhlásky a samohlásky se ve slově mají střídat.
  • (Microsoft Interview Question) Given a number n, print following pattern without using any loop. 
    Input: n = 16
Output: 16, 11, 6, 1, -4, 1, 6, 11, 16

Input: n = 10
Output: 10, 5, 0, 5, 10
Programování

Rekurzivní generování

  • Želví grafika, fraktály

8. CVIČENÍ (19.12.2024)

Programování

Základy tvorby webu (NUIN019)

Kurz o webu určený hlavně pro studenty učitelství.
Požadavky znalostí ke státní závěrečné zkoušce z informatiky a didaktiky informatiky (zahájení studia v roce 2022 nebo později)

Odborná témata

...
2. Základy tvorby webu
Umístění stránek na internetu, zobrazení v prohlížeči, webhosting, doména; cache, cookies. Přehled základních webových technologií a příklady jejich použití (HTML5, CSS3, JavaScript, AJAX, server-side jazyky, databáze, API), responsivní layout. Přístupnost webu, SEO optimalizace. Frameworky, systémy pro správu obsahu. Statické vs. dynamické stránky, průběh zpracování formuláře. Bezpečnost webových aplikací - certifikáty, HTTP/HTTPS, same-origin policy. Digitální stopa, cookies.
1.30.9.2024Úvod, jak funguje web
2.7.10.2024HTML, přístupnost
3.14.10.2024CSS
4.21.10.2024Responsivní layout, flexbox
5.28.10.2024--- statní svátek ---
6.4.11.2024Grid
7.11.11.2024Bootstrap (HTML+CSS+Javascript framework)
8.18.11.2024Vanilla javascript
9.25.11.2024Formuláře
10.2.12.2024Flask (Python framework)
11.9.12.2024??? React, Blazor, Vue, (PHP?)
12.16.12.2024Bezpečnost, cookies prakticky
13.6.1.2025prezentace projektů

4. října

přednáška: Sylabus (sylabus v SISu), 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.

Informace k projektu

Projekt musí obsahovat:

  • sémantické HTML tagy,
  • CSS,
  • layout pomocí grid nebo flex,
  • alespoň jeden formulář,
  • stránka musí být dynamická
Deadline pro výběr tématu: 31.10.2024

7. ří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í HTML sémantických (HTML5) tagů)

14. října

přednáška:

cvičení:

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

cvičení:

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

11. listopadu

přednáška:

cvičení:

  • 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...)
  • * bootsrap_a_sass_navod.txt

CSS frameworky

17. listopadu

prezentace:

cvičení:

25. listopadu

přednáška:

cvičení:

  • Vyrobte si krásný formulář
    • všechny typy formulárových prvku (input, radio, checkbox, select, textarea, submit)
    • nejaký další speciální input
    • labely
    • rozdelení do fieldsetu
    • barevně označit povinná pole, aktivní pole
    • alespoň jeden prvek - kontrola HTML5
    • alespoň jeden prvek - kontrola JavaScriptem
  • Vyrobte formulář, který se dynamicky mění podle toho, co už uživatel zadal
  • Nechte prohlížeč si zapamatovat, kdo jste
  • Počítejte, kolikrát jste stránku zobrazili za posledních 10 dní

2. prosince

Flask - pythonovský webový framework

cvičení:

  • projděte si navod.txt a vyzkoušejte jednotlivé kroky:
    • FLASK VE VS CODE
    • MINIMÁLNÍ APLIKACE
    • DEBUGGER - nepovinné
    • TEMPLATES
    • CSS
  • Vytvořte stránku s navigací
    • tři pod-stránky (dědičnost templatů)
    • zvýraznění aktuálního odkazu (jinja podmínky, request.endpoint)
    • dark mode

9. prosince

Flask podruhé

cvičení:

  • přihlášení do session
  • databáze - kniha návštěv
  • projděte si vystrihovanky.txt

16. prosince

Všechno možné

  • digitální stopa
  • (tracking) cookies
  • same-origin policy
  • cache

cvičení:

  • nahrajte flask na server (development verzi)
  • propojte knihu návštěv z minulého cvičení s databází na školním serveru
  • zkuste si nainstalovat Wordpress / podívejte se na Google Sites

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