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 del món.
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í 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.
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.
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:
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 de Snap! està estructurada per àrees:
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):
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”.
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”:
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:
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:
El predicat té forma hexagonal. Reporta una resposta binaria (veritat o fals) o booleana.
3. Prémer el botó "D’acord". El bloc s'afegeix al final dels blocs de la categoria indicada.
4. Afegir el programa del bloc Per exemple, per dibuixar un quadrat:
5. Un exemple d'ús del bloc creat:
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:
Falta assignar-li una variable, per exemple “mida”, als passos que haurà de moure’s l’objecte:
Es pot provar amb difernts mides, per exemple 50, 70 i 100:
Aspecte del bloc
A Snap! es pot modificar l’aspecte gràfic del bloc que es mostra: de mostrar-lo descrit en text 
a representar-lo mitjançant un icona 
.
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):
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:
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):
Caràcters "unicode" i emoticones
A 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:
2. Escollir una emoticona i copiar-la, fent click amb el botó dret sobre ella:
- Tornar a Snap! i enganxar l'emoticona a l’espai del nom del bloc:
2. Clicar "OK" i veure el resultat:
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:
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:
2. Fer un altre bloc que determini el recorregut en forma de "V":
3. Es pot comprovar que els blocs programats efectivament realitzen la forma de la “V”:
4. Crear una llista de formes geomètriques. Primer crear una variable 
i donar-li per valor una llista buida. És a dir, indicar 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.
5. Omplir la llista afegint-hi els blocs dels polígons 
,
i 
.
6. Al bloc 
indicar-li que es vol afegir com element de la llista. Com que la llista s'anomena , el resultat final és 
. Fixa't que per inserir el bloc , és necessari "encapsular-lo": 
. Es fa axí:
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.
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:
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”:
8. Es pot provar prement la tecla “espai”. Exemples de resultats dibuixats són:
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!
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 
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.
