Unità di apprendimento 6 Dal problema al programma

Unità di apprendimento 6 Lezione 7 Un ambiente visuale per la pseudocodifica: Scratch e BYOB

In questa lezione impareremo: cosa sono i nuovi ambienti didattici visuali cosa sono i nuovi ambienti didattici visuali a scrivere i primi programmi in BYOB a scrivere i primi programmi in BYOB

Cos’è Scratch Scratch è un nuovo linguaggio di programmazione visuale che, mediante un approccio orientato agli oggetti (denominati Sprites). Rende semplice la creazione di storie interattive, di giochi e di animazioni e permette di condividere sul web le “creazioni” con altri “programmatori”.

Cos’è Scratch Scratch è sviluppato dal Media Lab del MIT ed è supportato da contributi finanziari della maggiori aziende dell’informatica. E’ completamente gratuito. Si presenta con una semplice interfaccia grafica molto intuitiva e permette all’utente di scrivere veri e propri programmi “senza scrivere il codice”.

Cos’è Scratch Questo è il menù che si presenta all’utente al suo avvio:

BYOB e Scratch La versione più aggiornata di Scratch è stata chiamata BYOB da Build Your Own Blocks (costruisci i tuoi blocchi). Consente all’utente di creare propri blocchi personalizzabili secondo le diverse esigenze ed aggiungerli ai blocchi standard.

BYOB e Scratch L’interfaccia di BYOB è “praticamente identica” a Scratch:

Installazione di BYOB Oggi (maggio 2014) è ancora disponibile la versione 3.1.1, scaricabile dall’indirizzo (in fondo alla pagina, indicata come old version, dato che la nuova versione è divenuta Snap!). E’ anche presente nella cartella materiali della sezione del sito riservata a questo volume.

Installazione di BYOB Ad esempio, per le tutte le versioni del sistema operativo Windows avviamo BYOB Setup.exe.

Installazione di BYOB L’installazione avviene automaticamente: al suo termine il programma viene mandato in esecuzione. Scegliamo la lingua (di default è English).

L’ambiente di lavoro La finestra di BYOB è divisa in tre sezioni:

L’ambiente di lavoro la prima sezione è suddivisa in due parti:  nella parte superiore sono elencati i gruppi di istruzioni e controlli, individuabili per il loro colore;  selezionando un gruppo dalla sezione superiore vengono presentati tutti i comandi disponili nella parte inferiore.

L’ambiente di lavoro la sezione di centrale è quella di lavoro ed è organizzata in tre tabelle: nella prima tabella si definiscono i programmi, che prendono il nome di Script; nella seconda si definiscono gli aspetti grafici, cioè si possono disegnare gli oggetti che verranno animati (Sprite), i diversi costumi che questi indosseranno durante le loro azioni oppure gli sfondi delle ambientazioni dello Stage dove gli Sprite ”prenderanno vita”; nella terza si possono creare o importare i suoni che si potranno associare agli Sprite (sono riconosciuti molti formati di immagini: JPG, BMP, PNG, GIF, incluse le GIF animate).

L’ambiente di lavoro Sopra le tabelle c’è un’area che contiene le informazioni sullo Sprite corrente, cioè quello che è stato selezionato e per il quale si stanno scrivendo gli Script.

L’ambiente di lavoro L’Area Informazioni Sprite mostra: il nome dello Sprite selezionato la sua posizione x-y la sua direzione il suo stato di blocco: se il lucchetto è sbloccato si può digitare all’interno della casella per modificarne il nome.

L’ambiente di lavoro La direzione indica in quale direzione lo Sprite si muoverà quando eseguirà un blocco di movimento (0=su, 90=destra, 180=giù, -90=sinistra). La linea blu sull’anteprima dello Sprite mostrata indica graficamente la direzione corrente dello Sprite. E’ sufficiente “trascinarla” per modificarne la direzione ed un doppio click sullo Sprite la riporta nella direzione di partenza (direzione=90).

L’ambiente di lavoro la sezione di destra è anch’essa suddivisa in due parti: nella parte superiore avviene l’esecuzione dello Script, cioè viene avviato e terminato il programma e si visualizzano i risultati dell’elaborazione; nella parte inferiore sono presentati tutti gli oggetti che ne fanno parte, dallo Stage agli Sprite

L’ambiente di lavoro Il menù superiore riporta le classiche operazioni previste in ogni programma In particolare il menu Aiuto permette di accedere al manuale di riferimento di oltre 35 pagine disponibile in formato pdf con la guida passo passo dalla realizzazione dei primi Script alle strutture più complesse.

Gli elementi di un programma Un programma BYOB può essere così descritto o “è un insieme di Script che vengono associati ai singoli Sprite che si muovono all’interno di uno Stage”. Un programma BYOB è quindi composto da tre elementi: Script, Sprite e Stage

Gli elementi di un programma lo Stage è “il palcoscenico” dove si evolve il programma e può essere: una fotografia che svolge un’azione passiva di “abbellimento”; un disegno che interagisce con gli Sprite (ad esempio il percorso di un labirinto, i bordi di una pista per le biglie, ecc.).

Gli elementi di un programma Gli Sprite: sono i soggetti che eseguono le azioni, elencate negli Script; Sono collocati automaticamente nello Stage, pronti ad eseguire il programma a loro assegnato; Possono essere disegnati dall’utente venire selezionati tra quelli disponibili

Gli elementi di un programma Gli Script: sono i veri e propri programmi, composti da una sequenza di azioni scelta dai menù dalla prima sezione possono essere di Movimento, di Controllo, di Suono, ecc.

Gli ecc.

Gli elementi di un programma Per realizzare uno Script basta trascinare un comando dall’area dei blocchi (tecnica drag and drop) alla sezione centrale disporlo in colonna con gli altri, seguendo gli incastri, come si dispongono i “mattoni delle costruzioni”

Gli elementi di un programma Si parte da due blocchi di controllo e cioè dal blocco di avvio e dal blocco di terminazione

Gli elementi di un programma Ad uno Sprite possono essere associati anche diversi Script Ciascuno dei quali può essere attivato da un particolare evento Ad esempio la digitazione di un particolare tasto può far modificare il comportamento.

Gli elementi di un programma ESEMPIO Ad uno Sprite automobile ad esempio possiamo associare due Script: il primo che la fa muovere continuamente avanti ed indietro nello Stage ; il secondo che alla pressione della barra spaziatrice gli fa “suonare il clacson”.

Gli elementi di un programma La figura seguente mostra un semplice programma completo dei tre componenti sopra indicati: uno Sprite (ball) che continua a rimbalzare; è posto all’interno dello Stage (muretto); si muove con velocità indicata in 4 passi alla volta dal programma (Script).

Gli elementi di un programma Lo Script viene mandato in esecuzione cliccando la bandiera di avvio, o sul bordo superiore della videata o direttamente sul blocco dello Script.

Primo programma in BYOB Realizziamo una “invasione di fantasmi sulla spiaggia di Malibù” cliccando sull’icona che riportata una cartella nella sezione degli Sprite carichiamo tre fantasmi:

Primo programma in BYOB Selezioniamo ora Stage per definire lo sfondo della nostra applicazione: selezioniamo prima Background, quindi Nature ed infine il file beach_malibu

Primo programma in BYOB Otteniamo la seguente situazione:

Primo programma in BYOB Selezioniamo ora lo Sprite1 nella sezione degli Stage e clicchiamo il tasto in modo da visualizzare i controlli disponibili. Trasciniamo nella sezione centrale il “blocco” che ci permette di avviare il programma (blocco di inizio)

Primo programma in BYOB quello finale che ferma tutte le esecuzioni (blocco di terminazione) ed un blocco che permette di effettuare in ripetizione un insieme di istruzioni (in questo caso 100 volte):

Primo programma in BYOB Clicchiamo il menù dei blocchi di Movimento; selezioniamo due inserendoli nel blocco di ripetizione dopo aver modificato il valore proposto di default al valore 3;

Primo programma in BYOB Avviamo l’esecuzione dello Sprite cliccando sulla bandiera verde in alto a destra nella finestra della terza sezione il fantasma inizia a muoversi ma… quando raggiunge il bordo della finestra si “capovolge” prima di ritornare indietro (il costume si “ribalta”)

Primo programma in BYOB Si corregge questo contrattempo selezionando tra gli “Stili di rotazione” l’icona sotto evidenziata, in modo da far tornare indietro il fantasma con lo “stesso orientamento”.

Arricchiamo lo Script Aggiungiamo degli effetti al nostro programma; per prima cosa … un po’ di musica selezionando il bottone dal pannello dei controlli

Arricchiamo lo Script Allo Sprite3 associamo il file musicale selezionandolo dalla cartella Suoni cliccando su Importa scegliendolo nella biblioteca di suoni disponibili, organizzati per tipologia:

Arricchiamo lo Script Importiamo SpaceRipple: viene automaticamente “inserito” nei blocchi di riproduzione; a questo punto lo possiamo aggiungere il comando nel nostro Script:

Arricchiamo lo Script Come ultimo abbellimento facciamo “parlare” lo Sprite2 Selezioniamo dal menù il blocco che visualizza un fumetto contenente una frase e scriviamo il verso «Haauuughh!».

Arricchiamo lo Script lo Script associato allo Sprite2 è quindi: mandandolo in esecuzione produce il risultato riportato a lato:

Codifica esercizio «costo per andare a scuola» Per realizzare questo Script definiamo alcune Variabili che devono essere create nella apposita area prima della scrittura del codice

Codifica esercizio «costo per andare a scuola» E’ possibile far visualizzare il contenuto della variabile spuntando il check-box che è vicino al nome della variabile:

Codifica esercizio «costo per andare a scuola» le operazioni matematiche vengono realizzate con i blocchi Operatori la comunicazione attraverso la composizione di un blocco Aspetto con il blocco Operatori consente l’unione di due “entità”, che in questo caso sono una frase digitata direttamente nel blocco ed una variabile.

Codifica esercizio «costo per andare a scuola» Lo Script completo è il seguente:

Codifica esercizio «invia un sms» Linguaggio di progetto dell’algoritmo: Per realizzare questo Script definiamo due Variabili col nome di numeroTelefono e messaggio.

Codifica esercizio «invia un sms» Sono riportate due codifiche alternative:

Codifica esercizio «travasiamo con i secchi» Linguaggio di progetto dell’algoritmo:

Codifica esercizio «travasiamo con i secchi» Per realizzare questo Script definiamo due Variabili col nome di secchio3 secchio4

Arricchiamo lo Script