Flowchart · INF ITE3

Flowchart Rescue – z chaosu do kódu

Úkol 1 – Rozsypaný proces

Následující kroky procesu „Příprava dokumentu k odevzdání“ jsou ve špatném pořadí. Seřaď je tak, aby vznikla smysluplná sekvence od prvního do posledního kroku.

Do dokumentu napiš správné pořadí pomocí čísel 1–7.

Přesuň výsledný PDF soubor do složky ODEVZDANI.
Otevři hotový dokument.
Zobraz úplnou cestu k výslednému souboru.
Exportuj dokument jako PDF.
Ulož poslední změny dokumentu.
Otevři výsledné PDF a zkontroluj jeho čitelnost.
Přejmenuj PDF na Prijmeni_Projekt.pdf.

Rada: U sekvence záleží na pořadí. Ptej se vždy: „Může tento krok opravdu proběhnout dříve než předchozí?“

Úkol 2 – Symbol Detective

Ke každé položce přiřaď správný typ symbolu vývojového diagramu.

Používej pouze:

TERMINÁTOR
PROCES
VSTUP / VÝSTUP

Urči správný symbol pro:

START
Zadej název projektu
Vytvoř ZIP archiv
Přejmenuj archiv
Zobraz cestu k uložené záloze
KONEC

Zapisuj například:

Vytvoř ZIP archiv → PROCES

Nápověda:

začátek a konec mají vlastní symbol,
běžná činnost je proces,
informace vstupující do procesu nebo vystupující z procesu patří mezi vstup/výstup.

Úkol 3 – Sabotovaný diagram

Prohlédni si vložený obrázek Sabotovaný diagram.

Diagram na první pohled vypadá hotově, ale někdo v něm úmyslně udělal několik chyb.

Najdi alespoň 5 problémů.

U každého napiš:

co je špatně,
jak bys chybu opravil.

Kontroluj hlavně:

správné použití symbolů,
směr šipek,
pořadí kroků,
čitelnost,
START a KONEC,
zda je diagram opravdu čistou sekvencí.

Úkol 4 – Hlavní mise: Zachraň projekt před deadlinem

Za chvíli odevzdáváš školní projekt. Před odevzdáním chceš vytvořit bezpečnou lokální zálohu.

V diagrams.net vytvoř vývojový diagram tohoto procesu:

Začni proces.
Vyber složku s hotovým projektem.
Zavři soubory projektu otevřené v editorech.
Vytvoř ze složky ZIP archiv.
Přejmenuj archiv na Projekt_Prijmeni_Datum.zip.
Připrav složku ZALOHA.
Zkopíruj ZIP archiv do složky ZALOHA.
Otevři zkopírovaný archiv a zkontroluj jeho obsah.
Zobraz nebo zapiš úplnou cestu k uložené záloze.
Ukonči proces.

Diagram musí obsahovat:

právě jeden START,
právě jeden KONEC,
procesní obdélníky pro běžné činnosti,
alespoň jeden smysluplný vstup nebo výstup,
jednoznačné šipky ve správném pořadí.

Nepoužívej:

diamant,
rozhodování ANO / NE,
větvení,
cykly.

Tok veď přehledně převážně shora dolů.

Text uvnitř symbolů zkrať. Místo dlouhých vět používej krátké pokyny, například:

Vytvoř ZIP archiv

ne:

Nyní vytvoř ZIP archiv ze složky, ve které se nachází celý projekt.

Hotový diagram exportuj jako PNG nebo PDF a vlož jej do dokumentu.

Úkol 5 – Human Compiler

Teď se na svůj diagram přestaň dívat jako jeho autor.

Představ si, že jsi počítač, který:

nepřemýšlí, nic si nedomýšlí a pouze sleduje šipky.

Projdi svůj diagram od STARTU až ke KONCI.

Zkontroluj:

je vždy jasné, kam pokračovat,
vede každý krok ke správnému následujícímu kroku,
nejsou šipky nebo texty přes sebe,
není někde použitý diamant,
jsou START a KONEC ve správných symbolech,
nechybí žádný krok.

Potom vyber dva kroky, jejichž pořadí podle tebe nelze bezpečně prohodit.

Napiš:

Krok 1:

Krok 2:

Proč jejich pořadí nelze prohodit:

Pokud při kontrole objevíš chybu, diagram nejdříve oprav.

Úkol 6 – Mini remake

Teď ověř, že princip sekvence umíš použít i na úplně jiném procesu.

Vytvoř druhý, menší vývojový diagram pro:

Přípravu obrázku pro web

Použij tuto sekvenci:

START → Otevři obrázek → Změň rozměry → Optimalizuj velikost → Ulož jako WebP → Přejmenuj soubor → Ulož do složky images → Zobraz výslednou cestu → KONEC

Použij stejná pravidla jako u hlavního diagramu:

správné symboly,
správné pořadí,
jednoznačné šipky,
žádný diamant,
žádné větvení.

Tentokrát nemusíš diagram vizuálně ladit do detailu.

Důležitá je:

logika + symboly + tok

Hotový diagram také vlož do dokumentu.

Úkol 7 – Code Lab: JavaScript Backup Simulator

Teď stejný princip sekvence převedeš do skutečného programu.

Použiješ:

JavaScript

JavaScript dnes nemusíš umět.

Dostaneš pouze několik konstrukcí, které pro tento úkol potřebuješ.

JavaScript Language Kit

1. Proměnná

let jmeno = "Novak";

let vytvoří proměnnou, která si uchovává hodnotu.

2. Text

let projekt = "WebPortfolio";

Text zapisujeme do uvozovek.

3. Spojení textů

let soubor = "Projekt_" + jmeno + ".zip";

Znak + zde spojuje textové hodnoty.

4. Výpis do konzole

console.log("Záloha dokončena");

console.log() vypíše text nebo hodnotu.

5. Výpis proměnné

console.log(projekt);

Do konzole se vypíše hodnota uložená v proměnné.

6. Spojení textu a proměnné

console.log("Projekt: " + projekt);

7. Komentář

// Začátek programu

Text za // je poznámka pro člověka a program jej nevykonává.

Ukázka jiného programu

Tento program připravuje cestu k obrázku:

let obrazek = "logo.png";
let slozka = "images/";
let cesta = slozka + obrazek;
console.log("Otevírám obrázek: " + obrazek);
console.log("Připravuji soubor pro web...");
console.log("Ukládám do: " + cesta);
console.log("Hotovo");

Všimni si, že příkazy probíhají:

jeden po druhém shora dolů

To je přesně:

sekvence

Tvůj program

Vytvoř vlastní program:

Backup Simulator

Program musí:

obsahovat proměnnou projekt,
obsahovat proměnnou prijmeni,
obsahovat proměnnou datum,
z těchto hodnot vytvořit název ZIP archivu,
pomocí console.log() simulovat jednotlivé kroky zálohování,
obsahovat alespoň 7 výpisů,
dodržovat správné pořadí kroků,
skončit informací, že záloha byla dokončena.

Například výsledný název archivu může vzniknout:

let archiv = projekt + "" + prijmeni + "" + datum + ".zip";

Výstup programu může vypadat například takto

=== BACKUP SYSTEM ===

Projekt: WebPortfolio

Zavírám otevřené soubory...

Vytvářím ZIP archiv...

Archiv: WebPortfolio_Novak_2026-10-16.zip

Připravuji složku ZALOHA...

Kopíruji archiv...

Kontroluji obsah...

Záloha dokončena.

Nemusíš vytvořit úplně stejný výstup.

Můžeš si texty upravit, pokud zachováš logickou sekvenci zálohování.

Dnes nepoužívej

if
else
for
while

Tyto konstrukce zatím nepotřebuješ.

Dnešní program má být:

čistá sekvence

Důkaz

Program spusť.

Do dokumentu vlož jeden screenshot, na kterém bude vidět:

tvůj JavaScript,
výsledný výstup programu.

Diagram vs. kód

Na konec doplň tuto tabulku třemi konkrétními příklady ze své práce:

Vývojový diagram	JavaScript
Vstup nebo údaj
Proces
Výstup

Cílem je ukázat, že:

slovní postup → algoritmus → vývojový diagram → program

jsou různé způsoby zachycení stejné logiky.

Bonus – Flowchart Gallery

Pokud máš vše hotové a spolužák vedle tebe také, na chvíli si navzájem prohlédněte hlavní diagramy.

Nevysvětlujte si je předem.

Každý se pouze podívá, zda dokáže druhý diagram projít od STARTU ke KONCI.

Do svého dokumentu potom napiš:

Jedna věc, kterou má druhý diagram vyřešenou přehledněji než můj:

Cílem není hledat spolužákovi chyby.

Cílem je všimnout si, že stejný proces lze graficky navrhnout více způsoby a přesto zachovat správnou logiku.

Odevzdání
Hotovou práci odevzdej jako jeden soubor DOCX nebo PDF do připravené složky v Microsoft Teams.
Soubor pojmenuj:
Příjmení_Jméno
Odevzdej nejpozději do konce dne.

Odkazy