Czas na realizację zajęć: 45 minut (1 godzina lekcyjna)
Etap edukacji: szkoła podstawowa, etap II – klasy IV – VIII, w tym klasy VII – VIII

Wprowadzenie (krótki opis zajęć):

W czasie pierwszej lekcji uczniowie zapoznani zostaną z nowym środowiskiem programistycznym LOFI BLOCKS – Rysowanie. Omówiony ma zostać układ współrzędnych XY (inny, niż w czasie lekcji matematyki). Uczniowie nauczą się rysować prostokąty i definiować kolor wypełnienia w systemie RGB. Pod koniec lekcji uczniowie powinni potrafić napisać program rysujący proste flagi.

Cele:

Cele ogólne:

• Wyrabianie umiejętności rozumienia, analizowania i rozwiązywania problemów na bazie logicznego i abstrakcyjnego myślenia.
• Doskonalenie umiejętności myślenia algorytmicznego.
• Poznawanie różnych sposobów reprezentowania informacji.
• Nauka układania i programowania algorytmów rysujących proste grafiki i tworzących efekty wizualne.

Cele szczegółowe

Uczeń potrafi:

• Uruchomić środowisko programistycznym LOFI BLOCKS
• Określić położenie punktów na ekranie, posługując się współrzędnymi XY
• Narysować prostokąt o wskazanym rozmiarze i w określonym miejscu
• Wyjaśnić pojęcie RGB i uzyskać 5 podstawowych kolorów (biały, czarny, czerwony, zielony, niebieski).
• Uzyskiwać różne kolory korzystając z palety RGB
• Definiować kolory wypełnienia kilku prostokątów
• Wykonać prostą flagę wskazanego kraju (Francja, Polska, Niemcy)

Treści programowe (związek z podstawą programową)

Podstawa programowa z informatyki – szkoła podstawowa:
Etap I – klasy I-III: I.1, I.2, II.1.
Etap II – klasy IV – VIII, w tym klasy VII – VIII: I.1, I.2, I.3, II.1.

Metody pracy

podające:

• pogadanka
• opis ustny
• pokaz z wykorzystaniem komputera nauczycielskiego i projektora oraz programu on-line LOFI BLOCKS

problemowe:

• przedstawianie problemu
• pytania
• przedstawianie przykładowych pomysłów rozwiązania
• wspieranie realizacji

oglądowe:

• eksponowanie materiału z wykorzystaniem komputera nauczycielskiego i projektora

treningowe:

• ćwiczenia z wykorzystaniem komputerów uczniowskich z dostępem do Internetu i przeglądarką internetową Google Chrome (program on-line LOFI BLOCKS)

Formy pracy

Praca indywidualna

Środki dydaktyczne

• komputery uczniowskie
• komputer nauczycielski
• projektor
• tablica projekcyjna
• program on-line LOFI BLOCKS: http://lofiblocks.com/koduj/

Przebieg zajęć

(czas realizacji: 45min)

1. Wprowadzenie w tematykę i integracja grupy (ok 10 minut)

Rozpoczynamy dyskusję na temat programowania. Przypominamy uczniom, że znają już graficzne środowisko programowania Scratch, w którym można tworzyć animacje, pocztówki multimedialne, gry i programy edukacyjne.

Zadajemy uczniom pytanie: Jak myślicie, a w jakich językach programowania powstają programy i aplikacje, z których korzystacie na co dzień?
Słuchamy odpowiedzi uczniów. W razie potrzeby uzupełniamy odpowiedzi.
Przykładowe odpowiedzi: Java, C, C++, Python, Visual Basic .NET, JavaScript, PHP, Perl.

Mówimy uczniom: Zanim zajmiemy się nauką programowania w języku tekstowym wysokiego poziomu, mam dla Was doskonałe środowisko programistyczne, które stanowi pomost pomiędzy kodowaniem za pomocą układania klocków (jak w Scratch’u), a pisaniem kodu (jak w Javie, Phytonie, C++, czy innym języku tekstowym). Tym środowiskiem jest LOFI Blocks.

Praca w tym programie z jednej strony polega na układaniu gotowych bloków (“klocków”) jak w Scratch’u, z drugiej jednak strony zwracam uwagę, że są to bloki dość specyficzne, w których parametry (np. podczas rysowania figur geometrycznych) ułożone są niemal identycznie jak w językach tekstowych. Dzięki poleceniom zamkniętym w bloki szybko się ich nauczycie, a jednocześnie zdobędziecie świetne podstawy i przyzwyczajenia, które w przyszłości będą potrzebne podczas pisania kodu w języku tekstowym. Wystarczy, że w przyszłości gotowe bloki zamienicie na polecenia, a parametry np. rysowanych figur i ogólne zasady tworzenia będą takie same jak tu.

Pokazujemy uczniom za pomocą projektora – stronę http://lofiblocks.com/koduj/, z komputera nauczyciela. Mówimy, że LOFI Blocks jest aplikacją bezpłatną, ogólnodostępną, z której mogą korzystać zarówno w czasie lekcji, jak i w wolnym czasie w domu. Wystarczy, że będą mieli komputer z dostępem do Internetu i przeglądarkę internetową Chrome. Aplikacja dostępna jest też na smartfony i tablety.

Omawiamy możliwości LOFI Blocks: możliwość rysowania, tworzenie animacji, tworzenie prostych gier komputerowych, możliwość sterowania robotami LOFI Robot i innymi opartymi o Arduino.

Pokazujemy uczniom za pomocą projektora kilka przykładowych projektów zrealizowanych w LOFI Blocks:

• czacha – http://www.lofiblocks.com/koduj/?example=czacha.xml&drawing=true
• animowana twarz – http://www.lofiblocks.com/koduj/?example=twarz_mucha.xml&drawing=true
• tańczące kwadraty – http://www.lofiblocks.com/koduj/?example=rozeta_spirala.xml&drawing=true
• gra odbijanie piłeczki – http://www.lofiblocks.com/koduj/?example=pong.xml&drawing=true

2. Część zasadnicza (ok 30 minut)

Prosimy uczniów o uruchomienie komputerów, włączenie przeglądarki Chrome i wpisanie adresu http://www.lofiblocks.com/koduj/. Nadzorujemy prawidłowość wykonania polecenia.

Omawiamy budowę programu:

• 1. Zakładki z blokami do programowania podzielonymi na kategorie
• 2. Przysisk START/STOP uruchamiający i zatrzymujący wykonywanie programu
• 3. Zakładka USTAWIENIA zawierająca funkcje do logowania, zarządzania kontem użytkownika oraz zapisywanie i eksportowanie projektów
• 4. Link do dokumentacji i przykładów
• 5. Pole robocze na którym tworzymy program
• 6. Menu podręczne
• 7. Przyciski do powiększania/pomniejszania bloków oraz ich kasowania

Z lewej strony znajdują się różne kategorie, po kliknięciu na którąkolwiek kategorię rozwija się zasobnik i widzimy konkretne polecenia w postaci bloków.
Pokazujemy jak bloki wyjmować z zasobnika, gdzie je układać, jak łączyć, jak duplikować, jak rozłączać i kasować.
Omawiamy przycisk “Play”.
Mówimy, że przycisk “Konfiguracja” pozwala zalogować się i zapisywać swoje projekty. Będziemy to robić od 2. lekcji.
Pokazujemy okrągłe ikony z prawej strony (mówimy, że 3 pierwsze będą potrzebne podczas programowania robotów).
Prosimy o włączenie ikony “Pędzel” – malowanie.

Omawiamy okno do malowania i układ współrzędnych:

Okno ma rozdzielczość: 100 pikseli szerokości i 100 pikseli wysokości.

Piksel jest to najmniejszy jednolity element obrazu wyświetlanego na ekranie monitora komputerowego, telewizora, czy telefonu. Na przykład jeden piksel na monitorze to bardzo mały kwadrat wypełniony jednolitym kolorem.

W przypadku wyświetlaczy w smartfonach rozmiar pikseli jest dużo mniejszy niż w telewizorach, czy monitorach. Natomiast piksel na szkolnej tablicy wyświetlany przez projektor jest dużo większy (często z bliska da się go zobaczyć gołym okiem).
Każdy piksel przedstawia jeden konkretny kolor.

Rozdzielczość monitora, telewizora, czy wyświetlacza na smartfonie to właśnie liczba pikseli, jakie matryca ma w pionie i poziomie. Na przykład Full HD to nazwa rozdzielczości 1920 × 1080 (1920 pikseli w każdej poziomej linii, a linii tych jest 1080).

Najczęściej stosowanym rozwiązaniem uzyskiwania kolorów na wyświetlaczu jest korzystanie z mieszania trzech barw podstawowych w systemie RGB, o czym – później.

Do określenia położenia punktów w oknie do malowania używamy nietypowego układu współrzędnych xy

Link do przykładu pokazanego w filmie video

W klasach VII-VIII, można odwołać się do układu współrzędnych xy, który uczniowie powinni znać już z lekcji matematyki, z zastrzeżeniem, że w językach programowania / na ekranach monitorów, ten układ współrzędnych jest nieco inny, tj. należy wskazać, że oś X stanowi górna krawędź ekranu, a oś Y – lewa pionowa krawędź.

Punkt (X=0, Y=0) znajduje się w lewym górnym rogu i od tego miejsca “mierzymy”:
X – szerokość (przyjmuje wartości od 0 do 100)
Y – wysokość (przyjmuje wartości od 0 do 100)

W klasach młodszych dobrze sprawdza się pokaz, w czasie którego nauczyciel przykłada linijkę do górnej krawędzi ekranu (0 znajduje się w lewym górnym rogu) i pokazuje, że tak jak przy pomocy linijki można zmierzyć szerokość, tak samo – tylko nie w cm a w pikselach mierzymy szerokość ekranu. Dla ułatwienia szerokość będziemy nazywali – “X”.
Następnie linijkę przekręcamy o 90 stopni do pionu (0 nadal jest w lewym górnym rogu ekranu) i mówimy, że z tego miejsca można mierzyć wysokość – oczywiście nie w cm, a w pikselach, a dla skrócenia zamiast słowa “wysokość” będziemy używać litery “Y”.

Prosimy, aby uczniowie wyciągnęli z zasobnika z kategorii “Rysowanie” pętlę “Rysuj”. Mówimy, że wszystko co do niej włożymy będzie rysowane przez komputer w oknie do malowania.

Ćwiczenie 1

Pokazujemy na projektorze i omawiamy uczniom blok “Prostokąt”.

Omawiamy 4 parametry: XY, jako lewy górny róg prostokąta oraz szerokość i wysokość.
Pokazujemy uczniom jak wykonać różne prostokąty.
Prosimy, aby uczniowie wykonali prostokąt zaproponowany przez nauczyciela.
Zwracamy uwagę, że chcąc zobaczyć efekt swojej pracy – należy uruchomić program przyciskiem “Play”, a po każdej zmianie należy zatrzymać i ponownie uruchomić program (w przeciwnym wypadku będziemy widzieli zamalowane piksele przez obecne i wszystkie poprzednie polecenia, ponieważ “nasz program” nie ma na razie polecenia czyszczącego cały obraz).

Pokazujemy na projektorze i omawiamy działanie bloku WYPEŁNIENIE:

Parametrami bloku są R,G,B i A.
W LOFI Blocks każdy z tych parametrów może przyjąć wartości od 0 do 100.
RGB to odwołanie do palety barw: R-Red-Czerwony, G-Green-Zielony i B-Blue-Niebieski.
Wprowadzenie wartości R=0. G=0, B=0 daje kolor czarny (to tak, jakbyśmy byli zamknięci w ciemnym pomieszczeniu, do dyspozycji mielibyśmy 3 latarki: czerwoną, zieloną i niebieską. Jeśli nie włączymy żadnej latarki w pomieszczeniu będzie panowała ciemność – kolor czarny).
Wprowadzenie wartości R=100, G=100, B=100 daje kolor biały (3 latarki włączone na 100% świecące w jeden punkt dadzą w tym punkcie kolor biały).
Ustawienie wartości tylko jednego z kolorów na 100, a dwóch pozostałych na 0, da nam dany kolor (np. gdy włączymy tylko latarkę czerwoną na 100%, a zielona i niebieska będą wyłączone tj. = 0, to w pomieszczeniu będzie kolor czerwony) itd.
Mieszając w różnych proporcjach te 3 kolory światła można uzyskać wszystkie kolory jakimi dysponują monitory i telewizory. W typowym języku programowania jest to ponad 16 mln kombinacji, w LOFI Blocks – dokładnie 1 mln kolorów.

Ostatni parametr – A – to kanał ALFA, znany z programów graficznych jako “krycie / przezroczystość”. Wartość A=100, oznacza 100% pokrycia danym kolorem, a A=50% oznacza 50% krycia i 50% przezroczystości, A=30 oznacza krycie w 30%, a więc 70% przezroczystość itd.
Blok ten zmienia kolor wypełnienia wszystkich figur, jakie będą umieszczone pod nim.
Chcąc wykonać np. 2 prostokąty w 2 różnych kolorach, należy przed każdym prostokątem użyć nowego bloku wypełnienia.

Ćwiczenie 2

Stwórzcie na ekranie kilka różnej wielkości prostokątów – każdy w innym kolorze. Niektóre prostokąty mogą nachodzić na siebie.

Ćwiczenie 3

Potrafimy już rysować prostokąty i uzyskiwać różne kolory. Stwórzcie więc program, który narysuje flagę Francji.

Pytania naprowadzające:

• Z ilu prostokątów składa się flaga Francji?
• Jakiego koloru są to prostokąty?
• Ile razu musimy użyć bloku Wypełnianie, a ile Prostokąt?
• Czy wszystkie prostokąty mają taki sam rozmiar?
• Jaki rozmiar mają prostokąty (wysokość i szerokość)?

W przypadku uczniów, którzy wykonają wcześniej zadanie, można zlecić uczniom dokonanie takich zmian w programie, aby powstała flaga innego państwa (Polski, Niemiec, Irlandii).

Na około 5 minut przed końcem lekcji polecamy uczniom przerwanie ćwiczeń. Mówimy, że wrócimy do nich na kolejnej lekcji. Prosimy o wyłączenie przeglądarki Chrome. Mówimy, że dziś nie będziemy zapisywali efektów swojej pracy.

3. Podsumowanie i ewaluacja (ok 5 minut)

Zadajemy uczniom pytania:

• Jaki program poznaliśmy na dzisiejszej lekcji?
• Jak włączyć ten program?
• Jakie wymiary ma pole do rysowania w LOFI Blocks?
• W jakich jednostkach podajemy rozdzielczość ekranów?
• Co to jest piksel?
• Czy piksel zawsze ma taką samą wielkość?
• Jaką literą określamy położenie w poziomie/ szerokość?
• Jaką literą określamy położenie w pionie / wysokość?
• Gdzie znajduje się punkt x=0, y=0?
• Co oznaczają poszczególne litery w skrócie RGB?
• Czym jest parametr A w bloku Wypełnianie?
• Jak uzyskać kolor: czarny, biały, czerwony, zielony, niebieski, ciemno czerwony, ciemno zielony, ciemno niebieski.

Jeśli jest czas można wskazywać uczniom różne punkty na ekranie obszaru do malowania i prosić, aby podawali ich parametry xy (wskazujemy typowe punkty: 0,0; 0,100; 100,0; 100,100; 50,50; 0,50; 50,0; itp)

Uwagi:

Scenariusze lekcji przygotowane zostały z myślą do realizacji przede wszystkim w klasach VII-VIII ośmioletniej szkoły podstawowej (po reformie z 2017 r.) na lekcjach informatyki. Scenariusze pozwalają zrealizować następujące treści programowe z podstawy programowej przedmiotu informatyka w szkole podstawowej, etap II – klasy IV – VIII, w tym klasy VII – VIII: I.1, I.2, I.3, II.1. Scenariusze mogą być realizowane, w zależności od potrzeb nauczyciela i poziomu grupy, również w klasach IV-VI na lekcjach informatyki, czy w czasie kół komputerowych.

Warunki realizacji:

Każdy uczeń podczas zajęć powinien mieć do swojej dyspozycji osobny komputer z dostępem do Internetu i przeglądarką internetową Google Chrome. Lekcje informatyki odbywają się z podziałem na grupy. Sala powinna być wyposażona w projektor multimedialny (tablica interaktywna nie jest konieczna) umożliwiający wyświetlanie zawartości ekranu komputera nauczyciela.