Caso de estudio · Calidad de ingeniería
Sistema de calidad frontend
Un sistema práctico de calidad diseñado para proteger la credibilidad del portfolio: datos tipados, generación estática de rutas, pruebas de accesibilidad, consistencia visual, cobertura de enlaces internos y feedback de build antes de producción.
Prueba del proyecto
Mi rol
- Construí la estrategia de calidad alrededor de rutas, accesibilidad, consistencia localizada, datos estructurados y overflow móvil.
- Conecté contenido tipado con generación estática de rutas para que añadir páginas mejore descubrimiento sin duplicar renderizado.
- Usé pruebas de navegador enfocadas para proteger SEO y UX de alto impacto manteniendo simple el runtime de producción.
Restricciones
- El portfolio necesitaba confianza sin convertirse en una aplicación pesada con hidratación innecesaria.
- Las pruebas debían detectar regresiones relevantes y seguir siendo mantenibles para un sitio estático pequeño.
- Los layouts árabes y móviles necesitaban protección explícita contra overflow por textos localizados largos.
Decisiones clave
- Protegí expectativas semánticas como un solo H1, `lang` y `dir` localizados, enlaces reales y páginas con schema.
- Agregué cobertura de rutas para cada slug de caso de estudio en los idiomas soportados.
- Mantuve arreglos CSS basados en tokens para mejorar consistencia sin rediseñar el sitio.
Contexto
Un portfolio pulido puede romperse rápido cuando se editan contenido, layout, localización y SEO al mismo tiempo. El sitio necesitaba una capa de calidad que detectara problemas estructurales sin exigir un runtime pesado.
El sistema debía soportar una arquitectura Astro estática mientras validaba detalles importantes para recruiters y buscadores: un solo H1, enlaces rastreables, atributos de idioma, controles accesibles, layouts responsive y rutas de casos funcionales.
Problema
La revisión manual no basta para un portfolio multilingüe. Una edición pequeña puede romper un layout árabe, un cambio de ruta puede ocultar un caso de estudio y un ajuste visual puede crear overflow horizontal en móvil.
El reto fue crear comprobaciones relevantes que protejan calidad de producción sin convertir el proyecto en una suite lenta o sobrediseñada.
- Las páginas localizadas necesitaban shell, controles y tarjetas consistentes.
- Las rutas dinámicas de casos debían seguir accesibles en cada idioma.
- Las reglas de accesibilidad necesitaban cobertura automatizada en páginas clave.
- La arquitectura sensible al rendimiento debía evitar islands o routing de cliente accidentales.
Enfoque
El sistema combina tipado estático, generación de rutas desde contenido, comprobaciones de build y pruebas de navegador enfocadas. Cada capa detecta una clase distinta de regresión y mantiene simple el runtime.
Las pruebas priorizan comportamiento visible para usuarios y crawlers: encabezados, enlaces, atributos de idioma, datos estructurados, carga de imágenes, controles de tema y overflow horizontal.
- Los registros tipados de casos hacen visibles campos faltantes durante desarrollo.
- Astro build valida páginas antes del despliegue.
- Playwright verifica rutas, navegación, controles localizados y overflow responsive.
- axe aporta cobertura contra violaciones de accesibilidad en páginas representativas.
SEO y accesibilidad
La misma estructura que ayuda a la accesibilidad también ayuda a crawlers. Encabezados claros, enlaces reales, listas semánticas, atributos de idioma y contenido server-rendered facilitan la interpretación para personas, buscadores y agentes de IA.
Por eso el sistema de calidad revisa descubrimiento y accesibilidad juntos en lugar de tratarlos como disciplinas aisladas.
- Verifiqué que rutas importantes usen `lang` y `dir` localizados.
- Comprobé datos estructurados con cuerpo de artículo, pruebas y resultados localizados.
- Protegí contra navegación accidental solo de cliente en el shell estático.
- Mantuve pruebas de consistencia visual centradas en tokens compartidos como radios, tarjetas y controles.
Decisiones de rendimiento
El enfoque protege rendimiento evitando complejidad accidental. El sitio puede seguir siendo mayoritariamente estático, las imágenes pueden optimizarse mediante Astro y el comportamiento dinámico queda limitado a controles necesarios.
En vez de añadir más código de monitoreo en runtime, la implementación prioriza confianza de build, HTML estable y layouts deterministas que Lighthouse y usuarios reales puedan evaluar de forma fiable.
- Mantuve pruebas lo bastante enfocadas para ejecutarse durante desarrollo normal.
- Validé que imágenes no hero mantengan lazy loading y async decoding.
- Protegí la expectativa de homepage estática sin islands.
- Comprobé overflow horizontal para conservar estabilidad móvil y RTL.
Resultados
- Una red de seguridad más fuerte para accesibilidad, rutas, localización y regresiones SEO.
- Más confianza al agregar contenido de casos en inglés, español y árabe.
- Una arquitectura static-first que evita hidratación y routing innecesarios.
- Un patrón de QA repetible para futuros portfolios y sitios de marketing.
Próximos pasos
- Agregar comparación visual solo en componentes de alto riesgo si aparecen regresiones frecuentes.
- Registrar reportes Lighthouse durante despliegue cuando exista infraestructura CI.
- Ampliar pruebas sobre nuevos tipos de contenido a medida que crezcan blog y casos.