Un nuovo modo di imparare l’informatica

Introduzione: La disponibilita’ su ogni dispositivo “intelligente” di browsers che capiscono il linguaggio di programmazione Javascript e la contemporanea implementazione di una finestra grafica programmabile detta canvas nelle pagine Web ha reso possibile questo nuovo modo  di imparare a programmare modificando degli esempi gia’ funzionanti e guardando immediatamente cosa succede nella finestra grafica accanto.

Cose da fare: La pagina iniziale e’ quella di computer science (informatica) della Khan Academy. Subito sotto trovate una serie di immagini. Si tratta delle immagini generate  da ognuno dei programmi presenti. Scegliete quella che vi interessa. Si apre una nuova finestra con 2 riquadri. A destra vedete il risultato dell’esecuzione del programma a sinistra. Potete fare le modifiche che volete nel riquadro a sinistra sia scrivendo a mano che col mouse e vedere immediatamente cosa succede all’immagine a destra. Cercate di capire come si fa a disegnare, come si fa ad animare, etc.

Alcuni programmi sono collegati a lezioni che potete far partire cliccando sull’icona di play
subito sotto il riquadro a sinistra. Vedrete allora passo a passo come e’ costruito il programma.

Nella pagina iniziale ,in alto, avete un indice completo dei pochi tutorial introduttivi che,ognuno collegato a un programma, insegnano alcuni concetti base fondamentali. Il resto scopritelo da soli esplorando i vari esempi. Cercate di fare variazioni interessanti dei programmi (che potete salvare).

Cosa succede:Tutti i programmi sono scritti in un linguaggio chiamato Processing. Il linguaggio originale e’ implementato in Java. Alcuni anni fa e’ stato reimplementato in Javascript ed e’ disponibile col nome di Processing.js  (questo lavoro e’ stato portato avanti da John Resig che ora lavora nella Khan Academy alla messa a punto di questo materiale didattico).  Esso rende la programmazione grafica molto facile. In pratica ogni programma che crea l’immagine e’ come una macchina fatta pero’ di parole: quelle che trovate scritte sul riquadro a sinistra. Modificando questo riquadro voi potete smontare e rimontare la macchina a piacere. Dalle modifiche ottenute sulla destra potete poco a poco capire come funzionano gli “ingranaggi” delle macchine informatiche. Cioe’ le singole istruzioni. La cosa interessante e’ che tutti i programmi in quasi tutti i linguaggi inventati hanno  gli stessi ingranaggi base in numero limitatissimo (una diecina). Quindi se riuscite a capire i programmi scritti in Processing capite anche in buona parte i programmi scritti in C++, java, pascal, php ,etc
In effetti la complessita’ di un programma non dipende dal tipo di ingranaggi, uguali per tutti, ma dal numero complessivo degli ingranaggi e dalla loro struttura. Infatti questi ingranaggi hanno una struttura gerarchica ad “albero”  che puo’ essere di una complessita’ enorme.

Commenti:  John Resig in persona spiega in questo articolo del suo blog con video collegato (Redefining the Introduction to Computer Science), la strategia didattica dietro questa serie di programmi e la tecnologia usata per rendere possibile il nuovo approccio.

Il programma  che avete scritto sul sito della Khan Academy potete anche scaricarlo sul vostro computer locale ed eseguirlo senza bisogno di Internet scaricando solo una volta per tutte la libreria Processing.js  (per farlo cercate “processing.js download” su Google) e scrivendo un piccolo file di testo esempio.html contenente:

<html>
<head>
  <script type="text/javascript" src="processing.js"></script>
</head>

<body>
<canvas width="400" height="400"  data-processing-sources="esempio.pde">
  </canvas>
</body>
</html>

Inoltre dovete copiare il vostro codice scritto sulla Khan Academy in un file di testo di nome esempio.pde  seguendo 2 differenti ricette a seconda che il codice contenga o no

var draw = function() {

Se contiene gia’ questa riga di codice basta scrivere:

void setup() {
   size(400,400)
 }
// Inserite qui sotto il codice copiato dalla Khan Academy
// sostituendo a
// var draw = function(){
// void draw(){

altrimenti scrivete un file di testo contenente:

void setup() {
   size(400,400)
 }
void draw(){
//Copiate sotto questa riga il codice della Khan Academy
}

Questa ricetta  in alcuni casi  potrebbe non funzionare. Guardate allora questi ulteriori consigli.

Altri applet di informatica

Il materiale ha come indirizzo https://www.khanacademy.org/cs

Titolo in inglese: Khan Academy  Computer Science

Ricerca di pagine che hanno link a questo materiale .

Tweet

Leave a Reply

Your email address will not be published. Required fields are marked *