Programación visual, explicada

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

En vez de escribir sintaxis, los estudiantes de K-12 conectan 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 tocar 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.

Video · 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, los estudiantes escriben la historia y organizan 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 agregar 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 los estudiantes vean la lógica en acción y la corrijan.
«¡La programación con Elementari nos tiene completamente fascinados! Todos los estudiantes pudieron 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. Los estudiantes aprenden 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 VIVOVisuales 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 VIDEO 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 sus estudiantes han usado Scratch, ya conocen 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 globo — 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; los estudiantes avanzados agregan 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 estudiantes 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 en todos los grados K-12. Los lectores principiantes empiezan con eventos sencillos de clic y reproducción; los estudiantes mayores crean historias con ramificaciones, juegos y simulaciones con variables y lógica. Las lecciones ajustan el apoyo y el desafío al nivel del estudiante.

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

Es una excelente vía de entrada. Los estudiantes que saben descomponer un problema en eventos y acciones trasladan ese razonamiento directamente a Python o JavaScript; lo único nuevo es la sintaxis. Los grafos de nodos también los 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 estudiante, 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 sus estudiantes podrán programar su propia historia esta misma semana. No se necesita experiencia, ni suya ni de ellos.