Code.org: i blocchi (e spiegazioni) per ottenere l’attestato dell’Artista

Articolo pubblicato su Scuola e Tecnologia in data 15 marzo 2016″

Il MIUR, in collaborazione con il CINI ha avviato  il progetto “Programma il Futuro” (che fa parte della più conosciuta “labuonascuola”) con l’obiettivo di fornire alle scuole una serie di strumenti per formare insegnanti e studenti in merito ai concetti di base dell’informatica.
Code.org è un sito che raccoglie una serie di attività distinte in base ai destinatari (studenti/insegnanti) in merito al movimento chiamato “Hour of code” che vede coinvolte decine di milioni di studenti in più di 180 nazioni.  Molte colleghe alle prese con i percorsi proposti su code.org (qui il link) mi hanno chiesto aiuto in merito all’attività chiamata “Artista”.

Questa attività è composta da 10 esercizi in cui attraverso delle sfide (man mano sempre più difficili) si viene introdotti alla programmazione a blocchi. Vediamo insieme come superare i 10 step (ottenendo l’attestato di fine percorso) ma soprattutto in questo breve articolo cercherò di spiegarvi il motivo per cui devono essere scelti dei blocchi piuttosto che altri.

Esercizio 1: l’introduzione all’esercizio ci fornisce oltre all’esplicitazione dell’obiettivo (ovvero disegnare un quadrato) anche una serie di indicazioni (utilizzare il blocco gira a destra e  il blocco vai avanti nonché la misura di quanto deve essere lungo ogni lato).

Artista1_start

Pertanto quello che dovremmo fare in questo livello sarà unicamente testare quanto suggerito. A seguito del blocco di default, ovvero “Quando si clicca su Esegui” cioè lo Start dell’esercizio, inseriamo i blocchi suggeriti. Iniziamo con “Vai avanti di 100 pixel” , questo perchè il nostro personaggio (l’Artista) per poter disegnare ha bisogno di camminare. Attraverso il blocco inserito, l’artista si muoverà di 100 pixel disegnando una linea retta. Un quadrato è un quadrilatero con quattro angoli congruenti  (90 gradi) quindi il secondo blocco da inserire è “Gira a destra di 90 gradi“. Ripetendo i comandi appena inseriti per ciascun angolo avremmo completato il primo esercizio.

Artista1_code

Una volta completato ogni step vi consiglio di andare a vedere il codice che abbiamo appena scritto (e che abbiamo verificato) anche nella modalità JavaScript .

Artista1_finish

Rotto il ghiaccio con il primo esercizio passiamo velocemente al seguente.

Esercizio 2: in questo step abbiamo l’obiettivo di disegnare un rombo. Un rombo è un poligono di 4 lati che ha tutti i lati della stessa lunghezza (congruenti). Nell’introduzione di questo livello ci viene indicato che i lati sono lunghi 150 pixel mentre gli angoli saranno di due tipi, 60 e 120 gradi. I comandi saranno pertanto “Quando si clicca su Esegui” , comando per lo Start, “Vai avanti di 150 pixel“, cioè la lunghezza del lato, “Gira a sinistra di 120 gradi” per fare l’angolo ottuso, di nuovo “Vai avanti di 150 pixel” e poi “Gira a sinistra di 60 gradi” per fare l’angolo acuto.

Artista2_code

Esercizio 3: la nuova forma geometrica in sfida è l’esagono. Grazie all’introduzione sappiamo che ogni lato è lungo 100 pixel  e che ciascun angolo è di 60 gradi. Andremo pertanto a disegnare un esagono regolare con i sei lati di uguale lunghezza e con i sei angoli congruenti. Niente di più facile, basterà infatti ripetere i comandi così come suggeriti nell’introduzione, cioè dopo il blocco “Quando si clicca su Esegui“, inseriamo “Gira a destra di 60 gradi” ripetendo il tutto per completare l’esagono.

Artista3_code

Esercizio 4: in questo esercizio troviamo una delle caratteristiche tipiche dei linguaggi di programmazione, ovvero i “cicli”. Probabilmente molti di voi già sanno cosa sono i cicli anche se nel linguaggio comune (prelevato da quello musicale) li definiamo Loop. Il loop in musica è un campione che si ripete. Nel coding è la stessa cosa, ovvero possiamo definire un ciclo come un insieme di comandi che si ripetono per un numero di volte ben definito (nel linguaggio di programmazione nulla deve essere lasciato al caso!), in questo caso le volte indicate nelle istruzioni sono 6 (come i lati dell’esagono che dobbiamo disegnare).

Artista4_code

Esercizio 5: in questo step non dobbiamo inserire nessun codice poichè ci viene già fornito dall’esercizio. Dobbiamo invece capire il numero da inserire per il comando del ciclo. Contando le punte della figura geometrica, possiamo inserire il numero esatto, ovvero 12 all’interno del blocco “Ripeti …volte esegui“.

Artista5_code

Esercizio 6: questo è lo step in cui molte colleghe hanno iniziato ad avere problemi. Niente paura, vediamo le indicazioni iniziali. Ci viene richiesto di utilizzare un blocco nuovo per ridurre le stringhe di codice. Rispetto all’esercizio 5 in cui abbiamo inserito molti blocchi, in questo step ridurremmo il loro numero comandando di ripeterli due volte. Mi speigo meglio. Il ciclo che abbiamo visto prima era composto dai seguenti blocchi: “Vai avanti di 60 pixel“, lunghezza del lato, “Gira a destra di 30 gradi“, e ancora “Vai avanti di 60 pixel” e poi “Gira a destra di 150 gradi” per chiudere l’angolo. Questi primi 4 blocchi vengono seguiti da altrettanti blocchi uguali. Pertanto si potrebbe semplificare il tutto comandando il “ripeti per 2 volte” il ciclo appena indicato.

Artista6_code

Esercizio 7: in questa sfida dobbiamo capire di quanti gradi dovremmo girare il nostro personaggio per disegnare correttamente la figura indicata. Il suggerimento dato nell’introduzione (dividi il numero di gradi di un cerchio per il numero di ripetizioni) ci fornisce immediatamente la risposta, ovvero 360 (gradi del cerchio) / 6 (numero delle ripetizioni) = 60 ( i gradi che deve girare a sinistra l’artista).

Artista7_code-1

Esercizio 8: un nuovo concetto informatico ci viene presentato allo step 8, ovvero la funzione. Una funzione (detta anche subroutine, routine, procedura, sottoprogramma o metodo) è un particolare costrutto sintattico che permette di raggruppare una sequenza di istruzioni in un unico blocco di istruzioni espletando così una determinata e in generale più complessa operazione. L’importanza, la praticità e i vantaggi di una funzione stanno nel fatto che può essere “chiamata” e “richiamata” in diversi punti del programma ogni volta in cui si ha la necessità di farlo come se fosse una singola istruzione senza la necessità di doverne riscrivere tutto il relativo codice. La funzione in questo caso definita “Draw a flower“, contiene la stringa dei comandi necessari per disegnare un fiore. Senza dover inserire ogni volta tutti i blocchi che comandano all’artista di disegnare il fiore, possiamo “richiamare” la funzione, avendo l’unica accortezza (così come suggerito nell’introduzione dell’esercizio 8), di far saltare in avanto il personaggio di 150 pixel.

Artista8_code

Esercizio 9: questo esercizio è utile per prendere confidenza con i blocchi di programmazione e con le funzioni. Ci viene infatti richiesto di disegnare una composizione di quadrati, triangoli o ottagoni partendo dai comandi che sono stati inseriti per disegnare gli esagoni. Essendo un esercizio libero, di seguito vi riporto solo qualche esempio.

Artista9_code

Artista9_code1

Artista9_code2

Artista9_code3

Esercizio 10: siamo giunti alla fine del percorso. Questo ultimo esercizio ci fornisce la massima libertà per inserire blocchi e funzioni in modo da mostrare a tutti il nostro lato artistico! Una volta terminata la propria opera vi invito a condividerla!.

Cliccando su condividi otterremo l’attestato finale.

hourofcode-certificate

Buona Ora del codice a tutti :-)

Francesca Lazzari

Annunci