Programación por bloques: qué es y cómo se convierte en código real

La programación por bloques consiste en construir un programa apilando bloques de colores con forma de pieza de puzle, en lugar de escribirlo línea a línea. Cada bloque es una sola instrucción, como «configurar el pin como salida», «encender el LED» o «esperar 100 ms». Como los bloques solo encajan donde corresponde, errores como olvidar un punto y coma, dejar un paréntesis sin cerrar o escribir mal un comando desaparecen, y tú te concentras en la lógica del programa. Por eso la programación basada en bloques se considera la entrada más suave a la programación para niños y principiantes.

Pero la programación por bloques no es un lenguaje de juguete. Detrás de cada programa en bloques que llega a un Arduino o a una Raspberry Pi Pico hay código real, y la placa siempre ejecuta ese código. En este artículo verás, paso a paso y con proyectos gratuitos de BlueGrays, qué son los bloques, qué indican sus colores y cómo un programa en bloques se convierte en código C++ o MicroPython real. Al final encontrarás también las ventajas y los límites de la programación por bloques y cómo se combina con herramientas como Scratch, mBlock y Tinkercad.

¿Qué es la programación por bloques y por qué se llama así?

En la programación por bloques cada instrucción es una pieza con muescas y salientes en los bordes. El saliente inferior de un bloque encaja en la muesca del bloque de abajo, así que las instrucciones se ejecutan en orden de arriba abajo. Algunos bloques tienen un hueco abierto por dentro: son bloques contenedores que alojan otros bloques. Otros tienen ranuras ovaladas blancas donde se coloca un número u otro bloque de valor. Como la forma de cada pieza decide qué va en cada sitio, es casi imposible montar un programa que rompa las reglas. La mayoría de los editores de bloques actuales siguen el camino que abrieron Scratch, del MIT, y la biblioteca de código abierto Blockly de Google. Los bloques de BlueGrays también se basan en Blockly; el conjunto de bloques lo diseñamos nosotros para proyectos de electrónica y lo mostramos en el idioma de la app. Ten en cuenta que los bloques no son un nuevo lenguaje de programación. Instrucciones, orden, condiciones, bucles y variables son exactamente los mismos conceptos que en el código de texto; los bloques solo los hacen visibles.

¿Cómo se convierte un programa en bloques en código real?

Los editores de bloques usan un generador de código por debajo: cada tipo de bloque tiene una plantilla en código de texto y, al apilar los bloques, esas plantillas se unen en orden. BlueGrays es algo más estricto: los bloques de cada proyecto se crean para coincidir uno a uno con el código real que se carga en la placa. Cada línea de los bloques tiene su equivalente en el código, y cada línea del código, su equivalente en los bloques. En los proyectos de Arduino y ESP32 ese código es C++; en los de Raspberry Pi Pico, MicroPython. Para leer un programa en bloques te basta con conocer estas cinco partes:

• configuración (una vez): la sección que se ejecuta una sola vez cuando la placa se enciende o se reinicia. Equivale a la función setup() de Arduino, y normalmente es donde los pines se configuran como entrada o SALIDA.
• repetir siempre: la sección que se ejecuta de arriba abajo una y otra vez mientras la placa está encendida. En Arduino es la función loop(); en MicroPython, un bucle while True:.
• Bloques de instrucción: bloques como «escribir ALTO en pin 9» o «esperar 100 ms» que se apilan dentro de los contenedores y hacen una tarea cada uno. La mayoría son una sola línea de código de texto.
• Bloques de valor: números como 9 o 100 en los óvalos blancos y bloques redondeados que devuelven un resultado, como la lectura de un pin. Se colocan en las ranuras de los bloques de instrucción y se convierten en el valor entre paréntesis del código.
• Menús desplegables: opciones como SALIDA o ALTO / BAJO. Equivalen a las constantes OUTPUT / INPUT y HIGH / LOW del código y, como el menú solo ofrece opciones válidas, no se pueden escribir mal.

Bloques y código lado a lado: el proyecto Parpadeo de LED

Basta de teoría, veamos un ejemplo real. En el proyecto Parpadeo de LED se conectan un LED y una resistencia al pin 9, y el LED parpadea cinco veces por segundo. En la tabla de abajo traducimos uno a uno a código los bloques de la imagen de arriba. Cada fila es un bloque, y cada bloque es una línea de código:

1void setup() {
2  pinMode(9,OUTPUT);     // LED pini çıkış / LED pin as output
3}
4
5void loop() {
6  digitalWrite(9,HIGH);  // LED'i yak / Turn the LED on
7  delay(100);            // 100 ms bekle (1000 ms = 1 sn) / Wait 100 ms (1000 ms = 1 s)
8  digitalWrite(9,LOW);   // LED'i söndür / Turn the LED off
9  delay(100);            // 100 ms bekle / Wait 100 ms
10}

En el código hay algunas cosas que no ves en los bloques: la palabra void, las llaves y los puntos y coma. Son reglas de sintaxis de C++, y en los bloques de eso se encarga la propia forma. El hueco de un bloque contenedor hace el papel de las llaves, y los bloques colocados uno debajo de otro, el del orden de las líneas. Si cambiaras el 100 de la ranura por 1000, el código diría delay(1000) y el LED parpadearía una vez por segundo. Si eligieras BAJO en lugar de ALTO en el menú, HIGH pasaría a ser LOW. Gracias a esta correspondencia uno a uno, después de unos cuantos proyectos empiezas a leer el código sin mirar los bloques. El circuito y el montaje paso a paso de este mismo proyecto están en la parte 2 de la serie: parpadeo de un LED con programación por bloques.

¿Qué significan los colores de los bloques?

En los editores de bloques el color no es decoración: indica de qué categoría viene cada bloque. Con solo echar un vistazo a un programa, los colores te permiten leer «aquí se declara una variable, aquí se toma una decisión, aquí hay un bucle». Estas son las categorías que verás en las imágenes de bloques de los proyectos de BlueGrays:

Las formas también dan pistas. Los bloques de condición y comparación tienen extremos en punta, parecidos a un hexágono, y encajan en la ranura de condición de un bloque de condición; los bloques de números y variables, en cambio, tienen los extremos redondeados. Hay un detalle de la tabla en el que conviene fijarse: en el bucle que cuenta con i de 0 a 5 en pasos de 1, el límite superior está incluido, así que i toma los valores 0, 1, 2, 3, 4 y 5. En código se escribe con la condición i < 6, y el bucle da seis vueltas. El proyecto Luz secuencial LED enciende seis LED uno tras otro justo con este bloque; explicamos los bloques de bucles y arrays en detalle en la parte bucles y variables de la serie.

Los bloques de condición anidados de esta imagen se convierten en líneas if anidadas en el código. El bloque exterior con la comparación button ≠ lastButton es la línea if (button != lastButton) y actúa cuando cambia el estado del botón. El bloque interior con button = 1 solo detecta el momento de la pulsación. El bloque que asigna a ledState la negación de ledState es la línea ledState = !ledState;: el 0 pasa a 1 y el 1 pasa a 0. El bloque siguiente, que escribe ledState en el pin 7, es digitalWrite(7, ledState);. Puedes ver el proyecto completo en la página Encender y apagar un LED con un botón; explicamos la relación entre el bloque de condición e if/else en la parte botones y condiciones de la serie.

C++ en Arduino y ESP32, MicroPython en la Pico

La misma lógica de bloques se traduce a distintos lenguajes según la placa. En los proyectos de Arduino y ESP32 los bloques equivalen a código C++, y los bloques de configuración y repetir siempre se convierten en setup() y loop(). Por ejemplo, los bloques del proyecto LED Parpadeante con ESP32 tienen la misma estructura que el Parpadeo de LED; solo cambian el pin, que es el 5, y la espera, de 500 ms. En los proyectos de Raspberry Pi Pico, en cambio, los bloques se convierten en MicroPython. Aquí no existe una función setup(): lo que hay dentro del bloque de configuración se convierte en líneas que se ejecutan una vez al principio del archivo, y el bloque repetir siempre pasa a ser un bucle while True:.

1from machine import Pin
2import time
3
4# ============ PIN ============
5LED_PIN = 14                    # Boştaki herhangi bir GPIO / Any free GPIO
6led = Pin(LED_PIN, Pin.OUT)     # led adlı pin, ÇIKIŞ / pin named led, OUTPUT
7
8print("== BlueGrays: Pico Harici LED Blink ==")
9print("LED pin: GP" + str(LED_PIN))
10print("500ms yakip 500ms sonduruyor / 500ms on 500ms off")
11
12# ============ ANA DÖNGÜ / MAIN LOOP ============
13while True:
14    led.on()                    # LED'i yak / Turn the LED on
15    print("[LED] ACIK / ON")
16    time.sleep(0.5)             # 0.5 saniye bekle / Wait 0.5 s
17
18    led.off()                   # LED'i söndür / Turn the LED off
19    print("[LED] KAPALI / OFF")
20    time.sleep(0.5)             # 0.5 saniye bekle / Wait 0.5 s

Puedes seguir la correspondencia línea a línea. El bloque «declarar entero (int) LED_PIN = 14» dentro de «variables globales (al principio)» es la línea LED_PIN = 14; como en Python no se escriben los tipos, la parte (int) no aparece en el código. El bloque «pin led : GP LED_PIN, SALIDA» se convierte en led = Pin(LED_PIN, Pin.OUT). «encender (on) el pin led» es led.on(), «esperar 0.5 segundos» es time.sleep(0.5) e «imprimir en serie» es una línea print(). El bloque «crear texto con» une con + el texto «LED pin: GP» y el valor de LED_PIN. Atención: en Arduino la espera va en milisegundos (100 ms) y en MicroPython en segundos (0.5), y los bloques muestran esa diferencia con bloques distintos para ms y para segundos. Para el circuito, consulta la página LED externo con la Raspberry Pi Pico; si la Pico es nueva para ti, leer antes qué es la Raspberry Pi Pico te lo pondrá más fácil.

Ventajas y límites de la programación por bloques

La programación por bloques no es la respuesta a todo: es un puente. En las primeras semanas es una herramienta muy potente para entender la lógica de un programa, pero el objetivo real es cruzar ese puente en algún momento y leer código de texto con soltura. Ver bloques y código lado a lado acelera ese paso, porque en cada proyecto nuevo ves una y otra vez cómo los mismos bloques se convierten en las mismas líneas. Después de encontrarte el bloque «repetir siempre» en diez proyectos, la palabra loop() ya no te resultará extraña. Cuando estés listo para el código de texto, el artículo programación Arduino desde cero lo explica todo, de las variables a las funciones, con ejemplos.

¿Para quién es la programación por bloques?

• Niños y familias: los niños a partir de 9 o 10 años que leen con soltura pueden empezar junto a un adulto. Con los bloques en la pantalla y un LED encendiéndose en la protoboard, programar deja de ser algo abstracto.
• Docentes y clubes de robótica: explicar un proyecto primero con bloques y pasar luego a su código reúne distintos niveles en la misma clase. El plan de clase que hemos preparado para ello está en la última parte de la serie: plan de clase de robótica con programación por bloques.
• Principiantes en Arduino: si acabas de comprar tu placa y los primeros programas te resultan confusos, los bloques son la forma más rápida de ver qué hace cada línea. Para conocer la placa en sí, empieza por qué es Arduino.
• Quien tenga dificultades para leer código: entender un programa escrito por otra persona es una habilidad en sí misma. Mirar los bloques de un proyecto ya hecho para captar su estructura facilita ver qué hace un código largo y dónde.

Comparación con Scratch, mBlock, Tinkercad y MakeCode

La mayoría de las herramientas que vienen a la mente al hablar de programación por bloques son editores para el ordenador o el navegador, y cada una destaca en su terreno. Lo que tienen en común es que tú arrastras los bloques y construyes tu propio programa. BlueGrays responde a otra necesidad: muestra los bloques de proyectos ya hechos y probados junto al esquema del circuito, la lista de componentes y el código real. En la app no puedes (por ahora) ordenar tus propios bloques para crear un programa; en su lugar, lees cómo está construido un programa que se sabe que funciona. Por eso estas herramientas no compiten, sino que se complementan. Por ejemplo, puedes comparar una secuencia de semáforo que hayas creado en mBlock con los bloques del proyecto Semáforo y, si aún no tienes placa, simular el circuito en Tinkercad. Para más detalles, consulta las guías programar Arduino con mBlock y simulación de Arduino en Tinkercad.

Cómo usar la programación por bloques en la app BlueGrays

1. Elige en Descubrir › Proyectos uno con la insignia de bloques. También puedes usar el filtro para ver solo los proyectos con bloques. Más de 100 proyectos de la app tienen versión en bloques; la mayoría son de Arduino y el resto, de ESP32 y Raspberry Pi Pico.
2. En la sección de código del proyecto, activa el interruptor Ver en bloques. En lugar del código aparecen los bloques del mismo programa; si tocas la imagen se abre a pantalla completa y puedes ampliarla cómodamente.
3. Pasa a la pestaña Entiende los bloques. El programa se explica paso a paso: en cada paso solo ves los bloques de ese paso y lo que hacen.
4. Si quieres saber qué hace una instrucción, consulta la Guía de código. Cada ejemplo aparece con instrucciones de Arduino y MicroPython y también en bloques.
5. Desactiva el interruptor para volver al código real. Cópialo, pégalo en el Arduino IDE (en Thonny para la Pico) y cárgalo en tu placa.
6. Refuerza lo aprendido con las Preguntas del día: 5 preguntas cada día en niveles de A1 a C2, una clasificación semanal e insignias.

En 31 proyectos tanto los bloques como el código son totalmente gratuitos; en el resto, los bloques se desbloquean con Premium, igual que el código. Algunos proyectos gratuitos que sirven como buen primer paso: Parpadeo de LED, Dos LED parpadeando alternadamente, Semáforo, Luz secuencial LED, LED Parpadeante con ESP32 y Parpadeo LED integrado de la Raspberry Pi Pico. Puedes ver todos los proyectos con bloques por plataforma en la página de programación por bloques, donde además puedes comparar los bloques y el código de un proyecto de ejemplo lado a lado.

Serie De los bloques al código: hoja de ruta

1. Qué es la programación por bloques y cómo un programa en bloques se convierte en código real (este artículo)
2. El primer programa: hacer parpadear un LED con programación por bloques, bloques y C++ lado a lado
3. Botones y condiciones: el bloque de condición e if/else
4. Bucles y variables: repetir siempre, contar, arrays y contadores
5. Leer sensores con bloques, el puerto serie y MicroPython en la Pico
6. Para docentes: plan de clase de robótica con programación por bloques

En la siguiente parte de la serie montamos desde cero el proyecto Parpadeo de LED de este artículo, con el circuito, los bloques y el código C++ lado a lado, en parpadeo de un LED con programación por bloques. Mientras tanto, puedes abrir en la app BlueGrays los proyectos mencionados aquí con su esquema y su código, y pasar con un toque a la versión en bloques del mismo programa con Ver en bloques o a la explicación paso a paso con Entiende los bloques.