Marco teórico y publicación de producciones multimedia en Turbowarp

Introducción

En este proyecto desarrollamos una producción digital completa combinando inteligencia artificial, edición multimedia, programación y publicación web.

El objetivo no fue simplemente probar diferentes servicios de IA. Cada herramienta cumplió una función específica dentro de una cadena de producción:

Contextualizar → generar → animar → convertir → optimizar → integrar → programar → empaquetar → alojar → publicar.

Al finalizar, una idea que comenzó con imágenes y referencias de nuestro propio contexto terminó convertida en una experiencia multimedia programada en TurboWarp y publicada en Internet mediante GitHub Pages.

¿Qué significa contextualizar?

Contextualizar consiste en proporcionar a la inteligencia artificial información y referencias concretas del entorno al que queremos que pertenezca nuestra producción.

Si solamente escribimos:

Creá una escuela técnica.

la IA debe imaginar prácticamente todo. Probablemente obtengamos una escuela genérica que podría pertenecer a cualquier lugar.

En cambio, podemos aportar materiales reales de nuestro contexto:

• fotografías de lugares;
• fotografías de edificios;
• imágenes del barrio o de la escuela;
• logotipos;
• carteles;
• colores institucionales;
• indumentaria;
• gráficas institucionales;
• objetos característicos;
• fotografías de personas, solamente cuando esas personas estén de acuerdo con su utilización.

Esas referencias permiten que la IA comprenda mejor qué realidad queremos representar.

¿Por qué es importante?

El objetivo es pasar de un resultado genérico a uno contextualizado y auténtico.

Una IA conoce conceptos generales como “escuela”, “Mendoza”, “laboratorio” o “estudiantes”. Pero no necesariamente conoce el aspecto exacto de nuestro edificio, nuestros espacios, nuestra gráfica o nuestro entorno cotidiano.

Por eso podemos combinar dos tipos de información:

Prompt textual + referencias visuales

El texto explica nuestra intención y las fotografías muestran características concretas del contexto.

Fotografías de personas y consentimiento

Una fotografía de una persona merece un tratamiento diferente al de una fotografía de un edificio o un objeto.

Si queremos utilizar fotografías de personas como referencias para una herramienta de IA, debemos hacerlo solamente si esas personas están de acuerdo.

Que técnicamente podamos adjuntar una fotografía no significa que debamos utilizar cualquier imagen disponible.

Concepto para estudiar

Contextualizar una producción con IA significa aportar información y referencias del entorno real para obtener resultados relacionados auténticamente con ese contexto, respetando el consentimiento de las personas que puedan aparecer en las referencias.

¿Para qué utilizamos Gemini?

Utilizamos Gemini para generar la imagen que servirá como uno de los recursos visuales principales de nuestra producción.

Un prompt es una instrucción escrita en lenguaje natural mediante la cual comunicamos a una IA qué queremos obtener.

Antes de generar

• definimos el lugar, la situación, los protagonistas, el estilo, la atmósfera y la finalidad de la imagen;
• reunimos referencias del contexto: lugares, edificios, objetos, gráficas institucionales, logotipos y fotografías consentidas de personas;
• adjuntamos esas referencias para aportar contexto visual.

Construir el estilo

Podemos pedir primero una descripción detallada del estilo visual que queremos conseguir.

Describí en aproximadamente 200 palabras las características visuales de este estilo: colores, iluminación, formas, texturas, composición y nivel de detalle.

Así obtenemos vocabulario que después podemos aprovechar para construir nuestro prompt.

El prompt de imagen

Iterar

El primer resultado no necesariamente es definitivo. Podemos conservar lo que funciona y pedir cambios concretos.

• “Conservá la composición, pero hacé que el edificio se parezca más a la fotografía de referencia.”
• “Mantené la escena y modificá solamente la iluminación.”

Eso es iteración: generar, observar, corregir y volver a generar. Cuando obtenemos una imagen adecuada, la guardamos para la siguiente etapa.

¿Qué cambia respecto de Gemini?

Utilizamos Meta AI para generar movimiento a partir de nuestra imagen.

Procedimiento

• incorporamos la imagen que queremos animar;
• observamos la escena y decidimos qué movimientos tienen sentido;
• escribimos un prompt de animación;
• generamos y revisamos el resultado;
• si hace falta, reformulamos el prompt y volvemos a generar;
• guardamos la animación final.

Las hojas se mueven suavemente con el viento, las personas realizan movimientos naturales y la cámara avanza lentamente hacia el edificio.

Qué conviene revisar

• deformaciones;
• movimientos exagerados;
• elementos que aparecen o desaparecen;
• cambios no solicitados;
• movimientos de cámara inconvenientes.

La animación generada necesita ser preparada para utilizarla en nuestro proyecto. Para eso trabajamos con EZGIF.com.

¿Qué significa convertir?

Convertir es transformar un archivo de un formato a otro.

En nuestro caso, partimos de la animación o video generado y lo convertimos a GIF animado.

Procedimiento

• ingresamos a EZGIF.com;
• elegimos la herramienta para convertir video a GIF;
• cargamos la animación obtenida;
• realizamos la conversión;
• revisamos que el movimiento se conserve correctamente;
• guardamos el GIF resultante.

¿Qué es un GIF?

Un GIF animado contiene una sucesión de fotogramas. Cada fotograma es una imagen individual de la animación.

1 → 2 → 3 → 4 → 5...

Al mostrarse rápidamente, esas imágenes producen sensación de movimiento.

Convertir y optimizar no son lo mismo

Optimizar un GIF consiste en reducir razonablemente el peso del archivo procurando conservar la calidad visual necesaria.

Procedimiento

• partimos del GIF ya convertido;
• abrimos las opciones de optimización;
• comprobamos su peso original;
• aplicamos una optimización razonable;
• comparamos el resultado visual con el nuevo peso;
• si perdimos demasiada calidad, reducimos la intensidad de la optimización;
• guardamos el GIF definitivo cuando encontramos un equilibrio adecuado.

Utilizamos Suno para generar la banda sonora de nuestra producción. Ahora el prompt describe música.

Antes de generar

Pensamos qué sensación debe acompañar nuestra escena y definimos:

• género;
• ritmo;
• velocidad;
• instrumentos;
• energía;
• ambiente;
• presencia o ausencia de voz.

Música instrumental electrónica tranquila, ritmo moderado, sintetizadores suaves, atmósfera tecnológica y optimista, sin voz.

Generamos distintas opciones, las escuchamos completas y elegimos la que mejor acompaña nuestra escena, no simplemente la que más nos gusta aisladamente. Luego guardamos el recurso sonoro para incorporarlo a TurboWarp.

TurboWarp es el lugar donde dejamos de tener archivos independientes y comenzamos a construir un programa multimedia.

Qué integramos

• recursos visuales;
• animación o GIF;
• archivo musical;
• elementos textuales.

Qué hacemos con ellos

• organizamos los elementos en el escenario;
• gestionamos sus capas;
• programamos las animaciones;
• programamos la reproducción musical;
• ejecutamos el conjunto y corregimos errores.

Importar incorpora un recurso. Programar determina cómo se comporta.

Texto Animado es una extensión de TurboWarp que agrega bloques especializados para trabajar con texto dentro del proyecto.

Uso básico

• abrimos el menú de extensiones de TurboWarp;
• seleccionamos Texto Animado;
• comprobamos que aparezcan sus nuevos bloques;
• creamos o configuramos el elemento textual;
• indicamos el contenido que queremos mostrar;
• ajustamos su presentación;
• probamos el resultado junto con el resto de la escena.

La ventaja es que el texto deja de ser una palabra dibujada permanentemente dentro de una imagen y pasa a ser un elemento controlado por nuestro programa.

Las capas determinan qué elemento aparece delante y cuál aparece detrás. No debemos confundirlas con la posición.

Para ordenar la escena

• identificamos qué elemento funciona como fondo;
• decidimos qué objetos deben quedar sobre ese fondo;
• reservamos el primer plano para la información que debe permanecer visible;
• usamos los bloques correspondientes para enviar elementos hacia delante o hacia atrás;
• ejecutamos y comprobamos que nada importante quede oculto.

Un GIF animado contiene numerosos fotogramas. En TurboWarp podemos aprovechar esa sucesión visual para construir una animación.

Un disfraz es una de las apariencias gráficas que puede tener un objeto.

disfraz 1 → disfraz 2 → disfraz 3 → disfraz 4...

La lógica de la animación

• importamos el recurso animado;
• comprobamos sus distintas apariencias o fotogramas;
• programamos el cambio sucesivo entre ellos;
• ajustamos la espera cuando necesitamos controlar la velocidad;
• colocamos la secuencia dentro de una repetición;
• probamos y ajustamos hasta lograr un movimiento fluido.

¿Por qué usamos un bucle?

Un bucle es una estructura de programación que repite una o varias instrucciones. Sin repetición, la secuencia llegaría al último fotograma y terminaría.

1 → 2 → 3 → 4 → 1 → 2 → 3 → 4...

También queremos que la música pueda acompañar continuamente la experiencia.

Lógica de reproducción

• importamos el archivo de música a TurboWarp;
• creamos el programa que comienza al iniciar el proyecto;
• colocamos la reproducción musical dentro de una estructura de repetición;
• utilizamos una reproducción que espere hasta que el sonido termine;
• al finalizar, el bucle vuelve al comienzo.

reproducir completa → terminar → reproducir completa → terminar...

Esto evita iniciar nuevas copias de la canción continuamente y producir una superposición de sonidos.

Antes de publicar debemos comprobar el producto completo.

Qué revisar

• funcionamiento de la animación y su velocidad;
• posición y capas de los elementos;
• legibilidad del texto;
• reproducción de música;
• continuidad de los bucles;
• coherencia visual;
• relación entre los recursos generados.

Una producción no está terminada simplemente porque todos los archivos hayan sido importados. Está terminada cuando funcionan juntos correctamente.

Una vez terminado el proyecto debemos convertirlo en un producto que pueda ejecutarse fuera del editor.

Empaquetar significa preparar un proyecto y sus recursos para obtener un producto ejecutable y distribuible.

Procedimiento

• partimos del proyecto de TurboWarp terminado y probado;
• accedemos a TurboWarp Packager;
• cargamos o seleccionamos nuestro proyecto;
• revisamos las opciones de empaquetado necesarias;
• elegimos la salida en HTML;
• ejecutamos el empaquetado y guardamos el archivo obtenido;
• lo abrimos localmente con un navegador para comprobar que funcione fuera del editor.

HTML significa HyperText Markup Language y es el lenguaje de marcado fundamental utilizado para estructurar contenido web.

En este caso no escribimos manualmente todo ese HTML: TurboWarp Packager genera el producto por nosotros.

El archivo de entrada

Para publicarlo utilizamos como archivo principal:

index.html

index.html es el nombre convencional de la página de entrada de un sitio web.

Antes de publicar

• localizamos el HTML generado;
• nos aseguramos de que el archivo principal se llame exactamente index.html;
• lo abrimos en un navegador;
• comprobamos nuevamente su funcionamiento.

GitHub es una plataforma utilizada para alojar y gestionar proyectos mediante repositorios.

Un repositorio es el espacio correspondiente a un proyecto y contiene sus archivos.

Para nuestro sitio sencillo

• ingresamos a GitHub y creamos un repositorio nuevo;
• entramos al repositorio;
• subimos nuestro index.html a la raíz;
• confirmamos la carga del archivo;
• comprobamos que index.html aparezca en el repositorio.

GitHub Pages permite publicar como sitio web el contenido estático almacenado en un repositorio.

Publicar nuestro index.html desde la rama

Para este proyecto sencillo, con index.html en la raíz del repositorio:

• abrimos Settings dentro del repositorio;
• entramos en Pages;
• en Build and deployment → Source, elegimos Deploy from a branch;
• en Branch, seleccionamos main y la carpeta /(root);
• presionamos Save;
• esperamos a que GitHub complete la publicación y abrimos la URL del sitio.

Una URL es la dirección que identifica la ubicación de un recurso en la Web.

La existencia de una URL no garantiza por sí sola que hayamos terminado correctamente.

Desde la URL pública verificamos

• que cargue index.html;
• que funcione el proyecto de TurboWarp;
• que aparezcan las imágenes;
• que funcione la animación;
• que las capas estén ordenadas;
• que los textos se visualicen correctamente;
• que se reproduzca la música;
• que funcionen los bucles.

Si todo funciona desde la URL pública, completamos el recorrido.

No alcanza con recordar los nombres de las herramientas.

Debemos poder explicar qué hicimos, cómo lo hicimos y por qué lo hicimos.

Por ejemplo:

¿Por qué contextualizamos una generación con IA?
Para proporcionar referencias concretas de nuestro entorno y conseguir un resultado relacionado auténticamente con él, en lugar de depender únicamente de una interpretación genérica de la IA.

¿Cuál es la diferencia entre convertir y optimizar un GIF?
Convertir cambia su formato. Optimizar busca reducir su peso manteniendo una calidad adecuada.

¿Por qué utilizamos capas?
Porque necesitamos controlar qué elementos aparecen delante o detrás de otros.

¿Por qué utilizamos bucles?
Porque determinadas acciones, como una animación o la reproducción continua de música, necesitan repetirse.

¿Qué hace TurboWarp Packager?
Empaqueta el proyecto para obtener un producto que pueda ejecutarse y distribuirse fuera del editor; en nuestro caso, como HTML.

¿Por qué utilizamos index.html?
Porque es el nombre convencional del archivo principal que funciona como entrada de un sitio web.

¿Qué diferencia existe entre GitHub y GitHub Pages?
GitHub permite alojar y gestionar los archivos mediante un repositorio; GitHub Pages permite publicar el contenido web del repositorio como un sitio accesible mediante una URL.

CONTEXTO REAL Fotografías de lugares + gráficas + referencias + fotografías consentidas de personas

↓

GEMINI Contextualización + prompt → imagen

↓

META AI Imagen + prompt de movimiento → animación

↓

EZGIF Animación → conversión a GIF → optimización

↓

SUNO Prompt musical → música

↓

TURBOWARP Importación → Texto Animado → composición → capas → animación → música → bucles

↓

PRUEBA

↓

TURBOWARP PACKAGER Proyecto → HTML

↓

index.html

↓

GITHUB Repositorio → alojamiento del archivo

↓

GITHUB PAGES Configuración → publicación

↓

URL PÚBLICA

↓

PRUEBA FINAL EN EL NAVEGADOR

Definición global del trabajo

Nuestro proyecto consiste en contextualizar y generar recursos multimedia, prepararlos y optimizarlos, integrarlos mediante programación en TurboWarp, empaquetar el resultado como HTML y publicarlo en la Web utilizando un repositorio de GitHub y GitHub Pages.