Kit Digital UC
TL;DR
El Kit Digital UC es una librería de componentes que asegura una identidad visual consistente y mejor usabilidad en los sitios web de la Universidad Católica. Distribuido por CDN, se utiliza en más de 100 sitios. Desde 2022, he trabajado en la creación y mejora de componentes, enfocándome en seguir mejores prácticas de accesibilidad. El principal desafío ha sido mantener la compatibilidad con versiones anteriores mientras actualizamos y optimizamos los componentes clave.
Descripción
Consiste de una librería de componentes reutilizables, creados para mantener una identidad visual uniforme y una experiencia de usuario optimizada en todos los sitios de la Universidad Católica. Abarca desde elementos básicos como cards, buttons y forms, hasta componentes más avanzados como la global topbar y el agenda widget, facilitando el desarrollo de interfaces coherentes en múltiples sitios.
El Kit se distribuye principalmente por CDN, lo que permite su adopción en más de 100 sitios, y el objetivo es que todos los desarrollos futuros lo implementen. Para apoyar a los desarrolladores, también existe un sitio de documentación, que originalmente fue desarrollado con Vue (Nuxt.js) y está en proceso de migración a React (Next.js) con un CMS en Strapi. Esta transición agilizará las actualizaciones y mejorará la gestión de la información.
Mi aporte
Desde que me uní al proyecto a finales de 2022, comencé con tareas de corrección y mantenimiento de componentes existentes, lo que me permitió familiarizarme con la estructura del Kit. Poco después, me encargué de crear nuevos componentes y optimizar implementaciones previas. Uno de mis logros más significativos fue cambiar el uso de background-image a elementos <img>, mejorando tanto la accesibilidad como el SEO al poder utilizar el atributo alt en las imágenes. Esta mejora también añade semántica al código, beneficiando la usabilidad y la experiencia del usuario.
A lo largo del tiempo, nuevas necesidades han surgido en los proyectos oficiales como el Portal UC y Agenda UC, y hemos trabajado en equipo para implementar esos cambios en el Kit, beneficiando a los futuros desarrollos.
Desafíos del Proyecto
Uno de los principales retos del proyecto es mantener la compatibilidad con versiones anteriores, ya que el Kit está distribuido por CDN y muchos sitios dependen de versiones antiguas de los componentes. Esto hace que deprecar o modificar un componente sea complicado, ya que cualquier cambio podría afectar negativamente a sitios que aún lo utilizan. Para mitigar este riesgo, implementamos dynamic imports, permitiendo que solo los componentes necesarios se carguen en función de su presencia en el DOM, mejorando significativamente el rendimiento y evitando que el tamaño del bundle aumente innecesariamente.
Otro desafío ha sido mejorar la accesibilidad del Kit. Cuando me uní, muchos de los componentes no seguían las mejores prácticas, por ejemplo, había enlaces que funcionaban como botones, lo cual afectaba tanto la semántica del código como la accesibilidad para los usuarios. Desde entonces, hemos trabajado en corregir estos problemas, además de mejorar la navegación por teclado en elementos como headers, accordions y modals, lo que ha permitido que el Kit evolucione manteniendo altos estándares de usabilidad y accesibilidad.
Stack tecnológico
- Librería: JavaScript, CSS (SASS/SCSS), Rollup y NPM.
- Documentación actual: Vue (Nuxt.js).
- Nueva documentación: React (Next.js), Strapi CMS.
