Programación visual, explicada

¿Qué es la programación visual por nodos?

En vez de escribir sintaxis, el alumnado de primaria a secundaria conecta nodos — bloques que realizan una sola acción — en un grafo que es el programa. Toda la lógica, sin errores de tecleo.

EVENTO
Al hacer clic: palabra 📖
ACCIÓN
Reproducir sonido: leer en voz alta
ANIMAR
Significado → aparece en fundido
Un programa real de Elementari: al pulsar una palabra difícil de la historia, se escucha en voz alta y aparece su significado. Tres nodos.

Un nodo, una acción. Las conexiones forman el programa. Así de simple.

Vídeo · Cómo la programación visual por nodos transforma el aprendizaje · 2 min

Dos caras en cada diapositiva

Los proyectos de Elementari funcionan como una presentación con un secreto: cada diapositiva tiene una cara frontal para diseñar y una cara trasera para programar.

CARA FRONTAL · diseñocomo crear una presentación
Cara frontal de una diapositiva de Elementari: el espacio de diseño donde se escribe y organiza una página de la historia

En la cara frontal, el alumnado escribe la historia y organiza cada página con texto, ilustraciones y sonido de la biblioteca integrada.

CARA TRASERA · programaciónel grafo de eventos
Cara trasera de una diapositiva de Elementari: el grafo de eventos donde se conectan nodos para añadir interactividad

En la cara trasera, conecte los nodos: eventos como al hacer clic activan animaciones, sonidos y cambios de página que dan vida a la historia.

Pensamiento computacional real, sin sintaxis

01
Pensamiento algorítmico
Eventos como al iniciar la página y al hacer clic enseñan causa, efecto y secuencia.
02
Descomposición
Los efectos complejos se descomponen en pequeños pasos conectados, un nodo a la vez.
03
Depuración
El modo de inspección ilumina los nodos mientras se ejecutan, para que el alumnado vea la lógica en acción y la corrija.
«¡La programación con Elementari nos tiene completamente fascinados! Todo el alumnado pudo empezar de inmediato y dar rienda suelta a su creatividad con el código».
Coach Victor Hicks · fundador de Coding with Culture

El mismo principio impulsa herramientas profesionales

La programación por nodos no es una versión simplificada: los profesionales la usan para crear juegos, películas, arte y arquitectura. El alumnado aprende un paradigma de programación real.

UUnreal EngineJUEGOS Y CINEDetrás de Fortnite y los escenarios virtuales de The Mandalorian: Blueprints es programación por nodos.
HHoudiniEFECTOS VISUALESLos efectos de fuego, agua y multitudes de Frozen y Los Vengadores se crean con grafos de nodos.
TTouchDesignerARTE EN DIRECTOVisuales de escenarios de Coachella y esculturas LED que responden al público.
GGrasshopperARQUITECTURADiseño paramétrico utilizado por Zaha Hadid Architects: edificios modelados mediante lógica de nodos.
CComfyUIIMAGEN Y VÍDEO CON IALa interfaz de referencia para generar imágenes con IA: cada paso del proceso es un nodo que puede volver a conectarse.
n8n8nAGENTES DE IAAsí conectan las empresas sus agentes de IA: activadores, modelos y acciones en un flujo de nodos.

Programación por bloques y por nodos: diferencias

Si su alumnado ha usado Scratch, ya conoce la programación por bloques: comandos apilados en un programa vertical. La programación por nodos es el siguiente paso de la misma familia.

Programación por bloques · p. ej., Scratch
al hacer clic en la bandera verdemover 10 pasosdecir «hola»
Los comandos se apilan de arriba abajo para formar un programa. Es ideal para secuencias lineales: un objeto y una lista de pasos.
Programación por nodos · Elementari
al hacer clicreproducir sonidoanimar
Las acciones se conectan en un grafo que puede ramificarse y ejecutarse en paralelo, más cerca del funcionamiento de las herramientas profesionales y los sistemas reales.
VS
Por qué importa el grafo · una página narrada

Al iniciar la página, se reproduce la voz grabada y se ejecuta el efecto de texto del bocadillo — al mismo tiempo. Cuando termina la voz, comienzan la siguiente grabación y su efecto de texto — en secuencia.

En la programación por bloques, esto exige simular los tiempos con bloques de espera y contar a mano los segundos de cada grabación. En un grafo, basta con conectar la salida «terminado» de la voz con la acción siguiente: en paralelo cuando conviene y en secuencia cuando hace falta.

Grafo de eventos de Elementari con nodos de voz grabada y efectos de texto conectados para ejecutarse primero en paralelo y luego en secuencia

Por qué los docentes eligen Elementari

Una herramienta para todos los nivelesLos principiantes expresan ideas con arrastrar y soltar; el alumnado avanzado añade lógica e interactividad en la misma página.
Sustituye el informe y la presentaciónUn proyecto de ciencias se convierte en una explicación animada; una unidad de historia, en un relato interactivo. El mismo rigor, un público real.
Cabe en una claseLos flujos simplificados para animación, sonido y transiciones permiten terminar un proyecto real antes de que acabe la clase.
La historia invita a empezarProgramar al servicio de una historia atrae a alumnos que nunca elegirían una clase de programación. Por qué importa la programación creativa →
«Las ilustraciones y las animaciones programadas captaron de inmediato la atención de los niños. Aunque no tenía experiencia previa en programación, la interfaz me resultó fácil de usar. Elementari es una forma fantástica de acercar la programación a quienes pueden sentirse intimidados por ella».
Julexus Cappell · Boys and Girls Club, Petersburg

Pruebe un proyecto real

Animate Your Name — pruébelo y active el modo de inspección para ver cómo se iluminan los nodos al ejecutarse.

Se reproduce directamente en la página, sin crear una cuenta.

Preguntas habituales

¿La programación visual es programación de verdad?

Sí. La programación visual utiliza los mismos conceptos que la programación textual — eventos, secuencias, condiciones, bucles y estado — expresados como nodos conectados en vez de sintaxis escrita. Herramientas profesionales como Blueprints de Unreal Engine permiten publicar juegos completos creados con grafos de nodos.

¿Para qué edades es la programación visual?

Elementari se usa de primaria a secundaria. Los lectores principiantes empiezan con eventos sencillos de clic y reproducción; el alumnado mayor crea historias con ramificaciones, juegos y simulaciones con variables y lógica. Las lecciones ajustan el apoyo y el desafío al nivel del alumno.

¿La programación visual prepara para programar con texto?

Es una excelente vía de entrada. El alumnado que sabe descomponer un problema en eventos y acciones traslada ese razonamiento directamente a Python o JavaScript; lo único nuevo es la sintaxis. Los grafos de nodos también lo acostumbran a seguir el flujo de ejecución de un programa.

¿En qué se diferencia de Scratch?

Scratch utiliza bloques: los comandos se apilan en programas. Elementari utiliza nodos: las acciones se conectan en grafos y la programación sirve a una historia o un juego que escribe el alumno, lo que atrae a quienes no se consideran programadores.

Pruébelo en su aula

Genere una lección — o elija una en Banco de lecciones — y su alumnado podrá programar su propia historia esta misma semana. No hace falta experiencia, ni suya ni de ellos.