Difference between revisions of "Introducció a Snap!"

From Edutec Wiki
Jump to: navigation, search
Line 1: Line 1:
 
+
<p style="text-align: justify;">'''[[File:Image24.jpg|left|260px|Image24.jpg]]Snap!''',&nbsp;anteriorment anomenat '''BYOB''' (de l'anglès ''Built Your Own Blocks'', construeix els teu propis blocs), és un llenguatge de programació visual per blocs inspirat en el model d’'''[[Ejercicio:_Introducción_a_Scratch|Scratch]]''' i en el llenguatge textual''&nbsp;''[https://www.scheme.com/tspl4/ Scheme]. Comparteix amb Scratch la interfície del programari i la manera de programar: en ambdós casos s'organitzen&nbsp;indicacions a través de l’encaix de blocs amb formes de colors, formant així programes que es poden visualitzar virtualment en temps real.</p> <p style="text-align: justify;">Es pot usar en línia&nbsp;sense necessitat d’instal·lació i, en estar&nbsp;programada amb [https://www.javascript.com/learn/strings JavaScript] i HTML5, des de qualsevol navegador.&nbsp;</p> <p style="text-align: justify;">El projecte està desenvolupat per Jens Mönig i Brian Harvey a la Universitat de Califòrnia a Berkeley, amb la col·laboració d’estudiants d’altres universitats d’arreu del món.</p>  
'''[[File:Image24.jpg|left|260px|Image24.jpg]]Snap!''',&nbsp;anteriorment anomenat '''BYOB''' (de l'anglès ''Built Your Own Blocks'', construeix els teu propis blocs), és un llenguatge de programació visual per blocs inspirat en el model d’'''[[Ejercicio:_Introducción_a_Scratch|Scratch]]''' i en el llenguatge textual''&nbsp;''[https://www.scheme.com/tspl4/ Scheme]. Comparteix amb Scratch la interfície del programari i la manera de programar: en ambdós casos s'organitzen&nbsp;indicacions a través de l’encaix de blocs amb formes de colors, formant així programes que es poden visualitzar virtualment en temps real.
+
<p style="text-align: justify">Es pot usar en línia&nbsp;sense necessitat d’instal·lació i, en estar&nbsp;programada amb [https://www.javascript.com/learn/strings JavaScript] i HTML5, des de qualsevol navegador.&nbsp;</p> <p style="text-align: justify">El projecte està desenvolupat per Jens Mönig i Brian Harvey a la Universitat de Califòrnia a Berkeley, amb la col·laboració d’estudiants d’altres universitats d’arreu del món.</p>  
+
 
== Accès i registre ==
 
== Accès i registre ==
<p style="text-align: justify">Per accedir a '''Snap! '''cal anar a la &nbsp;[http://snap.berkeley.edu/snapsource/snap.html web oficial] &nbsp;i prémer l'opció&nbsp;“Run Snap! Now!”. Un cop dins, és interessant registrar-se, ja que així podrem guardar els projectes creats, compartir-los i&nbsp;veure els realitzats per altres persones. Per registrar-nos, fem clic sobre la icona representada amb un núvol i ens apareixerà l'opció per emplenar les nostres dades.</p>  
+
<p style="text-align: justify">Per accedir a '''Snap! '''cal anar a la &nbsp;[http://snap.berkeley.edu/snapsource/snap.html web oficial] &nbsp;i prémer l'opció&nbsp;“Run Snap! Now!”. Un cop dins, és interessant registrar-se, ja que així es poden&nbsp;guardar els projectes creats, compartir-los i&nbsp;veure els realitzats per altres persones. Per registrar-te, fes&nbsp;clic sobre la icona representada amb un núvol i omple les teves dades a la finestreta emergent.</p>  
&nbsp;[[File:Image78.png|200px|RTENOTITLE]]
+
&nbsp;[[File:Image78.png|border|center|200px|RTENOTITLE]]
  
&nbsp;&nbsp;[[File:Image77.png|200px|RTENOTITLE]]
+
&nbsp;&nbsp;[[File:Image77.png|border|center|200px|RTENOTITLE]]
<p style="text-align: justify">Seguint amb les icones del menú principal d’'''Snap!''', analitzem a grans trets les seves funcions:</p> <p style="text-align: justify">La icona representada amb un full en blanc&nbsp;permet obrir projectes d’exemple de la biblioteca que incorpora '''Snap!''', guardar-ne de nous, importar-ne o exportar-ne, desar-los i importat vestits o sons a les nostres creacions.</p>  
+
<p style="text-align: justify">Icones del menú principal d’'''Snap!''':</p> <p style="text-align: justify; margin-left: 40px;">La icona representada amb un&nbsp;'''full de paper'''&nbsp;serveix per obrir projectes d’exemple de la biblioteca, guardar-ne de nous, importar-ne o exportar-ne, desar-los i importat vestits o sons a les nostres creacions.</p>  
&nbsp;[[File:Image81.png|150px|RTENOTITLE]]
+
&nbsp;[[File:Image81.png|border|center|150px|RTENOTITLE]]
<p style="text-align: justify">Per últim, la roda d’engranatge permet des de determinar l’idioma, la mida dels blocs i de l’escenari, fins a activar el ''turbo'' perquè les accions programades s’executin més ràpid o també&nbsp;modificar el color de l’escenari, entre moltes altres opcions que observem a la imatge següent:</p> <p style="text-align: justify">&nbsp;[[File:Image79.png|200px|RTENOTITLE]]</p>  
+
<p style="text-align: justify; margin-left: 40px;">La icona amb una '''roda dentada'''&nbsp;permet determinar l’idioma, la mida dels blocs i de l’escenari, activar el ''turbo'' perquè les accions programades s’executin més ràpid i&nbsp;modificar el color de fons de negre a blanc (amb l'opció "Disseny pla"), entre altres opcions:</p> <p style="text-align: justify">&nbsp;[[File:Image79.png|border|center|250px|RTENOTITLE]]</p>  
Si fem servir la tecla de canvi de majúscules (⇧) quan piquem amb el ratolí, &nbsp;es pot accedir a opcions avançades per cadascun dels menús anteriors.
+
Usant la tecla de canvi de majúscules (⇧) mentre es clica&nbsp;amb el ratolí, &nbsp;es pot accedir a opcions avançades per cadascun dels menús anteriors.
  
== La interfície&nbsp; &nbsp; &nbsp; &nbsp;'''&nbsp; &nbsp; &nbsp;''' ==
+
== Interfície ==
  
La interfície d'''''''Snap!'''''està estructurada en cinc àrees principals:&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;''
+
La interfície d''e&nbsp;'''''Snap!&nbsp;'''està estructurada per àrees:&nbsp; &nbsp; ''&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;''
  
&nbsp; &nbsp; &nbsp;'''&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;[[File:Interfície0.PNG|200px|RTENOTITLE]]'''
+
&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;[[File:Interfície 1.PNG|border|center|800px|Interfície 1.PNG]]&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;
 
+
Si coneixem '''Scratch''', ens adonem que també conté aquestes àrees però distribuïdes de manera diferent. Observem la comparació a les imatges inferiors:&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;[[File:Interfície 1.PNG|700px|RTENOTITLE]]&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;[[File:Interfície 2.1.PNG|700px|RTENOTITLE]]
+
 
+
&nbsp;
+
  
 
== Mascota ==
 
== Mascota ==
 
+
<p style="text-align: justify;">La mascota de '''Snap!''' és una criatura fantàstica que es diu '''<span style="background-color:#FFFF00">Alonzo</span>''', en honor al matemàtic [https://ca.wikipedia.org/wiki/Alonzo_Church Alonzo Church], que va desenvolupar el [https://ca.wikipedia.org/wiki/Càlcul_lambda cálcul lambda]. Alonzo existeix també com a personatge a '''[[Ejercicio:_Introducción_a_Scratch|Scratch]]''', i de fet anava a ser la seva mascota, però finalment l'equip es va decantar per un animal familiar, no fantàstic, com finalment ha estat el gat. Podeu veure la seva història[https://scratch.mit.edu/projects/273675374/ aquí]. Les persones creadores de Snap! van adoptar la mascota que havia estat rebutjada i abandonada.</p> <p style="text-align: justify;">La seva aparença té una versió original i una altra "en 3D" (són dos vestits diferents):</p> <p style="text-align: center">[[File:Alonzo.png|border|200px|Alonzo.png]]&nbsp;&nbsp;&nbsp;&nbsp; [[File:Alonzo3D.png|border|200px|Alonzo3D.png]]</p>  
La mascota de '''Snap!''' és una criatura fantàstica que es diu '''<span style="background-color:#FFFF00">Alonzo</span>''', en honor al matemàtic [https://ca.wikipedia.org/wiki/Alonzo_Church Alonzo Church], que va desenvolupar el [https://ca.wikipedia.org/wiki/Càlcul_lambda cálcul lambda]. Alonzo existeix també com a personatge a '''[[Ejercicio:_Introducción_a_Scratch|Scratch]]''', i de fet anava a ser la seva mascota, però finalment l'equip es va decantar per un animal familiar, no fantàstic, com finalment ha estat el gat. Podeu veure la seva història[https://scratch.mit.edu/projects/273675374/ aquí]. Les persones creadores de Snap! van adoptar la mascota que havia estat rebutjada i abandonada.
+
 
+
La seva aparença té una versió original i una altra "en 3D" (són dos vestits diferents):
+
<p style="text-align: center">[[File:Alonzo.png|border|200px|Alonzo.png]]&nbsp;&nbsp;&nbsp;&nbsp; [[File:Alonzo3D.png|border|200px|Alonzo3D.png]]</p>  
+
 
Altres mascotes d'entorns de programació educativa també són animals més o menys fantàstics, com la [[Introducció_a_MicroBlocks#Mascota|Rosa]] de [[Introducció_a_MicroBlocks|MicroBlocks]].
 
Altres mascotes d'entorns de programació educativa també són animals més o menys fantàstics, com la [[Introducció_a_MicroBlocks#Mascota|Rosa]] de [[Introducció_a_MicroBlocks|MicroBlocks]].
  
 
== Funcions extres ==
 
== Funcions extres ==
<p style="text-align: justify">Fins aquí hem vist les similituds entre ''Scratch'' i ''Snap!'', anem a veure les diferències.&nbsp;''Snap!'' disposa de '''funcions extres''' que el fan un entorn de programació més ric i complex. A continuació desenvoluparem les més rellevants com; la '''creació de blocs nous de programació''', '''llistes de primer ordre''' (realitzar llistes de llistes) i la '''vinculació d’objectes''' aconseguint així una nova forma. Veiem doncs, aquestes funcions de forma més detallada:</p>  
+
<p style="text-align: justify">'''Snap!''' disposa de '''funcions extres''' que el fan un entorn de programació més ric i complex que Scratch. Les més rellevants són&nbsp;la '''creació de blocs nous de programació''', '''llistes de primer ordre''' (llistes de llistes) i la '''vinculació d’objectes'''.&nbsp;</p>  
<span style="font-size:medium">Creació de nous blocs</span>
+
=== Creació de nous blocs ===
<p style="text-align: justify">Per aprendre a crear un bloc nou, ho farem a través d’un exemple senzill. Imaginem que volem disposar d’un bloc que dibuixi un quadrat cada vegada que li indiquem;</p> <p style="text-align: justify">1. Seleccionem la pestanya “variables” i escollim la última opció de la llista “crear un bloc”.</p> <p style="text-align: justify">&nbsp;[[File:SN2.PNG|RTENOTITLE]]</p>  
+
<p style="text-align: justify">Creació d'un bloc nou. Exemple:</p> <p style="text-align: justify">1. Selecciona&nbsp;la pestanya “variables” i&nbsp;el botó en color gris al final de tot: “crear un bloc”.<br/> [[File:SN2.PNG|border|center|150px|RTENOTITLE]]</p>  
2. Se’ns obra una pantalla secundaria amb diferents opcions; anomenar el bloc, agrupar-lo segons una de les categories que conté la paleta de blocs i escollir el tipus (''Scratch'' només té comanda) . També hi ha la possibilitat de decidir si el bloc estarà disponible per a tots els objectes o només per aquest en concret que estem programant. Així doncs, en el nostre cas escrivim com a nom del bloc: “'''Quadrat'''” i seleccionarem la categoria “'''Llapis'''” (tenint en compte que l’objectiu plantejat és dibuixar).
+
2. A una finestra emergent es pot&nbsp;anomenar el bloc, posar-lo a una categoria de blocs i escollir el tipus (la forma). També hi ha la possibilitat de decidir si el bloc estarà disponible per a tots els objectes o només on s'està creant. Per exemple es pot posar de nom “'''Quadrat'''” i&nbsp; la categoria “'''Llapis'''”:
  
[[File:SN1.PNG|200px|RTENOTITLE]]
+
[[File:SN1.PNG|frame|center|200px|SN1.PNG]]
<p style="text-align: justify">Pel que fa a la definició de la forma, fixem-nos que se’ns dóna la opció de seleccionar tres tipus de blocs diferents; una'''comanda''', un '''reportador''' i un '''predicat'''. &nbsp;La majoria de blocs que representen una '''comanda''', tenen forma de peça de trancaclosques. Aquest tipus de blocs respresenten l’execució d’una acció. Per exemple, moure’t "x" passes o repetir l’acció "x" vegades. Aquests blocs tenen una casella dins, en forma d'oval blanc, que&nbsp;s’anomena input (entrada) que permet modificar el nombre que determina les vegades que s’executarà l’acció.</p>  
+
<p style="text-align: justify; margin-left: 40px;">La forma indica el tipus de bloc:&nbsp;'''comanda''', '''reportador'''&nbsp;o&nbsp;'''predicat'''. La majoria de blocs que representen una '''comanda o execució d'una acció'''&nbsp;tenen forma de peça de trancaclosques. Per exemple, "mou-te 10&nbsp;passes". Aquests blocs poden tenir&nbsp;un oval blanc a dins&nbsp;que&nbsp;s’anomena "entrada" i determina el nombre de vegades que s’executarà l’acció, en aquest cas, deu vegades:</p>  
'''&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;[[File:Image10.png|100px|RTENOTITLE]]'''
+
'''&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;[[File:Image10.png|border|center|150px|RTENOTITLE]]'''
 +
<p style="margin-left: 40px; text-align: justify;">El '''reportador''' té forma d’oval. Quan s’executa,&nbsp;a més de realitzar una acció,&nbsp;informa d’un valor. En prémer sobre ell, apareix en forma de globus el valor que informa o reporta. Per exemple:</p>
 +
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;[[File:Image12.png|border|center|100px|RTENOTITLE]]
 +
<p style="margin-left: 40px; text-align: justify;">El '''predicat'''&nbsp; té forma hexagonal. Reporta una resposta binaria (veritat o fals) o [https://ca.wikipedia.org/wiki/Àlgebra_de_Boole booleana.]</p>
 +
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; [[File:Image36.png|border|center|120px|RTENOTITLE]]
 +
<p style="text-align: justify">3. Prémer el botó "D’acord". El bloc s'afegeix al final dels blocs de la categoria indicada.<br/> [[File:Sn3.PNG|frame|center|300px|Sn3.PNG]]&nbsp;</p> <p style="text-align: justify">4. Afegir el programa del bloc Per exemple, per dibuixar&nbsp;un quadrat''':'''</p>
 +
[[File:Image62.png|frame|center|300px|Image62.png]]
  
&nbsp; &nbsp;<span style="font-size:smaller">&nbsp;(Exemple de bloc que representen una comanda)</span>
+
5. Un exemple d'ús del bloc creat:
<p style="text-align: justify">El '''reportador''' el veiem representat en forma d’oval. S’anomena així&nbsp;degut que quan s’executa,&nbsp; a més de realitzar una acció,&nbsp;informa d’un valor. Si arrosseguem un bloc d’aquest tipus a l’àrea de treball, veiem que al prémer sobre ell, apareix en forma de globus el valor que informa (reporta).</p>
+
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;[[File:Image12.png|50px|RTENOTITLE]]
+
  
&nbsp; <span style="font-size:smaller">&nbsp;(Exemple de bloc que representen un reportador)</span>
+
&nbsp;[[File:Image63.png|frame|center|400px|Image63.png]]
<p style="text-align: justify">Per últim el '''predicat''' &nbsp;és un bloc que reporta una resposta binaria (veritat o fals) i es troba representat en forma hexagonal. El terme tècnic verdader o fals és un booleà.</p>
+
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; [[File:Image36.png|100px|RTENOTITLE]]
+
<p style="text-align: justify"><span style="font-size:smaller">&nbsp; &nbsp; (Exemple de bloc que representen un predicat)</span></p> <p style="text-align: justify">3. Al prémer d’acord, se’ns crea automàticament un bloc buit precedit pel nom que li hem assignat. Observem que aquest s’afegit al final de la categoria que li hem indicat quant&nbsp; &nbsp; &nbsp; &nbsp; l’hem creat.</p> <p style="text-align: justify">&nbsp;[[File:Sn3.PNG|RTENOTITLE]]&nbsp;</p> <p style="text-align: justify">4. Fins ara hem generat un bloc i li hem assignat un nom. El següent pas és realitzar la programació, que en el nostre cas és produir un programa perquè&nbsp;dibuixi un quadrat'''.'''</p>
+
[[File:Image62.png|350x250px|RTENOTITLE]]
+
  
5. Per últim, només ens queda definir el programa afegint el bloc d’inici, neteja i baixa el llapis. Premem la bandera i comprovem que això succeeixi.
+
6. Es poden afegir paràmetres al bloc. Per exemple, per dibuixar quadrats de diferents mides, s'obre l’editor de blocs de “Quadrat” i es prem el signe +. En aquest espai es poden crear tants paràmetres com calgui:<br/> [[File:Quadrat.PNG|center|RTENOTITLE]]
 +
<p style="text-align: justify; margin-left: 40px;">En prémer el signe +, emergeix&nbsp;una nova pantalla on assignar el nom del paràmetre i definir-lo. Per exemple,&nbsp; “mida” com a nom i definir que contingui una casella per inserir nombres. El nombre indicarà la mida del costat del quadrat:</p>
 +
&nbsp;[[File:Image58.png|frame|center|350x250px|Image58.png]]&nbsp;[[File:Image49.png|frame|center|350x250px|Image49.png]]&nbsp;<br/> <br/> Falta assignar-li una&nbsp;variable, per exemple “mida”, als passos que haurà de moure’s l’objecte: &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
 +
<p style="text-align: justify">[[File:Image89.png|frame|center|350x250px|Image89.png]]</p>
 +
Es pot provar amb difernts mides, per exemple 50, 70 i 100:&nbsp;
  
&nbsp;[[File:Image63.png|400x200px|RTENOTITLE]]
+
[[File:Image63.png|frame|center|400x200px|Image63.png]]
 +
<p style="text-align: center;">&nbsp;[[File:Image65.png|frame|center|400x200px|Image65.png]]</p>
 +
==== Aspecte del bloc ====
  
6. Augmentem la complexitat del bloc afegint-hi paràmetres. Suposem que volem aconseguir dibuixar quadrats de diferents mides. Obrim l’editor de blocs de “Quadrat” i premem el signe + que ens apareix al costat del mateix nom. En aquest espai podem crear tants paràmetres com vulguem, seguint el mateix procediment &nbsp;que durem a terme a continuació.
+
A '''Snap!''' es pot modificar l’'''aspecte gràfic del bloc''' que es mostra: de mostrar-lo&nbsp;descrit en text '''[[File:Image66.png|100px|RTENOTITLE]]'''&nbsp;a representar-lo mitjançant un icona&nbsp;[[File:Image15.png|RTENOTITLE]]'''.&nbsp; &nbsp; &nbsp; &nbsp;'''
 +
<p style="text-align: justify">'''NOTA''': "Bloc" fa referència tant a la forma gràfica i a l’acció que aquest porta&nbsp;a terme. És important distingir entre aquests dos conceptes&nbsp;per evitar confusions. Aquest apartat es refereix a&nbsp;la part gràfica visualitzada&nbsp;a la pantalla, no al seu interior.</p>
 +
==== Addició d'icones del programa ====
 +
<p style="text-align: justify">Per exemple, a l’editor del bloc “Quadrat”, picant amb el botó dret del ratolí es desplega una llista d’icones de diferents representacions gràfiques. La primera&nbsp;és un quadrat&nbsp;i permet modificar&nbsp;la nomenclatura amb text (paraula "quadrat") per un símbol (dibuix del quadrat):&nbsp;</p> <p style="text-align: center;">[[File:Image62.png|border|350px|RTENOTITLE]]&nbsp; &nbsp;[[File:Image72.png|350px|RTENOTITLE]]</p> <p style="text-align: justify">Es pot modificar la '''mida i el color''' del '''símbol'''&nbsp;inserit. Per la mida, a l’editor de blocs es&nbsp;modifica el nom que ja hi ha inscrit, afegint un guió seguit d’un nombre. Aquest nombre és&nbsp;la mida de la icona:<br/> [[File:Image69.png|center|RTENOTITLE]]</p> <p style="text-align: justify">Pel color, cal afegir el nombre&nbsp;del color, segons el&nbsp;[https://www.w3schools.com/colors/colors_rgb.asp mesurador RGB] (red, green, blue).&nbsp;Per exemple, el vermell es correspon amb (255,0,0):</p> <p style="text-align: center;">&nbsp;[[File:Image70.png|border|300x250px|Image70.png]]&nbsp; &nbsp;[[File:Image15.png|RTENOTITLE]]</p>
 +
==== Caràcters "unicode" i emoticones ====
 +
<p style="text-align: justify">A&nbsp;'''Snap! '''es pot substituir el text dels blocs creats, o afegir,&nbsp;caràcters “unicode”, i en particular&nbsp;ara les '''emoticones'''.</p> <p style="text-align: justify">Es poden trobar emoticones a biblioteques d’Internet i copiar-les, tornar&nbsp;a la nomenclatura del bloc,&nbsp;esborrar&nbsp;el text escrit i enganxar&nbsp;al requadre en blanc la icona,&nbsp;escribint&nbsp;davant d'aquesta el símbol “$”. Es pot modificar la mida de la icona amb el procediment general, explicat abans.</p> <p style="text-align: justify">Exemple:</p> <p style="text-align: justify">1. B[https://unicode.org/emoji/charts/full-emoji-list.html iblioteca d’icones (5.0)]'''.'''</p> <p style="text-align: justify">2. Escollir&nbsp;una emoticona i copiar-la,&nbsp;fent click amb el botó dret sobre ella:</p>
 +
#Tornar&nbsp;a '''Snap!''' i enganxar&nbsp;l'emoticona a l’espai del nom del bloc:'''&nbsp;'''
  
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;[[File:Quadrat.PNG|RTENOTITLE]]
+
'''&nbsp; &nbsp; [[File:Emotic1.PNG|300px|Emotic1.PNG]]'''
<p style="text-align: justify">Observem que al prémer el signe + se’ns obra una nova pantalla on &nbsp;hem d’assignar el nom del paràmetre i definir aquest segons l’ordre que necessitem que executi. Escriurem “mida” com a nom i definirem que volem que aquest paràmetre contingui una casella&nbsp;que permeti inserir nombres.</p>
+
&nbsp;[[File:Image58.png|350x250px|RTENOTITLE]]&nbsp;[[File:Image49.png|350x250px|Image49.png]]&nbsp;<br/> <br/> Fins aquí hem creat un espai on podrem entrar un nombre que definirà la mida del quadrat. Si ho provem ens adonem que no funciona, i això és degut que ens falta assignar-li la variable “mida” als passos que haurà de moure’s l’objecte. Veiem-ho en el següent pas;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
+
<p style="text-align: justify">[[File:Image89.png|350x250px|RTENOTITLE]]</p>
+
Provem d’executar-ho de nou i ens apareix un quadrat de mida 50, fem el mateix amb mida 70 i 100 per comprovar que el paràmetre utilitzat&nbsp;funciona i observem el resultat de la imatges inferiors:&nbsp;
+
  
[[File:Image63.png|400x200px|RTENOTITLE]]
+
'''&nbsp; &nbsp; &nbsp;''' &nbsp; &nbsp;2. Clicar "OK" i veure el resultat:
  
&nbsp;[[File:Image65.png|400x200px|RTENOTITLE]]
+
&nbsp; &nbsp;&nbsp;[[File:Emotic2.PNG|RTENOTITLE]]
  
Aquest és només un exemple de les possibilitats immenses que disposa ''Snap!'' per crear blocs propis. És possible definir múltiples paràmetres i de tipus complexes com llistes, codi o altres objectes.
+
==== Exportació de blocs per a usos a altres programes ====
 +
<p style="text-align: justify">Exportar un bloc serveix per&nbsp;utilitzar-lo sempre que sigui necessari a&nbsp;projectes posteriors. Es fa amb l'opció "exportar els blocs" que hi ha a la icona del full de paper, que obre una pestanya amb tots els blocs que creats al&nbsp;projecte. En l'exemple, només un. Si es&nbsp;selecciona&nbsp;i prem&nbsp;“D’acord”, automàticament es genera un arxiu '''xml''' del bloc:</p> <p style="text-align: justify">&nbsp;[[File:Image17.png|border|center|RTENOTITLE]]</p>
 +
&nbsp;[[File:Image18.png|border|center|RTENOTITLE]]
 +
<p style="text-align: center">&nbsp;</p>
 +
=== Llistes de llistes ===
  
==== <span style="font-size:medium">Aspecte</span> ====
+
A '''Snap!''' les llistes (i el codi o els blocs) tenen la mateixa entitat que els nombres o el text, és el que es coneix com a'''llistes de primera classe'''. Les llistes poden ser el valor d'una variable, l'entrada i sortida d'un procediment o ser anònimes, entres d'altres característiques. Aquesta característica dóna molta flexibilitat i per exemple permet crear llistes de llistes o llistes amb continguts heterogenis.
 
+
A més de crear nous blocs, ''Snap!'' permet modificar l’'''aspecte gràfic del bloc''' que es mostra. Passem de mostrar-lo&nbsp;descrit en text '''[[File:Image66.png|60px|RTENOTITLE]]'''&nbsp;a representar-lo mitjançant un icona&nbsp;'''[[File:Image67.png|60px|RTENOTITLE]].&nbsp; &nbsp; &nbsp; &nbsp;'''
+
<p style="text-align: justify">Quan parlem de bloc, fem referència tant a la forma gràfica que es visualitza a la pantalla, com també el procediment de l’acció que aquest dur a terme. És important distingir entre aquests dos conceptes, per evitar confusions. En aquest apartat, parlem de la part gràfica que visualitzem a la pantalla (que no és el seu interior).</p> <p style="text-align: justify">Anem a veure-ho, tornem a l’editor del bloc “Quadrat” i picant amb el botó dret del ratolí se’ns desplega una llista d’icones de diferents representacions gràfiques. Seleccionem la primera (que és un quadrat) i veiem que se’ns ha modificat la nomenclatura del text per un símbol d’aquest . D’aquesta forma hem fet més visual el bloc.&nbsp;[[File:Image62.png|350px|RTENOTITLE]]&nbsp; &nbsp;[[File:Image72.png|350px|RTENOTITLE]]</p> <p style="text-align: justify">A més, també es pot modificar la '''mida i el color''' del '''símbol''' que hem inserit. Comencem per la mida, tornem a l’editor de blocs i modifiquem el nom que ja hi ha inscrit, afegint un guió seguit d’un nombre. Aquest nombre fà referència a la mida de la icona. Veiem la imatge inferior on hem modificat la mida del quadrat que es representa més avall;&nbsp;&nbsp;[[File:Image69.png|RTENOTITLE]]</p> <p style="text-align: justify">Pel que fa al color, haurem d’afegir el número del color que volem que sigui el quadrat darrere del número que defineix&nbsp;la mida. Per conèixer el nombre que correspon al color el podem consultar el [https://www.w3schools.com/colors/colors_rgb.asp mesurador RGB] (red, green, blue), on assenyales el color i t’apareixen els números que fan referència aquest.&nbsp;Nosaltres farem ús del vermell, que com veiem els números són (255,0,0).</p> <p style="text-align: justify">&nbsp;[[File:Image70.png|300x250px|RTENOTITLE]]&nbsp; &nbsp;[[File:Image15.png|RTENOTITLE]]</p>
+
*'''Caràcters "unicode"'''
+
<p style="text-align: justify">A bada de representar un bloc de programació a través d’una icona gràfica de les que ja disposa ''Snap!'', també és possible fer-ho mitjançant la importació de '''caràcters “unicode”''', com ara les emoticones.</p> <p style="text-align: justify">Cerquem emoticones a biblioteques d’Internet i un cop n’escollim una la copiem. Seguidament retornem a la nomenclatura del bloc i esborrem el que hi ha escrit. Enganxem al requadre en blanc la icona que hem copiat i escribim davant d'aquesta el símbol “$”. Si volem modificar la seva mida, reproduim el procés que hem executat anteriorment (guió seguit del número de la mida que volem que tingui l'objecte).&nbsp;&nbsp;A continuació en veiem l’exemple:</p> <p style="text-align: justify">1. Accedim a la [https://unicode.org/emoji/charts/full-emoji-list.html biblioteca d’icones (5.0)]'''.'''</p> <p style="text-align: justify">2. Escollim una emoticona i la copiem tot fent click amb el botó dret sobre aquesta:</p>
+
#Retornem a l’Snap! i enganxem el que hem copiat a l’espai del nom del bloc'''&nbsp;'''
+
 
+
'''&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;[[File:Emotic1.PNG|300px|Emotic1.PNG]]'''
+
 
+
'''&nbsp; &nbsp; &nbsp;''' &nbsp; &nbsp;2. Finalment ens retorna a un bloc representat de la següent manera;&nbsp; &nbsp;&nbsp;[[File:Emotic2.PNG|RTENOTITLE]]
+
 
+
*'''Exportació'''
+
<p style="text-align: justify">Per finalitzar l’apartat de creació d’un bloc, ens queda la seva exportació. Saber exportar un bloc resulta interessant, degut que un cop el tenim definit podem utilitzar-lo sempre que ens sigui necessari en projectes posteriors.</p> <p style="text-align: justify">Posem-ho en pràctica. Anem a la icona del full en blanc i seleccionem la opció “exportar els blocs”. Se’ns obra una pestanya on ens apareixen tots els blocs que hem creat en aquest projecte. En aquest cas, només un. El seleccionem i premem “d’acord”. Automàticament se’ns genera un arxiu xml que fa referència al bloc.</p> <p style="text-align: justify">&nbsp;[[File:Image17.png|RTENOTITLE]]</p>
+
&nbsp;[[File:Image18.png|RTENOTITLE]]
+
<p style="text-align: center">&nbsp;</p>
+
==== Llistes de primer ordre ====
+
  
La funció que et permet executar ''Snap!'' és la de crear llistes de primer ordre, és a dir, construir llistes dins d’altres llistes.A ''Snap!'' les llistes (i el codi o els blocs) tenen la mateixa entitat que els nombres o el text, és el que es coneix com a llistes de primera classe. Les llistes poden ser el valor d'una variable, l'entrada i sortida d'un procediment o ser anònimes, entres d'altres característiques. Aquesta característica dóna molta flexibilitat i permet per exemple crear llistes de llistes o llistes amb continguts heterogenis. Desenvoluparem l’explicació a través de la realització d’un dels exemples pràctics que conté ''Snap!''. Aquest consisteix en fer un programa que traci un recorregut en forma de "V" i dibuixi a cadascun dels extrems de la lletra una figura geomètrica. Per fer-ho, caldrà que creem una llista que determini les figures geomètriques anomenades. Per això, ens trobem davant d’una llista que conté blocs de codi, que com hem dit també es un element de primera classe.
+
Per a aplicar-ho, per exemple, es pot fer un programa que a&nbsp;un recorregut en forma de "V" dibuixi, a cadascun dels extrems,&nbsp; una figura geomètrica. Es crea una llista que determini les figures geomètriques, és a dir, que conté blocs de codi, que a '''Snap! '''és un element de primera classe.
<p style="text-align: justify">Comencem!</p> <p style="text-align: justify">En primer lloc, construirem tres blocs nous; un que executi un quadrat, un altre un hexàgon i per últim una estrella.&nbsp;</p> <p style="text-align: justify">'''&nbsp;[[File:Image62.png|300px|Image62.png]]&nbsp; &nbsp; &nbsp; &nbsp;[[File:Image80.png|299px|Image80.png]]&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;[[File:Image87.png|300px|Image87.png]]'''</p> <p style="text-align: justify">Un cop creats els tres blocs que permeten construir cadascun dels tres polígons, realitzarem un altre bloc que determinarà el recorregut en forma de "V" que ha d’executar l’objecte abans de dibuixar els polígons. L’anomenarem “V” per reconeix-el fàcilment.</p>  
+
<p style="text-align: justify; margin-left: 40px;">1. En primer lloc, es construeixen&nbsp;tres blocs:&nbsp;un que executi un quadrat, un altre un hexàgon i l'altre&nbsp;una estrella:</p> <p style="text-align: justify; margin-left: 40px;">'''&nbsp;[[File:Image62.png|300px|Image62.png]]&nbsp; &nbsp; &nbsp; &nbsp;[[File:Image80.png|299px|Image80.png]]&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;[[File:Image87.png|300px|Image87.png]]'''</p> <p style="text-align: justify; margin-left: 40px;">2. Fer&nbsp;un altre bloc que determini&nbsp;el recorregut en forma de "V":</p>  
 
'''&nbsp;[[File:Image19.png|150px|Image19.png]]'''
 
'''&nbsp;[[File:Image19.png|150px|Image19.png]]'''
  
Comprovarem que els blocs programats realitzen la forma de la &nbsp;“V” tal com li hem ordenat.
+
3. Es pot comprovar&nbsp;que els blocs programats efectivament realitzen la forma de la &nbsp;“V”:
  
'''&nbsp;[[File:Image20.png|RTENOTITLE]][[File:Image48.png|RTENOTITLE]]'''
+
'''&nbsp;[[File:Image20.png|RTENOTITLE]][[File:Image48.png|frame|Image48.png]]'''
<p style="text-align: justify">El següent pas és crear una llista de formes geomètriques. Comencem per crear una variable que anomenem &nbsp;[[File:Image39.png|50px|Image39.png]]&nbsp;&nbsp;i li assignem que aquesta sigui el valor d’una llista buida &nbsp;(és a dir, indiquem que la variable&nbsp;[[File:Image39.png|50px|Image39.png]]esdevingui una llista). &nbsp;Això només es pot fer si les &nbsp;llistes són de primera classe, com els nombres o el text.</p> <p style="text-align: justify">'''[[File:Image9.png|RTENOTITLE]]''</p> <p style="text-align: justify">Fins aquí tenim creada una llista buida, així que el següent pas és emplenar-la. En l'exemple que estem desenvolupant hem d'afegir-hi els blocs dels polígons que hem construït a l'inici:&nbsp;<span style="font-family:arial,helvetica,sans-serif">'''''[[File:Image14.png|50px|Image14.png]],[[File:Image4.png|50px|Image4.png]]&nbsp;'''''</span>i<span style="font-family:arial,helvetica,sans-serif">'''''&nbsp;&nbsp;[[File:Image50.png|50px|Image50.png]].'''''</span></p> <p style="text-align: justify">Seleccionem la variable&nbsp;<span style="font-family:arial,helvetica,sans-serif">'''''[[File:Image71.png|90px|Image71.png]]'''''</span> &nbsp; &nbsp; i li indiquem que volem afegir&nbsp;<span style="font-family:arial,helvetica,sans-serif">'''''[[File:Image14.png|50px|Image14.png]]'''''</span>com element de la llista. Com que la llista l'hem anomenat&nbsp; <span style="font-family:arial,helvetica,sans-serif">'''''[[File:Image39.png|50px|Image39.png]]'''''</span>&nbsp;el resultat final serà&nbsp;<span style="font-family:arial,helvetica,sans-serif">'''''[[File:Image60.png|150px|Image60.png]]&nbsp;.'''''</span></p> <p style="text-align: justify">Per poder inserir el bloc&nbsp;<span style="font-family:arial,helvetica,sans-serif">'''''[[File:Image14.png|50px|Image14.png]]&nbsp;'''''</span>"dins la variable, és necessari encapsular-lo":&nbsp;'''[[File:Image29.png|70px|Image29.png]].'''</p>  
+
<p style="text-align: justify; margin-left: 40px;">4. Crear una llista de formes geomètriques. Primer&nbsp;crear una variable&nbsp;&nbsp;[[File:Image39.png|50px|Image39.png]]&nbsp;i donar-li per&nbsp;valor una llista buida. És a dir, indicar&nbsp;que la variable&nbsp;[[File:Image39.png|50px|Image39.png]]esdevingui una llista. &nbsp;Això només es pot fer si les&nbsp;llistes són de primera classe, com els nombres o el text.</p> <p style="text-align: justify; margin-left: 40px;">'''[[File:Image9.png|RTENOTITLE]]'''</p> <p style="text-align: justify; margin-left: 40px;">'''''5.'''''Omplir la llista afegint-hi els blocs dels polígons&nbsp;<span style="font-family:arial,helvetica,sans-serif">[[File:Image14.png|50px|Image14.png]],[[File:Image4.png|50px|Image4.png]]&nbsp;</span>i<span style="font-family:arial,helvetica,sans-serif">&nbsp;&nbsp;[[File:Image50.png|50px|Image50.png]].</span></p> <p style="text-align: justify; margin-left: 40px;">6. Al bloc&nbsp;<span style="font-family:arial,helvetica,sans-serif">[[File:Image71.png|90px|Image71.png]]</span>&nbsp;indicar-li&nbsp;que es vol&nbsp;afegir&nbsp;<span style="font-family:arial,helvetica,sans-serif">[[File:Image14.png|50px|Image14.png]]</span>com element de la llista. Com que la llista s'anomena&nbsp;&nbsp;[[File:Image39.png|50px|Image39.png]],&nbsp;el resultat final és&nbsp;<span style="font-family:arial,helvetica,sans-serif">[[File:Image60.png|150px|Image60.png]]&nbsp;.</span>&nbsp;Fixa't que per&nbsp;inserir el bloc&nbsp;<span style="font-family:arial,helvetica,sans-serif">[[File:Image14.png|50px|Image14.png]]</span>, és necessari "'''encapsular-lo'''":&nbsp;'''[[File:Image29.png|70px|Image29.png]]'''. Es fa axí:</p>  
 
'''[[File:Image37.png|RTENOTITLE]]'''
 
'''[[File:Image37.png|RTENOTITLE]]'''
<p style="text-align: justify">Encapsular un bloc serveix per mostrar la informació que aquest conté de forma literal. En canvi, sense encapsular-lo el bloc fa la funció d’interpretar el resultat del contingut que conté. A tall d’exemple, observem que al prémer el quadrat que està encapsulat, el resultat que obtenim és el bloc en si mateix. En canvi quan premem el bloc quadrat sense encapsular veiem que executa el resultat del programa que conté a dins (és a dir dibuixar un quadrat).</p>  
+
<p style="text-align: justify; margin-left: 80px;">'''NOTA''': Encapsular un bloc serveix per mostrar la informació que aquest conté de forma'''literal'''. En canvi, sense encapsular,&nbsp;el bloc fa la funció d’interpretar el resultat del contingut que conté. A tall d’exemple, observa&nbsp;que en&nbsp;prémer el bloc que està encapsulat, el resultat és el bloc en ell&nbsp;mateix. En canvi,&nbsp;prement&nbsp;el bloc sense encapsular, executa el resultat del programa que conté a dins, és a dir, dibuixa&nbsp;un quadrat.</p>  
[[File:Image38.png|200px|Image38.png]]&nbsp; &nbsp; &nbsp;&nbsp;[[File:Image40.png|RTENOTITLE]]
+
[[File:Image38.png|200px|Image38.png]]&nbsp; &nbsp; &nbsp;&nbsp;[[File:Image40.png|frame|Image40.png]]
 +
 
 +
6. De nou es possible afegir aquests elements a una llista perquè el codi també es un element de primera classe dintre de '''Snap!'''. Repetint&nbsp;el procés amb l'hexàgon i l'estrella queda el següent resultat:
  
&nbsp;
 
<p style="text-align: justify">De nou es possible afegir aquests elements a una llista perquè el codi també es un element de primera classe dintre d’Snap!. Repetim aquest procés amb els dos polígons restants que havíem creat i ens queda el següent resultat;</p>
 
 
&nbsp;[[File:Image41.png|RTENOTITLE]]
 
&nbsp;[[File:Image41.png|RTENOTITLE]]
  
Per últim, només ens queda modificar el codi del bloc “V”, tot indicant que quan el cursor es troba a la posició dels extrems d’aquesta lletra, creï un element a l’atzar dels tres que hi ha a la llista “formes”.&nbsp; &nbsp;&nbsp;
+
7. Falta&nbsp;modificar el codi del bloc “V”, indicant&nbsp;que quan el cursor es trobi&nbsp;a una&nbsp;posició dels extrems, dibuixi&nbsp;un element a l’atzar dels tres que hi ha a la llista “formes”:&nbsp; &nbsp;
  
 
'''&nbsp;[[File:Image19.png|RTENOTITLE]]'''
 
'''&nbsp;[[File:Image19.png|RTENOTITLE]]'''
  
Ara ja podem anar provant combinacions diferents tot prement la tecla “espai”. A continuació veiem algun exemple del que forma part del resultat final;&nbsp; &nbsp; &nbsp;
+
8. Es pot provar prement la tecla “espai”. Exemples de resultats dibuixats són:&nbsp; &nbsp;&nbsp;
  
'''&nbsp;[[File:Image42.png|RTENOTITLE]]&nbsp;[[File:Image43.png|RTENOTITLE]]'''
+
'''&nbsp;[[File:Image42.png|frame|center|Image42.png]]&nbsp; &nbsp;[[File:Image43.png|frame|center|Image43.png]]'''
  
 
'''&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; &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; &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;'''
  
L'exemple va una mica més enllà i contempla la possibilitat d'afegir el bloc V com a un element més de la llista formes. Això provoca un comportament recursiu i genera uns resultats molt interessants.
+
9. L'exemple està&nbsp;a '''Snap!''' Va una mica més enllà i contempla la possibilitat d'afegir el bloc V com a un element més de la llista formes. Això provoca un comportament '''recursiu.&nbsp;'''Aquí es pot consultar el programa generat directament a '''Snap!'''
  
 
[[File:Image74.png|RTENOTITLE]]
 
[[File:Image74.png|RTENOTITLE]]
 
Aquí podeu consultar el programa generat directament a l’Snap!.
 
 
&nbsp;
 
 
&nbsp;
 
  
 
=== Unió d’objectes ===
 
=== Unió d’objectes ===
<p style="text-align: justify">La tercera funció que no té'''Scratch''' i sí que té '''Snap!''' és la d’unir objectes entre ells de manera que es moguin conjuntament. Sovint ens pot resultar útil unir objectes per a crear una composició que es pugui moure conjuntament generant un nou objecte, com si es tractessin d’articulacions separades d’un cos principal. Pot servir per a fer un personatge que camini i tingui</p> <p style="text-align: justify">Durem a terme, com a exemple, la construcció d’una nòria virtual.</p>  
+
<p style="text-align: justify">La tercera funció que no té&nbsp;'''Scratch''' i sí que té '''Snap!''' és la d’unir objectes entre ells de manera que es moguin conjuntament. Sovint pot resultar útil per a crear una composició que es pugui moure conjuntament generant un nou objecte, com si es tractessin d’articulacions separades d’un cos principal. Pot servir per a fer un personatge que camini i tingui</p> <p style="text-align: justify">Es pot dur a terme, com a exemple, la construcció d’una nòria virtual.</p>  
 
== Activitat: Faig girar una nòria ==
 
== Activitat: Faig girar una nòria ==
 
<p style="text-align: justify">Primer dibuixarem l’estructura que subjecte la nòria a l’escenari. Ens dirigim a la pestanya “fons” i fem clic sobre el pinzell&nbsp;[[File:Image11.png|RTENOTITLE]]&nbsp;&nbsp;&nbsp;per editar aquest. Dibuixarem un triangle amb dos dels seus costat més allargats que els vèrtex inferiors tal hi com es mostra a la imatge inferior. Fixem-nos que podem editar el gruix del pinzell i color.</p>  
 
<p style="text-align: justify">Primer dibuixarem l’estructura que subjecte la nòria a l’escenari. Ens dirigim a la pestanya “fons” i fem clic sobre el pinzell&nbsp;[[File:Image11.png|RTENOTITLE]]&nbsp;&nbsp;&nbsp;per editar aquest. Dibuixarem un triangle amb dos dels seus costat més allargats que els vèrtex inferiors tal hi com es mostra a la imatge inferior. Fixem-nos que podem editar el gruix del pinzell i color.</p>  

Revision as of 00:11, 18 June 2019

Image24.jpg
Snap!, anteriorment anomenat BYOB (de l'anglès Built Your Own Blocks, construeix els teu propis blocs), és un llenguatge de programació visual per blocs inspirat en el model d’Scratch i en el llenguatge textual Scheme. Comparteix amb Scratch la interfície del programari i la manera de programar: en ambdós casos s'organitzen indicacions a través de l’encaix de blocs amb formes de colors, formant així programes que es poden visualitzar virtualment en temps real.

Es pot usar en línia sense necessitat d’instal·lació i, en estar programada amb JavaScript i HTML5, des de qualsevol navegador. 

El projecte està desenvolupat per Jens Mönig i Brian Harvey a la Universitat de Califòrnia a Berkeley, amb la col·laboració d’estudiants d’altres universitats d’arreu del món.

Accès i registre

Per accedir a Snap! cal anar a la  web oficial  i prémer l'opció “Run Snap! Now!”. Un cop dins, és interessant registrar-se, ja que així es poden guardar els projectes creats, compartir-los i veure els realitzats per altres persones. Per registrar-te, fes clic sobre la icona representada amb un núvol i omple les teves dades a la finestreta emergent.

 
RTENOTITLE
  
RTENOTITLE

Icones del menú principal d’Snap!:

La icona representada amb un full de paper serveix per obrir projectes d’exemple de la biblioteca, guardar-ne de nous, importar-ne o exportar-ne, desar-los i importat vestits o sons a les nostres creacions.

 
RTENOTITLE

La icona amb una roda dentada permet determinar l’idioma, la mida dels blocs i de l’escenari, activar el turbo perquè les accions programades s’executin més ràpid i modificar el color de fons de negre a blanc (amb l'opció "Disseny pla"), entre altres opcions:

 

RTENOTITLE

Usant la tecla de canvi de majúscules (⇧) mentre es clica amb el ratolí,  es pot accedir a opcions avançades per cadascun dels menús anteriors.

Interfície

La interfície dSnap! està estructurada per àrees:                  

                                                                                                                                                            
Interfície 1.PNG
                                                                                            

Mascota

La mascota de Snap! és una criatura fantàstica que es diu Alonzo, en honor al matemàtic Alonzo Church, que va desenvolupar el cálcul lambda. Alonzo existeix també com a personatge a Scratch, i de fet anava a ser la seva mascota, però finalment l'equip es va decantar per un animal familiar, no fantàstic, com finalment ha estat el gat. Podeu veure la seva històriaaquí. Les persones creadores de Snap! van adoptar la mascota que havia estat rebutjada i abandonada.

La seva aparença té una versió original i una altra "en 3D" (són dos vestits diferents):

Alonzo.png     Alonzo3D.png

Altres mascotes d'entorns de programació educativa també són animals més o menys fantàstics, com la Rosa de MicroBlocks.

Funcions extres

Snap! disposa de funcions extres que el fan un entorn de programació més ric i complex que Scratch. Les més rellevants són la creació de blocs nous de programació, llistes de primer ordre (llistes de llistes) i la vinculació d’objectes

Creació de nous blocs

Creació d'un bloc nou. Exemple:

1. Selecciona la pestanya “variables” i el botó en color gris al final de tot: “crear un bloc”.

RTENOTITLE

2. A una finestra emergent es pot anomenar el bloc, posar-lo a una categoria de blocs i escollir el tipus (la forma). També hi ha la possibilitat de decidir si el bloc estarà disponible per a tots els objectes o només on s'està creant. Per exemple es pot posar de nom “Quadrat” i  la categoria “Llapis”:

SN1.PNG

La forma indica el tipus de bloc: comanda, reportador o predicat. La majoria de blocs que representen una comanda o execució d'una acció tenen forma de peça de trancaclosques. Per exemple, "mou-te 10 passes". Aquests blocs poden tenir un oval blanc a dins que s’anomena "entrada" i determina el nombre de vegades que s’executarà l’acció, en aquest cas, deu vegades:

                       
RTENOTITLE

El reportador té forma d’oval. Quan s’executa, a més de realitzar una acció, informa d’un valor. En prémer sobre ell, apareix en forma de globus el valor que informa o reporta. Per exemple:

                            
RTENOTITLE

El predicat  té forma hexagonal. Reporta una resposta binaria (veritat o fals) o booleana.

                 
RTENOTITLE

3. Prémer el botó "D’acord". El bloc s'afegeix al final dels blocs de la categoria indicada.

Sn3.PNG
 

4. Afegir el programa del bloc Per exemple, per dibuixar un quadrat:

Image62.png

5. Un exemple d'ús del bloc creat:

 
Image63.png
6. Es poden afegir paràmetres al bloc. Per exemple, per dibuixar quadrats de diferents mides, s'obre l’editor de blocs de “Quadrat” i es prem el signe +. En aquest espai es poden crear tants paràmetres com calgui:
RTENOTITLE

En prémer el signe +, emergeix una nova pantalla on assignar el nom del paràmetre i definir-lo. Per exemple,  “mida” com a nom i definir que contingui una casella per inserir nombres. El nombre indicarà la mida del costat del quadrat:

 
Image58.png
 
Image49.png
 

Falta assignar-li una variable, per exemple “mida”, als passos que haurà de moure’s l’objecte:          

Image89.png

Es pot provar amb difernts mides, per exemple 50, 70 i 100: 

Image63.png

 

Image65.png

Aspecte del bloc

A Snap! es pot modificar l’aspecte gràfic del bloc que es mostra: de mostrar-lo descrit en text RTENOTITLE a representar-lo mitjançant un icona RTENOTITLE.       

NOTA: "Bloc" fa referència tant a la forma gràfica i a l’acció que aquest porta a terme. És important distingir entre aquests dos conceptes per evitar confusions. Aquest apartat es refereix a la part gràfica visualitzada a la pantalla, no al seu interior.

Addició d'icones del programa

Per exemple, a l’editor del bloc “Quadrat”, picant amb el botó dret del ratolí es desplega una llista d’icones de diferents representacions gràfiques. La primera és un quadrat i permet modificar la nomenclatura amb text (paraula "quadrat") per un símbol (dibuix del quadrat): 

RTENOTITLE   RTENOTITLE

Es pot modificar la mida i el color del símbol inserit. Per la mida, a l’editor de blocs es modifica el nom que ja hi ha inscrit, afegint un guió seguit d’un nombre. Aquest nombre és la mida de la icona:

RTENOTITLE

Pel color, cal afegir el nombre del color, segons el mesurador RGB (red, green, blue). Per exemple, el vermell es correspon amb (255,0,0):

 Image70.png   RTENOTITLE

Caràcters "unicode" i emoticones

Snap! es pot substituir el text dels blocs creats, o afegir, caràcters “unicode”, i en particular ara les emoticones.

Es poden trobar emoticones a biblioteques d’Internet i copiar-les, tornar a la nomenclatura del bloc, esborrar el text escrit i enganxar al requadre en blanc la icona, escribint davant d'aquesta el símbol “$”. Es pot modificar la mida de la icona amb el procediment general, explicat abans.

Exemple:

1. Biblioteca d’icones (5.0).

2. Escollir una emoticona i copiar-la, fent click amb el botó dret sobre ella:

  1. Tornar a Snap! i enganxar l'emoticona a l’espai del nom del bloc: 

    Emotic1.PNG

         2. Clicar "OK" i veure el resultat:

    RTENOTITLE

Exportació de blocs per a usos a altres programes

Exportar un bloc serveix per utilitzar-lo sempre que sigui necessari a projectes posteriors. Es fa amb l'opció "exportar els blocs" que hi ha a la icona del full de paper, que obre una pestanya amb tots els blocs que creats al projecte. En l'exemple, només un. Si es selecciona i prem “D’acord”, automàticament es genera un arxiu xml del bloc:

 

RTENOTITLE

 
RTENOTITLE

 

Llistes de llistes

A Snap! les llistes (i el codi o els blocs) tenen la mateixa entitat que els nombres o el text, és el que es coneix com allistes de primera classe. Les llistes poden ser el valor d'una variable, l'entrada i sortida d'un procediment o ser anònimes, entres d'altres característiques. Aquesta característica dóna molta flexibilitat i per exemple permet crear llistes de llistes o llistes amb continguts heterogenis.

Per a aplicar-ho, per exemple, es pot fer un programa que a un recorregut en forma de "V" dibuixi, a cadascun dels extrems,  una figura geomètrica. Es crea una llista que determini les figures geomètriques, és a dir, que conté blocs de codi, que a Snap! és un element de primera classe.

1. En primer lloc, es construeixen tres blocs: un que executi un quadrat, un altre un hexàgon i l'altre una estrella:

 Image62.png       Image80.png        Image87.png

2. Fer un altre bloc que determini el recorregut en forma de "V":

 Image19.png

3. Es pot comprovar que els blocs programats efectivament realitzen la forma de la  “V”:

 RTENOTITLE
Image48.png

4. Crear una llista de formes geomètriques. Primer crear una variable  Image39.png i donar-li per valor una llista buida. És a dir, indicar que la variable Image39.pngesdevingui una llista.  Això només es pot fer si les llistes són de primera classe, com els nombres o el text.

RTENOTITLE

5.Omplir la llista afegint-hi els blocs dels polígons Image14.png,Image4.png i  Image50.png.

6. Al bloc Image71.png indicar-li que es vol afegir Image14.pngcom element de la llista. Com que la llista s'anomena  Image39.png, el resultat final és Image60.png . Fixa't que per inserir el bloc Image14.png, és necessari "encapsular-lo": Image29.png. Es fa axí:

RTENOTITLE

NOTA: Encapsular un bloc serveix per mostrar la informació que aquest conté de formaliteral. En canvi, sense encapsular, el bloc fa la funció d’interpretar el resultat del contingut que conté. A tall d’exemple, observa que en prémer el bloc que està encapsulat, el resultat és el bloc en ell mateix. En canvi, prement el bloc sense encapsular, executa el resultat del programa que conté a dins, és a dir, dibuixa un quadrat.

Image38.png      
Image40.png

6. De nou es possible afegir aquests elements a una llista perquè el codi també es un element de primera classe dintre de Snap!. Repetint el procés amb l'hexàgon i l'estrella queda el següent resultat:

 RTENOTITLE

7. Falta modificar el codi del bloc “V”, indicant que quan el cursor es trobi a una posició dels extrems, dibuixi un element a l’atzar dels tres que hi ha a la llista “formes”:   

 RTENOTITLE

8. Es pot provar prement la tecla “espai”. Exemples de resultats dibuixats són:    

 
Image42.png
   
Image43.png

                                                                                                                                                                                                                         

9. L'exemple està a Snap! Va una mica més enllà i contempla la possibilitat d'afegir el bloc V com a un element més de la llista formes. Això provoca un comportament recursiu. Aquí es pot consultar el programa generat directament a Snap!

RTENOTITLE

Unió d’objectes

La tercera funció que no té Scratch i sí que té Snap! és la d’unir objectes entre ells de manera que es moguin conjuntament. Sovint pot resultar útil per a crear una composició que es pugui moure conjuntament generant un nou objecte, com si es tractessin d’articulacions separades d’un cos principal. Pot servir per a fer un personatge que camini i tingui

Es pot dur a terme, com a exemple, la construcció d’una nòria virtual.

Activitat: Faig girar una nòria

Primer dibuixarem l’estructura que subjecte la nòria a l’escenari. Ens dirigim a la pestanya “fons” i fem clic sobre el pinzell RTENOTITLE   per editar aquest. Dibuixarem un triangle amb dos dels seus costat més allargats que els vèrtex inferiors tal hi com es mostra a la imatge inferior. Fixem-nos que podem editar el gruix del pinzell i color.

Image28.png

Un cop dibuixada l’estructura al fons, passem a crear els objectes. Premem el pinzell RTENOTITLE, aquest cop el que trobem a l’espai d’objectes, i dibuixem a roda de la sínia i quatre diagonals que es creuen al centre, formant així vuit radis. És important que indiquem aquest centre coma  punt de rotació de la roda.

Image30.png

Només ens queda dibuixar les cabines de la sínia. Seguint el mateix procediment que hem fet amb la roda, creem un nou objecte i aquest cop simulem una cabina tal hi com es mostra a la imatge. El centre de rotacions li senyalarem que ha de ser l’extrem de l’estructura que subjecte la cabina.

Image31.png

Duplicarem aquest objecte tres vegades més, de manera que obtinguem 4 cabines i finalment col·locarem manualment aquestes cabines distribuïdes per la roda creada. També podríem fer ús dels blocs de programació que permeten fixa un punt i del que fixa una direcció.

 RTENOTITLE               Image75.png

Ja situades les cabines a la seva posició, passarem a enllaçar aquestes a l’objecte que les ha de subjectar que és la roda. Per enllaçar objectes entre ells el funcionament és a través d’un moviment de drag and drop (arrastrar i deixar anar) repetint el mateix funcionament que executem quant seleccionem o encaixem els blocs de programació. Així doncs, seleccionem el primer objecte (la primera cabina) del menú d’objectes que hem creat  i l’arrastrem sobre la roda. Observem que al passar l’objecte per sobre de la roda, aquesta pren un color diferent, aquest aspecte és la senyal que ens permet identificar sobre quin objecte estem enllaçant.

RTENOTITLE    RTENOTITLE

                

Repetirem el mateix procés amb les tres cabines restants. Ens adonem que un cop unim un objecte amb un altre ens apareix un símbol que indica a quin objecte s’ha unit. De la mateixa manera veiem que la roda de la sínia mostra una cabina senyalitzant que aquesta se li unit. Hem d’aconseguir tenir totes cabines unides a la roda seguint els mateixos passos.

Image26.png

Val a dir, que en l’exemple mostrat hem realitzat la unió d’un objecte amb un altre, però Snap! també disposa de la possibilitat d’unir un objecte a d'altres.

Per finalitzar el procés, només ens resta programar la sínia perquè giri. Com que hem unit totes les cabines amb la roda, ara disposem només de dos objectes independents; la roda i el suport. Anem doncs, a programar la roda perquè dugui a terme el moviment.

Li indiquem que quant es premi la bandera la roda giri un grau i provem d’executar el programa per veure’n el resultat. Veiem que amb una ordre de programació molt bàsica s’aconsegueix mobilitzar una sèrie d’objectes aconseguint un resultat més efectiu i visual.

 RTENOTITLE                               

 Fins aquí la introducció aSnap!, disposeu de més informació a la guia que conté el programa que podeu consultar tot prement la iconaSnap! seguit de “Manual de referència”.

  RTENOTITLE

A l'activitat Seguidor_de_línies_virtual veureu uines conseqüències té a la manera de programar i, comparant-ho amb la mateixa activitat sense disposar d'aquesta eina, com ens pot simplificar la vida.