Caso de estudio · Proyecto académico
GitMug
La web de un producto ficticio, construida como un producto real.
Recorrido
Un recorrido por lo que incluye la web.
Cuatro piezas que explican el trabajo: ver el producto en 3D, entender cómo funciona, una marca completa y una presentación con su anuncio.
01 Visor 3D y simulador
El termo, generado por código.
El visor no carga ningún modelo externo: la geometría del termo se genera con Three.js. Los estados Passing y Failing cambian el LED y la pantalla del modelo, y un simulador reproduce la pantalla e-ink con el flujo «Push update»: conexión, subida, verificación y refresco.
- Geometría generada con Three.js, sin modelos externos
- Estados Passing / Failing: el LED y la pantalla cambian
- Simulador de pantalla e-ink con flujo de subida
- Rotación y restablecer la vista
En el código visor-3d.html · index.html
02 Producto y cómo funciona
Una pantalla, un anillo y tres estados.
La ficha de producto presenta la pantalla e-ink y el anillo de estado. Cómo funciona explica los tres estados visuales (Passing con LED verde, Failing con LED rojo y Syncing con LED azul) y el flujo conceptual desde GitHub, GitLab o Jira hasta la pantalla e-ink y el LED. Es un concepto, no una integración operativa.
- Pantalla e-ink y anillo de estado
- Passing, Failing y Syncing, cada uno con su LED
- Flujo conceptual en cuatro pasos
En el código producto.html · como-funciona.html
03 Marca e identidad
Cinco colores, dos voces y una mini guía.
La página de marca reúne la identidad del producto ficticio: un cartel, una paleta de cinco colores en la que cada color tiene un trabajo (el verde y el rojo solo significan estado), dos tipografías —Inter para titulares y texto, JetBrains Mono para código y etiquetas— y una mini guía de botones.
- Cartel de marca
- Paleta de cinco colores, cada uno con su función
- Inter y JetBrains Mono, y mini guía de botones
En el código marca.html · img/cartel-gitmug.png
04 Presentación y anuncio
Diez diapositivas y un anuncio con controles propios.
El producto se presenta en un visor de diez diapositivas que se recorre con el teclado o con clic, también a pantalla completa, y en un anuncio de treinta segundos con controles propios de reproducción y sonido en lugar de los del navegador.
- 10 diapositivas, con teclado, clic y pantalla completa
- Anuncio de 30 segundos, 1080p
- Controles propios de reproducción y sonido conmutable
En el código presentacion.html · Anuncio.mp4
Ingeniería
Decisiones que sostienen la demo.
Pocas decisiones, todas con una razón visible para quien recorre la web.
Sin modelos externos
La geometría viaja en el código, no en la red.
El visor 3D genera el termo con Three.js en lugar de descargar un modelo: cero assets pesados que esperar y nada que se rompa si una URL externa falla.
En el código visor-3d.html
Todo estático
Sin frameworks y sin paso de compilación.
HTML, CSS y JavaScript directos, con Tailwind y Three.js por CDN: la web se sirve tal cual en GitHub Pages y funciona con un servidor estático cualquiera.
En el código index.html · Tailwind CDN · Three.js CDN
Movimiento que respeta
Responsive con el movimiento bajo control.
Diseño responsive con menú móvil y animaciones que se desactivan con prefers-reduced-motion. Los formularios de reserva y contacto validan en el cliente y son claramente demostrativos: no procesan pedidos reales.
En el código reserva.html · contacto.html
Resultado
Demo académica en abierto.
GitMug vive en GitHub Pages con el código abierto: 8 páginas, visor 3D, simulador, presentación y vídeo. El producto es ficticio y los formularios son demostrativos. Sin cifras de uso: es un trabajo de clase, no un producto en el mercado.