An Interactive Environmentfor the Didactical Manipulation

of Programs

University of CagliariFaculty of Mathematics, Physics and Natural SciencesMaster of Science in Information Technology

Academic Year 2011-2012

Candidate

Pier Giuliano Nioi

Supervisor

Riccardo Scateni

Examiner

Andrea Casanova

2/17

Obiettivi

•Creazione di un ambiente interattivo a supporto dell'insegnamento

•Riduzione del carico cognitivo attualmente richiesto

•Faciliti la comprensione dei concetti fondamentali della programmazione

3/17

Motivazioni

•Tool attuali non pensati per i principianti

•Impongono processi non interattivi

•Poco o nulla trasparenti nelle meccaniche

4/17

Motivazioni

5/17

Motivazioni

6/17

Motivazioni

•Chi inizia a programmare è alle prese con:oNuovi concetti da capireoEsprimere concetti in codiceoMantenere la sintassi correttaoDedurre comportamento algoritmi

•Strumenti debugging complessi, aumenterebbero il carico cognitivo

7/17

Soluzione

•Ambiente interattivo con funzionalità di:oEditing codice semplificatooVisualizzazione comportamento programmaoPromozione modifiche e sperimentazione

•Unione di componenti free & open source

8/17

Editor

•Visuale

•Metafora dei blocchi

•Completa assenza errori di sintassi

•Rappresentazione astratta convertibile in codice reale

9/17

Visualizzatore

•Permette oAnalisi del codice step-by-stepoVisualizzazione stato heap e stackoVisualizzazione costruzione del risultatooRapida individuazione errori semantici e di runtime

10/17

Infrastruttura

•FrontendoEditoroVisualizzatore

•BackendoGeneratore traccia esecuzione

•Interazione tra le partioFeedback loop

11/17

Infrastruttura

12/17

Dettagli implementativi

•Web app on the cloudoAccessibile con un comune browsero Indipendente dalla piattaformao Installabile anche in localeoPossibilità condivisione programmi

•Tecnologie usateoFrontend in HTML5 + jQuery MobileoBackend in Google App Engine + PythonoComunicazione con Ajax + JSON

13/17

Dettagli implementativi

14/17

Dettagli implementativi

15/17

16/17

Conclusioni

•Realizzato ambiente interattivooRiduce carico cognitivo in vari modioVisualizza le meccaniche necessarieoFacilita l’apprendimento dei principiantioPromuove sperimentazione

•Live coding e debugging

•In futuro…o Integrazione in Eclipse tramite pluginoEstensione ad altri linguaggi comuni

17/17

Grazie per l’attenzione.