Learning by doing: il pensiero computazionale

LearningbyDoing:ilpensierocomputazionale

VittorioScaranoDipartimentodiInformatica– UniversitàdiSalerno

[email protected]

"Learningbydoing"- V.Scarano 1

Obiettivi


Agenda

• Competenzedelnostrosecolo• Pensierocomputazionale• Scratch:unaintroduzione• CreareeimparareconScratch• Unapresentazione• ComeprogrammareconScratch• Conclusioni


Agenda



Alcunecompetenzedelnostrosecolo- 1• CriticalThinking andSystemsThinking– Coordinarelarealizzazionediartefattichehannounfunzionamentocomplesso,basatisullamessa“asistema”dicomponentidibase

• Problem solving– Crearesistemisoftwarechedevonorisolvereunproblema,aiutaaidentificareipassinecessari

• Curiosità– Progettazioneesplorativa:“chesuccedese?”


Alcunecompetenzedelnostrosecolo- 2

• Apprendimentocollaborativo– Lafacilitàdilavorareinsiemeaprogetticondivisiaumental’effettodell’apprendimento

• Responsabilizzazioneecuriosità– Scegliereladirezionedelprogettoconlasperimentazioneinterattiva


Competenzedel21-mosecolo• Pensareinmanieracreativa• Comunicareinmanierachiara• Essereingradodianalizzarecon

sistematicità• Collaborazione• Progettareinmanieraciclica• ApprendereconcontinuitàPeresserefluentiinunalingua,nonsideveessereingradosolodileggere,maanchediscrivereedesprimersicorrentemente• ..cosìperletecnologiedigitali


I“natividigitali”

• UnaindovinatadefinizionediPaoloAttivissimo:– “personacheènataquandoletecnologiedigitaligiàerano

capillarmentediffuse…– manonperquestocicapisceautomaticamentequalcosa”

• Esempio:Snapchat..unaapp chemandafotochescompaionodaltelefoninoentrouncertonumerodisecondisenzapoterlesalvare– i“natividigitali”sibevonolapromessadella“intimità”

• Mentretutti(gliinformatici)sannoche“cancellare”unfilenonbastaperevitarneilrecuperotramitetecnichepiùomenocomplesse– avoltebastascaricareunasemplicissimaapp!


Lalimitazionedei“natividigitali”

• Abituatiausaredispositivi“connessi”,ignoranolebasidiquellocheutilizzano..

• ..esonoallamercédiqualsiasifenomeno“dimoda”• Alcuniesempi?

– Facebook elaprivacy– Wikipediaelaqualitàdelleinformazionisullarete– Lasicurezzadelleidentitàelaanonimia– Ilcontrollodapartedellemultinazionaliedeigrandiprovider(Apple,

Google,Samsung,Amazon)tramiteilmeccanismodelleapp• Oggigiornoglismartphone sonoLAmanierapernavigare

– nelprimotrimestredel2013,80milionidiPCvenduticontro250milionidismartphone


Alcuniesempiinquestadirezione• IlmessaggiodiObamanella“ComputerScienceEducation

Week”,moltopubblicizzatosuimediadituttoilmondo:– “Nongiocatesolosulvostrotelefonino,programmatevoiun

gioco!”– “Impararequestecompetenzenonèsoloimportanteperilvostro

futuro– èimportanteperilfuturodell’America”• Lacapacitàdiinteragireinmanieraconsapevoleconla

tecnologiadigitaleèunpuntochiavedellaeducazionedeigiovani– “Computerliteracy”

• USA,UK,Cina,…tuttevannoindirezionediformarenuovelevecheabbianounapproccioattivoefattivoconletecnologiedell’informazioneedellacomunicazione


Agenda



Pensierocomputazionale

• Computational thinking• Processocheappartienealdominiodelproblem solving echene

offreunarappresentazione• Fasiprincipali

– formulazionedelproblemaalfinediconsentirel’impiegodiunostrumentoautomaticoperlarisoluzione

– Acquisizione,analisieorganizzazionelogicadeidatiprovenientidalcampo– Rappresentazionedeidati,fondatisumodelliesimulazioni– Realizzazionidisoluzioniautomatiche,ripetibiliesostenibili,attraversolo

sviluppodelpensieroalgoritmico– Sviluppodidiversesoluzionipossibili(conobiettivodiselezionarela

combinazionemigliore)– Generalizzazioneetrasferimentodellasoluzione


Nonsoloprogrammazione..

• Ilpensierocomputazionalesifondasullacapacitàdiastrazione

• Modalitàconcuiunessereumanosiesprime– descrivendoilproblema– tracciandolasoluzione

• Il“pensierocomputazionale”puòesserevistocomeunachiaveinterpretativarilevantedell’informatica– pereducatori,formatori,ricercatorieprofessionisti

• Messaggi:– l’informaticaè“scienzagiovane”:moltorestadascoprire– l’informaticaètrans-disciplinare(applicazioniintuttelearee)


Pensierocomputazionale:inpratica?

• “Ilprocessomentalecoinvoltonelformulareproblemielesoluzioniinmodocheessesianorappresentateinmanieradapoteressereeseguiteautomaticamente”

• Esempidi“Computational thinking”conScratch– Fireflies:progettodiScratchcreatodaTim,di8anni.Haselezionatolasuacanzonepreferitae,asecondadeltestodellacanzone,hacreatounasequenzatemporizzata(videoclip)cherappresentalacanzone

– Countries:simulazionecreatadaShannon 14anni.SimileaSimCity,èunasimulazionedipaesivirtuali,doveognigiocatoredecidecomereagireacrisieconomiche,agricoleepolitiche


Programmazioneinterattiva

• Laprogrammazioneinterattivaevisualeaiutaasviluppareilpensierocomputazionale

• EsperienzeconutentidiScratchevidenzianoquestoprocesso

• Passi:– Creating– Personalizing– Sharing andcollaborating– Reflecting



ConcettibasedelPensieroComputazionale

• Utilizzandoambientidiprogrammazioneinterattivadimultimedia(comeScratch)gliutenti(progettistidiapplicazioni)“incontrano”:– sequenze– cicli– eventi– parallelismo– condizioni– operatori– dati


ConcettibasedelP.C.:sequenze

• Unaattivitàvieneespressacomesequenzadi– step elementari– cheèpossibileeseguiredapartediuncomputer

• Classicoesempiodella“ricetta”dicucina– specificailcomportamentoperprodurreunrisultato


ConcettibasedelP.C.:cicli

• Dallaesecuzionedialcunipassi,specificatisingolarmente..• ..allaspecificadisequenzechepossonoessereeseguiteinun

ciclo• Perfarfarealgatto4voltelasequenzadispostamentoe

attesa…


ConcettibasedelP.C.:eventi

• Uneventoèunavvenimentochecausaunaltroavvenimento• Essenzialipermediainterattivi

– bottonestartdiunvideo– collisionedidueoggetticheaumentailpunteggio

• Alcuniesempi:


ConcettibasedelP.C.:parallelismo

• Tuttiicomputermodernisupportanoilparallelismo– esecuzionesimultaneadiistruzioninellostessotempo

• Processorimulti-core,hyperthreading,processorigrafici,etc.

• Possiamofareprodurreunsuono,ballareeparlareallosprite,contemporaneamente


ConcettibasedelP.C.:condizioni

• Lacapacitàdiprenderedecisionibasatesucondizioni,inmodochelaesecuzionedelprogrammaprevedadiversestradedapoteressereprese

• Necessitàdioperatoribooleaniedi“sensori”– chepermettonodiverificarealcunecondizionirelativeallosprite


ConcettidelP.C.:operatori

• Supportoperoperazioni– matematiche– logiche– sustringhe

• Supportoevoluto,madibasecisonodiversedisponibilità


ConcettibasedelP.C.:dati

• Gestiredatisignificachequestistrumentidevonopermetteredidefiniredellevariabiliedipoterne– assegnareunvalore– leggereunvalore– aggiornareilvalore


• Tipicamente,neigiochi,necessariopermantenereilpunteggioolavelocità

BuonePrassidelPensieroComputazionale

• “Progettazioneincrementaleeiterativa”– processocontinuo,chereagisceafeedbackdaesperienze– metodologie“agili”insvilupposoftware

• “Testing edebugging”– verificareilfunzionamentoecorreggerlo,senecessario

• “Riutilizzoere-mixdiprogettiesistenti”– condivisionedicodice,buonepratichenelloscriverecodice

• documentazionedelcodice(commenti)– opensource

• “Astrazioneemodularizzazione”– ottimizzazionedelproprioprogetto(persprite,perevento,…)

• Teamworknellaprogettazione– pair programming


Agenda



Scratch(unapreview!)

• Scratchèunlinguaggiodiprogrammazioneeunacomunitàonlinedovepuoicrearestorieinterattive,giochieanimazioni– puoicondividereletuecreazioniconaltrepersoneintuttoilmondo.

• UsandoScratch,iragazziimparanoapensarecreativamente,aragionaresistematicamenteealavorareinmodocollaborativo.

• ScratchèunprogettodelLifelong Kindergartengroup deiMediaLabdelMIT.

• E'disponibilegratuitamentesulsito– http://scratch.mit.edu– Sipuòanchescaricareinlocale


CaratteristichediScratch

• Ambientediprogrammazione– Visuale– Interattivo– Basatosulweb

• Scratchaiutaadimparareapensareinmodocreativo,aragionareinmanierasistematicaeacollaborare

• Scratchèprogettatoinmanieraspecificaperlafasciadietà8-16,– maèusatodapersoneditutteleetà,incontestieducatividiversi

• MilionidipersonestannocreandoprogetticonScratchacasa,ascuola– maancheinmusei,bibliotecheecentriricreativi.


DoveèusatoScratch?• Scratchèstatoprogettatoavendocomeobiettivo

l'apprendimentoeladidattica– atuttiilivelliscolastici(dallescuoleelementarifinoall'università)

• Scratchvieneusatoperunavarietàdidiscipline– matematica,informatica,arte,studisociali

• Offresitidicollaborazioneconaltrieducatorichelousano(ScratchEd)

• MoltissimieducatorihannosupportatoicreatoridiScratchgiàdal2007,– siainambientidiapprendimentoformalecheinformale– insegnamentiatuttiilivelliK-12,– ricercatoridididatticaediinformatica,bibliotecari,educatoridi

musei,genitori."Learningbydoing"- V.Scarano 29


QuantoèdiffusoScratch?

• Oltre4milionidiutentiregistratiintotale• 150nazioni• Oltre40traduzioniinlinguaggidiversi– Si,c’èanchel’italiano!J


Utentiattivipermese


Distribuzioneutentinelmondo


Progetticondivisimensilmente


Agenda



Scratchcome“fattoreabilitante”

• Mediainterattiviesistono..benfatti..esonoutilizzatidanoiedaglistudenti

• Spesso,sono,solamentestrumentiperfruire dicontenuti– seguireunpercorsosceltodaaltri

• Nonèpossibilecreare,inventare,scoprire• Scratchpermettedicrearedeiprogrammiinterattivi

– combinandografica,foto,musicainsieme

• L’utentenonèpiùsolounutentemauncreatore– conlaresponsabilitàelagioiadiesserearteficediunpiccolo“mondo”

artificialeinminiatura– lecuileggi,elacuistruttura,sonofruttodellasuacreatività


CaratteristichediScratch

• Tecnicadelloscratching usatadaidiscjockeydimusicahip-hop

• Consisteneltrascinaredischiinvinileconlemani,fondendobraniesistentiinmanieracreativa

• Scratchseguelostessoapproccio– mescolandodiversitipidimedia(grafica,foto,musica,suoni)– remixandoprogettidialtri– avendoancheunaaudiencecheinteragisceconl’autore

• Possibileinfatticondividere ilprogettosulsitodiScratch– cosìcomesicondividefoto,filmatisuYoutube,Facebook,Flickr,etc.

• La“socialità”elacollaborazionecomestrumentodisviluppo– enonsolocome“pericoli”daevitare


LacollaborazionesuScratch

• Unprogettopuòesserevisibileatuttalacomunità• Glialtriutentipossono– vederequellochehofatto– commentare– riutilizzare(remix)partiotuttoilmioprogetto

• Strumento“social”– leamiciziesicreanosu“artefatti”digitali– lacomunitàdiScratchècontrollatadaigestoridelsito

• Cooperare(davicinoodaremoto)èbello


ImparareconScratch

• Ideeeconcettidiinformaticamaanchedimatematica,fisicaetc.– coordinate– variabili– numericasuali– iterazione– condizioni

• Contestosignificativo,motivante– interattivoechefavoriscelasperimentazione

• unavariabileinalgebravienevissutacome“viva”all’internodiunesempioconScratch

• inquantoservepercontrollarelavelocitàdimovimento,ilpunteggio,etc.

• Ciclodellaprogettazione– progetta,realizza,controlla,correggierealizzalemodificheopportune


Agenda



UnosguardoaScratch- 1


IngredientidibasedeiprogettidiScratch

• Iprogettisicompongonodioggettichiamatisprite– Ognispritehadiversicostumi,chepuòindossareinognimomento

• Unospriteèun’immagine– puoi,adesempio,costruiredeglispritepersonalizzati– disegnandoconunprogrammaapposito– usandoun’immaginepre-esistente– scattandounafoto


Cosafannoglisprite?

• Possiamofornireistruzioniadognisprite• Possiamoindicargli– cosafare,dovemuoversiocosasuonare– comereagireadaltrieventi

• interazioneconaltrisprite• interazioneconl’utente(click,etc.)

• Perindicareadunospritecosafaresidevecostruireunoscript– bloccograficodiistruzioni



Il“palcoscenico”(stage) L’areadeglisprite


L’areadeiblocchidausarepercrearegliscript Areadegliscript

Ilpalcoscenicodeglisprite:lostage- 1


• Dovesimuoveilnostrosprite

• Inbassovieneindicatodovestapuntandolafrecciadelmouse

• Inalto,nomedelprogetto• Bandierinaverdeperfar

partireilprogramma• Pulsanterossoper

bloccarlo

Ilpalcoscenicodeglisprite:lostage- 2


• Grandezza:– 480puntiinorizzontale– 360inverticale

• Ilcentrohacoordinate(0,0)

• Lecoordinateorizzontalivannoda-240a+240

• Lecoordinateverticalivannoda-180a+180

(240,180)

(240,-180)

(-240,180)

(-240,-180)

(0,0)

Laposizionedellosprite…


• Nell’areadegliscript• Inaltoadestraèindicatalaposizionecorrentedellosprite

• cheall’iniziositrovasempreinposizione(0,0)

Lostage:unpalcoscenico…


• Ilpalcoscenicodeglisprite– chenormalmenteè

mostratoinsiemeallealtrecomponentinellamodalitàdi“progettazione”

– lasalaprove?J• Puòandareinprimo

piano– sivainscena

• Modalitàpresentazione– usandoilpulsante

Questopulsanteriportaallamodalitàdiprogettazione



Areadeisuggerimenti:• siaprefacendoclicksul?• suggerisceun“primo”esempio,

passo,passo

Agenda




• siprendeunbloccodall’areadeiblocchiesiportanell’areadegliscript

• sicliccasulblocco(osull’insiemediblocchi)• lospriteesegueicomandi

ComesiusaScratch?3semplicipassi!

Unsempliceesempio

• Cosafaremo• Sequenzadipassi:

– portiamounbloccodall’areablocchiall’areadelloscript

• Nemodifichiamoilnumerodipassi,portandoloa100– sifaclicksu10,vieneevidenziato,scriviamo100

• Aquestopuntofacciamoclicksulblocconellaareadegliscriptelospritesimuoveràdi100passinelladirezioneincuista“guardando”


Esempio:comefarmuoverelosprite



Primadifareclicksulblocconell’areadegliscript…

Dopo… laposizioneècambiata


Cosasonoiblocchidiprogrammazione?

"Learningbydoing"- V.Scarano58

• Cisonodiversecategoriediblocchi– Movimento– Aspettofisicodellosprite– Suono– etc.etc.

• L’ideaèchediversiblocchipossonoesserecombinati

• …attaccandoliunosotto/dentrol’altro…

• …percrearecomportamentianchecomplessi

Unaltroesempio:facciamoballareilgatto• Ipassichevogliamofareseguiresono:

– muovitidi10passi– emettiunsuonoconiltamburo– muovitiindietrodi10passi(quindidi-10passi)– emettiunsuonoconipiatti

• percambiaretamburofacciamoclicksullasceltadeltipo,siapreunafinestraescegliamo(4)Piatto

• Dobbiamoportareiblocchiunosull’altronell’areadegliscript,facendoli“combaciare”(comepezzidiunpuzzle)

• Poi,vogliamofarripeterequestoballettoper10volte– utilizzandounnuovoblocco


Esempio:comefarballarelosprite


Unpassodidanza…


Perripeterlo,andiamosuiblocchidi“controllo”eportiamo“ripeti”sulleistruzioniperilsingolopasso


Facendoclick,ilnostrogattoripete10volteilballo!


Comesiusanoiblocchi- 1• Ognibloccohaunasuaforma,cheindicainchemanierapuò

esserecombinato• Blocchi“impilabili”:

– hannounpuntosulfondochefuoriesceeincimacherientra– questiblocchipossonoformaredellesequenze– alcuniblocchihannounaareadiinput chepermettediinserireun

valore

– oppurediselezionareunvalore

– alcuniblocchihannounaboccapercontenerealtriblocchi(sequenze)


Comesiusanoiblocchi- 2

• Blocchi“acappello”– possonostaresoloall’iniziodiunoscript– attendonocheavvengauneventoefannopartireloscript– importanteparadigmadiprogrammazioneeventiedi

programmazioneconcorrente– fondamentalepergestirelainterazioneconl’utente

• Usareiblocchi“acappello”permettedipoterscriverepiùscriptcontemporaneamente,eseguitiquandoserve– quandol’utentepremefrecciaasinistra..equandol’utente

premefrecciaadestra


Esempio:facciamomuoverelospriteasecondadellafrecciachepremel’utente



• Blocchi“sensori”• Rappresentanounvalore,presodall’ambientediScratch• ..chepuòessereutilizzatoall’internodiblocchiche

hannoareediinputarrotondate• Adesempio,ilsensore

– puòessereinseritocomestringain

– eripetutopersempre


Esempio:Chiediamoallospritequantoèlontanodalmouse



• Blocchi“didecisione”• Rappresentanounasceltachevieneeffettuatadalloscript,asecondadelvalorediveritàdiunaespressione

• Laespressionecontrollatadeveessereunrombo

• Oppureunaespressionediunoperatorecome:


L’interazione

• Storieinterattiveconiblocchidisceltadall’utente• Inserimentodidati:

• Utilizzodellarispostainunoperatoreditestall’internodiunbloccodidecisione


Esempio:Chiediamoilnomedell’utente.Giovannièunnostroamicoelosalutiamocalorosamente,altrimenticimanteniamosulformale!


Esempio:Chiediamoilnomeel’età.Sehapiùdi18annisalutacon“Buongiorno!”con“Ciao”


Agenda



Conclusioni• EdgarDale (?...MoltodibattutoJ )“Ilconodell’apprendimento”


Contatti

• Coderdojo Salerno:https://coderdojosalerno.wordpress.com
