Sitio web “responsive” con acceso a información remota

Abstract

El Trabajo de Fin de Grado (TFG) que se va a desarrollar a lo largo de esta memoria, consiste en el desarrollo de un Sistema Web que contiene información estática e información que se debe obtener dinámicamente de otros servicios Web. Este Sistema Web ha sido realizado para el Departamento de Lenguajes y Sistemas Informáticos e Ingeniería de Software (DLSIIS) y sustituirá a la Web que tiene en la actualidad. Contiene información acerca del Departamento y del profesorado, así́ como de las titulaciones, las asignaturas y los grupos de investigación que haya en dicho Departamento. También se tiene información referida a la accesibilidad del Sistema Web y la información de contacto. Para completar este TFG, se ha debido realizar el diseño estructural del Sistema Web y de sus contenidos, el diseño de las bases de datos necesarias, el diseño de la interfaz y el desarrollo del Sistema Web. El Sistema Web se ha realizado para tener un diseño responsive, que se adapte a los distintos dispositivos desde los que se pueda acceder. Este diseño responsive debe mantener la coherencia que hay entre las distintas páginas Web, la integridad del contenido y todas y cada una de las distintas opciones que ofrece el sistema, dando igual si el acceso se realiza desde un ordenador o se hace desde un dispositivo móvil. Este Sistema Web debía cumplir con las Pautas de Accesibilidad para el Contenido Web (WCAG) 2.1. El cumplimiento de estas Pautas de Accesibilidad es uno de los puntos importantes de este TFG, debido a que se busca que el Sistema Web pueda ser utilizado por el mayor número posible de usuarios, independientemente de sus hábitos tecnológicos, de sus capacidades físicas o de sus capacidades psíquicas. Se busca cumplir con todas las Pautas de nivel AA y A, ya que se considera que una página Web es accesible cuando alcanza, al menos, el nivel AA. Las tecnologías que se han empleado para la realización de este TFG son diversas, y siempre se ha trabajado con sus últimas versiones. Estas tecnologías son HTML 5, empleado para la estructuración de todo el contenido web y de la interfaz, CSS 3, utilizado junto a HTML 5 para darle estilos diferentes a los contenidos HTML 5 para hacerlos más visuales, sencillos y modernos. Se ha utilizado también PHP 7 para acceder a la información remota contenida en los servicios Web de la UPM, para realizar las conexiones con la base de datos, ya sea para consultas o para actualizaciones de esta, para mostrar la información de una manera dinámica, filtrando esa información según se requiera. Para toda la creación y administración de la base de datos se ha utilizado MySQL, siendo PHPMyAdmin la herramienta empleada para que todo ese manejo de la base de datos se pudiera realizar de una forma visual. El diseño responsive se ha conseguido utilizando la herramienta de Bootstrap 4. Bootstrap 4, es un framework, es decir, un conjunto de herramientas de trabajo que ayudan a la hora de realizar todo el diseño y la implementación de una página Web. Para el manejo del servidor local, se ha utilizado la herramienta de código abierto Apache. Gracias a este servidor, se ha podido montar todo el Sistema Web y comprobar la realización y los cambios que se iban realizando en el camino. Toda la parte de PHP 7, Apache, MySQL y PHPMyAdmin se ha administrado desde la tecnología MAMP, una aplicación encargada de realizar todas las actualizaciones y comprobaciones de manera automática e independiente, y que contiene todas las herramientas y tecnologías mencionadas. Para terminar, este TFG se ha ido dividiendo tanto en objetivos como en requisitos, siendo todos estos explicados más adelante en esta memoria, y no será hasta su final cuando se verá el grado de cumplimiento conseguido.---ABSTRACT---The Final Year Project that is being developed throughout this report, consists in the complete development of a Web System that contains static information and information that must be dynamically obtained from other Web services. This Web System has been made for the Department of Computer Languages and Systems, and Software Engineering and it comes to replace the Web that it currently has. It contains information about the department and the teaching staff, as well as the degrees, subjects and research groups that are in that Department. There is also information regarding the accessibility of the Web System and contact information. To complete this Final Year Project, the structural design of the Web System and its contents, the design of the necessary databases, the design of the interface and the development of the Web System had to be carried out. The Web System has been made to have a responsive design, which adapts itself to the different devices from which it can be accessed. This responsive design must keep the coherence that exists between the different Web pages, the integrity of the content and each and every one of the different options offered by the system, regardless of whether the access is from a computer or from a mobile device. This Web System had to comply with the Web Content Accessibility Guidelines (WCAG) 2.1. Compliance with these Accessibility Guidelines is one of the important points of this Final Year Project, since it is intended that the Web System can be used by as many users as possible, regardless of their technological habits, physical capabilities or psychic abilities. The aim is to comply with all the AA and A Level Guidelines since a Web page is considered to be accessible when it reaches at least AA level. The technologies that have been used to carry out this Final Year Project are diverse, always working with their latest released versions. These technologies are HTML 5, used for structuring all web content and all the interface, CSS 3, used together with HTML 5 to give different styles to HTML 5 content to make them more visual, simple, and modern. PHP 7 has also been used to access the remote information contained in the UPM Web services, to make connections to the database, either for queries or for updates, to display the information in a dynamic way, filtering that information as required. MySQL has been used for all the creation and administration of the database part, with PHPMyAdmin being the tool used so that all this database management can be done visually. Responsive design has been achieved using the Bootstrap 4 tool. Bootstrap 4 is a framework, that is, a set of working tools that help when carrying out all the design and implementation of a Web page. To carry out all the management of the local server, it has been maintained through the Apache open source HTTP Web server. Thanks to this server, it has been possible to mount the entire Web System and check the implementation and the changes that were being made along the way. The whole part of PHP 7, Apache, MySQL and PHPMyAdmin has been managed from MAMP technology. MAMP is an application in charge of carrying out all the updates and checks them automatically and independently, and which contains all the tools and technologies mentioned. To finish, this Final Year Project has been divided into objectives and requirements, all of which are explained later in this report, and it will not be until the end of it when it will be seen how they have been achieved.