View source for Introducció a Scratch


'''Benvolguts a la primera setmana del curs!'''

En el primer mòdul aprendreu com accedir i crear-vos un compte a l’entorn de programació visual per blocs virtual d’'''Scratch'''. Si no disposeu de connexió a Internet òptima, també podeu baixar-vos la versió d’escriptori.

*Introducció a l’entorn de programació Scratch 
*Laika al laberint espacial 

== Sobre Scratch&nbsp; ==

L’'''Scratch''' és un entorn de programació creat pel grup d’investigació del Lifelong Kindergardten al '''MIT''' (Institut de tecnologia de Massachussetts) sota la direcció de&nbsp;'''Mitchel Resnick'''.

Scratch ofereix de forma&nbsp;'''gratuïta''' una eina de '''programació visual per blocs''' que permet introduir els infants a partir de 7 anys en el món complex de la programació a través de l’experimentació i l’assaig/error de petits reptes que poden evolucionar progressivament fins arribar a construccions molt complexes.

Scratch està basat en el llenguatge de programació '''LOGO''', aconseguint així fer més atractiu aquest. Va ser '''Symour Papert''' (creador del llenguatge '''LOGO''' juntament amb Danny Bobrow i Wally Feurzeig) qui aprofita els canvis tecnològics per millorar la interfície d'Scratch.

La nova versió d’Scratch funciona en línia sense necessitat d’instal·lació en local, aspecte que permet poder ser utilitzat des de qualsevol sistema operatiu sense problemes.
<p style="text-align: justify">&nbsp;</p> <p style="text-align: center">[[File:S0.jpg|170px|RTENOTITLE]]</p> 
&nbsp;

&nbsp;

== Primer contacte&nbsp; ==
<p style="text-align: justify">Per accedir a l’Scratch és necessari que ens dirigim a la seva pàgina web oficial:&nbsp;[http://scratch.mit.edu/ http://scratch.mit.edu/]. La versió d'Scratch que s'utilitza actualment és la v2.0, no obstant això, està previst l'entrena d'una nova versió (v3.0), al febrer del 2019, que es pot visualitzar i tastejar en versió beta a la següent direcció:&nbsp;[https://beta.scratch.mit.edu/ https://beta.scratch.mit.edu/]. En conseqüència la majoria de tutorials del present curs estan elaborats&nbsp;amb&nbsp;la versió 2.0 exepte alguns que ja s'han construït en el nou format,&nbsp; per així anar fent la transició cap al nou entorn de programació.</p> <p style="text-align: justify">Comencem!</p> <p style="text-align: justify">Ja dins la pàgina d'Scratch, ens trobarem una pantalla similar a la següent:</p> <p style="text-align: center">[[File:S01.png|450px|RTENOTITLE]]</p> <p style="text-align: justify">Per poder guardar i compartir els nostres projectes, primer serà necessari que ens registrem. Podem fer-ho prement “Uneix-te a Scratch”, situat a la part superior dreta de la pantalla. Observem que al fer clic sobre el text, ens trobem amb una finestra de diàleg com aquesta:</p> <p style="text-align: center"><br/> [[File:S02.png|450px|RTENOTITLE]]</p> <p style="text-align: justify">Una vegada seguits els passos i ja es disposi d’una compte d’usuari, podem començar a crear projectes. Per fer-ho, premem sobre crear a la part superior esquerra de la pantalla:</p> <p style="text-align: center"><br/> [[File:S03.png|RTENOTITLE]]</p> <p style="text-align: justify">Si tot ha&nbsp; funcionat correctament, us hauria d’aparèixer la interfície principal d’Scratch, similar a aquesta:</p> <p style="text-align: center">[[File:Si1.PNG|700px|Si1.PNG]]</p> <p style="text-align: justify">&nbsp;</p> <div>&nbsp;</div> 
&nbsp;

== La interfície ==

El primer que observem en qualsevol entorn de programació és la seva interfície. A continuació en veiem descrits els detalls de cadascuna de les parts. A la '''imatge 1&nbsp;'''observem la interfície en la vesrió 2.0 d'Scratch i en la'''imatge 2''' en la versió 3.0.&nbsp;

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;'''&nbsp; Imatge 1'''
<p style="text-align: center">[[File:S1.1.PNG|700px|RTENOTITLE]]</p> 
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; '''&nbsp;Imatge&nbsp;2'''
<p style="text-align: center">[[File:Scratch 3.0ok.PNG|700px|Scratch 3.0ok.PNG]]</p> <p style="text-align: justify"><br/> A mesura que anem avançant, anirem veient cadascuna d’aquestes zones de forma més detallada.Ja amb el programa obert, hi distingim varies parts que a grans trets són:</p> 
*<span style="color:#FF8C00">Taronja:</span> Les diferents categories de les instruccions. 

*<span style="color:#00FF00">Verd clar: </span>&nbsp;Les instruccions corresponents a la categoria seleccionada. 

*<span style="color:#800080">Morat</span>: Botona amb diferents opcions. 

*<span style="color:#FF0000">Vermell:</span> Escenari on s’executaran les nostres animacions. 

*<span style="color:#A52A2A">Marró: </span>Botons per manipular els objectes de l’escenari. 

*<span style="color:#008000">Verd fosc:</span> Zona d’objectes i fons de l’escenari. 

*<span style="color:#00FFFF">Blau clar: </span>Característiques de l’objecte escollit a la zona d’objectes. 

*<span style="color:#0000CD">Blau fosc: </span>Botons varis (pantalla completa, editor de dibuix, etc.) 

*<span style="color:#FFFF00">Groc: </span>Zona de programació 

*<span style="color:#ff6699">Rosa:</span> Botons per posar en marxa i aturar l’execució del programa.&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
*<span style="color:#DAA520">Ocre:</span> Permet obrir les extencions per utilitzar noves eines amb l'Scratch (només disponible en la versió 3.0) 

&nbsp;
<p style="text-align: justify">L'Scratch és un fenomen internacional, qualsevol programa que es creiï en aquest entorn es pot compartir amb la resta d'usuaris d'arreu&nbsp;del món només prement el botó “compartir”.</p> <p style="text-align: justify">Una vegada compartit, el programa queda disponible a tota la comunitat Scratch. De la mateixa manera és possible descarregar, executar, analitzar i modificar qualsevol dels projectes compartits a la comunitat.</p> 
== Funcions ==

=== Posició i direcció dels objectes&nbsp; ===
<p style="text-align: justify">La part emmarcada en vermell en el capítol anterior, és l’escenari on les nostres animacions duen a terme les ordres que nosaltres els indiquem. Per arrossegar els objectes només hem de fer clic sobre ells i sense deixar de permet el ratolí moure’l on desitgem. Fixem-nos en els números que apareixen a la “x” i la “y” mentre realitzem el moviment, a la zona blau clau i fosc. Veiem que al moure l’objecte aquests nombres van canviant, ja que es va determinant la seva posició constantment. El mateix passa amb la posició del ratolí x i y.</p> <p style="text-align: center">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;[[File:Scratcch3.PNG|RTENOTITLE]]</p> <p style="text-align: center">&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;[[File:Scratch2.PNG|RTENOTITLE]]</p> <p style="text-align: justify">Així doncs, cada objecte que apareix a l’escenari està en una posició determinada, donada per les seves coordenades. El centre de l’escenari està al punt (0,0) i l’escenari té 480 píxels d’ample per 360 d’altura. Per tant, la coordenada “x” tindrà valors compresos entre -240 i +240, i la coordenada “y” des de -180 fins a +180.</p> <p style="text-align: center">[[File:Scratch4.PNG|350px|Scratch4.PNG]]</p> <p style="text-align: justify">A més d’una posició, cada objecte dins de l’escenari té una direcció. Per veure la direcció de l’objecte, haurem d’accedir a les propietats de l’objecte fent clic sobre la icona d’informació:</p> <p style="text-align: center">[[File:S6.1.PNG|RTENOTITLE]]</p> <p style="text-align: justify">Si premem i arrosseguem a icona de direcció, l’objecte gira sobre el seu propi eix de rotació i l’apartat “direcció” de la zona de propietats de l’objecte va canviant de valor:</p> <p style="text-align: center">[[File:S6.2.PNG|RTENOTITLE]]</p> <p style="text-align: center">La direcció de l’objecte compren valors entre -180 i +180, positius en el sentit de les agulles del rellotge i negatius en el sentit contrari.<br/> [[File:S7.png|RTENOTITLE]]</p> 
&nbsp;

&nbsp;

=== Duplicar, eliminar i canviar la seva mida ===
<p style="text-align: justify">Els objectes de l’escenari poden ser manipulats fàcilment amb els botons que a l’esquema de colors estava emmarcat amb color marró.</p> <p style="text-align: justify">&nbsp;</p> <p style="text-align: justify">Aquests quatre botons permeten:</p> <p style="text-align: justify">'''Tampó:''' permet duplicar l’objecte de l’escenari sobre el qual apliquem el tampó. Observem que passa a la figura si li apliquem sis vegades. Veiem doncs que a la zona d’objectes ens n’apareixen de Nous a mesura que n’anem creant.</p> <p style="text-align: center">[[File:S9.PNG|400px|S9.PNG]]</p> <p style="text-align: justify"><br/> '''Tisores: '''Permet eliminar un objecte de l’escenari. S’ha de seleccionar primer la icona i posicionar-se sobre de l’objecte tot fent clic sobre ell.</p> <p style="text-align: center">[[File:S10.png|RTENOTITLE]]</p> <p style="text-align: justify"><br/> '''Augmentar la mida: '''el botó amb les fletxes cap enfora fa la funció d’augmentar la mida de l’objecte.</p> <p style="text-align: justify">&nbsp;</p> <p style="text-align: justify">'''Encongir la mida: '''el botó les fletxes cap a dins, permet fer els objectes més petits.</p> <p style="text-align: center">[[File:S11.png|RTENOTITLE]]</p> 
=== Nous objectes&nbsp; ===
<p style="text-align: justify">Els quatre botons que observem &nbsp;&nbsp;[[File:S8.png|RTENOTITLE]]&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ens permet obtenir nous objectes de forma diferent.</p> 
*&nbsp;Permet agafar un dels objectes que ja venen amb Scratch, tot fent clic sobre la icona i escollint-ne un d’entre les categories existents. &nbsp; 
<p style="text-align: center">[[File:S12.PNG|450px|S12.PNG]]</p> <p style="text-align: justify">&nbsp;</p> 
*&nbsp;Permet obrir l’eina de dibuix per crear un objecte nostre mateixos. Aquest editor de dibuix funciona com altres editors&nbsp; de dibuix que segurament ja coneixeu (per exemple, el Paint). Sobre la marxa anirem veient aquells aspectes no estàndards de l’eina. 
<p style="text-align: center">[[File:S14.PNG|450px|S14.PNG]]</p> 
*&nbsp;[[File:S15.png|RTENOTITLE]]Permet carregar un objecte des del seu ordinador. Qualsevol arxiu d’imatge és vàlid. &nbsp; *&nbsp;[[File:S16.png|RTENOTITLE]]Permet capturar una imatge amb la pròpia càmera web. Així, pots fer que els objectes del món real es vegin representats en el programa! 
<p style="margin-left: 1.2pt;  text-align: justify">Ara és un bon moment per practicar amb els objectes. Podeu jugar amb les quatre opcions disponibles i així practicar amb cadascuna d’elles.</p> 
=== Les eines per programar&nbsp; ===
<p style="text-align: justify">Fins aquí heu adquirit cert domini sobre la manipulació dels objectes dins l’escenari; sabeu com esborrar-los (tisores), duplicar-los (tampó), crear-ne de nous (editor de dibuixos), etc.</p> <p style="text-align: justify">Però Scratch és un entorn per aprendre a programar i això és el que cal que comencem a fer.</p> <p style="text-align: justify">En aquesta pràctica explicarem aquelles parts de l’entorn que ens serviran per programar, i també començar a fer alguns programes senzills.</p> <p style="text-align: justify">On programem?</p> 
*Les instruccions estan categoritzades segons el que realitzen. Si feu clic sobre qualsevol de les categories, us apareixeran a la zona de baix les instruccions corresponents a aquesta. 
<p style="text-align: center">[[File:S17.PNG|RTENOTITLE]]</p> 
*&nbsp;Les instruccions de cada categoria venen amb el mateix color que el botó d’aquesta; blau per moviment, lila per aspecte, etc. Aquest és un dels punts forts d’Scratch, és a dir, les instruccions són blocs i amb aquests construïm els programes!. 
<p style="text-align: center">[[File:S18.PNG|RTENOTITLE]]</p> 
*La zona buida (fins ara) és l’espai on programem. Tingueu en compte que aquesta zona està vinculada estretament a l’objecte seleccionat (es pot veure quin objecte teniu seleccionat a la zona d’objectes, ja que aquest us apareix seleccionat). Quant posem el programa en aquesta regió, aquest estarà associat només a aquell objecte específic. A la imatge inferior podem observar que tenim seleccionat el gat rosa, i que per tant, si fem un programa, aquest estarà associat només a aquest gat. 
<p style="margin-left: 19.2pt;  text-align: center">[[File:S20.1.PNG|RTENOTITLE]]</p> <p style="text-align: justify">Un programa és una llista organitzada d’instruccions que al executar-se fa que l’ordinador es comporti d’una manera determinada. Programar és, per tant, partir d’una tasca concreta i intentar proporcionar unes instruccions a l’ordinador per tal que faci el que vulguem.</p> <p style="text-align: justify">Per aprendre a programar només es pot fer programant. La única forma de ser competents programant és practicant i equivocant-nos (assaig-error). De fet, aquesta és una de les parts més divertides de programar, destinar temps a jugar resolent trencaclosques per trobar errors en els programes.</p> 
*Com fem això amb&nbsp;Scratch? 
<p style="text-align: justify">Comencem des de zero fent el gat faci accions senzilles.</p> <p style="text-align: justify">Per afegir instruccions a un programa, les arrastrem de la zona d’instruccions a la zona de programació amb el ratolí. En la imatge inferior hem seleccionat tres instruccions diferents cap a la zona de programació:</p> <p style="text-align: center">[[File:S21.1.PNG|RTENOTITLE]]</p> <p style="text-align: justify">Si fem clic sobre cadascuna de les tres instruccions de la zona de programació fixeu-vos que el gat realitza les accions a l’escenari.</p> <p style="text-align: justify">Si fem doble clic sobre l’ordre “moure”, veurem que el gat es mou 10 passos endavant (en la direcció que tingui associada). Si fem clic sobre la instrucció de girar, observem que el gat canvia la direcció i per últim si fem clic sobre la instrucció de “ves”, el gat torna al seu origen.</p> <p style="text-align: justify">Els espais en blanc amb número dins que es troben dins de cada instrucció són editables. Provem de canviar el 10 de la instrucció de moure per un 100 i fem clic sobre la instrucció. Ens adonem que el gat es mou 100 passes en lloc de 10.</p> <p style="text-align: justify">Fins aquí el que tenim són tres programes (cadascún&nbsp;d’una sola instrucció) que afecta al mateix gat. No obstant, normalment caldrà que combinem les instruccions per tal d’obtenir programes més llargs i complets. A Scratch, combinem les &nbsp;instruccions ajuntant-les unes sota les altres (això s’anomena estructura seqüencial). Com a exemple, ara podem combinar les tres instruccions que hem utilitzat fa una estona de la següent manera:</p> <p style="text-align: justify">&nbsp;</p> <p style="text-align: justify">Ja tenim un programa amb tres instruccions que s’executarà de la següent manera:</p> 
#Primer movem el centre de coordenades del gat a la posició “x” igual a 0 i “y” igual a 0 (el centre de l’escenari). Movem el gat en la direcció corresponent (90 si no ho hem modificat) 10 passes. Finalment girem aquest 15 graus en sentit contrari de les agulles del rellotge). 
<p style="text-align: justify">Executem el programa fent clic sobre el programa (el tres blocs units).</p> 
=== La bandera verda&nbsp; ===
<p style="text-align: justify">Per executar els programes utilitzem la bandera verda (situada a dalt a la dreta de l’escenari). Per fer-ho, premem la categoria d’instruccions &nbsp;“esdeveniments” i seleccionem la instrucció “quant la bandera verda el premi” tot col·locant-la a sobre del programa que ja teníem creat. El resultat final és el següent:</p> <p style="text-align: center">[[File:S24.PNG|200px|S24.PNG]]</p> 
=== El so&nbsp; ===
<p style="text-align: justify">Continuant amb el programa que hem començat a fer, el següent pas serà afegir so.</p> <p style="text-align: justify">Seleccionem de la categoria “Sons” la instrucció “tocar so” i per defecte ens ve un so ja seleccionat que és el propi d’un gat. Afegim aquest al programa, de manera que quant premem la bandera verda a banda de fer totes les accions anteriors també miolarà.</p> <p style="text-align: center">[[File:S25.PNG|300px|S25.PNG]]</p> 
=== Els vestits&nbsp; ===
<p style="text-align: justify">Els objectes poden tenir diferents vestits. Sense sortir del programa sencill amb el que estem treballant, seleccionem la pestanya “vestits”.</p> <p style="text-align: center">[[File:S21.2.PNG|RTENOTITLE]]</p> <p style="text-align: justify">Observem que el gat té dos vestits, el vestit no és més que una posició diferent de l’objecte.</p> <p style="text-align: center">[[File:S26.PNG|RTENOTITLE]]</p> <p style="text-align: justify">Si tornem a la pestanya “programes” i fem clic sobre la categoria “Aspecte”, podem afegir al nostre programa, la instrucció “següent vestit”. Observem què passa:</p> <p style="text-align: center">[[File:S27.PNG|350px|S27.PNG]]</p> <p style="text-align: justify">Si premem la bandera verda varies vegades, veiem que els vestits dels gat es van alternant a cada clic de la bandera verda.</p> <p style="text-align: justify">Per evitar haver de prémer constantment la bandera verda replicant l’acció necessitem d’una altre acció que encara no hem vist. En les properes practiques tractarem construccions bàsiques que ens permetran fer programes més sofisticats.</p> <p style="text-align: justify">Per acabar, si volem eliminar qualsevol instrucció de la zona de programació, ho podem fer arrastrant aquestes cap a la zona d’instruccions de manera que desapareixerà automàticament.</p> 
== Bitbot.cat ==

Aquest és un article del programa [https://bitbot.cat/ '''Bitbot.cat'''], podeu consultar la resta d'articles a:

*[[Recursos_formació_BitBot|Formació presencial '''Bitbot.cat''']] 
*[[Bitbot|Formació semipresencial '''Bitbot.cat''']] 

'''Bitbot.cat''' és un programa implusat per la Secretaria de Telecomunicacions, Ciberseguretat i Societat Digital de la '''Generalitat de Catalunya''', en col·laboració amb el Departament d’Ensenyament, que neix amb l’objectiu d’impulsar la millora de les competències digitals del jovent i promoure el creixement de les vocacions tecnològiques.

Una de les accions que es proposa aconseguir és la capacitació de monitores i monitors per a conduir i desenvolupar '''activitats educatives de lleure en els camps de la robòtica i la programació''', per tal d’anar formalitzant aquesta oferta amb '''monitores i monitors certificats'''.