Insegniamo a programmare - con la grafica
In un paio di occasioni mi sono ritrovato nei panni di educatore, con il compito di introdurre delle persone al mondo dolceamaro della programmazione. Di recente poi un mio amico insegnante, che aveva il compito di tenere un corso introduttivo di informatica in una scuola superiore, mi ha chiesto consigli su quale linguaggio usare.
L'organizzazione di un corso del genere comporta delle scelte da fare in partenza che ne influenzeranno molto profondamente l'esito e una delle più importanti è sicuramente quella del linguaggio.
Mettiamoci nello scenario seguente: il corso è rivolto a studenti con conoscenze di programmazione pressoché nulle e punta a insegnare dei principi di algoritmi e strutture dati e metterli in grado di scrivere programmi semplici di vario tipo. Diciamo che lo studente svogliato ne uscirebbe con l'idea di come è fatto un software, mentre uno volenteroso sarebbe in grado di fare programmi di una certa complessità e avrebbe qualche nozione di concetti più avanzati da approfondire per conto proprio.
Non pretendo di dare una soluzione universale, ma di indagare qualche possibile approccio e riflettere su cosa tenere in considerazione. Questo articolo è il primo di una serie.
Ottenere l'interesse degli studenti
Dopo un po' di spiegazioni introduttive, lo studente si trova a scrivere il suo primo programmino, seguendo alcuni esempi forniti dall'insegnante e mettendo insieme e modificando le prime istruzioni. Ai miei tempi, il primo programmino sarebbe stato qualcosa tipo:
Dimmi come ti chiami. Ugo Ciao, Ugo. Piacere di conoscerti.Una bella soddisfazione, all'epoca, su uno ZX-Spectrum collegato a un televisore. Ma all'epoca il videogame di riferimento era pacman e vedere apparire il proprio nome sul televisore (magari ancora in bianco e nero) non poteva lasciare indifferenti. Al giorno d'oggi un esempio del genere non riscuoterebbe un grande successo, se non in chi riuscisse a coglierne le basi di un mondo virtualmente infinito. Al giorno d'oggi, l'ideale sarebbe che il primo programmino facesse qualcosa di "Wow!", che dal pubblico si levasse un coro di "Oooooh", le mandibole calate e gli occhi strabuzzati. Gli studenti dovrebbero avere subito la percezione che la programmazione è uno strumento con cui poter fare cose fiche e esprimere la propria creatività. Che il percorso, se pure irto di difficoltà, si presenti attraente fin dall'inizio!
La grafica è senza dubbio un elemento molto importante per ottenere un effetto "Wow!". Sullo ZX-Spectrum (permettetemi un momento amarcord) una delle caratteristiche più attraenti era la possibilità di usare in maniera semplice primitive grafiche. Tra i comandi base ce n'erano per disegnare punti, cerchi e rette. Nel concorrente Commodore 64, poi chiaro vincitore nella guerra commerciale, la grafica si otteneva invece scopiazzando codici numerici in una serie di comandi POKE. Non a caso (lasciatemi contaminare il momento amarcord con un po' di trolling-retro) il Commodore 64 ha cresciuto una generazione di videogamer, mentre lo Spectrum ha cresciuto un manipolo di eccelsi programmatori.
Il problema nell'uso della grafica nel primo programmino è che in molti ambienti di sviluppo questa comporta un certo grado di complessità strutturale o concettuale. Bisogna utilizzare librerie esterne o inizializzare strutture dati complesse, magari orientate agli oggetti, o usare un ambiente di sviluppo grafico che nasconde troppo del programma sottostante. Mi vengono in mente un paio di possibili approcci che possono in parte alleviare questo problema.
Il primo approccio è quello di scegliere uno dei linguaggi più diffusi, usato in gran parte delle applicazioni con cui la gente interagisce quotidiamente e per il quale una piattaforma è installata sulla grande maggioranza dei computer (e presto anche sui cellulari). La piattaforma è il browser web e il linguaggio è javascript (più propriamente chiamato ecmascript). Intendiamoci: ho odiato javascript, nei tempi in cui le differenze tra le varie implementazioni ne rendevano l'uso un incubo e in cui ci si aspettava di poter navigare per il web con un browser in modalità testuale. Ma il linguaggio in sé non è male, ha una sintassi abbastanza simile ad altri linguaggi di uso comune e permette di esplorare in maniera semplice i concetti della programmazione orientata agli oggetti e quella funzionale. Per astrarre dalle particolarità del browser e permettere un'interazione molto immediata con l'HTML, è possibile, ma non necessario, utilizzare la libreria jQuery o altre simili.
Il template per il primo programmino può essere una pagina del genere:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#id1') . change ( function () {
$('body') . append( $( '#id1' ).attr ( 'value' ) )
}
);
});
</script>
</head>
<body>
<input id="id1" type="text" />
</body>
</html>
Anche una pagina così semplice richiede però una serie complessa di concetti: HTML e DOM, funzioni anonime, eventi e callback. Se l'HTML e CSS sono già noti agli studenti, presentando l'uso del $(document).ready() in maniera superficiale con la promessa di approfondirlo più in là (da mantenere!!!), è possibile generare programmaticamente pagine complesse (e con un po' di senso artistico anche esteticamente piacevoli) senza troppa fatica e senza dover usare strumenti avanzati. Un altro possibile approccio da prendere in considerazione è quello di prendere una pagina statica e aggiungere funzionalità in javascript fino a renderla interattiva e interessante. La pagina andrebbe scelta con cura in maniera preventiva dall'insegnante, in modo che non presenti particolari difficoltà nell'adattamento con javascript.
Di sicuro l'approccio precedente alla programmazione può avere un valore particolare per web designer o persone interessate per hobby o scopi lavorativi a lavorare nella creazione di siti, ma rischia di sovrapporre troppi concetti diversi e creare fin dall'inizio complicazioni dovute all'incastro tra javascript, HTML e CSS, ognuno con la propria sintassi e con le proprie particolarità.
Un altro ambiente di sviluppo che non soffre di questa stratificazione di complessità nell'approccio iniziale è Processing. Si tratta di un ambiente basato su Java e specializzato per la creazione di applet grafiche. Rispetto alle applet scritte in Java tradizionale, le dichiarazioni relative alle classi e i metodi standard sono impliciti e quindi i primi programmi possono avere una struttura molto semplice. Il programmatore ha accesso immediato a funzioni per la generazione di effetti grafici e il docente può trarre ispirazione dai numerosi esempi preinstallati nell'ambiente di sviluppo. Rispetto ad altri ambienti orientati alla grafica e contenenti un linguaggio di programmazione, Processing è basato su un linguaggio di uso generale e diffuso in molti ambiti.
Un programmino di esempio può essere questo, che disegna un quadrato che ruota intorno al vertice di un altro quadrato a sua volta ruotante intorno al centro della finestra:
void setup() {
size ( 300, 300 );
}
float rot = 0;
void draw() {
// Cancella lo sfondo
background ( 127 );
// Sposta le cose seguenti al centro della finestra
translate(150,150);
// Ruota quello che segue di rot
rotate ( rot );
// Il disegno sarà bianco senza contorni
fill( 255 );
noStroke();
// Disegna un quadrato di lato 100
rect (0,0,100,100);
// La nuova origine è il vertice del quadrato opposto al cento
translate (100,100);
// Fallo rosa
fill ( 255, 180, 180 );
// Ruotalo di un ulteriore 2 rot
rotate ( rot * 2 );
// Un quadrato di lato 30
rect(0,0,30,30);
// Aumenta la rotazione per il prossimo ciclo
rot = rot + 0.02;
}
Ed eccolo in azione:
Un'altra caratteristica simpatica di Processing è che una funzione dell'ambiente permette l'esportazione del programma come applet integrato in una pagina web, pronto alla pubblicazione. Un'idea interessante è quella di configurare uno spazio su un serverino in cui gli studenti possono pubblicare i loro programmi per la valutazione da parte del docente e dei loro compagni, magari con un'applicazioncina che permette, oltre ad un eventuale voto del docente, di avere una sorta di voto popolare per ogni progetto.
Leggi il secondo post sulla didattica