MIĘDZY BLOKAMI A KODEM PROGRAMU W POSZUKIWANIU ŚRODOWISKA DO UCZENIA PROGRAMOWANIA

Podobne dokumenty
2.8. Algorytmy, schematy, programy

GIMNAZJALISTO, ZRÓB TO SAM PROGRAMOWANIE W SCRATCHU

WYKORZYSTANIE PLATFORMY KHAN ACADEMY W TWORZENIU PROJEKTU. ZEGAR BINARNY ZA POMOCĄ JĘZYKA JAVASCRIPT

Od programowania wizualnego do tekstowego

Czy udało się wam kiedyś przeprowadzić taką lekcję? Oto krótki ilustrowany przepis.

Warunki i sposoby realizacji podstawy programowej kształcenia ogólnego w klasie IV i VII szkoły podstawowej z informatyki.

Środowiska programistyczne dla szkoły podstawowej Jak zachęcić uczniów do startu w konkursach informatycznych

Od programowania wizualnego do tekstowego¹

Funkcje i instrukcje języka JavaScript

OD PROGRAMOWANIA WIZUALNEGO DO TEKSTOWEGO

SKRYPT KODOWANIE. Nauczycieli

SCENARIUSZ LEKCJI. Streszczenie. Czas realizacji. Podstawa programowa

Temat 20. Techniki algorytmiczne

Zapisywanie algorytmów w języku programowania

PIĘKNO I RADOŚĆ PROGRAMOWANIA W SNAP! WARSZTAT

Języki programowania I - opis przedmiotu

Programowanie i techniki algorytmiczne

Innowacja pedagogiczna dla uczniów pierwszej klasy gimnazjum Programowanie

Programowanie. Pascal - język programowania wysokiego poziomu. Klasa 2 Lekcja 9 PASCAL

Program nauczania informatyki w gimnazjum Informatyka dla Ciebie. Modyfikacja programu klasy w cyklu 2 godzinnym

PROGRAMOWANIE W PYTHONIE OD PIERWSZYCH KROKÓW

Programowanie od pierwszoklasisty do maturzysty. Grażyna Koba

Podstawy algorytmiki Dariusz Piekarz

Scenariusz lekcji. podać przykłady zalet użycia takiej instrukcji; opisać algorytm obliczania średniej n liczb;

P R O J E K T E U R O P E J S K I P R O M O W A N Y P R Z E Z :

Podstawy programowania 2. Temat: Funkcje i procedury rekurencyjne. Przygotował: mgr inż. Tomasz Michno

Języki i metody programowania Java Lab1 Zofia Kruczkiewicz

Wprowadzenie i konfiguracja programu Pierwsze kroki w programie do tworzenia aplikacji mobilny App Inventor

znajdowały się różne instrukcje) to tak naprawdę definicja funkcji main.

PROGRAMOWANIE GRAFIKI I ELEMENTÓW INTERAKTYWNYCH NA STRONY WWW W P5.JS

PROGRAMOWANIE DLA KAŻDEGO. Rewolucja w nauczaniu informatyki. Programowanie od pierwszych klas, sterowanie robotami i co jeszcze?

Algorytm. a programowanie -

Roboty grają w karty

WYKONANIE APLIKACJI OKIENKOWEJ OBLICZAJĄCEJ SUMĘ DWÓCH LICZB W ŚRODOWISKU PROGRAMISTYCZNYM. NetBeans. Wykonał: Jacek Ventzke informatyka sem.

REFERAT PRACY DYPLOMOWEJ

WYMAGANIA EDUKACYJNE NA POSZCZEGÓLNE STOPNIE Z INFORMATYKI W KLASIE 8 opracowane na podstawie podręcznika

Algorytm Euklidesa. Największy wspólny dzielnik dla danych dwóch liczb całkowitych to największa liczba naturalna dzieląca każdą z nich bez reszty.

Wykład IV Algorytmy metody prezentacji i zapisu Rzut oka na język PASCAL

WYMAGANIA EDUKACYJNE NA POSZCZEGÓLNE STOPNIE Z INFORMATYKI W KLASIE 8 opracowane na podstawie podręcznika

Zaawansowane aplikacje internetowe

Laboratorium 1 Wprowadzenie do PHP

Język programowania PASCAL

5-6. Struktura dokumentu html. 2 Określenie charakteru i tematyki strony. Rodzaje witryn. Projekt graficzny witryny. Opracowanie skryptów

Innowacja pedagogiczna

Zakres treści Czas. 2 Określenie charakteru i tematyki strony. Rodzaje witryn. Projekt graficzny witryny. Opracowanie skryptów

REFERAT O PRACY DYPLOMOWEJ

Klasa 2 INFORMATYKA. dla szkół ponadgimnazjalnych zakres rozszerzony. Założone osiągnięcia ucznia wymagania edukacyjne na. poszczególne oceny

CZAS NA PROGRAMOWANIE

Krótki kurs obsługi środowiska programistycznego Turbo Pascal z 12 Opracował Jan T. Biernat. Wstęp

Sprawozdanie z realizacji programu Kodowanie z klasą dla uczniów klasy II i IV Szkoły Podstawowej nr 7

WYMAGANIA EDUKACYJNE. Informatyka Szkoła Podstawowa Klasa 4 NA ŚRÓDROCZNĄ I ROCZNĄ OCENĘ KLASYFIKACYJNĄ

Algorytmika i pseudoprogramowanie

Grażyna Szabłowicz-Zawadzka CKU TODMiDN PROGRAMOWANIE

KURSY PROGRAMOWANIA DLA DZIECI

PYTHON NA LEKCJACH INFORMATYKI W SZKOLE PONADGIMNAZJALNEJ

Teraz bajty. Informatyka dla szkół ponadpodstawowych. Zakres rozszerzony. Część 1.

PORADNIK METODYCZNY DLA NAUCZYCIELI GIMNAZJUM JAK WYKORZYSTAC PAKIET DYDAKTYCZNY DO NAUCZANIA

PROGRAMOWANIE DLA KAŻDEGO

Zdarzenia Zdarzenia onload i onunload

Rozkład materiału do nauczania informatyki w liceum ogólnokształcącym Wersja I

Programowanie w języku C++ Grażyna Koba

Wymagania edukacyjne z informatyki w klasie VIII

Warsztaty dla nauczycieli

Rozkład materiału do nauczania informatyki w liceum ogólnokształcącym Wersja II

Wymagania edukacyjne do przedmiotu

Informatyka Szkoła podstawowa

KURSY PROGRAMOWANIA DLA DZIECI

Nowa podstawa programowa przedmiotu informatyka w szkole ponadpodstawowej

KURSY PROGRAMOWANIA DLA DZIECI

Programowanie. programowania. Klasa 3 Lekcja 9 PASCAL & C++

Algorytm - pojęcie algorytmu, sposób zapisu, poziom szczegółowości, czynności proste i strukturalne. Pojęcie procedury i funkcji.

Od szczegółu do ogółu, praktyczne refleksje o nauczaniu informatyki wg nowej podstawy programowej

Założenia projektu: Projekt ma zadanie pokazać praktyczne zastosowanie App Inventor 2, poprzez stworzenie prostej aplikacji do nauki słówek.

WSIPNET IDEALNE ROZWIĄZANIE DLA SZKÓŁ

Informatyka II. Laboratorium Aplikacja okienkowa

REFERAT PRACY DYPLOMOWEJ

Scenariusz lekcji opartej na programie Program nauczania informatyki w gimnazjum DKW /99

SPOSOBY POMIARU KĄTÓW W PROGRAMIE AutoCAD

Autorski program nauczania

TECHNOLOGIE INTERNETOWE WYKŁAD 6. JavaScript Funkcje i obiekty

Zapisywanie w wybranej notacji algorytmów z warunkami i iteracyjnych

Wykład 03 JavaScript. Michał Drabik

Aplikacje WWW - laboratorium

Temat 5. Programowanie w języku Logo

Szczegółowy program kursów szkoły programowania Halpress

Nowe liceum i technikum REFORMA 2019

Nowa Podstawa programowa z informatyki. Konferencja metodyczna Radom, 7 grudnia 2016

SPRAWOZDANIE Z REALIZACJI INNOWACJI W ZESPOLE SZKÓŁ IM. KS. KARD. STEFANA WYSZYŃSKIEGO W POŁOMI

Przedmiotowy system oceniania Informatyka kl 8

ALGORYTMY I STRUKTURY DANYCH

OD TABLICZKI MNOŻENIA DO LICZB PIERWSZYCH MATEMATYKA ZE SCRATCHEM

Wstęp do Informatyki

Zajęcia komputerowe, informatyka, TIK

Podstawy technologii WWW

INFORMATYKA, TECHNOLOGIA INFORMACYJNA ORAZ INFORMATYKA W LOGISTYCE

Część XV C++ Ćwiczenie 1

Programowanie dla początkujących w 24 godziny / Greg Perry, Dean Miller. Gliwice, cop Spis treści

ABIX Cyfrowa edukacja z oprogramowaniem Open Source

Transkrypt:

MIĘDZY BLOKAMI A KODEM PROGRAMU W POSZUKIWANIU ŚRODOWISKA DO UCZENIA PROGRAMOWANIA Witold Kranas Ośrodek Edukacji Informatycznej i Zastosowań Komputerów ul. Nowogrodzka 73, 02-006 Warszawa witek@oeiizk.waw.pl Abstract. There are a few environments allowing to build a project using blocks with a possibility to translate it immediately to programming language. Two of them will be introduced with a couple of examples. First is App Lab on code.org using a set of blocks to build a smartphone application which may be easily translated to JavaScript. The second is more widely known Blockly code by Google allowing to change block construction into six different languages (Python, JavaScript, PHP, Lua, Dart, XML). These environments give teachers possibility to teach basics of programming. We will explore this possibility searching the ways to introduce some topics from new computer science core curriculum. 1. Programowanie wizualne vs. tekstowe W tym roku obchodziliśmy dziesiąte urodziny Scratcha środowiska, które szturmem zdobyło pole edukacji informatycznej. Pomysł ułatwienia nauki programowania poprzez wizualizację poleceń języka i składanie programu z gotowych bloków nie jest nowy. Już w latach dziewięćdziesiątych poprzedniego wieku był rozpowszechniany w polskich szkołach program ELI Laboratorium Informatyki, w którym można było układać i uruchamiać schematy blokowe algorytmów. W tych czasach dominującym środowiskiem programistycznym w edukacji był język LOGO, a na wyższym poziomie również Pascal. Dokonujące się dziś przejście na środowiska wizualne spowodowało, że trzeba szukać sposobów na transfer nabytych w tych środowiskach umiejętności programistycznych do środowisk tekstowych, wymaganych na egzaminie maturalnym. Zaczęły już postawać środowiska łączące budowanie programu z gotowych bloków i programowanie tekstowe. Poniżej zaprezentowane zostaną na przykła-

86 Witold Kranas dach dwa z nich. Pierwsze to App Lab na code.org pozwalające na zbudowanie za pomocą zestawu bloków aplikacji smartfonowej. Ułożone bloki można jednym kliknięciem zamienić na kod programu w JavaScript (i odwrotnie). Drugie, szerzej znane Blockly kod, umożliwia zamianę skryptu ułożonego z bloków na sześć różnych języków programowania (Python, JavaScript, PHP, Lua, Dart, XML). 2. App Lab dziecko Godziny kodowania Od ponad roku code.org instytucja, która zorganizowała akcję Godzina kodowania rozwija własne środowisko programowania wizualnego dedykowane uczniom 13+ o nazwie App Lab. Rysunek 1 Główna strona środowiska AppLab na code.org Można w nim zarówno programować wizualnie, korzystając z zestawu gotowych bloków, jak i tekstowo w języku JavaScript oraz jednym kliknięciem przechodzić od bloków do kodu i odwrotnie. Środowisko jest nastawione na tworzenie prostych aplikacji na smartfony i tablety. Działa ono wyłącznie w wersji angielskiej. Na głównej stronie jest obfitość materiałów wprowadzających do korzystania z App Lab, utrzymanych w stylu charakterystycznym dla Godziny kodowania. Jest wśród nich kurs wprowadzający do programowania (CSP Unit 3 Programming), wiele krótkich filmów demonstrujących możliwości środowiska (RESOURCES), próbki gotowych projektów (Challenges) oraz filmy edukacyjne (video library). Przejście do budowania projektu wymaga zalogowania się na konto w code.org, to samo, z którego korzystamy w trakcie pracy z Godziną kodowania. 2.1. Prosty projekt rysowanie gwiazdek W pierwszym projekcie wykorzystamy głównie zestaw bloków Turtle, pozwalający na korzystanie z grafiki żółwia. Będziemy rysować spiralne gwiazdki w miejscu kliknięcia na ekranie.

Między blokami a kodem programu 87 Rysunek 2. Projekt gwiazdki w środowisku App Lab widok bloków Procedura rysująca gwiazdki w wersji JavaScript wygląda następująco: function gwiazda(a, k) { if (a > 40) { penup(); return; pendown(); moveforward(a); turnright(k); gwiazda(a+1, k); Korzysta ona z grafiki żółwia i rekurencji. Ta możliwość jest jedną z zalet środowiska, gdyż pozwala na wykorzystanie materiałów opracowanych w języku LO- GO, który jest znany sporej części nauczycieli informatyki. Pozostała część projektu to obsługa zdarzeń: kliknięcia na ekranie oraz kliknięcia przycisku Czyść. hide(); penup(); penwidth(2); penrgb(randomnumber(127, 255), randomnumber(127, 255), randomnumber(0, 255)); onevent("button1", "click", function(event) { moveto(160, 240); pencolor("#140058"); dot(300); ); onevent("screen1", "click", function(event) {

88 Witold Kranas moveto(event.x, event.y); gwiazda(1, randomnumber(60, 179)); penrgb(randomnumber(127,255), randomnumber (127,255), randomnumber(0,255)); ); Ważną częścią projektu jest budowanie jego elementów takich, jak przyciski, wprowadzanie danych, etykiety, obrazki, pola tekstowe, itp.). Odbywa się to w zakładce Project. Pierwszy projekt zawiera przycisk Czyść. Rysunek 3. Zakładka Project w środowisku App Lab Budowane obiekty mogą generować zdarzenia, definiowane w zakładce EVANTS. 2.2. Projekt algorytm Euklidesa W drugim projekcie wykorzystujemy klasyczny algorytm Euklidesa, znajdujący NWD dwu liczb w wersji z odejmowaniem oraz z resztami z dzielenia. Obie wersje algorytmu są przywoływane w nowej podstawie programowej informatyki w szkole podstawowej (klasy VII, VIII). Środowisko dysponuje standardowymi pętlami iteracyjnymi: while i for znajdującymi się w niebieskiej grupie Control. Wersje Algorytmu Euklidesa z odejmowaniem i resztami wyglądają następująco (polecenia settext zostały dodane, aby można było zobaczyć wartości zmiennych w kolejnych krokach iteracji): function Euklid1(a,b) {

Między blokami a kodem programu 89 while ((a!= b)) { if (a > b) { a = a - b; else { b = b - a; settext("text_area1", a); settext("text_area2", b); return a; function Euklid2(a,b) { while ((a!== 0 && b!== 0)) { if (a > b) { a = a%b; else { b = b%a; settext("text_area1", a); settext("text_area2", b); return (a + b); Rysunek 4. Projekt Euklides, NWD w środowisku App Lab, widok bloków Jedną z istotnych cech środowiska pomagającą w nauczaniu algorytmiki jest możliwość śledzenia programu. Działa ona zarówno w wersji blokowej jak i teksto-

90 Witold Kranas wej. Przed uruchomieniem programu trzeba jednak przestawić szybkość jego wykonywania z zająca na żółwia. Rysunek 5. Projekt Euklides, NWD w App Lab, widok tekstu, śledzenie Pozostała część projektu zawiera procedury obsługi kliknięć w przyciski obliczania NWD. var a1 = promptnum("podaj pierwszą liczbę: "); settext("text_area1", a1); var b1 = promptnum("podaj drugą liczbę: "); settext("text_area2", b1); onevent("button1", "click", function(event) { settext("text_area1", a1); settext("text_area2", b1); settext("nanwd", Euklid2(a1, b1)); ); onevent("button2", "click", function(event) { settext("text_area1", a1); settext("text_area2", b1); settext("nanwd", Euklid1(a1, b1)); ); Aby uruchomić projekt na smartfonie wystarczy przesłać link, odebrać go na smartfonie i stuknąć link. W pełni funkcjonalna aplikacja zostanie otwarta w przeglądarce.

3. Środowisko Blockly kod Między blokami a kodem programu 91 Drogie środowisko programowania wizualnego z możliwością zamiany na kod programu jest częścią projektu Google Blockly. Znaczącym utrudnieniem jest brak możliwości zalogowania się. Aby zapamiętać projekt należy zapisać link do niego. Rysunek 6. Algorytm Euklidesa w środowisku Blockly kod W repertuarze dostępnych bloków nie ma poleceń grafiki żółwia, za to bloki są spolszczone. Po zbudowaniu projektu można zobaczyć odpowiadający mu kod programu. Tu przykład w JavaScript. var a, b, x, y; function mathrandomint(a, b) { if (a > b) { // Swap a and b to ensure a is smaller. var c = a; a = b; b = c; return Math.floor(Math.random() * (b - a + 1) + a); /* Algorytm Euklidesa z odejmowaniem */ function NWD1(a, b) { while (a!= b) { if (a > b) { a = a - b; else { b = b - a; return a;

92 Witold Kranas /* Algorytm Euklidesa z resztami */ function NWD2(a, b) { while (a!= 0 && b!= 0) { if (a > b) { a = a % b; else { b = b % a; return a + b; mathrandomint(1, 100); x = parsefloat(window.prompt('podaj pierwszą liczbę')); y = parsefloat(window.prompt('podaj drugą liczbę')); window.alert(string(string(string('nwd liczb ') + String(x)) + String(String(' oraz ') + String(y))) + String(String(' wynosi ') + String(NWD2(x, y)))); Jeśli umieścimy ten tekst jako skrypt w kodzie HTML, to będzie on działać. Podobnie z kodem w języku Python wystarczy przejść do środowiska 4. Nauczanie programowania Nowa podstawa programowa kładzie nieco większy nacisk na programowanie i algorytmikę. W klasach VII i VIII wskazane jest wprowadzanie tekstowego środowiska programowania zamiast/obok środowiska wizualnego. O ile podstawę dla klas IV-VI można w pełni zrealizować wykorzystując środowisko wizualne, takie jak Scratch, to w dwóch ostatnich klasach szkoły podstawowej powinniśmy mieć aplikację umożliwiającą programowanie tekstowe. Dobrze byłoby również, gdyby to środowisko umożliwiało śledzenie przebiegu programu, abyśmy mogli analizować algorytmy wymienione w podstawie.

Między blokami a kodem programu 93 Rysunek 7. Scratch 3.0 w nowych szatach, wersja testowa Wszystkie te postulaty spełnia środowisko App Lab. Google Blockly kod pozwala na zamianę bloków na kod programu, ale nie pozwala na pisanie w kodzie, a śledzenie przebiegu trzeba realizować w innym środowisku. Nie bez znaczenia jest też możliwość korzystania w środowisku App Lab z bloków grafiki żółwia. Część nauczycieli przez wiele lat wykorzystywała w nauczaniu język LOGO i w App Lab będą oni mogli wykorzystać przynajmniej część swoich materiałów. Wreszcie możliwość uruchomienia stworzonej aplikacji na smartfonie może dodatkowo motywować uczniów do pracy w tym środowisku. Przed nami jeszcze jedna zmiana. W 2016, w dziewiąte urodziny Scratcha zapowiedziano nową wersję tego środowiska, która zapewne będzie się nazywać Scratch 3.0. Ma ona mieć nowe szaty bloki oparte na oogle Blockly i nowy napęd HTML5. Zapowiadanych jest trochę nowych bloków i premiera pod koniec 2017 roku. Niestety nic nie słychać o możliwości zamiany skryptu w Scratchu na kod programu, ale Literatura 1. Algorytm Euklidesa w środowisku Blockly kod: https://blocklydemo.appspot.com/static/demos/code/index.html?lang=pl#onsvvo, ostatni dostęp maj.2017 roku. 2. Dokumentacja środowiska App Lab: https://docs.code.org/applab, ostatni dostęp maj.2017 roku.

94 Witold Kranas 3. Projekt Euklides, NWD w środowisku App Lab: https://studio.code.org/projects/applab/vrl9etg4hjsiv8rr4c0x-g, ostatni dostęp maj.2017 roku. 4. Projekt Gwiazdy w środowisku App Lab: https://studio.code.org/projects/applab/h4ca4ytvkbpdchn2x2ephw, ostatni dostęp maj.2017 roku. 5. Nowa podstawa programowa z informatyki dla szkoły podstawowej https://men.gov.pl/wp-content/uploads/2016/11/podstawa-programowa-zinformatyki-szkola-podstawowa.pdf, ostatni dostęp maj 2017 roku. 6. Strona główna środowiska App Lab: https://code.org/educate/applab, ostatni dostęp maj.2017 roku. 7. Strona główna środowiska Blockly kod: https://blocklydemo.appspot.com/static/demos/code/index.html?lang=pl, ostatni dostęp maj.2017 roku. 8. Wersja testowa środowiska Scratch 3.0: https://llk.github.io/scratch-gui/, ostatni dostęp maj 2017 roku