Hacia un sitio web más accesible y moderno: refactorización del portal institucional de la UTN FRLP

Shiroma, Hajime; Coloma Visconti, Julián Valentín; Eliseche, Martín; Lezcano, Juan Ignacio; Docentes: Lasagna Valeria; Istvan Romina

Hajime Shiroma

LINES, Laboratorio de Ingeniería en Sistemas de Información, UTN La Plata. Secretaria de TIC, UTN La Plata Argentina

Julián Valentín Coloma Visconti

LINES, Laboratorio de Ingeniería en Sistemas de Información, UTN La Plata. Secretaria de TIC, UTN La Plata Argentina

Martín Eliseche

LINES, Laboratorio de Ingeniería en Sistemas de Información, UTN La Plata. Secretaria de TIC, UTN La Plata Argentina

Juan Ignacio Lezcano

LINES, Laboratorio de Ingeniería en Sistemas de Información, UTN La Plata. Secretaria de TIC, UTN La Plata Argentina

Docentes: Lasagna Valeria; Istvan Romina

Ingenio Tecnológico

Universidad Tecnológica Nacional, Argentina

ISSN-e: 2618-4931

Periodicidad: Frecuencia continua

vol. 8, e069, 2026

ingenio@frlp.utn.edu.ar

Recepción: 07 noviembre 2025

Aprobación: 10 noviembre 2025

URL: https://portal.amelica.org/ameli/journal/266/26655322665532003/

License Creative Commons
Esta obra está bajo una Licencia Creative Commons Atribución-NoComercial-CompartirIgual 4.0 Internacional.

Modelo de publicación sin fines de lucro para conservar la naturaleza académica y abierta de la comunicación científica

ePub generado a partir de XML JATS4R

Resumen: El presente trabajo aborda el proceso de refactorización y modernización del sitio web institucional de la Universidad Tecnológica Nacional, Facultad Regional La Plata (UTN-FRLP), centrado en la mejora de la accesibilidad y la estructura del código.

La intervención, basada en una metodología incremental, implicó la migración de Bootstrap 3 a Bootstrap 5, la optimización del código y la adecuación a los estándares de accesibilidad WCAG 2.2. Más allá de las mejoras técnicas, esta experiencia constituyó una práctica formativa significativa para estudiantes avanzados de Ingeniería en Sistemas de Información, quienes aplicaron sus conocimientos en un contexto real con impacto institucional. El proyecto favoreció el desarrollo de competencias técnicas, éticas y sociales, promoviendo una mirada crítica sobre la accesibilidad como un derecho fundamental para el acceso a la información y la inclusión digital.

Palabras clave: Accesibilidad web, Inclusión Digital, Refactorización Incremental, Bootstrap 5, Drupal 10.

Introducción

Los sitios web institucionales son herramientas fundamentales para garantizar el acceso a la información, la comunicación y la inclusión en entornos académicos. En la UTN Facultad Regional La Plata (UTN-FRLP), se identificaron barreras significativas de accesibilidad en su portal institucional, tanto para estudiantes actuales como para futuros y futuras ingresantes.

Esta necesidad fue visibilizada a partir de un informe de accesibilidad elaborado por el LABORATORIO DE INNOVACIÓN ABIERTA (LINA-UTN La Plata), que evaluó distintas secciones del sitio oficial, incluyendo las páginas de carreras, el curso de ingreso y los planes de estudio, mediante herramientas como AXE DevTools, lectores de pantalla, simulación de navegación por teclado y análisis de contraste. Además, el informe se nutrió de encuestas a estudiantes secundarios y universitarios, lo que permitió detectar problemas concretos de navegación, organización de contenidos y visibilidad de enlaces clave.

Frente a este diagnóstico, se puso en marcha una experiencia de refactorización del sitio web institucional, enmarcada en un proyecto de mejora continua centrado en el desarrollo web accesible. El objetivo principal fue adecuar la estructura técnica del portal a los estándares de accesibilidad vigentes (WCAG 2.2, nivel AA), optimizar su mantenibilidad y mejorar la experiencia de todos los usuarios, particularmente aquellos con discapacidad o con dificultades de acceso a la información.

Esta intervención se llevó a cabo como parte de una experiencia académica en la carrera de Ingeniería en Sistemas de Información, articulando saberes técnicos con una reflexión ética sobre la inclusión digital. La presente propuesta busca documentar esa experiencia, poniendo en valor tanto las decisiones técnicas adoptadas como el proceso de aprendizaje colectivo que implicó intervenir en un entorno real con impacto institucional.

Se trata de una experiencia concreta de formación situada, en la que la ingeniería se piensa no solo como una práctica profesional, sino también como una herramienta para ampliar derechos y construir una universidad más inclusiva. Para los estudiantes participantes, intervenir en un sistema real con impacto directo sobre la comunidad representó una instancia significativa de aprendizaje, donde pudieron aplicar conocimientos previos, enfrentar problemas complejos y desarrollar nuevas competencias técnicas, éticas y colaborativas.

Objetivos de la experiencia/investigación

El presente trabajo tiene como objetivo compartir una experiencia de intervención tecnológica en un entorno institucional real: el proceso de refactorización y modernización del sitio web institucional de la Universidad Tecnológica Nacional, Facultad Regional La Plata (UTN-FRLP), donde se articulan saberes técnicos con aprendizajes éticos y sociales.

La propuesta busca contribuir a la mejora continua de los servicios digitales universitarios desde una perspectiva inclusiva, fortaleciendo la formación profesional mediante la integración de la práctica, la reflexión crítica y el compromiso con la accesibilidad.

Desarrollo

La experiencia se llevó a cabo como parte de un proyecto académico en la carrera de Ingeniería en Sistemas de Información de la UTN-FRLP, durante el año 2025. Participaron estudiantes avanzados con conocimientos en desarrollo web, accesibilidad digital y sistemas de gestión de contenidos (CMS). La intervención se realizó sobre el sitio institucional de la facultad, el cual presentaba limitaciones de accesibilidad y problemas estructurales derivados del uso de tecnologías desactualizadas.

La metodología adoptada fue la refactorización incremental, que consiste en mejorar gradualmente un sistema existente sin rediseñarlo por completo. Esta metodología permitió mantener la funcionalidad del sitio mientras se aplicaban mejoras técnicas progresivas. Además, se incorporaron principios de diseño centrado en el usuario, priorizando la experiencia de personas con diversas capacidades.

Entre los principales recursos técnicos utilizados se destacan:

Frameworks y tecnologías:HTML, SCSS, Twig, Bootstrap 5

Herramientas de control y despliegue: Git, GitHub

CMS: Drupal 10 (migrado desde Drupal 8)

Herramientas de auditoría: WAVE, Lighthouse

Las tareas realizadas incluyeron:

Migración del diseño de Bootstrap 3 a Bootstrap 5.

Eliminación de herramientas innecesarias como Display Suite.

Reestructuración del HTML para mejorar la semántica y el orden lógico.

Optimización del rendimiento y accesibilidad según indicadores WCAG 2.2.

Separación clara de responsabilidades entre Drupal (contenido) y Twig (presentación).

Los resultados obtenidos muestran mejoras significativas en los indicadores de accesibilidad. Se corrigieron errores de contraste, se mejoró la navegación por teclado, y se añadieron descripciones alternativas a imágenes. Las auditorías con Lighthouse y WAVE arrojaron puntajes notablemente más altos respecto a la versión anterior del sitio.

Si bien el proyecto continúa en desarrollo, las pruebas han evidenciado un avance concreto hacia un entorno digital más accesible, mantenible y alineado con estándares internacionales.

Sin embargo, más allá de los logros técnicos, este proyecto se convirtió en una instancia de aprendizaje situada, en la que los estudiantes aplicaron conocimientos previos y adquirieron nuevas competencias, no solo en tecnologías web, sino también en diseño inclusivo, pensamiento crítico, trabajo colaborativo y sensibilidad social. Intervenir en un sistema real, con impacto directo sobre el acceso a la información de la comunidad universitaria, resignificó su rol como futuros profesionales.

Conclusiones

Este trabajo demuestra que es posible modernizar un sitio institucional sin rediseñarlo por completo, mediante refactorización incremental, buenas prácticas y cumplimiento de estándares. La migración tecnológica y la redefinición de responsabilidades técnicas mejoraron la accesibilidad y mantenibilidad del sitio, sentando las bases para futuras mejoras en otros entornos universitarios.

A nivel formativo, representó una oportunidad valiosa para que los estudiantes aplicaran sus conocimientos en un entorno real, enfrentando desafíos concretos y reflexionando sobre el impacto social de su trabajo. La accesibilidad, lejos de ser solo un requisito técnico, se presentó como un componente ético y pedagógico del desarrollo web, vinculado al derecho al acceso a la información.

De esta manera, esta intervención permitió comprender que el desarrollo de software no es un fin en sí mismo, sino un medio al servicio de derechos. La accesibilidad, tradicionalmente concebida como un requerimiento técnico, se resignificó en este proceso como una dimensión pedagógica y ética.

Trabajar con estándares como WCAG 2.2 llevó a los estudiantes a reflexionar sobre el sentido social de su rol como desarrolladores, comprendiendo que detrás de cada barrera digital puede haber una persona que queda excluida. Este aprendizaje, que trasciende lo técnico, sienta las bases para el ejercicio de una ingeniería más consciente, inclusiva y alineada con los principios de justicia educativa y digital.

Bibliografía

Shah, H. (2023). Advancing Web Accessibility. arXiv:2312.02992.

Jensen, J. S. (2022). The Missing Bootstrap 5 Guide. Packt.

Dubey, V., & Verma, S. (2025). Evaluating Accessibility with Lighthouse

Fakrudeen, M. (2024). Accessibility in Gulf Universities. UAIS.

Bhimrao, V. (2022). Drupal CMS in Libraries. Journal of Information Management.