Rediseño del Dashboard — Modo Claro/Oscuro y Mayor Densidad de Información
- dashboard
El 2026-06-05, lanzamos un rediseño completo del dashboard de HeatMapX (heatmapx.com/dashboard). La visibilidad y la usabilidad han mejorado significativamente.
Qué ha cambiado
☀ Tema de tres estados: Claro / Oscuro / Sistema
Se ha añadido un toggle de tres estados — "☀ Claro", "💻 Sistema", "🌙 Oscuro" — en la parte superior derecha del header.
- Sistema (por defecto): Sigue automáticamente la configuración de apariencia de tu SO. En macOS configurado en "Auto", cambia a oscuro de noche sin ninguna acción manual.
- Anulación manual: Puedes fijar el modo claro u oscuro en cualquier momento. La preferencia se guarda en tu navegador.
- El flash de contenido sin estilos (FOUC) en la carga inicial está prevenido, por lo que el tema correcto se renderiza inmediatamente al recargar.
▤ Sitios registrados rediseñados como lista tabular
El anterior grid de tarjetas de dos columnas ha sido reemplazado por un layout de tabla de una sola fila, mejorando significativamente la escaneabilidad cuando tienes múltiples sitios registrados.
- Las columnas están alineadas verticalmente en todas las filas, facilitando la comparación de estado y conteos de eventos de un vistazo
- El nombre del sitio, URL, API key y tracker tag se muestran de forma compacta en una sola fila
- Los detalles de configuración se contraen bajo "▸ Info de configuración" (despliega para copiar la API key y el tracker tag)
- Los nombres y URLs largos se truncan automáticamente con "…" para que el layout nunca se rompa
＋ Botón "Añadir sitio" junto al encabezado de sección
Un compacto botón "＋ Añadir sitio" aparece ahora junto al encabezado "Sitios Registrados", permitiéndote añadir un nuevo sitio sin hacer scroll (el botón original al final de la lista también se mantiene).
◐ Diseño plano unificado estilo GitHub
El esquema de colores se ha simplificado, reduciendo sustancialmente el ruido visual.
- Fondo de página: gris neutro (
#f5f5f5), al tono de productos SaaS modernos como Linear y Supabase - Tarjetas: base blanca + borde fino, sin sombra, radio de borde de 6px
- Naranja como único acento de marca (anteriormente: mezclados azul, verde, morado y ámbar)
- Colores de estado semánticos preservados: verde (activo) / ámbar (advertencia) / rojo (error)
Antes / Después
| Aspecto | Antes | Después |
|---|---|---|
| Tema de color | Dashboard oscuro fijo | Tres estados: Claro / Oscuro / Sistema |
| Layout | Grid de tarjetas de dos columnas (baja densidad de información) | Lista tabular de una columna (columnas alineadas verticalmente) |
| Visualización de sitios | Apilados verticalmente, ocupa mucho espacio | Un sitio = una fila + detalles desplegables |
| Botón añadir | Solo al final de la página | Tanto junto al encabezado como al final |
| Color de marca | Azul / verde / morado / ámbar mezclados | Naranja unificado como único eje de acento |
Mejoras adicionales
- Límites de longitud para nombre de sitio y URL: 60 caracteres para nombres / 512 caracteres para URLs, evitando la rotura del layout.
- Marcadores de posición del formulario de añadir sitio actualizados: Reemplazados
e.g. in-gol/https://in-gol.compore.g. My site/https://example.comen los 15 idiomas soportados. - Modal de onboarding: Aparece con fade-in 1 segundo después de llegar al dashboard, suavizando la sensación de "pop repentino".
- Fragmentos de código: Las visualizaciones del tracker tag y el comando CLI han sido actualizadas de fondos oscuros a un estilo de píldora gris claro, en armonía con el tema claro.
Alcance del impacto
Esta versión es solo UI/UX — la lógica de medición, las estructuras de datos y la API no han cambiado. Los tracker tags embebidos existentes continúan funcionando tal como están.