DOR - Diseno de interfaces web¶

Organizacion de la interfaz¶

En SEO Growth Engine hemos trabajado la interfaz para que la informacion del analisis SEO se muestre de forma ordenada. Para ello, hemos organizado las pantallas por secciones, estados del analisis, metricas principales y accesos a los reportes generados.

Esta organizacion ayuda a que el usuario pueda revisar el estado de un sitio, consultar los datos principales del analisis y acceder a las acciones disponibles desde el dashboard.

Evidencias directas¶

frontend/src/public-tailwind.css
shared/static/css/tailwind-public.css
shared/static/css/design-system.css
shared/static/css/dashboard.css
dashboard/static/css/homepage.css
dashboard/templates/web/public_home.html
dashboard/templates/web/dashboard.html
dashboard/templates/web/site_detail.html
frontend/src/components/OptionToggle.vue
frontend/src/components/AppShell.vue

Cumplimiento de los requisitos de DOR¶

Requisito	Como lo hemos resuelto	Evidencia real
Responsive	Hemos trabajado layouts fluidos, grids adaptables y breakpoints para escritorio, tablet y movil	`public-tailwind.css`, `dashboard.css`, `homepage.css`
Criterios WCAG aplicados	Hay foco visible, etiquetas, `aria-*`, semantica y soporte para reducir movimiento	`OptionToggle.vue`, `site_detail.html`, `clients_list.html`, CSS con `prefers-reduced-motion`
Framework CSS	La capa publica y parte del sistema visual se apoyan en `Tailwind`, complementado con CSS propio	`frontend/src/public-tailwind.css`, `tailwind-public.css`
Gama de color	Hemos definido una paleta sobria para separar fondos, tarjetas, estados y llamadas de accion	`design-system.css`, `dashboard.css`
Usabilidad	Jerarquia visual, paneles, navegacion por bloques y feedback de estado	`dashboard.html`, `site_detail.html`, componentes Vue y estilos compartidos
Documentacion visual	Respaldamos el diseno con capturas, CSS y comportamiento real de las vistas	esta presentacion, estilos del repo y plantillas reales

Responsive de verdad, no solo teorico¶

Hemos hecho que la interfaz se adapte con decisiones visibles en el codigo:

grid-template-columns con minmax(...) y repeat(...) para tarjetas y paneles;
tipografias fluidas con clamp(...);
multiples @media (max-width: ...) para reorganizar bloques;
simplificacion del layout en movil para dashboard, hero, formularios y paneles;
reorganizacion de botones y acciones cuando el espacio baja.

Esto lo podemos mostrar especialmente en:

la home publica;
el dashboard;
el detalle de sitio;
formularios y tarjetas de gestion.

Accesibilidad aplicada¶

Aunque no hemos hecho una auditoria WCAG formal completa, si hemos incorporado practicas concretas:

formularios con label y texto de ayuda;
botones reales para acciones interactivas;
role="tablist" y aria-label en OptionToggle.vue;
aria-current en navegacion de secciones de site_detail.html;
aria-disabled cuando una accion no debe ejecutarse;
estructura semantica con header, nav, section, main;
estilos para prefers-reduced-motion: reduce.

El alcance actual cubre accesibilidad basica real, sin plantearlo como una certificacion externa.

Sistema visual y framework CSS¶

Nos hemos apoyado en dos capas complementarias:

Tailwind para construir rapido y con coherencia en la parte publica;
CSS propio de sistema para dashboard, componentes y estilo compartido.

Con eso hemos combinado velocidad de desarrollo con identidad visual propia. No dependemos de un tema generico sin tocar.

Gama de color y tono visual¶

La paleta del proyecto se ha organizado para diferenciar zonas de informacion:

#040610 Fondo base

#0A0F1E Superficie

#F5F7FB Texto principal

#98A3B8 Texto secundario

#7C5CFF Acento principal

#60A5FA Acento apoyo

#22C55E Correcto

#F59E0B Aviso

#EF4444 Error

fondos sobrios;
acentos controlados;
contraste suficiente entre texto principal y secundario;
tarjetas y paneles con profundidad suave;
una apariencia orientada a paneles de trabajo y no solo a una pagina informativa.

Esta decision permite distinguir dashboard, formularios, tarjetas de estado y acciones principales sin depender solo del texto.

Usabilidad y lectura operativa¶

En este proyecto hemos trabajado usabilidad desde el flujo:

el dashboard resume lo importante antes de entrar al detalle;
los paneles separan bien contexto, accion y resultado;
el detalle de sitio organiza navegacion por secciones;
los estados de run son visibles y faciles de interpretar;
la aplicacion diferencia bien el entorno publico, el acceso cliente y la operativa interna.

La interfaz reduce pasos de navegacion al agrupar estado, acciones, reportes e historial en pantallas concretas.

Resultado visual¶

Con este resultado mostramos que el motor tecnico se acompana de vistas organizadas, estilos reutilizables y componentes que permiten consultar el estado de la aplicacion sin depender de salidas por consola.