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í 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.

 RTENOTITLE

  RTENOTITLE

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.

 RTENOTITLE

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:

 RTENOTITLE

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 dSnap!està estructurada en cinc àrees principals:                      

              RTENOTITLE

Si coneixem Scratch, ens adonem que també conté aquestes àrees però distribuïdes de manera diferent. Observem la comparació a les imatges inferiors:                                                                                                                                                            RTENOTITLE                                                                                               RTENOTITLE

 

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

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”.

 RTENOTITLE

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).

RTENOTITLE

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ó.

                       RTENOTITLE

    (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).

                            RTENOTITLE

   (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à.

                  RTENOTITLE

    (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.

 RTENOTITLE 

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.

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.

 RTENOTITLE

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ó.

          RTENOTITLE

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.

 RTENOTITLE Image49.png 

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;           

RTENOTITLE

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: 

RTENOTITLE

 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.

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 RTENOTITLE a representar-lo mitjançant un icona RTENOTITLE.       

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. RTENOTITLE   RTENOTITLE

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;  RTENOTITLE

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).

 RTENOTITLE   RTENOTITLE

  • 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:

  1. Retornem a l’Snap! i enganxem el que hem copiat a l’espai del nom del bloc 

           Emotic1.PNG

         2. Finalment ens retorna a un bloc representat de la següent manera;    RTENOTITLE

  • 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.

 RTENOTITLE

 RTENOTITLE

 

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. 

 Image62.png       Image80.png        Image87.png

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.

 Image19.png

Comprovarem que els blocs programats realitzen la forma de la  “V” tal com li hem ordenat.

 RTENOTITLERTENOTITLE

El següent pas és crear una llista de formes geomètriques. Comencem per crear una variable que anomenem  Image39.png  i li assignem que aquesta sigui el valor d’una llista buida  (és a dir, indiquem 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

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: Image14.png,Image4.png i  Image50.png.

Seleccionem la variable Image71.png     i li indiquem que volem afegir Image14.pngcom element de la llista. Com que la llista l'hem anomenat  Image39.png el resultat final serà Image60.png .

Per poder inserir el bloc Image14.png "dins la variable, és necessari encapsular-lo": Image29.png.

RTENOTITLE

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).

Image38.png      RTENOTITLE

 

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;

 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”.    

 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;     

 RTENOTITLE RTENOTITLE

                                                                                                                                                                                                                         

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.

RTENOTITLE

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 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.

Bitbot.cat

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

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

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