{"id":4598,"date":"2025-01-08T17:56:25","date_gmt":"2025-01-08T20:56:25","guid":{"rendered":"https:\/\/ltc.camba.coop\/?p=4598"},"modified":"2025-01-08T17:58:56","modified_gmt":"2025-01-08T20:58:56","slug":"introduccion-a-snap","status":"publish","type":"post","link":"https:\/\/ltc.camba.coop\/blog\/2025\/01\/08\/introduccion-a-snap\/","title":{"rendered":"Introducci\u00f3n a SNAP!"},"content":{"rendered":"\n<p><a href=\"https:\/\/snap.berkeley.edu\/\" rel=\"noreferrer noopener\" target=\"_blank\">Snap!<\/a> es un lenguaje de programaci\u00f3n gr\u00e1fico o por bloques dise\u00f1ado para la ense\u00f1anza de programaci\u00f3n que ayuda a les estudiantes a desarrollar el <em>pensamiento computacional<\/em>, permitiendo crear instrucciones y bloques personalizados para crear programas, interactuar con datos o desarrollar videojuegos.<\/p>\n\n\n\n<p>Snap! nos ofrece una interfaz simple con todas las herramientas necesarias tanto para crear los programas como para el dise\u00f1o de personajes y escenarios, as\u00ed como la integraci\u00f3n de sonidos.<\/p>\n\n\n\n<p>Para acceder a la plataforma, podemos hacerlo tanto en la <a href=\"https:\/\/snap.berkeley.edu\/run\" rel=\"noreferrer noopener\" target=\"_blank\">versi\u00f3n \/en l\u00ednea\/<\/a> o descarg\u00e1ndolo siguiendo las instrucciones de su <a href=\"https:\/\/snap.berkeley.edu\/offline\" rel=\"noreferrer noopener\" target=\"_blank\">sitio web<\/a> (en ingl\u00e9s).<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Interfaz de Snap!<\/h2>\n\n\n\n<p>La interfaz de Snap! presenta tres secciones principales:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Bloques: aqu\u00ed se encuentran todos los bloques disponibles para utilizar, as\u00ed como la opci\u00f3n para crear nuevos bloques<\/li>\n\n\n\n<li>Secci\u00f3n central: Esta secci\u00f3n cuenta con tres pesta\u00f1as:\n<ul class=\"wp-block-list\">\n<li>Programas: Aqu\u00ed es donde se arrastran los bloques y se construyen los programas tanto de los personajes como del escenario.<\/li>\n\n\n\n<li>Disfraces\/Fondos de escenario: tanto los personajes como el escenario pueden tener distintas vistas, que en Snap! se llaman <em>disfraces<\/em>. Podemos por ejemplo dise\u00f1ar un personaje que tenga un aspecto determinado y que cuando sea tocado por otro objeto ese aspecto cambie por unos segundos. Tambi\u00e9n podemos dise\u00f1ar distintos fondos de escenario, que vayan cambiando seg\u00fan las instrucciones del programa.<\/li>\n\n\n\n<li>Sonidos: esta pesta\u00f1a permite grabar o importar sonidos para ser utilizados en los programas.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"444\" src=\"https:\/\/ltc.camba.coop\/wp-content\/uploads\/2025\/01\/interfaz-1024x444.png\" alt=\"\" class=\"wp-image-4608\" srcset=\"https:\/\/ltc.camba.coop\/blog\/wp-content\/uploads\/2025\/01\/interfaz-1024x444.png 1024w, https:\/\/ltc.camba.coop\/blog\/wp-content\/uploads\/2025\/01\/interfaz-400x174.png 400w, https:\/\/ltc.camba.coop\/blog\/wp-content\/uploads\/2025\/01\/interfaz-768x333.png 768w, https:\/\/ltc.camba.coop\/blog\/wp-content\/uploads\/2025\/01\/interfaz.png 1288w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Nuestro primer progama<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Dibujamos el personaje<\/h3>\n\n\n\n<p>Vamos a comenzar a desarrollar nuestro primer programa, que consistir\u00e1 en crear un personaje y moverlo con las flechas de direcci\u00f3n del teclado. Pero antes vamos dibujar nuestro personaje y el escenario.<\/p>\n\n\n\n<p>Para ello, vamos a hacer click en el \u00edcono del pincel en la <em>secci\u00f3n de objetos<\/em>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"495\" height=\"249\" src=\"https:\/\/ltc.camba.coop\/wp-content\/uploads\/2025\/01\/imagen1.png\" alt=\"\" class=\"wp-image-4607\" srcset=\"https:\/\/ltc.camba.coop\/blog\/wp-content\/uploads\/2025\/01\/imagen1.png 495w, https:\/\/ltc.camba.coop\/blog\/wp-content\/uploads\/2025\/01\/imagen1-400x201.png 400w\" sizes=\"auto, (max-width: 495px) 100vw, 495px\" \/><\/figure>\n\n\n\n<p>De esa forma accedemos al <em>Editor Gr\u00e1fico<\/em>, donde encontraremos las herramientas necesarias para dibujar nuestro personaje. Una vez que terminamos de dibujar, hacemos click en <em>Aceptar<\/em> y veremos nuestro personaje creado.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"740\" height=\"483\" src=\"https:\/\/ltc.camba.coop\/wp-content\/uploads\/2025\/01\/imagen2.png\" alt=\"\" class=\"wp-image-4606\" srcset=\"https:\/\/ltc.camba.coop\/blog\/wp-content\/uploads\/2025\/01\/imagen2.png 740w, https:\/\/ltc.camba.coop\/blog\/wp-content\/uploads\/2025\/01\/imagen2-400x261.png 400w\" sizes=\"auto, (max-width: 740px) 100vw, 740px\" \/><\/figure>\n\n\n\n<p>Seleccionamos nuestro personaje dentro de la <em>secci\u00f3n objetos<\/em> haciend click sobre \u00e9l y podremos entonces darle un nombre en la secci\u00f3n de <em>programas<\/em> y <em>disfraces<\/em>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"643\" height=\"330\" src=\"https:\/\/ltc.camba.coop\/wp-content\/uploads\/2025\/01\/imagen3.png\" alt=\"\" class=\"wp-image-4605\" srcset=\"https:\/\/ltc.camba.coop\/blog\/wp-content\/uploads\/2025\/01\/imagen3.png 643w, https:\/\/ltc.camba.coop\/blog\/wp-content\/uploads\/2025\/01\/imagen3-400x205.png 400w\" sizes=\"auto, (max-width: 643px) 100vw, 643px\" \/><\/figure>\n\n\n\n<p>Cuando iniciamos un programa en SNAP! vemos que ya hay un primer objeto creado con forma de flecha, como no vamos a utilizarlo lo vamos a eliminar. Para ello hacemos click con el bot\u00f3n derecho del mouse sobre el objeto de nombre \u201cObjeto\u201d y veremos que se despliega un men\u00fa de opciones. Esto sirve para todos los objetos, desde este men\u00fa podemos modificarlos, exportarlos, duplicarlos y eliminarlos. Elegiremos entonces la opci\u00f3n <em>Eliminar<\/em> para quitar el objeto que viene por defecto en SNAP!.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"392\" height=\"199\" src=\"https:\/\/ltc.camba.coop\/wp-content\/uploads\/2025\/01\/imagen4.png\" alt=\"\" class=\"wp-image-4604\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Dibujamos el fondo<\/h3>\n\n\n\n<p>Para dibujar el escenario, en la <em>secci\u00f3n de objetos<\/em> hacemos click sobre el objeto <em>Escenario<\/em>. Luego, en la <em>secci\u00f3n de programas y fondos de escenario<\/em> hacemos clic en la pesta\u00f1a <em>Fondos de escenario<\/em>. All\u00ed haremos click sobre el \u00edcono del pincel y veremos el mismo <em>Editor Gr\u00e1fico<\/em> para crear nuestro escenario.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"837\" height=\"501\" src=\"https:\/\/ltc.camba.coop\/wp-content\/uploads\/2025\/01\/imagen5.png\" alt=\"\" class=\"wp-image-4603\" srcset=\"https:\/\/ltc.camba.coop\/blog\/wp-content\/uploads\/2025\/01\/imagen5.png 837w, https:\/\/ltc.camba.coop\/blog\/wp-content\/uploads\/2025\/01\/imagen5-400x239.png 400w, https:\/\/ltc.camba.coop\/blog\/wp-content\/uploads\/2025\/01\/imagen5-768x460.png 768w\" sizes=\"auto, (max-width: 837px) 100vw, 837px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Programando los movimientos<\/h3>\n\n\n\n<p>Ya tenemos creados personaje y escenario, ahora vamos a crear el programa para que nuestro personaje se mueva utilizando las flechas del teclado. Pero antes de ponernos a \u201cprogramar\u201d tenemos que saber \u00bfqu\u00e9 es un programa?<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Programas y Algoritmos<\/h4>\n\n\n\n<p>Un algoritmo es, en forma intuitiva, una receta: una secuencia de pasos o instrucciones precisas que permite resolver un problema o realizar una tarea. Los algoritmos son centrales para el funcionamiento de las computadoras, ya que todas las tareas que realizan consisten en seguir alg\u00fan algoritmo. Sin embargo, la idea de algoritmo tambi\u00e9nest\u00e1 presente en muchos otros aspectos de la vida cotidiana, fuera del mundo de las computadoras.<\/p>\n\n\n\n<p>Por ejemplo, \u00bfcu\u00e1les son los pasos para hacer un matecocido?<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Colocamos agua en una pava.<\/li>\n\n\n\n<li>Encendemos la hornalla.<\/li>\n\n\n\n<li>Colocamos la pava en la hornalla.<\/li>\n\n\n\n<li>Esperamos a que el agua hierva.<\/li>\n\n\n\n<li>Servimos el agua caliente en una taza.<\/li>\n\n\n\n<li>Colocamos un sobre de mate cocido en la taza.<\/li>\n\n\n\n<li>Esperamos 4 minutos.<\/li>\n\n\n\n<li>Quitamos el sobre de la taza.<\/li>\n\n\n\n<li>Listo.<\/li>\n<\/ol>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>\u00bfPodemos hacer este procedimiento de otra forma, agregando o quitando pasos?\u00bfle falta o le sobra algo?\u00bfque otros \u201calgoritmos\u201d usamos en nuestra vida cotidiana?<\/p>\n<\/blockquote>\n\n\n\n<p>Podemos entonces decir que <strong>un \/algoritmo\/ es una secuencia de instrucciones que indican c\u00f3mo realizar una tarea para alcanzar un objetivo.<\/strong><\/p>\n\n\n\n<p>Referencia: <a rel=\"noreferrer noopener\" href=\"https:\/\/program.ar\/descargas\/cc_para_el_aula-1er_ciclo_primaria.pdf\" target=\"_blank\">Ciencias de la Computaci\u00f3n para el aula 1er Ciclo Primaria, Cap\u00edtulo 2<\/a><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Programando en SNAP!<\/h4>\n\n\n\n<p>Vamos a comenzar con un programa simple para controlar el movimiento del Personaje.<\/p>\n\n\n\n<p>Para ello, dentro de los <em>bloques de Control<\/em> elegiremos el bloque \u201ccuando se pulse la tecla \u2026\u201d. Observamos que el bloque nos da la opci\u00f3n de elegir una tecla, all\u00ed elegiremos la tecla \u201cflecha derecha\u201d<\/p>\n\n\n\n<p>Luego, tenemos que indicarle en qu\u00e9 direcci\u00f3n se tiene que mover, para eso, dentro de los <em>bloques de movimiento<\/em> elegimos el bloque \u201capuntar en direcci\u00f3n \u2026\u201d. Observamos tambi\u00e9n que este bloque no da la opci\u00f3n de elegir la direcci\u00f3n. Elegiremos la opci\u00f3n \u201c90 (derecha)\u201d.<\/p>\n\n\n\n<p>Una vez que tenemos definida la direcci\u00f3n, ahora le indicaremos que avance en ese sentido. Para ello, utilizaremos el <em>bloque de movimiento<\/em> \u201cAvanzar 10 pasos\u201d.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"320\" height=\"180\" src=\"https:\/\/ltc.camba.coop\/wp-content\/uploads\/2025\/01\/imagen6.png\" alt=\"\" class=\"wp-image-4602\"\/><\/figure>\n\n\n\n<p>Ahora vamos a probar nuestro programa: si tocamos la tecla \u201cflecha derecha\u201d, el personaje deber\u00eda moverse a la derecha 10 pasos\u2026\u00bflo hace?<\/p>\n\n\n\n<p><strong>\u00bfTe anim\u00e1s a programar al personaje para que se mueva hacia arriba, abajo y a la izquierda?<\/strong><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Mejorando el movimiento<\/h4>\n\n\n\n<p>Si bien nuestro programa hace lo que deseamos, hay otra manera de controlar a nuestro personaje donde la respuesta a la interacci\u00f3n del jugugador o jugadora es m\u00e1s r\u00e1pida.<\/p>\n\n\n\n<p>Para ello, primero vamos a elegir el <em>bloque de control<\/em> \u201cCuando se pulse ..\u201d. Este bloque sirve para indicar que lo que vamos a programar se realice cuando se pulsa en el \u00edcono de la banderita verde, es decir, cuando iniciamos el programa.<\/p>\n\n\n\n<p>Luego, vamos a usar otro <em>bloque de control<\/em>, el de \u201cRepetir y Repetir\u201d. Este bloque sirve para que las opciones que vamos a poner debajo se realicen una y otra vez, en forma de <em>loop<\/em>.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><strong>Repeticiones<\/strong><\/p>\n\n\n\n<p>La <strong>repetici\u00f3n<\/strong> o <strong>bucle<\/strong> es una <strong>estructura de control<\/strong> que utilizamos para ejecutar varias veces las mismas acciones, de modo que nos permite controlar el <strong>flujo de ejecuci\u00f3n<\/strong> del programa.<\/p>\n\n\n\n<p>En programaci\u00f3n podemos encontrar varios tipos de repeticiones, pueden ser \u201cpara siempre\u201d, o mientras se cumpla una condici\u00f3n, o tambi\u00e9n podemos indicar que la secuencia se repita una determinada cantidad de veces.<\/p>\n<\/blockquote>\n\n\n\n<p>Ahora, elegiremos un <em>bloque de control<\/em> \u201csi\u201d. Este bloque nos permite realizar acciones si se cumple una determinada <strong>condici\u00f3n<\/strong>. Lo que haremos con este bloque es \u201cpreguntar\u201d si hay una tecla presionada, para ello usaremos el <em>bloque de sensores<\/em> \u201c\u00bftecla \u2026 pulsada?\u201d dentro del bloque \u201cSi\u201d. De esta manera definimos las acciones que se realizar\u00e1n a continuaci\u00f3n si se cumple la siguiente <strong>condici\u00f3n<\/strong>: Si la tecla est\u00e1 pulsada.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>Casi todos los lenguajes de programaci\u00f3n tienen un mecanismo para expresar <strong>alternativas condicionales<\/strong>, que indican que algunas instrucciones solo tienen que ejecutarse en algunos casos, seg\u00fan se cumpla o no cierta condici\u00f3n.<\/p>\n\n\n\n<p>Las alternativas condicionales tienen dos partes: una <strong>acci\u00f3n<\/strong> y una <strong>condici\u00f3n<\/strong>. Por ejemplo, en la frase \u201csi est\u00e1 lloviendo, salgo con parag\u00fcas\u201d, vemos que la <strong>condici\u00f3n<\/strong> es \u201csi est\u00e1 lloviendo\u201d y la <strong>acci\u00f3n<\/strong> \u201csalgo con parag\u00fcas\u201d.<\/p>\n<\/blockquote>\n\n\n\n<p>Recordemos que al usar un bloque \u201crepetir y repetir\u201d, est\u00e1 pregunta la estar\u00e1 haciendo todo el tiempo, lo cual nos dar\u00e1 una respuesta m\u00e1s rapida que en el programa anterior.<\/p>\n\n\n\n<p>Para finalizar, dentro del bloque \u201csi\u201d, usaremos los <em>bloques de movimiento<\/em> \u201capuntar en direcci\u00f3n\u201d y \u201cavanzar 10 pasos\u201d, tal como lo hicimos en el programa anterior.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"320\" height=\"180\" src=\"https:\/\/ltc.camba.coop\/wp-content\/uploads\/2025\/01\/imagen7.png\" alt=\"\" class=\"wp-image-4601\"\/><\/figure>\n\n\n\n<p><strong>\u00bfnotas diferencias en la reacci\u00f3n del personaje entre estas dos formas distintas de programar lo mismo?\u00bfcu\u00e1les?<\/strong><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Guardamos nuestro programa<\/h3>\n\n\n\n<p>Ahora que finalizamos nuestro primer programa, vamos a guardarlo para poder verlo nuevamente o seguir agregandole funcionalidades. Para ello hacemos click en el \u00edcono de la hoja en blanco y elegimos la opci\u00f3n \u201cGuardar\u201d.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"622\" height=\"297\" src=\"https:\/\/ltc.camba.coop\/wp-content\/uploads\/2025\/01\/imagen8.png\" alt=\"\" class=\"wp-image-4600\" srcset=\"https:\/\/ltc.camba.coop\/blog\/wp-content\/uploads\/2025\/01\/imagen8.png 622w, https:\/\/ltc.camba.coop\/blog\/wp-content\/uploads\/2025\/01\/imagen8-400x191.png 400w\" sizes=\"auto, (max-width: 622px) 100vw, 622px\" \/><\/figure>\n\n\n\n<p>Luego a\u00f1adimos un nombre y hacemos click en \u201cAceptar\u201d. Veremos que el programa se guarda en la carpeta \u201cDescargas\u201d de nuestra computadora. Para recuperar este trabajo, la pr\u00f3xima vez que utilicemos SNAP! podemos elegirlo mediante la opci\u00f3n \u201cAbrir\u201d en el men\u00fa que se despliega al hacer click en el \u00edcono de la hoja en blanco.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"331\" height=\"175\" src=\"https:\/\/ltc.camba.coop\/wp-content\/uploads\/2025\/01\/imagen9.png\" alt=\"\" class=\"wp-image-4599\"\/><\/figure>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Snap! es un lenguaje de programaci\u00f3n gr\u00e1fico o por bloques dise\u00f1ado para la ense\u00f1anza de programaci\u00f3n que ayuda a les estudiantes a desarrollar el pensamiento computacional, permitiendo crear instrucciones y bloques personalizados para crear programas, interactuar con datos o desarrollar videojuegos. Snap! nos ofrece una interfaz simple con todas las herramientas necesarias tanto para crear los programas como para el dise\u00f1o de personajes y escenarios, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":4610,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"ngg_post_thumbnail":0,"footnotes":""},"categories":[17,87,76,261],"tags":[],"class_list":["post-4598","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-contenido","category-programacion-por-bloques","category-recursos","category-snap"],"_links":{"self":[{"href":"https:\/\/ltc.camba.coop\/blog\/wp-json\/wp\/v2\/posts\/4598","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ltc.camba.coop\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ltc.camba.coop\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ltc.camba.coop\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ltc.camba.coop\/blog\/wp-json\/wp\/v2\/comments?post=4598"}],"version-history":[{"count":2,"href":"https:\/\/ltc.camba.coop\/blog\/wp-json\/wp\/v2\/posts\/4598\/revisions"}],"predecessor-version":[{"id":4611,"href":"https:\/\/ltc.camba.coop\/blog\/wp-json\/wp\/v2\/posts\/4598\/revisions\/4611"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ltc.camba.coop\/blog\/wp-json\/wp\/v2\/media\/4610"}],"wp:attachment":[{"href":"https:\/\/ltc.camba.coop\/blog\/wp-json\/wp\/v2\/media?parent=4598"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ltc.camba.coop\/blog\/wp-json\/wp\/v2\/categories?post=4598"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ltc.camba.coop\/blog\/wp-json\/wp\/v2\/tags?post=4598"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}