Documentación del proceso de desarrollo, decisiones de diseño y dificultades encontradas durante la creación del sitio web de UNKNOW.
19 de Abril — Inicio del Proyecto
Sábado, 19 de Abril de 2026
Inicio del proyecto UNKNOW. Se definió orientar el diseño hacia una estética moderna y minimalista con un sistema de Bento Grid para las tarjetas de integrantes.
Definición de objetivos y alcance — Se estableció que la web debía ser 100% responsive con al menos tres breakpoints (400px, 900px, 1200px).
Decisión de diseño — Se eligió Bento Grid como layout principal por su versatilidad responsiva y estética contemporánea.
Estructura inicial — Se organizaron archivos en carpetas: css/, js/, img/, Integrantes/, bitacora.html e index.html en raíz.
Assets gráficos — Imágenes de tapas y posters centralizadas en la carpeta img/ según la consigna; el audio permanece junto a cada página de integrante.
21 de Abril — Diseño UI/UX y Estructura HTML
Lunes, 21 de Abril de 2026
Definición de la identidad visual del proyecto y creación de la estructura base del sitio. Se implementó el HTML semántico y se comenzó con los estilos CSS principales.
Paleta de colores — Se definió #e6e3dc (fondo beige claro), #ff2a2a (rojo acento), #1a1a1a (negro mate para cards de perfil), #0d0c0c (texto).
Tipografías — Se seleccionó Playfair Display para títulos (elegancia serif), Google Sans para cuerpo (legibilidad moderna).
Estructura HTML — Se creó index.html portada con grid de integrantes, bitacora.html para documentación, y 4 páginas individuales en /Integrantes.
Decisión de diseño — Perfiles con ilustración vectorial acorde a la consigna, sin uso de fotografía identificatoria.
23 de Abril — CSS Grid y Responsive Design
Miércoles, 23 de Abril de 2026
Implementación del sistema de Bento Grid y desarrollo de los estilos responsive para los tres breakpoints obligatorios del TP.
Bento Grid — Implementación con CSS Grid usando grid-template-columns: repeat(12, 1fr) y grid-column: span para distribución flexible.
Breakpoints — Media queries para ≤400px (mobile 1 columna), ≤900px (tablet 2 columnas), ≤1200px (desktop 2-3 columnas).
Cards de integrantes — Diseño de 5 cards por integrante: perfil (negro mate), bio, habilidades, música y películas.
Dificultad — El grid colapsaba en móviles pequeños. Se solucionó forzando grid-column: span 1 en todas las cards para ≤600px.
25 de Abril — Efecto Blackout y Animaciones
Viernes, 25 de Abril de 2026
Desarrollo de las funcionalidades interactivas principales: efecto blackout (modo noche) con luna y estrellas, y animaciones individuales únicas para cada integrante.
Efecto Blackout — Modo oscuro que activa: luna SVG grande, estrellas titilantes (cruces diminutas animadas), y oscurecimiento del fondo.
Botón flotante de luna — Ubicado abajo a la derecha, togglea el modo blackout y muestra mensaje de ayuda "El fuego ilumina..." por 3 segundos.
Animaciones por página — La portada y cada ficha de integrante incluyen un motivo SVG animado distinto para dar variedad visual manteniendo la misma base técnica.
Dificultad — Algunas animaciones de personajes se veían estáticas; se iteró el movimiento (recorrido y vuelta) para ganar dinamismo sin sobrecargar el rendimiento.
View Transitions API — Implementación de navegación fluida entre páginas. Intercepta clicks en links internos y aplica transiciones suaves con fallback para navegadores no compatibles.
28 de Abril — Rediseño de Cards de Habilidades
Lunes, 28 de Abril de 2026
Iteración del diseño de las cards de habilidades. Intentamos una sopa de letras interactiva pero terminamos optando por un diseño limpio y minimalista coherente con el resto del sitio.
Intento: Sopa de letras — Se creó una grilla 10×6 donde las habilidades aparecían ocultas entre letras aleatorias, destacadas en rojo.
Problema — La sopa de letras ocupaba demasiado espacio vertical y no encajaba visualmente con las cards de música/películas.
Decisión de diseño — Grid bento de 9 habilidades (3×3) con mini cajas estilo glassmorphism, reemplazando la lista simple anterior.
Títulos jerárquicos — Tags estilo especialidad (Habilidades / Discos / Películas) con línea divisoria sutil, sin fondos de color llamativos ni emojis excesivos.
Grid de pósters para películas — Transformación a grid tipo tarjeta/póster con 3 columnas, mostrando imagen de portada arriba, icono de cine + nombre de película en negrita, y director/fecha abajo.
Eliminación de glassmorphism — Se quitó el degradado blanco de las cards porque interfería con el modo blackout.
Simplificación de perfiles — Se retiraron etiquetas de rol laboral; la tarjeta de perfil muestra solo los datos pedidos en la consigna (nombre, ubicación y edad).
Avatares SVG Elementales — Reemplazo de emojis por iconos SVG minimalistas representando elementos naturales con colores distintivos para cada integrante.
Iconografía Profesional — Reemplazo de emojis 🎵🎬📍🎂 por SVGs elegantes y consistentes en todas las páginas de integrantes.
30 de Abril — Testing Responsive y Ajustes
Miércoles, 30 de Abril de 2026
Testing en múltiples viewports y corrección de detalles visuales. Se verificó que todo funcionara correctamente en los breakpoints requeridos.
Testing en 400px — Se verificó que todas las cards se apilen en 1 columna y el texto sea legible.
Testing en 900px — Se confirmó que el grid se reorganice en 2 columnas sin superposiciones.
Testing en 1200px+ — Layout completo con distribución óptima del Bento Grid.
Corrección visual — Card de perfil (i-profile) cambiada a negro mate (#1a1a1a) para mejor contraste y coherencia visual.
Modo blackout — Se verificó que las estrellas titilen correctamente y la luna se vea bien en todos los tamaños de pantalla.
Responsive Grid Fix — Durante el testing se detectó desbordamiento horizontal en páginas de integrantes en viewports de 900px. Se implementó grilla de 1 columna con grid-template-columns: 1fr y min-width: 0 para evitar overflow.
1-2 de Mayo — Documentación Final y Polish
Jueves 1 - Viernes 2 de Mayo de 2026
Redacción completa del README.md y actualización de la bitácora con el proceso real de desarrollo. Preparación para deploy en Vercel.
README.md — Documentación del proyecto: descripción, stack, estructura de carpetas, estilos, JavaScript, uso de herramientas de apoyo e hipervínculo al deploy.
Bitácora — Actualización del registro del proceso de diseño e implementación.
Preparación para deploy — Chequeo de rutas relativas y de que los recursos referenciados existan en el repositorio.
Alineación del Reproductor — Botón de play alineado verticalmente con el texto de la canción mediante inline-flex, vertical-align: middle y ajuste fino con position: relative; top: -1px.
Modo Blackout — UNKNOW en rojo — Ajuste del CSS para que en modo noche, el texto del hero sea blanco pero "UNKNOW" mantenga su color rojo de marca.
Modo Blackout en Integrantes — Corrección de colores en modo oscuro: nombres de integrantes en blanco (#fff), títulos de cards (Habilidades/Discos/Películas) en blanco, y habilidades con fondos de color acorde al avatar de cada integrante para mejor legibilidad y cohesión visual.
3 de Mayo — Revisión final y cierre
Domingo, 3 de Mayo de 2026
Pasada final sobre el entregable: se contrastó el enunciado con lo implementado y se corrigieron detalles menores de maquetado y rutas.
Contraste con la consigna — Portada, fichas de integrantes, bitácora, hojas de estilo y script en las ubicaciones pedidas; imágenes bajo img/; navegación usable solo con enlaces y botones del sitio.
Pruebas rápidas — Recorrido en distintos anchos (incluidos los breakpoints del TP), modo blackout y audio en fichas de música.
Documentación — README y apartado de uso de herramientas de apoyo alineados con lo entregado.
Reflexión final — Lo más útil fue iterar sobre el layout (descartar ideas que no encajaban) y probar en varios tamaños de pantalla antes del cierre: evita sorpresas en responsive y mantiene una sola línea visual en todo el sitio.