Introducció a Snap!
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.
Contents
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í podrem guardar els projectes creats, compartir-los i 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.
Seguint amb les icones del menú principal d’Snap!, analitzem a grans trets les seves funcions:
La icona representada amb un full en blanc 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.
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é modificar el color de l’escenari, entre moltes altres opcions que observem a la imatge següent:
Si fem servir la tecla de canvi de majúscules (⇧) quan piquem amb el ratolí, es pot accedir a opcions avançades per cadascun dels menús anteriors.
La interfície
La interfície d’Snap!està estructurada en cinc àrees principals:
Si coneixem Scratch, ens adonem que també conté aquestes àrees però distribuïdes de manera diferent. Observem la comparació a les imatges inferiors: 
Funcions extres
Fins aquí hem vist les similituds entre Scratch i Snap!, anem a veure les diferències. 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:
Creació de nous blocs
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;
1. Seleccionem la pestanya “variables” i escollim la última opció de la llista “crear un bloc”.
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 “Llapís” (tenint en compte que l’objectiu plantejat és dibuixar).
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; unacomanda, un reportador i un predicat. 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 s’anomena input (entrada) que permet modificar el nombre que determina les vegades que s’executarà l’acció.
(Exemple de bloc que representen una comanda)
El reportador el veiem representat en forma d’oval. S’anomena així degut que quan s’executa, a més de realitzar una acció, 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).
(Exemple de bloc que representen un reportador)
Per últim el predicat é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à.
(Exemple de bloc que representen un predicat)
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 l’hem creat.
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è dibuixi un quadrat.
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. 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 que durem a terme a continuació.
Observem que al prémer el signe + se’ns obra una nova pantalla on 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 que permeti inserir nombres.
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;
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 funciona i observem el resultat de la imatges inferiors:
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.
Aspecte
A més de crear nous blocs, Snap! permet modificar l’aspecte gràfic del bloc que es mostra. Passem de mostrar-lo descrit en text 
a representar-lo mitjançant un icona 
.
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).
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. 
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; 
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 la mida. Per conèixer el nombre que correspon al color el podem consultar el mesurador RGB (red, green, blue), on assenyales el color i t’apareixen els números que fan referència aquest. Nosaltres farem ús del vermell, que com veiem els números són (255,0,0).
- Caràcters "unicode"
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.
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). A continuació en veiem l’exemple:
1. Accedim a la biblioteca d’icones (5.0).
2. Escollim una emoticona i la copiem tot fent click amb el botó dret sobre aquesta:
- Retornem a l’Snap! i enganxem el que hem copiat a l’espai del nom del bloc
2. Finalment ens retorna a un bloc representat de la següent manera; 
- Exportació
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.
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.
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.
Comencem!
En primer lloc, construirem tres blocs nous; un que executi un quadrat, un altre un hexàgon i per últim una estrella.
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.
Comprovarem que els blocs programats realitzen la forma de la “V” tal com li hem ordenat.
El següent pas és crear una llista de formes geomètriques. Comencem per crear una variable que anomenem 
i li assignem que aquesta sigui el valor d’una llista buida (és a dir, indiquem que la variable esdevingui una llista). Això només es pot fer si les llistes són de primera classe, com els nombres o el text.
'
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: 
,
i 
.
Seleccionem la variable 
i li indiquem que volem afegir com element de la llista. Com que la llista l'hem anomenat el resultat final serà 
.
Per poder inserir el bloc "dins la variable, és necessari encapsular-lo": 
.
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).
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;
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”.
Ara ja podem anar provant combinacions diferents tot prement la tecla “espai”. A continuació veiem algun exemple del que forma part del resultat final;
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.
Aquí podeu consultar el programa generat directament a l’Snap!.
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 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
Durem 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 
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.
Un cop dibuixada l’estructura al fons, passem a crear els objectes. Premem el pinzell , 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.
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.
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ó.
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.
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.
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.
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”.
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.
