Introducció a Snap!

From Edutec Wiki
Jump to: navigation, search

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

Una aplicació pràctica és la llibreria de blocs SnapJr, que es troba a Snap4Arduino. Amb blocs sense text, amb dibuixos, s'amplia l'edat i tipologia de persones que poden programar!

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.