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

La creatività di una maestra trasforma la merenda in un gioco computazionale

Articolo pubblicato su Scuola e Tecnologia in data 29 febbraio 2016

Una delle credenze che intendo sfatare fa riferimento al fatto che il pensiero computazionale sia qualcosa legato alla tecnologia. Non c’è niente di più sbagliato che avere questa convinzione!

Addirittura Jeannette Marie Wing, ovvero colei che ha portato alla ribalta tale concetto, ha affermato che si tratta di una competenza fondamentale per tutti, non solo per gli informatici, e ha sostenuto l’importanza di integrare le idee computazionali in altre discipline.

Se in un precedente articolo ho parlato già di attività unplugged (ovvero senza l’utilizzo di strumenti informatici) e pensiero computazionale, oggi vorrei raccontarvi l’idea di una maestra che ha trasformato la merenda (quella sana!) in un gioco computazionale.

Alcuni mesi fa una collega mi ha chiesto un suggerimento. Intendeva proporre un qualcosa affinché i suoi alunni  abbandonassero la cattiva abitudine di portare come merenda delle patatine fritte, panini con insaccati, merendine etc…, e si avvicinassero maggiormente alla frutta di stagione.

Sorpresa dalla richiesta, visto che non mi occupo di educazione alimentare, le chiesi il motivo per il quale avesse pensato proprio a me. Mi rispose che aveva letto un mio articolo (questo) e voleva trovare il modo di integrare il gamification con la sua materia (la matematica) con il pensiero computazionale.

Non vi nascondo che ci ho pensato a lungo, poi alla fine mi è venuta in mente un’immagine che avevo visto scorrendo gli aggiornamenti su Twitter.

Abbiamo pertanto messo in atto un piccolo gioco unplugged di logica computazionale basato sulla frutta di stagione.

La collega ha chiesto a ciascuno studente di portare a merenda 3 frutti, ovvero una mela, una pera ed una banana. Ha poi creato tre medaglie (per dare maggiore validità alle logiche del gamification) e il giorno dopo in classe ha mostrato questa immagine:

piccola

Una volta che tutti avevano disposto sul proprio banco la merenda ha distribuito dei post-it. Su ogni post-it gli studenti potevano fare delle ipotesi di valore e attaccarle al frutto.

Ma perchè questo compito rientra nel pensiero computazionale? Semplicemente perchè un’attività del genere consente agli studenti di trasformare un problema complesso in molteplici sottoprocedure.

Infatti, preso nel suo insieme questo problema di logica, sembra abbastanza complicato da poter essere risolto.

Ma proviamo a scomporlo insieme. Sappiamo che la somma delle banane è 16, possiamo pertanto ipotizzare che ciascuna valga 8.

Il passo successivo è trovare il valore degli altri due frutti.

Anche qui dobbiamo procedere per ipotesi. Intanto possiamo partire da un dato oggettivo, ovvero che le mele sono due. Ma forse abbiamo poche informazioni, ed ecco arrivare in nostro aiuto l’operazione successiva.

La terza operazione in qualche modo può aiutare a dare conferma alle ipotesi appena fatte.

Assegnando con certezza alla banana il valore di 8, possiamo confermare che la pera vale 2 e pertanto assegnare il valore di 10 alla mela.

Scomporre un problema di logica in piccole operazioni “autonome” ci ha permesso di trovare la soluzione.

Vedete come questo gioco attiva complessi processi di problem solving?

Gli alunni della collega si sono divertiti. Hanno prima risolto due giochi di logica e poi hanno mangiato “gli oggetti dei loro problemi”.

La settimana successiva ha ripetuto il gioco chiedendo agli studenti di dividersi in gruppi e di inventare loro le operazioni consegnando al “gruppo rivale” la scheda contenente la sfida.

Il risultato è stata una merenda computazionale!

E voi riuscite a risolverlo?  😉

compito-2-copia

Un game per la didattica? Sì, se lo faccio io con Scratch!

Pubblicato su Scuola e Tecnologia in data 15 febbraio 2016

Nel precedente articolo, ho mostrato come in 5 minuti è possibile iniziare ad utilizzare Scratch con il Digital Storytelling.

Per spiegare meglio l’utilizzo di Scratch ho provveduto a creare un secondo mini Videotutorial (qui il link al primo).

Questo tutorial ha come obiettivo quello di creare una schermata introduttiva ad un game didattico.

In questo tutorial pertanto vedremo come inserire uno sfondo, come far muovere uno Sprite ed anche come aggiungere suoni nonché la voce dei nostri bimbi per doppiare i  personaggi!

Come nel precedente articolo, anche per questo secondo tutorial ho creato un piccolo video, qui il link al #2 Videotutorial per seguire i diversi passaggi su youtube!

Per progettare un game didattico è importante pianificare cosa si vuole far apprendere ai nostri alunni. Ipotizziamo di voler ripassare le addizioni.

Come per la volta precedente raggiungiamo l’indirizzo di Scratch, ovvero  https://scratch.mit.edu/ , clicchiamo su Entra ed inseriamo le credenziali di accesso.

Vicino al nostro Username vi è il seguente simbolo:  v

 

00

 

Cliccandoci si aprirà un menù a tendina. Scegliendo “Le mie cose” vedrete i progetti che avete salvato in precedenza.

Ora però clicchiamo su Crea per aprire un nuovo progetto.

 

1.Inserire nuovi Sprite (i passi dettagliati per inserire nuovi Sprite sono spiegati nel precedente tutorial. In questo articolo procederò, per i punti già visti, in maniera spedita).

Possiamo utilizzare dei personaggi (Sprite) già presenti nella Libreria di Scratch, altrimenti vi ricordo che è anche possibile farli disegnare dai vostri alunni e poi scannerizzarli ed inserirli nel progetto.

Io utilizzerò il granchio (Crab) che abbiamo già visto come uno dei protagonisti nel precedente tutorial. Pertanto una volta selezionato cliccherò su Ok nella libreria ed esso mi apparirà sulla Tela.

 

2.Eliminare gli Sprite che non vogliamo utilizzare

Visto che intendo creare un ambiente marino, eliminerò il gatto che viene dato come Sprite di default ovvero come personaggio predefinito. Cliccando con il tasto destro sullo Sprite del gatto, si aprirà un menù a tendina e sceglierò Cancella.

1

3.Inserire uno sfondo

Nel precedente tutorial abbiamo lavorato con lo sfondo bianco (Tela), esso viene nominato da Scratch in Backdrop1. In questo progetto però voglio inserire uno sfondo (Stage) marino.

2

 

Così come per gli Sprite, anche per gli sfondi esiste una libreria. Cliccando su “Scegli uno sfondo dalla libreria”, andrò ad aggiungere lo sfondo della spiaggia detta “Beach Malibu”.

 

3

Non è già più bello il nostro progetto?!

 

Così come per gli Sprite, anche per gli sfondi non solo è possibile sceglierli dalla libreria offerta da Scratch, ma è possibile caricarne di propri (pensate che bello far inserire delle foto/disegni fatti dai bambini!), disegnarli attraverso l’editor, o addirittura utilizzare la webcam per catturare un’immagine.

4. I blocchi

Il primo blocco che andremo ad inserire sarà “Quando si clicca su bandierina verde” (che si trova nella categoria Situazioni). Procediamo inserendo un breve testo. Vi ricordate come si fa per far parlare gli Sprite? Scegliamo dalla categoria Aspetto il blocco “dire per n. secondi”

Al mio Sprite farò dire: “Aiutami a raccogliere 2 stelle marine e 3 pesci” per 5 secondi e poi

Sei pronto?” per 2 secondi

4

4.1 La categoria movimento

Per dare maggiore vivacità al progetto, facciamo “tuffare” lo Sprite nel mare. Per fare ciò dobbiamo aggiungere dalla categoria Movimento il blocco “Scivola in n. secondi a X e Y

Questo blocco ci introduce ad uno degli argomenti che più adoro quando parlo di Scratch ovvero il piano cartesiano. Se la maggior parte di noi ha avuto esperienze terribili con il piano cartesiano, grazie a Scratch i nostri alunni saranno salvi!

Provate a posizionare il cursore del mouse sullo sfondo e muovendolo lentamente  guardate cosa accade nell’angolo in fondo a destra. I numeri accanto ad X e Y, si susseguono mentre noi muoviamo il mouse. Questo perchè ogni punto sullo sfondo è un punto che è inserito nell’asse delle ascisse (X) e nell’asse delle ordinate (Y).

Il mio Sprite è posizionato esattamente in X: -169 e Y: -98

5

Immaginate quante attività potreste proporre con Scratch per far apprendere (giocando) ai vostri alunni il piano cartesiano!!

 

Per ora ciò che vogliamo conoscere è la posizione esatta di dove vogliamo far “tuffare” lo Sprite. Muovendo il cursore nel mare possiamo scegliere un punto.

Inserendo il blocco “Scivola in 3 secondi a X: 88 e Y: 34” il mio granchio camminerà fino al mare. Aggiungendo il blocco dire “tuffiamoci!” concluderemo la schermata introduttiva al game.

Lo scivola in n. secondi sta ad indicare la velocità in cui il nostro Sprite si muoverà dal punto in cui è collocato al punto che gli abbiamo indicato (in questo caso da X: -169 e Y: -98, ovvero la partenza, a X: 88 e Y: 34, cioè l’arrivo). Aumentando i secondi il nostro Sprite camminerà più lentamente, riducendoli si muoverà più in fretta…fate una prova!

 

  1. I suoni

Un tuffo non può essere tale se non accompagnato dal classico rumore dello Splash. Ma come si fa ad inserire un suono? Sopra i blocchi (Script)  troviamo delle linguette. Clicchiamo su Suoni

6

Anche quì, come per gli Sprite e gli Sfondi, Scratch ci offre la possibilità di scegliere un suono dalla libreria (simbolo megafono), registrare l’audio (simbolo microfono), importare un file audio (simbolo cartella aperta).

Per ora sceglierò un suono dalla libreria, ovvero dalla categoria Effetti prenderò il Water drop.

7

Come per lo Sprite di default, anche nei Suoni troviamo il suono pop dato come predefinito. Allo stesso modo, cliccando con il tasto destro del mouse sul suono pop, scegliamo Cancella. In questo modo nella nostra libreria di suoni avremo soltanto il Water drop.

Inseriamo ora il suono nell’animazione. Torniamo sulla linguetta dei blocchi, cioè su Script.

Nella categoria Suoni dei blocchi (contraddistinti dal colore fucsia) scegliamo “Produci suono Water drop” ed inseriamolo dopo il blocco dire “Tuffiamoci!”.

8

  1. Il blocco Nascondi

Al termine dei blocchi inseriti fino ad ora, aggiungiamo dalla categoria Aspetto, il blocco “Nascondi”. Questo blocco comanderà al nostro Sprite di sparire dando l’effetto finale del tuffo in mare.

N.B il blocco “Nascondi” prevede però un blocco “Mostra” se vogliamo che al termine della nostra animazione lo Sprite torni visibile.

Pertanto subito sotto al blocco “Quando si clicca su bandierina verde”  inseriamo il blocco “Mostra”. Ogni volta che riavvieremo la schermata attraverso la bandierina verde, lo Sprite sarà nuovamente visibile.

9

Attenzione!  Stessa cosa dovremmo farla per la posizione, altrimenti quando cliccheremo su bandierina verde il nostro Sprite si troverà lì dove gli abbiamo comandato di scivolare in precedenza. Per far posizionare lo Sprite sempre nel punto desiderato basterà inserire il bloccoVai a X e Y” presente nella categoria Movimento subito dopo il blocco “Mostra”. Differentemente dal blocco “Scivola in n. secondi a X e Y”, questo farà immediatamente posizionare lo Sprite nel punto iniziale scelto. Nel mio caso sarà “Vai a X:-169 e Y:-88

10

Abbiamo terminato l’introduzione al game didattico. Se volete potete aggiungere la voce dei vostri alunni allo Sprite scelto. La procedura l’abbiamo intravista quando abbiamo scelto di inserire il blocco  “Produci suono Water drop”. Andando sulla linguetta in alto Suoni e cliccando sull’icona del microfono e poi cliccando sul tasto Rec (il tasto tondo) si potrà procedere a registrare la voce.

Il tasto modifica posto accanto al pulsante Rec permette di tagliare la registrazione eliminando i secondi di silenzio iniziali.

Una volta effettuata la registrazione si andrà sulla categoria dei blocchi Suono e si sceglierà il blocco “Produci suono Registrazione 1”, “Produci suono Registrazione 2” e così via.

11

Nel prossimo tutorial andremo avanti con il game didattico e faremo “acciuffare” al granchio le stelle marine e i pesci richiesti.