Mosaico HTML es una aplicación web que permite ingresar URLs de aplicaciones y recursos en formato HTML, generar automáticamente una representación visual de cada enlace y organizarlos en un mosaico interactivo.
La aplicación está pensada para reunir en una sola interfaz diferentes aplicaciones web HTML, facilitando su exploración, identificación y acceso.
Mosaico HTML permite agregar páginas individualmente mediante el botón
Ingresa URL. Cada dirección debe utilizar los protocolos
http:// o https://.
Cada archivo HTML se representa mediante una tarjeta visual dentro de una grilla adaptable.
Cada tarjeta contiene:
La grilla utiliza cinco columnas en pantallas grandes y se adapta progresivamente a pantallas más pequeñas.
Mosaico HTML utiliza un servicio de generación de imágenes para crear automáticamente las imágenes que representan cada aplicación.
La URL o ruta del recurso HTML se utiliza como referencia para generar la imagen.
Actualmente permite seleccionar entre los siguientes modelos:
zimagefluxkleingptimageLas imágenes se generan mediante una solicitud al servicio configurado en el backend de la aplicación.
Cada tarjeta dispone de la opción Regenerar.
Esta función genera una nueva versión de la imagen utilizando una semilla aleatoria, permitiendo obtener una representación diferente para una misma aplicación.
Si la imagen generada automáticamente no resulta adecuada, es posible utilizar el botón Subir para seleccionar una imagen desde el equipo.
La imagen seleccionada sustituye la miniatura de la tarjeta.
Al hacer clic sobre una tarjeta, Mosaico HTML abre la URL correspondiente en una nueva ventana.
Esto permite utilizar el mosaico como un panel visual de acceso rápido a una colección de aplicaciones web.
La aplicación permite utilizar el botón Descargar mosaico para generar una versión HTML independiente. El botón se habilita al ingresar al menos dos URLs.
El mosaico exportado incluye:
Las URLs se conservan como enlaces externos. Los archivos HTML locales deben conservarse en una ubicación compatible con las rutas utilizadas por el mosaico exportado.
El usuario puede definir el título que aparecerá en:
Por defecto se utiliza:
Mosaico HTML
Durante la generación de las imágenes se muestra:
Esto permite conocer el avance cuando se trabaja con colecciones grandes.
La interfaz adapta automáticamente el número de columnas según el tamaño de pantalla:
| Ancho de pantalla | Columnas |
|---|---|
| Más de 1100 px | 5 |
| Hasta 1100 px | 4 |
| Hasta 800 px | 3 |
| Hasta 550 px | 2 |
| Hasta 380 px | 1 |
El selector Relación de aspecto permite definir la proporción de las tarjetas y de las imágenes generadas:
Mosaico HTML utiliza tecnologías web estándar:
No requiere un framework frontend para su interfaz.
La aplicación recibe URLs completas de páginas web. Por ejemplo:
https://ejemplo.org/aplicacion.html
http://localhost:8080/recurso.htmlHaz clic en Ingresa URL, escribe una dirección
https:// o http:// y confirma.
Mosaico HTML valida el enlace, crea una tarjeta y genera su imagen de presentación.
La aplicación genera automáticamente una imagen para cada tarjeta.
Durante este proceso se muestra el avance mediante la barra de progreso.
Cada tarjeta permite:
Escribe el título deseado en el campo Título.
Selecciona la Relación de aspecto: panorámica (16:9), cuadrada (1:1) o vertical (3:4).
Después de ingresar al menos dos URLs, haz clic en Descargar mosaico para crear una versión HTML independiente.
El selector Modelo permite escoger el modelo utilizado para generar las imágenes:
zimage
flux
klein
gptimageLa aplicación envía al backend el modelo seleccionado junto con el texto utilizado como referencia para la generación.
Utiliza Ingresa URL para añadir más enlaces al mosaico. La descarga se habilita cuando hay al menos dos URLs. Las tarjetas también pueden eliminarse individualmente con el botón Eliminar.
La grilla descargada se genera como un documento HTML autónomo que incorpora las imágenes de las tarjetas.
El archivo exportado conserva:
Las URLs ingresadas se conservan como enlaces externos en el documento HTML exportado.
Mosaico HTML puede utilizarse para organizar visualmente:
El propósito de Mosaico HTML es convertir una colección de archivos HTML en una biblioteca visual e interactiva.
En lugar de navegar por direcciones y nombres de archivos, el usuario puede reconocer cada aplicación mediante una imagen y acceder a ella directamente desde una grilla.
URLs o archivos HTML → un mosaico visual → acceso directo a cada aplicación.
Diseño y desarrollo: Juan Guillermo Rivera Berrío
Red Educativa Digital Descartes: Proyecto Descartes
La información de licencia no está especificada en el código fuente proporcionado. Si el proyecto va a distribuirse públicamente, se recomienda definir y añadir una licencia al repositorio.
| Función | Disponible |
|---|---|
| Crear grilla automática | ✅ |
| Ingresar URLs | ✅ |
| Generar imágenes con IA | ✅ |
| Seleccionar modelo de IA | ✅ |
| Regenerar imágenes | ✅ |
| Subir imágenes manualmente | ✅ |
| Eliminar tarjetas | ✅ |
| Abrir aplicaciones HTML | ✅ |
| Título personalizado | ✅ |
| Barra de progreso | ✅ |
| Diseño responsive | ✅ |
| Descargar mosaico HTML | ✅ |
| Relación de aspecto | ✅ |
Mosaico HTML — convierte tus aplicaciones HTML en una biblioteca visual.
Diseñado por Juan Guillermo Rivera Berrío con tecnología GPT-5.6 Luna y asistencia de OpenCode.