Obsah
1. Scratch – plnohodnotný programovací jazyk nebo jen dětské puzzle?
2. Kouzlo vizuálního programování
3. Uživatelské prostředí programu Scratch
4. Skládání programů pomocí bloků
5. Pohyb objektů po pracovní ploše
6. Kreslení na pracovní plochu
8. Obsah následující části seriálu
1. Scratch – plnohodnotný programovací jazyk nebo jen dětské puzzle?
It's a bit like learning natural languages: the earlier the better.
Michael Kölling
V předchozích částech dnes již více než rok starého seriálu pojednávajícího o programovacích jazycích vhodných pro výuku programování jsme se seznámili s několika programovacími jazyky, které se v minulosti i v současnosti používají jak na základních školách, tak i na školách středních. V první části jsme se zmínili o dnes již klasických jazycích z této kategorie. Jedná se o LOGO a Karel. V části druhé jsme se zaměřili na Pascal (až donedávna se jednalo o stálici v tuzemském školství) a Python, včetně různých vývojových nástrojů, které byly pro tyto jazyky zhruba v průběhu předchozích deseti let navrženy. Malou odbočku jsme udělali směrem k NetLogu, což je (nejenom) vývojové prostředí, které se i přes svůj název od klasického Loga v mnoha ohledech odlišuje.
Obrázek 1: V předchozích částech seriálu o programovacích jazycích určených pro výuku programování jsme se zmínili o relativně velkém množství různých jazyků a vývojových prostředí. Na tomto obrázku je zobrazeno uživatelské prostředí nástroje NetLogo se spuštěnou simulací.
Konečně části číslo 3, 4, 5, 6 a 7 byly věnovány programovacímu jazyku Smalltalk a jeho vývojovému prostředí Squeak, které je i přes relativně velký nezájem mainstreamových vývojářů hned v několika ohledech nejvyspělejším IDE, jež je možné v současnosti použít. Při pohledu na osnovy předmětu „Informatika“ pro první stupeň základní školy jsem si uvědomil, že ZŠ s velkou pravděpodobností současným žákům příliš mnoho vědomostí o tomto oboru nepřinese (ono se při pohledu na priority současné společnosti ani není čemu divit :-( ), takže se nakonec budu muset o alespoň amatérskou výuku informatiky pokusit sám. Při pátrání po vhodných nástrojích jsem postupně vyloučil Alice (skvělý nástroj, ale zbytečně složitý) i výše uvedené programovací jazyky (nepříliš zábavné a hlavně náchylné k zápisu chyb) a nakonec jsem se zaměřil na projekt Scratch.
Obrázek 2: Další programovací jazyk a jeho vývojové prostředí, s nímž jsme se již seznámili – Smalltalk a Squeak.
2. Kouzlo vizuálního programování
Scratch uses hands-on, active learning; it is visually appealing; it allows users to express their own creativity and to build on their own experiences; it gives immediate, understandable feedback; and it allows users to avoid syntax errors without focusing on minutiae, freeing them to focus on processes and concepts.
NCWIT study
Většina programovacích jazyků zmíněných v předchozí kapitole je sice vhodná pro výuku programování, ovšem pro děti předškolního věku nebo pro děti na prvním stupni ZŠ se podle mého názoru příliš nehodí, a to hned z několika důvodů. Jedním z těchto důvodů je nutnost zápisu algoritmů pomocí více či méně strukturovaného textu, jehož syntaxe je hlídána buď interpretrem či překladačem. Jedná se o nejdéle používaný způsob programování, jehož počátky můžeme hledat v hluboké počítačové minulosti, protože první překladač pracující se strojovým textem byl vytvořen již v rozmezí let 1951 až 1952 Grace Hopperovou v rámci projektu A-0 (Arithmetic Language version 0), který byl později následován známým FORTRANem navrženým Johnem W. Backusem a jeho vývojovým týmem. Ovšem v průběhu oněch cca šedesáti let se znovu a znovu objevovaly pokusy o vizuální návrh algoritmů, tj. o tvorbu programů nikoli zápisem strukturovaného zdrojového textu, ale návrhem algoritmů pomocí diagramů.
Obrázek 3: Základní informace o projektu Scratch. V tomto dialogu ovšem chybí důležitá informace o tom, že vedoucím skupiny Lifelong Kindergarten je Mitchel Resnick (podle příjmení se možná jedná o potomka českých emigrantů). Použitá licence umožňuje jak šíření programu v binární formě i ve formě zdrojových kódů, tak i tvorbu odvozených projektů. Příkladem může být například projekt BYOB, neboli „Build Your Own Blocks“.
Známé jsou například pokusy o „překlad“ klasických vývojových diagramů, využití kopenogramů atd. V současnosti někteří analytici a vývojáři využívají UML (což je ovšem jen pomůcka) či BPMN (návrh business procesů, ovšem s vhodně zvolenými bloky se vlastně jedná o plnohodnotný jazyk). V oblasti software určeného pro výuku programování se využívá podobný princip, jako v případě vývojových diagramů – možnost zápisu algoritmů pomocí bloků představujících jednotlivé příkazy či volané funkce, které jsou doplněny o základní strukturované příkazy určené pro tvorbu rozhodovacích podmínek a programových smyček. Na tomto principu, tj. na vylepšených vývojových diagramech, je postaven i projekt Scratch, v němž jsou uživatelům nabídnuty základní stavební bloky, z nichž se program skládá, přičemž je ponecháno pouze na uživateli, jakým způsobem tyto bloky využije ve svých programech. Díky způsobu skládání bloků pod sebe (podobně jako u puzzle), popř. do sebe je zajištěno, že program bude po syntaktické stránce vždy v pořádku, což je důležité, protože odpadá pro děti nudná oprava překlepů, hledání chybějících středníků, hlídání párovosti závorek i další činnosti spojené s prací s běžnými programovacími jazyky.
Obrázek 4: Bloky, z nichž se programy skládají, jsou na základě své funkce rozděleny do osmi kategorií. Povšimněte si, že prostředí Scratche bylo téměř kompletně počeštěno; jedna z mála částí ponechaná v angličtině je nápověda k jednotlivým příkazům (i když i tato část se pravděpodobně brzy přeloží).
3. Uživatelské prostředí programu Scratch
Projekt Scratch využívá pro tvorbu i spouštění programů snadno ovladatelné vývojové prostředí, které je navrženo takovým způsobem, že před uživateli neskrývá prakticky žádné své funkce – snad až na vlastní spuštění programů pomocí doubleclicku – a přitom je dostatečně jednoduché, aby se v něm nedalo ztratit. Z toho také vyplývají poměrně malé možnosti přizpůsobení vzhledu uživatelského prostředí (k dispozici jsou například jen tři režimy rozvržení obrazovky volené pomocí ikon umístěných v pravém horním rohu), což však v tomto případě není na škodu, spíše naopak. Okno Scratche je rozděleno do šesti oblastí, které jsou zobrazeny na pátém screenshotu umístěném pod tímto odstavcem. V prvních dvou oblastech je zobrazena kategorie bloků (celkem je k dispozici osm kategorií) i bloky, které se nachází ve vybrané kategorii. Dvojice oblastí uprostřed okna slouží pro zjištění informace o spritu (viz další text) a pro tvorbu programů postupným skládáním jednotlivých bloků. V pravé části okna je zobrazena scéna, v níž se pohybují sprity (opět viz další text) a oblast s konfigurací pozadí i jednotlivých spritů.
Obrázek 5: Uživatelské prostředí projektu Scratch je poměrně přehledné (a také relativně neměnné, takže se nikdy nestane, že by zmizela nějaká ikona nebo nástrojový pruh); získání základní orientace trvá jen několik minut.
4. Skládání programů pomocí bloků
Nejdříve se budeme zabývat popisem toho, jakým způsobem se vlastně programy ve Scratchi tvoří. Je to ve skutečnosti velmi jednoduché a po krátkém zaučení i intuitivní – v levé části okna se postupně vybírají příkazové bloky, které se přetahují do prostřední části okna, kde se z těchto bloků může tvořit program či programy. Běžný příkazový blok je vizuálně představován obdélníkem s několika výčnělky připomínajícími puzzle. Programové smyčky a podmínky jsou vyobrazeny jako složitější tvary umožňující vkládání dalších bloků dovnitř svého těla. Pomocí těchto výčnělků se bloky spojují dohromady tak, aby tvořily sekvenci či dokonce strukturovaný program. V případě, že je zapotřebí sekvenci příkazů změnit, je možné bloky od sebe rozdělit, popř. vybraný blok smazat (přes menu zobrazené po stisku pravého tlačítka myši), zkopírovat (opět přes pravé tlačítko myši) či přesunout. Společně spojené bloky tvoří program, který je možné spustit doubleclickem. Na ploše Skripty je možné vytvořit i více programů, každý je tvořený množinou spojených bloků.
Obrázek 6: Programy se ve Scratchi tvoří přetahováním příkazových bloků z oblasti umístěné v levé části okna do střední oblasti, zde nadepsané „Skripty“.
5. Pohyb objektů po pracovní ploše
Vizuální tvorba programů pomocí skládání příkazových bloků tvoří pouze jednu část přitažlivosti Scratche při výuce programování. Druhou částí je takzvaná pracovní plocha s volitelným pozadím, po níž se mohou v závislosti na volaných příkazech pohybovat takzvané sprity, které navíc mohou při svém pohybu za sebou kreslit křivku (tj. stopu pohybu). Pod pojmem sprite je ve Scratchi myšlen rastrový obrázek, jenž může představovat například postavu či jiný pohyblivý nebo i statický předmět ve hře, zatímco pozadí umístěné na pracovní plochu (taktéž se jedná o rastrový obrázek) je většinou neměnné a může představovat pozadí hry, místnost, ve které se odehrává nějaký dialog atd. Scratch díky možnosti prakticky neomezeného pohybu spritů po pracovní ploše s volitelným kreslením cesty (stopy pohybu), kterou sprity vykonaly, umně integruje jak možnosti programovacích jazyků typu Karel či Baltazar (sprity umístěné a pohybující se po pomyslné šachovnici) a taktéž programovacího jazyka Logo s neodmyslitelnou želvou, která se může pohybovat libovolným směrem po ploše.
Obrázek 7: Editor bitmapových spritů zabudovaný přímo ve Scratchi.
Pohyb spritů lze zajistit pomocí příkazových bloků určených pro posun spritu o zadaný počet kroků, otočení spritu libovolným směrem, přesun spritu na zvolené absolutní či relativní souřadnice atd. Všechny tyto bloky jsou umístěny v první skupině nazvané příznačně Pohyb. Základní vlastnosti spritu se ovšem nemusí měnit pouze běžícím programem, ale i interaktivně. K tomu slouží jak pracovní plocha, na níž je možné sprit pomocí myši přesunout na libovolné místo, tak i oblast zobrazená nad vlastním skriptem (programem). V této oblasti lze pomocí trojice ikon měnit velikost i natočení vybraného (přesněji řečeno právě aktivního) spritu a kromě toho se zde zobrazuje i způsob vykreslení stopy (viz též následující kapitolu). Sprity mohou při svém pohybu po pracovní ploše reagovat na různé události, například na náraz do jiného spritu, přesun nad oblast s určenou barvou, náraz do stěny ohraničující pracovní plochu atd. Vybraný sprite navíc může něco „říct“ nebo si něco „pomyslet“, což je vizuálně zobrazeno formou komiksového obrázku se zvoleným textem (takto lze realizovat základní vstupně/výstupní operace).
Obrázek 8: Základní informace o spritu i o vlastnostech kreslicího pera.
6. Kreslení na pracovní plochu
S pohybem spritů po pracovní ploše poměrně úzce souvisí i funkce pro kreslení stopy, kterou za sebou sprite při svém pohybu zanechává. Podobně jako v programovacím jazyku Logo se i ve Scratchi pro kreslení stopy využívá takzvané kreslicí pero, které lze spustit na papír – pracovní plochu – nebo ho zvednout (v tomto případě se samozřejmě stopa nekreslí a sprite se může pohybovat, aniž by změnil již nakreslený obrázek).
Obrázek 9: Příkazové bloky sloužící pro nastavení vlastností kreslicího pera.
Kromě toho je možné buď interaktivně nebo i programově měnit barvu kreslení a šířku stopy, přičemž barva kreslení se buď zadává číselným kódem (jedním číslem, nikoli pomocí RGB ani HSB/HLS/CMYK…) nebo výběrem barvy z barvové palety. Nastavení barvy podle barvového kódu sice může zpočátku být poněkud matoucí, ale není až tak velký problém si – samozřejmě přímo ve Scratchi – s využitím dvojice programových smyček nechat vykreslit a vytisknout celou barvovou paletu.
Obrázek 10: Velmi jednoduchá simulace Brownova pohybu naprogramovaná ve Scratchi.
I přesto, že se grafické možnosti Scratche mohou na první pohled zdát velmi jednoduché, je ve skutečnosti možné vhodnou kombinací rastrového obrázku umístěného na pozadí, pohyblivých i statických spritů před pozadím a současně vykreslovaných stop naprogramovat i relativně složitou grafickou aplikaci, ať již se jedná o 2D hru, interaktivní demo, prezentaci, či i o vizualizaci výsledků nějaké simulace atd. Ostatně se stačí podívat na galerii projektů vytvořených ve Scratchi, kterou můžete najít na adrese http://scratch.mit.edu/galleries/browse/newest.
Obrázek 11: Sprite, který při svém pohybu za sebou zanechává viditelnou stopu.
7. Podpora práce se zvukem
Kromě práce s grafikou je v projektu Scratch podporována i práce se zvuky. Ta je rozdělena do tří částí – přehrávání nasamplovaných zvuků načtených ze souborů či z mikrofonu, dále pak přehrání noty zvoleným hudebním nástrojem (k dispozici je více než stovka různých hudebních nástrojů) a konečně lze využít i perkusních nástrojů. Při přehrávání nasamplovaného zvuku lze zvolit, zda se má běh programu po dobu přehrávání zastavit, či zda má pokračovat nepřerušovaně dále (což v důsledku může vést i k tomu, že bude přehráváno více zvuků současně). Výběr noty se provádí na klaviatuře s rozsahem dvou oktáv, výběr hudebního nástroje, který má notu přehrát, je v současnosti řešen pouze přes seznam s názvy nástrojů (možná by bylo vhodné použít i jejich ikony, na druhou stranu se ovšem děti alespoň naučí nová slova :-).
Obrázek 12: Jednoduchá melodie „naprogramovaná“ ve Scratchi.
8. Obsah následující části seriálu
V následující části seriálu o programovacích jazycích navržených pro výuku programování se opět budeme zabývat projektem Scratch. Popíšeme si jak práci s jednoduchými proměnnými (skalárními hodnotami), tak i se seznamy, což je jediná a přitom dostačující forma pro ukládání strukturovaných dat; tento fakt ostatně může potvrdit každý skalní LISPař :-). Dále si řekneme, jakým způsobem lze zajistit základní vstupně/výstupní operace. Součástí Scratche je i podpora sdílení vytvořených programů s dalšími uživateli, protože každý program je možné umístit na Internet a sdílet jej tak s ostatními uživateli. Programy sdílené na Internetu mohou být velmi jednoduše spuštěny (přehrány) přímo ve webovém prohlížeči, protože pro jejich přehrávání je používán Javovský applet (není tedy nutné mít vůbec Scratch nainstalován). Díky snadnosti, s jakou je možné vytvořené programy publikovat a sdílet, je v současnosti k dispozici již zhruba 1,5 milionu projektů.
Obrázek 13: Program pro vykreslení spirály, v němž se používá proměnná i programová smyčka.
Nezapomeneme ani na jednu z nejdůležitějších vlastností projektu Scratch – podporu pro tvorbu vícevláknových programů a posílání zpráv mezi objekty. Pro Scratch je typické, že tyto poměrně složité programátorské techniky jsou uživatelům (i zcela začínajícím programátorům) nabídnuty v takové podobě, že jsou nejen snadno pochopitelné, ale i použitelné po relativně krátkém studiu. Ostatně bude zajímavé sledovat, jak si v budoucnu povedou programátoři, kteří se s vícevláknovým programováním (multithreadingem) a obecně s paralelním programováním seznámí již ve svém prvním programovacím jazyce a nebudou tedy zatížení dlouholetou prací s jednovláknovými sekvenčně prováděnými programy (a výběr prvního programovacího jazyka skutečně ovlivňuje myšlení programátora a to na relativně dlouhou dobu).
Obrázek 14: Spirála vykreslená předchozím programem.
9. Odkazy na Internetu
- Scratch: oficiální stránka projektu
http://scratch.mit.edu/ - Scratch: galerie projektů vytvořených ve Scratchi
http://scratch.mit.edu/galleries/browse/newest - Scratch: nápověda
file:///usr/share/scratch/Help/en/index.html - Scratch: obrazovky nápovědy
file:///usr/share/scratch/Help/en/allscreens.html - Scratch (Wikipedie CZ)
http://cs.wikipedia.org/wiki/Scratch - Scratch (programming language)
http://en.wikipedia.org/wiki/Scratch_(programming_language) - Mitchel Resnick (Wikipedia EN)
http://en.wikipedia.org/wiki/Mitchel_Resnick - Domácí stránka Mitchela Resnicka
http://web.media.mit.edu/~mres/ - BASIC-256 – BASIC256 – An easy to use BASIC language and IDE
http://www.basic256.org/ - PythonTurtle
http://pythonturtle.org/ - Turtle graphics for Tk
http://docs.python.org/library/turtle.html - Scratch Lowers Resistance to Programming
http://www.wired.com/gadgetlab/2009/03/scratch-lowers/ - Stopařův průvodce jedním převážně neškodným programovacím jazykem
http://www.squeak.cz/ - CamelCase
http://en.wikipedia.org/wiki/Camel_case - Smalltalk tutorial chapter 5 – Variables
http://www.tutorials4u.com/smalltalk/smalltalk-tutorial-05.htm - History around Pascal Casing and Camel Casing
http://blogs.msdn.com/b/brada/archive/2004/02/03/67024.aspx - Xerox Alto
http://en.wikipedia.org/wiki/Xerox_Alto - WIMP (computing)
http://en.wikipedia.org/wiki/WIMP_(computing) - Graphical user interface
http://en.wikipedia.org/wiki/GUI - Xerox Star
http://en.wikipedia.org/wiki/Xerox_Star - The Xerox Star 8010 „Dandelion“
http://www.digibarn.com/collections/systems/xerox-8010/index.html - Fibonacci number
http://en.wikipedia.org/wiki/Fibonacci_number - Squeak home page
http://www.squeak.org/ - XO: The Children's Machine
http://wiki.laptop.org/go/The_Children's_Machine - Squeak na Wikipedii EN
http://en.wikipedia.org/wiki/Squeak - Squeak na Wikipedii CZ
http://cs.wikipedia.org/wiki/Squeak - Squeak by Example
http://squeakbyexample.org/ - Squeak Land
http://www.squeakland.org/ - SqueakNotes
http://squeak.zwiki.org/SqueakNotes - Squeak FAQ
http://wiki.squeak.org/squeak/471 - Learning Squeak
http://c2.com/cgi/wiki?LearningSqueak - Lazarus (Software)
http://en.wikipedia.org/wiki/Lazarus_%28software%29 - FreePascal
http://www.freepascal.org/ - „Why I Love Python“ slides
http://www.mindviewinc.com/downloads/pub/eckel/LovePython.zip - „Why I love Python“ (presentation)
http://www.slideshare.net/didip/why-i-love-python - První jazyk: Python
http://macek.sandbox.cz/texty/prvni-jazyk-python/ - Programovací jazyk Python
http://www.py.cz/FrontPage - Python – Wikipedia CS
http://cs.wikipedia.org/wiki/Python - IPython
http://en.wikipedia.org/wiki/Ipython - IPython: an interactive computing environment
http://ipython.scipy.org/moin/ - Category:Python
http://rosettacode.org/wiki/Category:Python - Educational programming language
http://en.wikipedia.org/wiki/Educational_programming_language - Seriál Letní škola programovacího jazyka Logo
http://www.root.cz/serialy/letni-skola-programovaciho-jazyka-logo/ - Logo Tree Project:
http://www.elica.net/download/papers/LogoTreeProject.pdf - Language Poster (O'Reilly):
http://www.oreilly.com/news/graphics/prog_lang_poster.pdf - Informace o Comenius Logu:
http://www.comlogo.input.sk/index.html - Stránka nabízející stažení Comenius Loga:
http://www.comlogo.input.sk/nastiahnutie.html - Seminární práce o Comenius Logu:
http://nwit.pedf.cuni.cz/rotal9ap/logo/ - Informace o LEGO/Logu:
http://education.otago.ac.nz/nzlnet/Logo/legologo.html - Informace o systému Elica:
http://www.elica.net/site/index.html - Informace o systému NetLogo:
http://ccl.northwestern.edu/netlogo/ - Stažení NetLoga:
http://ccl.northwestern.edu/netlogo/download.shtml - Uživatelský manuál NetLoga ve formátu PDF:
http://ccl.northwestern.edu/netlogo/docs/NetLogo%20User%20Manual.pdf - NetLogo FAQ:
http://ccl.northwestern.edu/netlogo/docs/faq.html - Domácí stránka Daniela Azumy (autora implementace Turtle Tracks):
http://alumnus.caltech.edu/~dazuma/home/ - Informace o aUCBLogu:
http://www.physik.uni-augsburg.de/~micheler/ - Domácí stránka MSW Loga:
http://www.softronix.com/logo.html - Karel online
http://karel.oldium.net/ - EDU-SIG: Python in Education
http://www.python.org/community/sigs/current/edu-sig/ - Guido van Robot
http://en.wikipedia.org/wiki/Guido_van_Robot - The Guido van Robot Programming Language
http://gvr.sourceforge.net/ - An Introduction to Programming with Karel J. Robot
http://blog.thingoid.com/2003/10/karel-intro/ - Teaching a young robot new tricks
http://blog.thingoid.com/2003/11/karel-new-tricks/ - Karel and Company – More Robots
http://blog.thingoid.com/2003/12/karel-and-company/ - Karel heads for the stars
http://blog.thingoid.com/2004/03/karel-star/ - Karel programming language documentation
http://mormegil.wz.cz/prog/karel/prog_doc.htm - Karel J. Robot
http://www.mainlandregional.net/dklipp/Honors%20Computer%20Science%20Java.htm - Karel (programming language)
http://en.wikipedia.org/wiki/Karel_(programming_language) - Richard E. Pattis
http://en.wikipedia.org/wiki/Richard_E._Pattis - XKarel home page
http://xkarel.sourceforge.net/eng/ - XKarel – screenshoty oken
http://xkarel.sourceforge.net/eng/program.php#Okna - Greenfoot
http://www.greenfoot.org/about/whatis.html - Computer programming – Educational programming languages
http://www.kidslike.info/computer_programming_educational_programming_languages - Making Great Programmers: Why BASIC is Still Relevant
http://kidbasic.sourceforge.net/en/why.html - Gambas Wiki
http://en.wikibooks.org/wiki/Gambas - Free tool offers ‚easy‘ coding
http://news.bbc.co.uk/2/hi/technology/6647011.stm - Základy želví grafiky
http://www.root.cz/clanky/zaklady-zelvi-grafiky/ - Bill Kendrick's Web Turtle
http://www.sonic.net/~nbs/webturtle/