Este Trabajo de Fin de Grado (TFG) presenta el diseño y desarrollo de la interfaz web para un nuevo simulador de lenguaje ensamblador, basado en la herramienta ENS2001 y orientado a la asignatura “Traductores de Lenguajes” de la Universidad Politécnica de Madrid. La arquitectura de este simulador ha sido dividida en tres módulos fundamentales: el módulo de ensamblado, el módulo de ejecución y la interfaz de usuario. Estos módulos han sido implementados de forma paralela por un equipo de tres alumnos. El objeto de este TFG es el desarrollo y la integración de la interfaz de usuario.
La solución desarrollada consiste en una aplicación web que elimina las barreras de instalación y garantiza la compatibilidad multiplataforma. Ofrece control completo sobre la ejecución de la simulación y sobre el estado de la máquina simulada. Entre las mejoras introducidas respecto a su predecesor destacan un editor de código integrado, una gestión de depuración más intuitiva y opciones de personalización de tema e idioma. El desarrollo se ha llevado a cabo bajo un enfoque de Diseño Centrado en el Usuario (DCU), validado mediante tests de usabilidad, y con un compromiso estricto con la accesibilidad web siguiendo las pautas WCAG 2.2 (Nivel AA).
Desde el punto de vista técnico, tras un análisis previo de las posibles herramientas a utilizar y sus consideraciones de accesibilidad, la interfaz ha sido implementada con React. A lo largo del proyecto se ha hecho uso de sus herramientas avanzadas para solventar eficientemente los desafíos técnicos de los componentes más complejos. En la fase de pruebas, se han combinado pruebas automatizadas utilizando React Testing Library con pruebas manuales de sistema y de accesibilidad. El resultado final es una herramienta educativa moderna y accesible que, gracias a la integración de los tres módulos de desarrollo, ofrece una experiencia de simulación completa y adaptada a las necesidades actuales de los alumnos de “Traductores de Lenguajes”, aunque su uso puede resultar útil para cualquier persona interesada en un simulador simple y didáctico de ensamblador.
ABSTRACT
This Final Degree Project (TFG) presents the design and development of the web interface for a new assembly language simulator, based on the ENS2001 tool and aimed at the “Language Translators” course at the Universidad Politécnica de Madrid. The architecture of this simulator has been divided into three fundamental modules: the assembly module, the execution module, and the user interface. These modules have been implemented concurrently by a team of three students. Within this collaborative framework, the objective of this TFG is the development and integration of the user interface.
The solution developed consists of a web application that eliminates installation barriers and guarantees multi-platform compatibility. It offers complete control over the execution of the simulation and the status of the simulated machine. Among the improvements introduced in relation to its predecessor are an integrated code editor, more intuitive debugging management, and theme and language customization options. The development was carried out using a User Centered Design (UCD) approach, validated through usability tests, and with a strict commitment to web accessibility following WCAG 2.2 (Level AA) guidelines.
From a technical standpoint, after a preliminary analysis of the possible tools to be used and their accessibility considerations, the interface was implemented with React. Throughout the project, its advanced tools were used to efficiently solve the technical challenges of the most complex components. In the testing phase, automated tests with React Testing Library were combined with manual system and accessibility tests.
The result is a modern and accessible educational tool that, thanks to the integration of the three development modules, offers a complete simulation experience adapted to the current needs of “Language Translators” students, although its use may be useful for anyone interested in a simple and educational assembler simulator.
Este Trabajo de Fin de Grado (TFG) presenta el diseño y desarrollo de la interfaz web para un nuevo simulador de lenguaje ensamblador, basado en la herramienta ENS2001 y orientado a la asignatura “Traductores de Lenguajes” de la Universidad Politécnica de Madrid. La arquitectura de este simulador ha sido dividida en tres módulos fundamentales: el módulo de ensamblado, el módulo de ejecución y la interfaz de usuario. Estos módulos han sido implementados de forma paralela por un equipo de tres alumnos. El objeto de este TFG es el desarrollo y la integración de la interfaz de usuario.
La solución desarrollada consiste en una aplicación web que elimina las barreras de instalación y garantiza la compatibilidad multiplataforma. Ofrece control completo sobre la ejecución de la simulación y sobre el estado de la máquina simulada. Entre las mejoras introducidas respecto a su predecesor destacan un editor de código integrado, una gestión de depuración más intuitiva y opciones de personalización de tema e idioma. El desarrollo se ha llevado a cabo bajo un enfoque de Diseño Centrado en el Usuario (DCU), validado mediante tests de usabilidad, y con un compromiso estricto con la accesibilidad web siguiendo las pautas WCAG 2.2 (Nivel AA).
Desde el punto de vista técnico, tras un análisis previo de las posibles herramientas a utilizar y sus consideraciones de accesibilidad, la interfaz ha sido implementada con React. A lo largo del proyecto se ha hecho uso de sus herramientas avanzadas para solventar eficientemente los desafíos técnicos de los componentes más complejos. En la fase de pruebas, se han combinado pruebas automatizadas utilizando React Testing Library con pruebas manuales de sistema y de accesibilidad. El resultado final es una herramienta educativa moderna y accesible que, gracias a la integración de los tres módulos de desarrollo, ofrece una experiencia de simulación completa y adaptada a las necesidades actuales de los alumnos de “Traductores de Lenguajes”, aunque su uso puede resultar útil para cualquier persona interesada en un simulador simple y didáctico de ensamblador.
ABSTRACT
This Final Degree Project (TFG) presents the design and development of the web interface for a new assembly language simulator, based on the ENS2001 tool and aimed at the “Language Translators” course at the Universidad Politécnica de Madrid. The architecture of this simulator has been divided into three fundamental modules: the assembly module, the execution module, and the user interface. These modules have been implemented concurrently by a team of three students. Within this collaborative framework, the objective of this TFG is the development and integration of the user interface.
The solution developed consists of a web application that eliminates installation barriers and guarantees multi-platform compatibility. It offers complete control over the execution of the simulation and the status of the simulated machine. Among the improvements introduced in relation to its predecessor are an integrated code editor, more intuitive debugging management, and theme and language customization options. The development was carried out using a User Centered Design (UCD) approach, validated through usability tests, and with a strict commitment to web accessibility following WCAG 2.2 (Level AA) guidelines.
From a technical standpoint, after a preliminary analysis of the possible tools to be used and their accessibility considerations, the interface was implemented with React. Throughout the project, its advanced tools were used to efficiently solve the technical challenges of the most complex components. In the testing phase, automated tests with React Testing Library were combined with manual system and accessibility tests.
The result is a modern and accessible educational tool that, thanks to the integration of the three development modules, offers a complete simulation experience adapted to the current needs of “Language Translators” students, although its use may be useful for anyone interested in a simple and educational assembler simulator. Read More
Related posts:
BeerShop: Desarrollo de un Marketplace basado en un SPA con React y Spring Boot
Desarrollo de una interfaz para el análisis de series temporales
Diseño y programación de una aplicación web para la gestión personal
Generador de funciones con interfaz LCD
Diseño y desarrollo de un tipo de pregunta de Moodle para la ETSAM
Sistema móvil de apoyo al diagnóstico de lesiones de rodilla basado en Inteligencia Artificial y algoritmos de decisión