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

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.

Wprowadzenie

W czasie drugiej lekcji uczniowie będą utrwalać poznane na wcześniejszej lekcji umiejętności (rysowanie prostokątów, wypełnienie kolorem) wykonując różne, zaproponowane przez nauczyciela ćwiczenia. Nowością będzie wprowadzenie zagadnienia “odświeżanie” i stworzenie programu, który na bieżąco będzie pokazywał zmiany na rysunku, bez konieczności zatrzymywania i uruchamiania programu. Uczniowie nauczą się również zapisywać swoje projekty na koncie on-line.

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 programistyczne 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
• Zdefiniować biały prostokąt o wielkości 100×100 pikseli, odpowiedzialny za efekt czyszczenia obrazu
• Wyjaśnić pojęcie odświeżanie.
• Wykonać kilka prostych flag różnych krajów
• Zapisywać projekty na swoim koncie on-line

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ęć

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

Rozpoczynamy dyskusję od zadania uczniom pytania: O czym mówiliśmy w czasie ostatniej lekcji.
Słuchamy odpowiedzi uczniów. W razie potrzeby uzupełniamy odpowiedzi.
W czasie wprowadzenia należy przypomnieć:

• nazwę programu LOFI BLOCKS
• adres www
• zasady korzystania z bloków (wyjmowanie, łączenie, kasowanie, duplikowanie)
• wymiar okna do malowania
• układ współrzędnych xy
• blok Prostokąt i blok Wypełnianie
• zasadę tworzenia kolorów wg schematu RGB/A

Pokazujemy na projektorze i przypominamy omawiane elementy.

Prosimy uczniów, aby podawali parametry xy, kilku przykładowych punktów w oknie do malowania wskazywanych przez nauczyciela (wskazujemy typowe punkty: 0,0; 0,100; 100,0; 100,100; 50,50; 0,50; 50,0; itp)

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

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

Ćwiczenie 1

Stwórzcie na ekranie jeden czarny prostokąt o wymiarach 20×20 pikseli, zaczynający się w punkcie x=0, y=0.
Pamiętajcie aby na początku włączyć okno do malowania, a po połączeniu bloków: Rysuj, Wypełnienie i Prostokąt; włączyć program przyciskiem “Play”.
Następnie zmieńcie (bez zatrzymywania programu):

• współrzędne na x=20, y=20
• współrzędne na x=40, y=50
• rozmiary prostokąta na 60×50

Pytamy: Czy na ekranie widać 1 czy więcej prostokątów? Dlaczego?

Wyjaśniamy uczniom: gdy uruchomimy program malujący prostokąt, a następnie zmodyfikujemy działający program, to widzimy zmiany (czarny prostokąt w innym miejscu / o innym rozmiarze) oraz jednocześnie wszystkie wcześniej zamalowane na czarno piksele w oknie do malowania.

Pytamy: Czy domyślacie się dlaczego tak się dzieje?

Wyjaśniamy pojęcie odświeżania ekranu. Można posłużyć filmem instruktażowym na Youtube.com

Wyjaśniamy, że wszystko co widzimy na ekranie telewizora, telefonu komórkowego, monitorze komputera, czy nawet w kinie, to obrazy wyświetlane poklatkowo. To znaczy, że wszystko co widzimy i odbieramy jako ruch, to “zdjęcia” wyświetlane na ekranie

klatka po klatce z częstotliwością kilkadziesiąt razy na sekundę

. W Polsce w kinie jest to 24 klatki / sekundę, w telewizji – 25 klatek / sekundę, na ekranie komputera – 30 lub 60 klatek / sekundę, a w przypadku LOFI BLOCKS wszystko co wyświetlane jest w oknie do malowania odświeżane jest z częstotliwością

25 razy na sekundę

. To oznacza, że każdy program umieszczony w pętli RYSUJ, powtarzany jest 25 razy w ciągu każdej sekundy. Przy czym, w oknie do malowania pozostaje widoczne wszystko, co zostało namalowane wcześniej, chyba że nałożymy na któryś fragment pola kolejne kolory/figury.

W powyższym przykładzie, chcąc widzieć tylko aktualny prostokąt, po dokonaniu zmian można zatrzymać program (okno do malowania zostanie wyczyszczone) i ponownie uruchomić program klikając “Play”. LOFI BLOCKS wykona wszystkie polecenia umieszczone w pętli Rysuj od początku, dzięki czemu zobaczymy tylko aktualnie zdefiniowaną figurę. Jednak ciągłe zatrzymywanie i uruchamianie naszego programu jest uciążliwe.

Pytamy: Czy jest na to lepszy sposób?
Tak. Jeśli chcemy aby na ekranie było widać tylko aktualnie zdefiniowaną figurę, musimy wprowadzić polecenie, które zanim najmuje figurę – najpierw za nas wyczyści cały ekran. W LOFI BLOCKS nie mamy typowego polecenia służącego do czyszczenia ekranu. Możemy jednak posłużyć się dwoma blokami, które już znamy.

Pytamy: Jak myślicie? Jak można wykorzystać bloki Wypełnienie i Prostokąt, aby za każdym razem mieć efekt czystego ekranu?

Prawidłowa odpowiedź: Jako 2 pierwsze polecenia w pętli Rysuj, należy umieścić blok Wypełnienie zmieniając kolor na biały (R=100, G=100, B=100, A=100) i blok Prostokąt o rozmiarze całego pola do rysowania (X=0, Y=0, 100, 100).

Ćwiczenie 2

Wstawcie do pętli Rysuj takie dwa bloki. Uruchomcie program poleceniem “Play”.
Następnie dołóżcie 2 bloki, które narysują czerwony prostokąt w X=20, Y=20, o wymiarach 30×30 pixeli. Zmieńcie parametry prostokąta na X=0, Y=0, a wymiary na 60×60 pixeli. Ustawcie kanał Alfa A=50. Jak widzicie teraz zmiany widzimy na bieżąco.
Następnie dołóżcie kolejne 2 bloki, które narysują niebieski prostokąt począwszy od X=40, Y=40, o wymiarach 60×60 pixeli. Ustawcie kanał Alfa A=50.
Już teraz widzicie efekt przezroczystości i nakładania kolorów.
Następnie dołóżcie 2 kolejne kwadraty (żółty i zielony) z kanałem Alfa=50, aby uzyskać efekt, jak poniżej:

Pokazujemy uczniom docelowy obraz i w razie potrzeby kolejne etapy, jak dojść do rozwiązania. Przy okazji polecamy uczniom eksperymenty z kanałem Alfa.

Można zwrócić uwagę, że aby wykonać taki obraz, nie było konieczności rysowania 9 prostokątów w różnych kolorach. Wystarczyło zdefiniować 4 prostokąty (czerwony, żółty, zielony i niebieski) o wymiarach 60×60 pikseli, zachodzące na siebie, a kanał Alfa ustawić na A=50. W ten sposób kolejny prostokąt nie przykrywa poprzedniego w 100%. Dzięki temu widzimy efekt przezroczystości i nakładania kolorów na siebie.

Ćwiczenie 3

Przed tym ćwiczeniem nauczymy się zapisywać efekty swojej pracy. Chcąc to zrobić wystarczy posiadać konto na Google, Facebook’u, Twitterze, Githubie lub skrzynkę e-mail na innym serwerze.

Po kliknięciu na ikonę Ustawienia, pojawia się pole wyboru:

Wystarczy wybrać usługę, na której mamy konto, zalogować się i już możemy zapisywać swoje projekty, aby mieć do nich dostęp w przyszłości:

Przyciskiem Nowy projekt rozpoczynamy tworzenie nowego projektu, zaczynając od “zera”. W każdej chwili pracy nad projektem możemy kliknąć Zapisz projekt i nadać mu nazwę. Wszystkie zapisane projekty pojawią na liście poniżej. Chcąc przywołać którykolwiek z wcześniejszych projektów wystarczy raz kliknąć na jego nazwę.

Zalogujcie się na swoje konto, stwórzcie flagę Polski i zapiszcie projekt.

Na wykonanie kolejnych ćwiczeń dajemy uczniom czas do 5 minut przed końcem lekcji. Każdy uczeń pracuje we własnym tempie. Niektórym dzieciom trzeba dać więcej czasu aby jeszcze “ułożyli sobie w głowie” działanie parametrów XY oraz wymiary prostokątów i uczniowie Ci być może wykonają na tym etapie zaledwie 1, 2 lub 3 flagi, inne dzieci będą szły bardzo szybko do przodu i zrealizują w tym samym czasie więcej flag. Poniżej propozycje poleceń, które przydzielamy indywidualnie uczniom, w miarę realizacji poprzednich:

Stwórzcie flagi: Niemiec, Włoch i Francji. Każdą zapiszcie jako oddzielny projekt.

Stwórzcie flagę Szwajcarii i zapiszcie projekt.

Stwórzcie flagę Norwegii i zapiszcie.

Flagi są doskonałym tematem do ćwiczeń i różnicowania poziomów trudności. Dają mnóstwo prostych wzorów do wybierania. Dodatkowy walor edukacyjny – poznajemy flagi, szukamy flag różnych krajów w internecie.

Przykładowa strona z flagami

3. Podsumowanie i ewaluacja (ok 5 minut)

Zadajemy uczniom pytania:

• Jakie wymiary ma pole do rysowania w LOFI BLOCKS?
• Jaką literą określamy położenie w poziomie/ szerokość?
• Jaką literą określamy położenie w pionie / wysokość?
• Z jaką częstotliwością odświeżane jest okno do malowania w LOFI BLOCKS?
• Co oznaczają poszczególne litery w skrócie RGB?
• Czym jest parametr A w bloku Wypełnienie?
• Jak uzyskać kolor: czarny, biały, czerwony, zielony, niebieski, ciemno czerwony, ciemno zielony, ciemno niebieski?
• Co trzeba zrobić, aby na bieżąco śledzić zmiany w tworzonym rysunku (bez konieczności zatrzymywania i uruchamiania programu)?
• W jaki sposób można zapisać projekty tworzone w LOFI BLOCKS?

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.