Programování na 1.st. s Code.org

Tento článek popisuje mé praktické zkušenosti s využitím kurzu Úvod do počítačových věd, za kterým stojí lidé z Code.org, což je asi aktuálně největší globální projekt na podporu výuky programování s mnoha sponzory. Jednou z doprovodných aktivit byla kampaň Computer Science Education Week, jejímž rámci byla realizována i Hodina kódu, o které již bylo i zde na Spomocníkovi psáno (Celosvětová kampaň Hour of Code). Budu se věnovat jak samotnému technickému pozadí kurzu, tedy registraci učitele i žáků, správě jejich účtů a monitoringu skupiny, tak i konkrétním zkušenostem z realizované výuky.

Jak jsem se ke kurzu vůbec dostal

S využitím uvedeného kurzu vedu výuku v rámci zájmového kroužku na základní škole. V kroužku jsou žáci od druhé do páté třídy. U zájmových kroužků se snažím probírat to, co děti skutečně zajímá. Letos v září se žáci ozvali, že se chtějí naučit, jak vytvořit počítačovou hru. Prohledal jsem proto všelijaké kouty internetu a zjišťoval, jakým způsobem seznámit žáky prvního stupně se základy algoritmizace a programování tak, aby po třiceti lekcích dokázali vytvořit něco, co by sami považovali za hru. Pro začátek jsem věděl jen tolik, že určitě nebudeme programovat kalkulačku v TurboPascalu. Nakonec padla volba na prostředí Imagine Logo, jehož demoverze byla ve škole nainstalována. V polovině prosince jsem se prostřednictvím Spomocníka doslechl o celosvětové kampani „Hour of Code“, zaměřené právě na podporu výuky programování. Na stránkách projektu, learn.code.org, jsem si všiml také navazujícího dvacetihodinového kurzu, a ten mne doslova uchvátil. Pro jistotu upozorním, že se nejedná o kurz, jehož cílem je tvorba her, ta bude teprve následovat. Kurz slouží především k seznámení s principy algoritmizace.

Prostředí aplikace

Prostředí aplikace. Zleva: zadání, dostupné bloky, výsledný program.

Celý kurz je ve skutečnosti webovou aplikací a vše se odehrává v prostředí internetového prohlížeče. Nepotřebujete tedy nic instalovat, stačí si ověřit, že na školních počítačích vše funguje a začít s výukou.

Veškeré „programování“ se odehrává prostřednictvím přetahování dostupných bloků a jejich spojování v celistvý program. Výstup programu je graficky znázorněn ve formě animace s motivy ze známých her jako Angry Birds a Plants vs. Zombies, což jeho atraktivitu ještě zvyšuje. Kurz začíná úplnými základy a seznámením s prostředím. V prvních několika úrovních má žák jen posunout postavičku o několik políček vpřed, případně zatočit. Po poněkud pomalejším startu se vše rozbíhá naplno a postupně se přidávají smyčky, podmínky a funkce. Později také funkce s parametry a rekurze. U každého zadání je určeno, kolik programových bloků by mělo řešení obsahovat. Pokud žák použije bloků více, avšak dosáhne požadovaného výsledku, postupuje, ale neúspěch se mu zapisuje do statistik. Podle autorů je kurz použitelný až do osmé třídy (K-8). Ze zkušenosti mohu říct, že třeťáci v kroužku se po třetí lekci s tímto prostředím sžili a zatím nemají vážnější problémy. Nutno podotknout, že vynecháváme unplugged aktivity (bez počítače) a čerpáme i z předchozích zkušeností s Imagine Logo.

Postup studenta je založen na řešení problémů (hádanek). Existuje celkem dvacet postupových fází. Začíná se s bludištěm, kdy je v každé hádance úkolem „chytit prasátko“ a později „dovést Zombie ke slunečnici“. V dalších fázích se střídá několik různých prostředí, kde v každém jde o něco jiného. V prostředí „Umělec“ je vaším úkolem vytvořit takový kód, abyste nakreslili obraz shodný s předlohou. Jedná se tedy ve skutečnosti jen o další reprezentaci želvy a želví grafiky. V prostředí „Farmářka“ musí žák pomoci farmářce zasypat díry a odklidit hromady z její farmy. Jedná se tedy o rozšíření bludiště z úvodní fáze, ale úkolů je více a řeší se komplexní zadání. Mezi jednotlivé fáze řešení je zařazeno celkem jedenáct unplugged aktivit. Jejich cílem je seznámit žáky s fungováním počítačů, algoritmizací a internetem.

Bludiště, Umělec a Farmářka. Tři rozdílné prostředí s odlišnými úkoly.

Vždy, když je pro vyřešení hádanky potřeba využít nový prvek, předchází jejímu zadání video, ve kterém je vše vysvětleno. Nutno poznamenat, že videa jsou vskutku kvalitně zpracovaná, byť žáci nejsou schopni ocenit známé tváře, které se v nich objevují ani použité příklady ze života. Pokud by někomu video nevyhovovalo, může si kliknout na vedlejší záložku a namísto videa si zobrazit jeho textový přepis doplněný o důležité snímky z videa. Motivační videa jsou umístěna také u jednotlivých unplugged aktivit. Každé video je možné stáhnout kliknutím na příslušné tlačítko během jeho přehrávání, případně jsou také všechna pohromadě oficiálně nahrána na DropBoxu. Za zmínku stojí, že videa nejsou odkazována přímo z Youtube, jak by se mohlo zdát, ale přenášejí se přes specializovaný server YouTubeEducation.com, který je záměrně anonymizován. Pokud tedy u vás máte, podobně jako některé americké školy, Youtube blokovaný, tato videa by vám měla fungovat.

Ukázka video-tutoriálu - nahoře tlačítko pro zobrazení textových poznámek, stažení videa a zavření okna.

Jak se přihlásit, vytvořit třídu a začít pracovat

V kurzu můžete začít pracovat i anonymně. Stačí otevřít learn.code.org a můžete se dát do práce. Při použití ve škole si ale budete pravděpodobně chtít svůj pokrok uložit a příště navázat. K tomu stačí zdarma se zaregistrovat. K registraci budete potřebovat funkční e-mailovou adresu nebo můžete použít svůj účet Google, Facebook, Twiter anebo Windows Live. Tvůrci projektu naštěstí pochopili, že zejména mladší děti často nemají e-mail, zapomínají hesla a učitel potřebuje mít přehled o jejich pokroku. Proto umožnili registraci celých tříd. Jak na to? Nejprve se musíte zaregistrovat jako učitel. Registrační odkaz je umístěn na learn.code.org pod úvodním obrázkem kurzu K-8. Učitelskou registraci lze také na stejném místě připojit k již existujícímu účtu.

Po přihlášení do učitelského účtu klikněte vpravo nahoře na své jméno a poté na odkaz „My students“. Zde můžete přidat novou sekci, tedy třídu (Manage sections -> Add section), pro vytvoření třídy potřebujete zadat pouze její jméno. Po vytvoření nové třídy nás bude zajímat její kód (Section-Code). Jde o šestimístný kód identifikující vaši třídu, například IBKBFL. Poté již stačí jen požádat studenty, aby přešli na adresu http://learn.code.org/join, kde vyplní uvedený kód a zaregistrují se.

Při tomto způsobu registrace žáci zadávají pouze své uživatelské jméno a heslo, nepotřebují tedy e-mailovou adresu! Pochopitelně se mohou zaregistrovat i obvyklou cestou a identifikátor třídy vyplnit později ve svém profilu. V tomto případě již ale e-mailovou adresu potřebují. Identifikátor třídy je možné také zakomponovat přímo do adresy, tím studentům odpadne jedno vyplňování políčka, adresa poté vypadá například http://learn.code.org/join/IBKBFL. Pokud máte zájem prozkoumat prostředí z pohledu žáka, tak uvedený odkaz vede do skutečné třídy, kterou jsem pro tento účel vytvořil.

Jakmile se žáci připojí ke třídě, mohou začít pracovat na jednotlivých hádankách. Dostupné jsou všechny úrovně včetně unplugged aktivit. Záleží jen na učiteli, co se bude dělat. Učitel má ve svém profilu zobrazen „Panel pokroku“ ve kterém vidí postup jednotlivých studentů (Nový pohled na schopnost technologií ověřovat výukové výsledky). Tvůrci šli tak daleko, že lze poznat nejen dokončené hádanky, ale i zda náhodou student nepoužil příliš mnoho bloků. Taktéž vidíme neúspěšné pokusy o splnění aktivity a dokonce si můžeme zvýraznit přehled činnosti žáků za poslední hodinu, den či týden. Výsledná tabulka je značně široká a má bohužel pevnou šířku. A tak vám ani sebevětší displej nepomůže ji zobrazit vcelku. Pokud jsou studenti přibližně na stejné úrovni, tak to tolik nevadí, ale pokud jsou mezi nimi výraznější rozdíly, tabulka je dost nepřehledná.

Panel pokroku s vyobrazením aktivity studentů, hotových cvičení i neúspěšných pokusů.

Na kartě „Manage students“ je možné žákům nastavit nové heslo, pokud jej zapomněli. Asi to znáte, ale raději připomenu typický problém. Než studentovi změníte heslo, ověřte si, že se pokouší přihlásit se správným uživatelským jménem. S tím mají na kroužku potíže zejména druháci a třeťáci, ale učí se rychle. Je to jedna z kompetencí, která se jim určitě bude hodit. Pokud chcete, můžete studenty přesouvat mezi jednotlivými třídami. Zatím se mi nepodařilo zjistit, zda je lze též zcela odstranit. Pro každého studenta si lze zobrazit jeho nedávnou aktivitu, mělo by též být možné zobrazit kód, který student sestavil, ale to se mi zatím nepodařilo. Buď jsem vždy použil špatný prohlížeč, anebo to nefunguje.

Za svoji činnost získávají studenti „trofeje“, za každý podstatný algoritmický prvek jednu. Dle toho, jak dobře plnili úkoly s daným konceptem související, získají trofej bronzovou, stříbrnou nebo zlatou, v obvyklém případě postupně všechny tři. Při výuce můžete využít trofeje například jako podklad pro hodnocení.

Angličtina a překlady

Celý projekt vznikl původně samozřejmě v angličtině. Od počátku jsou však dobrovolníci z celého světa vyzýváni, aby pomohli s překladem do svého jazyka. Odkaz pro přihlášení k dobrovolnému překladu je ve spodní části každé stránky. Celý proces začíná překladem jednotlivých frází a vět, a poté pokračuje kontrolou hotového překladu – vše prováděno dobrovolníky, a tedy pochopitelně bez záruky na přesnost. Bohužel se zdá, že stránky mají problém s některými českými znaky, a tak si většinu textů můžeme dopřát v češtině jen s obtížemi.

V rámci kroužku jsme s kurzem začali ještě v době, kdy nebyl oficiální český překlad k dispozici. Ukázalo se, že s anglickými názvy příkazů nemají problém ani druháci. Obtížnější situace je u zadání úloh, ale i to jsou děti obvykle schopny odvodit, případně pomohu. Co ale představuje největší problém, jsou video-tutoriály uvozující nové programové bloky, které jsou pro pochopení klíčové. Nicméně v angličtině, byť s anglickými titulky, tuto funkci na prvním stupni ZŠ neplní. Bylo by vhodné doplnit je o české titulky, na čemž již (snad) dobrovolníci pracují. Alternativní slovní popisy již většinou přeložené jsou, ale ty si studenti číst příliš nechtějí, chybí názorná animace použití nového bloku, která je ve videu.

Jsem přesvědčen, že je nejrozumnější i u menších dětí prostě používat originální anglickou verzi stránek. Aktivní používání cizího jazyka při zábavné činnosti rozhodně nemůže být ke škodě. U programových bloků to ničemu nevadí, možná spíše naopak. A vezmeme-li v úvahu, že český překlad je zatím ve stádiu zrodu, je o důvod více. Zároveň zkuste poprosit všechny známé, kteří ovládají angličtinu, aby se k překladu připojili. Třeba se nám společně podaří vytvořit takový překlad, který bude možné používat. Pochopitelně je vhodné, aby člověk, který chce překládat, celý kurz nejprve sám prošel, protože jinak nemá šanci pochopit souvislosti překládaných frází.

Požadavky na vybavení

Moderní výuka si žádá moderního vybavení. Na stránkách projektu není nikde napsáno, na jaké sestavě by vše mělo bez potíží fungovat. Konec konců, u webové stránky to ani nelze nijak přesně určit. Zkoušel jsem spustit cvičení na mnoha počítačích různých parametrů a dospěl jsem k závěru, že požadavky jsou přibližně následující:

- Aktuální verze SW
Zejména internetového prohlížeče a s ním souvisejících doplňků.

- Počítačová sestava vhodná pro Windows 7
Nevím, jak jinak přesně definovat HW náročnost této aplikace. Na počítačích, na kterých dokáže plynule běžet Windows 7, jsem se nesetkal s potížemi. U starších docházelo k sekání a vše běželo velmi pomalu. Zvláště v případech, kdy byla grafická karta integrovaná.

- Monitor s rozlišením alespoň 1280×1024
Na menší plochu se stránka prostě nevejde. Občas se pak i stane, že se některý prvek zobrazí mimo monitor a posuvník nikde. Velmi dobře funguje oddálení stránky (CTRL + kolečko myši), které zmenší skutečně vše. Nicméně je to na úkor čitelnosti, a navíc to ještě dále zvyšuje výpočetní náročnost aplikace.

- Kvalitní připojení k internetu
Pro plnohodnotné využití aplikace se mi osvědčilo připojení s rychlostí alespoň 10Mbps (pokud si všichni najednou nepustí video). Pomalejší připojení lze též využít (testoval jsem i mobilní připojení), ale dochází ke zbytečným prostojům.

Uvedené nároky jsou pouze můj osobní odhad a vztahují se výhradně na stolní počítače. Většina zadání by však měla být řešitelná i na tabletu či chytrém telefonu.

Je mi jasné, že kvůli tomuto kurzu si nikdo učebnu novými počítači nevybaví. I my máme některé počítače výkonem silně na hraně, proto jsme přišli na několik specifik při používání na pomalém počítači. První z nich, spíše takovou zajímavostí, je generování náhodných barev. U většiny úkolů v prostředí Umělce je barva každé čáry náhodně generována. Všimli jsme si, že na pomalých počítačích se téměř negenerují jiné barvy než modrá a zelená v několika odstínech, na rychlejších počítačích je barev mnohem více.

Druhým specifikem, tentokrát vysloveně praktickým, je možnost zrychlení provádění kódu. Funguje to všude, ale výrazného zrychlení se dosáhne zejména v prostředí Umělce. Ve chvíli, kdy je program spuštěn, dochází současně s prováděním příkazů k jejich obarvování, aby bylo zřejmé, který z příkazů zapříčinil jakou akci. Na pomalém počítači to vše probíhá velmi pomalu. Stačí však kousek pohnout s vytvořenými příkazy, ty se přestanou obarvovat a program se provádí výrazně rychleji.

Třetí trik se týká videí. Pokud jednou u některého z nich kliknete na zobrazení textových poznámek, a pak je zavřete, vaše volba bude uložena, a příště již místo videa dostanete rovnou text. Rychlost načtení zadání je pak několikanásobně vyšší.

Závěrem

Přestože kampaň Computer Science Education Week, v jehož rámci byl tento kurz představen, již dávno skončila, tento projekt se dále vyvíjí a pokrok je skutečně viditelný. Téměř každý týden si na kroužku všimneme nějaké drobnosti, která dříve buď vůbec nebyla, anebo nefungovala. Jednoznačně mohu zařazení popisovaného kurzu do výuky informatiky doporučit.