Tipus de document
Treball de fi de grauData de publicació
Llicència de publicació
Si us plau utilitzeu sempre aquest identificador per citar o enllaçar aquest document: https://hdl.handle.net/2445/228576
Creació d'un repositori de components vue de suport a l'assisgnatura Factors humans i computació
Títol de la revista
Autors
Director/Tutor
ISSN de la revista
Títol del volum
Recurs relacionat
Resum
[ca] L'accessibilitat web és un requisit fonamental en el desenvolupament de programari modern, però la seva implementació continua sent un repte tècnic per als estudiants d'enginyeria informàtica. Aquest Treball Final de Grau presenta AccessiVue, una llibreria de components web reutilitzables i accessibles, dissenyada per a poder ser un material de suport en l'assignatura de Factors Humans i Computació.
L'objectiu principal del projecte ha estat reduir la barrera d'entrada tècnica en la creació d'interfícies inclusives. Per aconseguir-ho, s'ha seguit la metodologia de Design Thinking, estructurant el desenvolupament en un procés iteratiu de cinc fases.
S'ha començat per l'etapa d'Empatitzar, realitzant una recerca qualitativa amb usuaris per comprendre les frustracions reals de l'alumnat. Aquesta informació ha permès Definir el problema mitjançant la creació d'arquetips (Personas) i l'especificació de requisits. Posteriorment, s'ha passat a Idear l'arquitectura de la solució i els fluxos d'interacció, per després Prototipar la interfície en alta fidelitat abans d'iniciar la programació. Finalment, el cicle s'ha tancat amb la fase d'Avaluar, validant la usabilitat i l'accessibilitat de la llibreria resultant mitjançant tests amb usuaris finals i proves tècniques.
Com a resultat, s'ha implementat un catàleg de 5 components (Formulari, Cercador, CRUD, Biblioteca i Drag&Drop) utilitzant Vue.js i una arquitectura sense dependències d'entorn basada en fitxers HTML únics, facilitant la seva integració directa sense configuracions complexes. Tots els components compleixen amb les directrius WCAG 2.2, garantint la navegació per teclat i la compatibilitat amb productes de suport. Aquests components es presenten en un repositori que compta amb una navegació intuïtiva i una fitxa d’informació per a cada component, en el que, a més, s’expliquen els conceptes bàsics de Vue necessaris per tal de poder integrar els components, juntament amb la informació general i especifica dels components, una demostració en viu, el codi font i exemples.
[es] La accesibilidad web es un requisito fundamental en el desarrollo de software moderno, pero su implementación sigue siendo un reto técnico para los estudiantes de ingeniería informática. Este Trabajo de Fin de Grado presenta AccessiVue, una librería de componentes web reutilizables y accesibles, diseñada para servir como material de apoyo en la asignatura de Factores Humanos y Computación.
El objetivo principal del proyecto ha sido reducir la barrera de entrada técnica en la creación de interfaces inclusivas. Para lograrlo, se ha seguido la metodología de Design Thinking, estructurando el desarrollo en un proceso iterativo de cinco fases.
Se ha empezado por la etapa de Empatizar, realizando una investigación cualitativa con usuarios para comprender las frustraciones reales del alumnado. Esta información permitió Definir el problema mediante la creación de arquetipos (Personas) y la especificación de requisitos. Posteriormente, se procedió a Idear la arquitectura de la solución y los flujos de interacción, para después Prototipar la interfaz en alta fidelidad antes de iniciar la programación. Finalmente, el ciclo se cerró con la fase de Evaluar, validando la usabilidad y la accesibilidad de la librería resultante mediante tests con usuarios finales y pruebas técnicas.
Como resultado, se ha implementado un catálogo de 5 componentes (Formulario, Buscador, CRUD, Biblioteca y Drag&Drop) utilizando Vue.js y una arquitectura sin dependencias de entorno basada en archivos HTML únicos, facilitando su integración directa sin configuraciones complejas. Todos los componentes cumplen con las directrices WCAG 2.2, garantizando la navegación por teclado y la compatibilidad con productos de apoyo.
Estos componentes se presentan en un repositorio que cuenta con una navegación intuitiva y una ficha informativa para cada componente. Además, en él se explican los conceptos básicos de Vue necesarios para poder integrar los componentes, junto con la información general y específica de cada uno, una demostración en vivo, el código fuente y ejemplos.
[en] Web accessibility is a fundamental requirement in modern software development, yet its implementation remains a technical challenge for computer engineering students. This Bachelor's Thesis presents AccessiVue, a library of reusable and accessible web components designed to serve as support material for the Human Factors and Computing course.
The main objective of the project was to reduce the technical entry barrier to creating inclusive interfaces. To achieve this, the Design Thinking methodology was followed, structuring the development into a five-phase iterative process.
The process began with the Empathize stage, conducting qualitative research with users to understand the students' real frustrations. This information allowed for Defining the problem by creating archetypes (Personas) and specifying requirements. Subsequently, the solution architecture and interaction flows were Ideated, followed by Prototyping the interface in high fidelity before starting the programming phase. Finally, the cycle concluded with the Evaluate phase, validating the usability and accessibility of the resulting library through tests with end-users and technical trials.
As a result, a catalog of 5 components (Form, Search, CRUD, Library, and Drag&Drop) was implemented using Vue.js and an environment-agnostic architecture based on single HTML files, facilitating direct integration without complex configurations. All components comply with WCAG 2.2 guidelines, ensuring keyboard navigation and compatibility with assistive technologies.
These components are presented in a repository featuring intuitive navigation and an information sheet for each component. Additionally, the repository explains the basic Vue concepts necessary to integrate the components, along with general and specific information, a live demo, source code, and examples.
Descripció
Treballs Finals de Grau d'Enginyeria Informàtica, Facultat de Matemàtiques, Universitat de Barcelona, Any: 2026, Director: Mireia Ribera Turró
Citació
Citació
VALLÈS FUSTA, Gemma. Creació d'un repositori de components vue de suport a l'assisgnatura Factors humans i computació. [consulta: 10 de maig de 2026]. Disponible a: https://hdl.handle.net/2445/228576