Gestión y adaptación de contenidos para la realización de experimentos químicos con personas con discapacidades

Gestión y adaptación de contenidos para la realización de experimentos químicos con personas con discapacidades Memoria que presenta para optar al título de Grado en Ingeniería del Software Pablo Márquez Fernández Pablo Martín Atienza Dirigida por el profesor Gonzalo Rubén Méndez Pozo Asistido por los profesores Susana Bautista Blasco Marlon Cárdenas Bonett Trabajo de n de grado en Ingeniería del Software Facultad de Informática Universidad Complutense de Madrid Curso 2017/2018 Enlaces a la aplicación y repositorio de código. Aplicacion web de IamAble: http://iamable.ucm.es/IamAble2/ Código y memoria ubicado en el repositorio GitHub: https://github.com/ NILGroup/TFG-1718-IamAble Documento maquetado con TEX i S v.1.0. Este documento está preparado para ser imprimido a doble cara. Agradecimientos Gracias a C++ por mostrarnos el comienzo del camino. Podríamos dar las gracias a todos los profesores que nos han dado clase durante la carrera, pero sería injusto por los 18 años que pasamos para llegar a la universidad. Podríamos dar las gracias a todos los profesores del colegio, pero sería injusto para nuestros padres y abuelos que nos cuidaron y criaron. Podríamos dar las gracias a nuestros amigos de toda la vida, pero sería injusto para aquellas personas que nos echaron una mano por el camino. Mejor daremos las gracias a todas aquellas personas que nos han tendido la mano cuando han podido, que nos han ayudado a llegar donde estamos hoy día, a aquellos que pudieron ponernos una zancadilla pero decidieron ayudarnos a seguir adelante. Aunque podamos dar las gracias a muchas personas, siempre habrá un reducido número que se nos venga a la en primer lugar cabeza. Nuestros padres, hermanos y abuelos, todos son los máximos responsables de lo que somos hoy día. También debemos darnos las gracias a nosotros mismos, aunque pueda sonar egoísta o creído, no hubiésemos podido acabar sin nuestro esfuerzo y nuestra constancia. iii Resumen Bienvenido/a a Gestión y adaptación de contenidos para la realización de experimentos químicos para personas con discapacidades, un Trabajo de Fin de Grado ubicado en el repositorio de código de Microsoft GitHub (Márquez y Martín, 2018b), cuyos integrantes hemos construido una aplicación web accesible y adaptable a todos los dispositivos, que proporciona una herramienta de soporte para IamAble (Márquez y Martín, 2018a) y docentes de colegios de educación especial. De esta forma, intentamos colaborar en la ayuda por la integración de personas con discapacidad, acercándoles el mundo de la ciencia. Esta aplicación quiere poder ser utilizado por el máximo número de usuarios posibles. Para ésto, la aplicación web muestra todo el contenido de una forma sencilla y accesible para que incluso personas con alguna discapacidad puedan llegar usarla de manera independiente. Los educadores, encargados de guiar a las personas con discapacidad, podrán acceder a una amplia selección de experimentos que tendrán la opción de, por ejemplo, estar orientados a discapacidades concretas para facilitar la elección del experimento a los educadores. La aplicación cuenta, ya de inicio, con una pequeña biblioteca de experimentos que se irá rellenando con la colaboración de profesores y participantes de IamAble, que podrán apoyar el proyecto ampliando el abanico de opciones de la aplicación añadiendo experimentos. Estos experimentos estarán adaptados a personas con discapacidad gracias a la traducción a pictogramas de los pasos que incorpora la aplicación para mejorar la comprensión y la inteligibilidad. La idea de la aplicación web es contar con una gran cantidad de experimentos de distintas disciplinas y dicultades, dedicados a diferentes discapacidades, para poder ayudar tanto a las personas que tienen una discapacidad, como a los docentes que les ayudan en su desarrollo y educación. En este documento detallaremos cómo ha sido el proceso de investigación, diseño e implementación del proyecto. Contaremos cuales han sido las dicultades a superar, los entresijos de las funcionalidades de la aplicación web y las conclusiones entre otras cosas. Acompañando al texto, añadiremos imágenes para complementar las explicaciones, mejorando la comprensión y el entendimiento de todo lo que hemos hecho y el por qué. v Summary Welcome to Gestión y adaptación de contenidos para la realización de experimentos químicos para personas con discapacidades, an End of Degree Project located in Microsoft's code repository GitHub (Márquez y Martín, 2018b) whose participants have built an accessible and adaptable website to all kind of devices, which provides a support tool for IamAble (Márquez y Martín, 2018a) and special education school teachers. This way, we try to help integrating people with disabilities approaching them to the science world. This website, is built in such a way that tries to reach the maximum number of possible users. Thats why the contents of the website, are displayed in a simple and accessible way for those people who have some disability so they are capable of use it independently. Educators, responsible for guiding people with disabilities, will have access to a wide selection of experiments that will have the option of, for example, being oriented to specic disabilities to facilitate the choice of the experiment for educators. The website initially has a small library of experiments, which will be gradually increasing with the collaboration of teachers and IamAble participants, giving support to the project by adding more experiments, making the database of experiments larger.This experiments will be adapted to disabled people thanks to the traduction of the experiments steps into pictograms which is included in the website, improving in comprehension and intelligibility. The idea of the website is to have a huge amount of experiments from dierent disciplines and diculties, dedicated to dierent disabilities to be able to help people with disabilities, as well as teachers who help in their growth and education. In this document we will detail how the process of research, design and implementation of the project has been. We will tell what have been the diculties to overcome, the ins and outs of the functionalities of the website and the conclusions among other things. Accompanying the text, we will add images to complete the explanations, improving comprehension and understanding of everything we have done and why. vii Palabras Clave 0.1. Palabras Clave IamAble Accesible Responsive Drupal Pictograma 0.2. Keywords IamAble Accessible Responsive Drupal Pictogram ix xvi Índice de figuras 6.11. Página que muestra el tercer paso del formulario . . . . . . . 43 6.12. Página que muestra el cuarto paso del formulario . . . . . . . 44 6.13. Página que muestra el quinto paso del formulario . . . . . . . 44 6.14. Página que muestra el primer formulario unicado . . . . . . 45 6.15. Página que muestra el primer formulario unicado mediante decorado y con desplegables . . . . . . . . . . . . . . . . . . . 46 6.16. Página que muestra el formulario nal . . . . . . . . . . . . . 47 6.17. Ejemplo de traducción de un paso de un experimento . . . . . 47 6.18. Plantilla inicial que muestra todos los experimentos . . . . . . 48 6.19. Segunda plantilla que muestra todos los experimentos . . . . 48 6.20. Paginado en la plantilla . . . . . . . . . . . . . . . . . . . . . 49 6.21. Página nal con experimentos y guía de colores . . . . . . . . 49 6.22. Plantilla inicial de la página que muestra todos los datos del experimento............................ 50 6.23. Primera parte de la página que muestra todos los datos del experimento............................ 51 6.24. Segunda parte de la página que muestra todos los datos del experimento............................ 51 6.25. Paso de un experimento . . . . . . . . . . . . . . . . . . . . . 52 6.26. Página sobre experimento . . . . . . . . . . . . . . . . . . . . 53 6.27. Página sobre experimento . . . . . . . . . . . . . . . . . . . . 53 6.28. Panel de un administrador . . . . . . . . . . . . . . . . . . . . 54 6.29. Panel de un usuario . . . . . . . . . . . . . . . . . . . . . . . 55 6.30. Página que muestra todos los usuarios . . . . . . . . . . . . . 55 6.31. Página que muestra las opciones de edición de un usuario . . 55 6.32. Página que muestra las opciones de edición de un usuario . . 56 6.33. Página que muestra todas las noticias . . . . . . . . . . . . . 56 6.34. Página que muestra la creación de una noticia . . . . . . . . . 57 6.35. Página que muestra las creación de una noticia de enlace . . . 57 6.36. Página que muestra la creación de una noticia con cuerpo . . 57 6.37. Página de búsqueda simple . . . . . . . . . . . . . . . . . . . 58 6.38. Página de búsqueda con tablas . . . . . . . . . . . . . . . . . 59 6.39. Página de búsqueda con burbujas . . . . . . . . . . . . . . . . 59 6.40. Diseño responsive de la página principal . . . . . . . . . . . . 60 6.41. Diseño responsive de la página de experimentos . . . . . . . . 61 6.42. Diseño responsive de la página para crear un experimento . . 62 6.43. Comprobación de accesibilidad de la página principal . . . . . 65 6.44. Comprobación de accesibilidad de la página de los pasos de un experimento en la que hay errores . . . . . . . . . . . . . . 65 Índice de Tablas 5.1. Tabla de funcionalidades a las que tiene acceso cada usuario . 30 7.1. Tabla de pictogramas obtenidos del experimento Huevo frito verde ............................... 68 7.2. Tabla de pictogramas que no han sido posible traducirlas del experimento Huevo frito verde . . . . . . . . . . . . . . . . . 69 7.3. Tabla de pictogramas obtenidos del experimento Medición de la acidez de sustancias de uso cotidiano . . . . . . . . . . . . 70 7.4. Tabla de pictogramas que no han sido posible traducirlas del experimento Medición de la acidez de sustancias de uso cotidiano ............................... 71 xvii Capítulo 1 Introducción Según el último censo ocial de personas con discapacidad en España (2007-2008), al menos 3,84 millones de individuos padecen de alguna, lo que supone un 20% de los hogares españoles. Además, este censo, que se realiza cada 10 años, estima que estas cifras van en aumento. Sin embargo, estos datos no resultan alarmantes si revisamos y comprobamos que la legislación española lo está teniendo en cuenta desde 1985 (BOE, 1985) con la promulgación del Real Decreto de la Ordenación de la Educación Especial. Desde entonces la educación inclusiva ha experimentado un progreso espectacular en nuestro país con avances como la escolarización de todos los individuos en un sistema educativo único; o el incremento de centros para alumnos con necesidades especiales; o el refuerzo de equipos docentes con aptitudes para atender debidamente a estos alumnos. Otras leyes posteriores que han supuesto un cambio positivo en el paradigma de estos alumnos con necesidades especiales son también la Ley Orgánica 1/1990 de Ordenación General del Sistema Educativo (LOGSE), en la que se expresa la intencionalidad de dar cabida y normalización a todos aquellos chicos y chicas cuya educación necesite algún tipo de adaptación especial. Por otro lado, la Ley Orgánica de Educación (LOE, 2006) promete que los centros dispondrán de autonomía suciente para garantizar la calidad e igualdad de todos los alumnos, sin excepciones. Y nalmente, la más actual es la Ley Orgánica para la mejora de la Calidad Educativa (LOMCE 2013) que tiene entre sus propósitos ayudar al desarrollo profesional de todos los estudiantes. Así podemos comprobar que la legislación española contempla y apuesta por una educación inclusiva, en la que todos los estudiantes puedan obtener los mismos conocimientos sin importar su condición o posición social. Sin embargo, sabemos que la realidad muchas veces 1 2 Capítulo 1. Introducción dista mucho de lo que pretendía ser, y que por ello se necesitan medidas y recursos que vuelvan a encauzar los objetivos que se tenían planeados. Uno de los principales problemas con los que cuenta la educación en España, es la falta de inversión y por ende de recursos. Pues pese a incluir a todos los alumnos en un único sistema para que sean capaces de obtener los mismos conocimientos, es lógico y consecuente pensar que aunque estén orientados al mismo destino, no todos serán iguales en las formas aprender y que por ello, una inversión en recursos como profesores de apoyo, o aulas dotadas para la inclusión de todos los alumnos, resulta absolutamente necesario y en gran medida, no se tienen. La crisis, junto con otras condiciones políticas que no incumben en esta introducción, es la principal responsable de esta falta de inversión en la educación, siendo, naturalmente, los alumnos los más perjudicados. Y los alumnos con necesidades especiales todavía más. Teniendo todo esto en consideración, nuestro Trabajo de Fin de Grado, está orientado al desarrollo de una aplicación web para el proyecto IamAble, un Proyecto de Innovación y Mejora de la Calidad Docente, y pretende ser un recurso y soporte de gran utilidad para facilitar la labor de docentes que trabajen en centros donde haya alumnos con necesidades especiales. Una de las principales ventajas de esta aplicación web, y que llevado al problema educativo anteriormente planteado supondría una excelente cooperación, es que está orientada a que estos alumnos puedan ser capaces de usarla de manera autónoma. Luchando así contra la precariedad de muchos de los centros españoles donde las clases cuentan con demasiados alumnos y por ello no consiguen aprender adecuadamente. Lógicamente, siempre se necesitará detrás un profesor que oriente y guíe a los alumnos, pero gracias a la gran accesibilidad con la que la hemos dotado y lo intuitiva que es, permite a los estudiantes avanzar fácilmente. Esto lo conseguimos, por ejemplo, con la conversión de los pasos de los experimentos a pictogramas, lo que posibilita y mejora la comprensión de los mismos. 1.1. IamAble El proyecto IamAble es un Proyecto de Innovación y Mejora de la Calidad Docente (UCM, 2017a) de carácter interfacultativo, llevado a cabo en la Universidad Complutense de Madrid. Este proyecto quiere aportar su granito de arena y plantea la idea de acercar el mundo de la ciencia a todas aquellas personas que padecen alguna discapacidad. El concepto se basa en la realización de experimentos que las personas podrán llevar a cabo en sus respectivos centros de educación, en los que 1.2. Comunicación cientíca inclusiva 3 bajo la supervisión de sus educadores podrán adquirir conocimientos sobre diversos campos de la ciencia. En este proyecto están involucradas personas de distintas facultades tales como Educación, Informática y Química, siendo la mayoría de la facultad de Química. Los estudiantes y profesores de esta facultad son los responsables de proporcionar los experimentos que se llevan a cabo en los centros educativos. Figura 1.1: Logo de IamAble A la facultad de Informática se les solicitó ayuda para que IamAble tuviera una mayor visibilidad y tener un lugar donde almacenar tanto los experimentos, como las experiencias y talleres realizados. Y es ahí donde entra nuestro Trabajo de Fin de Grado. Para poder comprender la envergadura de este proyecto y saber a quién va dirigido, nos dispusimos a investigar cómo realizar una página web accesible, así como las diferentes discapacidades que IamAble pretende dirigirse, y otras herramientas que ayuden a comunicar un mensaje a estas personas. A continuación, detallamos todo lo anteriormente comentado. 1.2. Comunicación cientíca inclusiva Para poder comprender y tratar la accesibilidad y la divulgación de la ciencia, asistimos durante la semana de la ciencia (UCM, 2017b) de la UCM a Comunicación cientíca inclusiva . Una mesa redonda en la que participaron varias asociaciones (Madridmasd, 2017) que se encargaban, al igual que IamAble, de transmitir los conocimientos de la ciencia a la sociedad. Entre las diferentes asociaciones se encontraban algunas como Cienciaterapia que lleva la ciencia a los hospitales infantiles; Radio Roncalli de la Fundación Juan XXIII Roncalli, que transmite la ciencia a través de las ondas de la radio; y la propia IamAble. Con nuestra asistencia pudimos aprender el cómo y por qué surgió la idea de nuestro proyecto y para quiénes va dirigido. 4 Capítulo 1. Introducción 1.3. Introduction According to the last ocial census of people with disabilities in Spain (2007-2008), at least 3.84 million individuals suer some of them, which is 20% of Spanish households. In addition, this census, which takes place every 10 years, estimates that these numbers are increasing. However, these data are not alarming if we review and verify that the Spanish legislation is taking it into account since 1985 (BOE, 1985) with the promulgation of the Real Decreto de la Ordenación de la Educación Especial. Since then inclusive education has experienced spectacular progress in our country with advances such as the schooling of all individuals in a single educational system; or the increase of centers for students with special needs; or the reinforcement of teaching teams with aptitudes to properly attend to these students. Other posterior laws that have supposed a positive change in the paradigm of these students with special needs are also the Ley Orgánica 1/1990 de Ordenación General del Sistema Educativo (LOGSE), which expresses the intention to accommodate and normalize all those boys and girls whose education needs some kind of special adaptation. On the other hand, the Ley Orgánica de Educación (LOE, 2006), promises that the centers will have sucient autonomy to guarantee the quality and equality of all students, without exceptions. And nally, the most current is the Ley Orgánica para la mejora de la Calidad Educativa (LOMCE 2013) which has among its purposes to help the professional development of all students. This way we can verify that spanish legislation contemplates and bets for an inclusive education, in which all students can obtain the same knowledge regardless of their status or social position. However, we know that reality is often far from what it was intended to be, and that is why measures and resources are needed to redirect the objectives that were planned. One of the main problems that education has in Spain is the lack of investment and resources. In spite of including all the students in a single system so that they are able to obtain the same knowledge, it is logical and consistent to think that even if they are oriented to the same destination, not all will be equal in the ways to learn and that is why an investment in resources as support teachers, or classrooms equipped for the inclusion of all students, it is absolutely necessary and to a large extent, they are not. The crisis, together with other political conditions that do not concern in this introduction, is the main responsible for this lack of investment in education, being, naturally, the students the most 1.4. IamAble 5 harmed. And students with special needs even more. Taking all this into consideration, our Final Degree Project is oriented to the development of a website for the IamAble project, a Project for Innovation and Improvement of Teaching Quality, and aims to be a very useful resource and support to facilitate the work of teachers who work in centers where there are students with special needs. One of the main advantages of this website, and that led to the educational problem previously raised would be an excellent cooperation, is that it is aimed at these students may be able to use it autonomously. Fighting against the precariousness of many of the spanish centers where classes have too many students and therefore fail to learn properly. Logically, you will always need a teacher behind to guide the students, but thanks to the great accessibility with which we have provided and how intuitive it is, it allows students to use it easily. We achieve this, for example, by converting the steps of the experiments into pictograms, which enables and improves the understanding of them. 1.4. IamAble The IamAble project is a project of Innovation and Improvement of Teaching Quality (UCM, 2017a) of an interfaculty nature, carried out at the Universidad Complutense de Madrid. This project wants to contribute its bit and raises the idea of bringing the world of science to all those who suer from any disability. The concept is based on the realization of experiments that people can carry out in their respective education centers, where under the supervision of their educators they can acquire knowledge about dierent elds of science. In this project are involved people from dierent faculties such as Education, Computer Science and Chemistry, being the majority of the Faculty of Chemistry. The students and professors of this faculty are responsible for providing the experiments that are carried out in the educational centers. Figura 1.2: IamAble Logo 6 Capítulo 1. Introducción The computer science faculty was asked for help so that IamAble could have greater visibility and have a place to store both the experiments and the experiences and workshops carried out. And that's where our Final Degree Project comes in. In order to understand the scope of this project and know who it is aimed at, we set out to investigate how to make an accessible web page, as well as the dierent disabilities that IamAble intends to address, and other tools that help to communicate a message to these people. Next, we detail everything previously commented. 1.5. Inclusive scientic communication In order to understand and treat the accessibility and dissemination of science, we attended to semana de la ciencia (UCM, 2017b) de la UCM to Comunicación cientíca inclusiva . A round table with the participation of several associations (Madridmasd, 2017) that were in charge, like IamAble, of transmitting the knowledge of science to society. Among the dierent associations were some like Cienciaterapia that takes science to children's hospitals; Radio Roncalli of the Juan XXIII Roncalli Foundation, which transmits science through radio waves; and the IamAble itself. With our assistance we were able to learn how and why the idea of our project arose and for whom it is addressed. Capítulo 2 Trabajo relacionado Nos parece pertinente comentar algunos trabajos con características similares al proyecto de innovación educativa de IamAble . Estos trabajos tienen como nalidad, al igual que el nuestro, acercar el mundo de la ciencia a las personas con alguna discapacidad. Algunos de estos proyectos ya llevan años funcionando. 2.1. Trabajos similares A continuación, mencionaremos algunos de los proyectos que tienen una nalidad similar al proyecto IamAble . Estos proyectos están desarrollados por profesores de educación especial o profesores de la Universidad Complutense de Madrid, entre ellos podemos encontrar: Proyecto ConCiencia inclusiva (ConCiencia, 2016a) (ConCiencia, 2016b) Se trata de un proyecto que da continuidad a otro anterior, llamado Con-Ciencia y Discapacidad , en el que se apuesta por acercar la ciencia a la sociedad. Especialmente a personas con diversidad cognitiva y sus familias, y también al profesorado de los centros de educación especial. En el proyecto ConConciencia se pretende unir la ciencia y la divulgación cientíca al derecho de todas las personas a acceder al conocimiento. Independientemente de sus diversidades individuales. Por ello, las nuevas experiencias cientícas que se proponen, están diseñadas para motivar situaciones que promuevan la inclusión. Se trata de que las experiencias puedan ser enriquecedoras para todas las personas que participen en ellas. 7 Capítulo 4 Tecnologías utilizadas A partir de este capítulo explicaremos el proceso de desarrollo de la aplicación web. Detallaremos las diferentes tecnologías que utilizamos para el desarrollo de la aplicación como son los lenguajes de programación; el gestor de contenidos y sus distintos módulos y el servidor en el que está montada la aplicación web para poder acceder a ella. 4.1. Drupal Para el desarrollo de la aplicación web hemos utilizado un Gestor de Contenidos llamado Drupal (Drupal, 2018d). Este gestor de contenidos se utiliza para la creación de páginas web y aplicaciones. Tiene grandes características como la autoría de contenidos, seguridad y un gran rendimiento. Pero en lo que destaca es en la gran exibilidad que tiene gracias a su modularidad. Figura 4.1: Logo de Drupal También es una opción para crear frameworks digitales integrados o ampliarlos gracias a todos los add-ons disponibles. Drupal viene distribuido en kits de inicio a los que se pueden añadir una gran cantidad de temas, que te permiten personalizar la presentación del contenido, o módulos cuya nalidad es ampliar la funcionalidad, todos ellos creados por la comunidad. La comunidad Drupal es una de las comunidades de código abierto 15 16 Capítulo 4. Tecnologías utilizadas más grandes del mundo. Son más de 1,000,000 desarrolladores apasionados, diseñadores, entrenadores, estrategas, coordinadores, editores y patrocinadores que trabajan juntos. La comunidad de Drupal tiene un gran compromiso con el espíritu de código abierto. El proyecto Drupal es un software de código abierto. Esto signica que uno puede trabajar con él y compartirlo con cualquiera de forma gratuita. Sus principios se basan en la colaboración, el globalismo y la innovación. Se distribuye bajo los términos de la Licencia Pública General de GNU (GPL). Al investigar sobre de Drupal, nos encontramos que podíamos usar dos versiones. Cada una tenia acceso a diferentes módulos y temas, ya que no todos estaban disponibles para las dos, bien sea porque no se actualizaron con el cambio de versión, o bien porque salieron solo para la nueva versión. Una vez aprendido qué es Drupal, nos dispusimos a investigar cómo implementarlo en nuestro proyecto y nos encontramos con que existen dos versiones de Drupal y cada una tenía acceso a diferentes módulos y temas, ya que no todos estaban disponibles para las dos, bien sea porque no se actualizaron con el cambio de versión, o bien porque salieron solo para la nueva versión. Lo primero que hicimos fue investigar qué versión de Drupal nos convenía más utilizar, las opciones que consideramos fueron: Drupal 7 - más antigua pero también más asentada por la comunidad con la existencia de más módulos y temas - y Drupal 8 - más moderna pero con muchos módulos en fase alpha -. Para decidirnos investigamos qué temas y módulos tenía cada versión, y cuáles aplicaríamos en la aplicación. Dado las posibilidades que nos da Drupal y la funcionalidad de base insuciente, decidimos buscar por nuestra parte los siguientes componentes: Temas (Drupal, 2018c) Se tratan de conjuntos de archivos que denen el aspecto visual de una aplicación determinando el marcado de HTML y el estilo de CSS que envuelve el contenido. Drupal proporciona varios temas básicos con la distribución central. Estos temas han sido diseñados y construidos por la comunidad en los últimos años. Además de los temas que Drupal trae por defecto, la comunidad que tiene crea nuevos temas tanto gratuitos como de pago y con diferentes funcionalidades y estilos, por ello era necesario investigarlos para encontrar uno que cubriera las necesidades del proyecto. 4.1. Drupal 17 Módulos (Drupal, 2018b) Se tratan de conjuntos de archivos PHP, JavaScript y CSS que amplían las características de la aplicación y agregan funcionalidad. Es tan sencillo activar o desactivar estas características únicamente instalando o desinstalando el propio módulo. Cada módulo que se instala aumenta el tiempo necesario para generar páginas en la aplicación, por lo que es conveniente investigar que módulos son necesarios para que la aplicación web sea lenta. 4.1.1. Temas (WebaimForum, 2013) (DrupalForums, 2012) Pudimos encontrar varios temas que se adecuaban a nuestras necesidades y que nos gustaron visualmente. Nos dispusimos a probarlos y las impresiones que tuvimos de cada uno de ellos fueron: Adminimal Material Design (Drupal, 2016b) Este tema tiene una estructura sencilla, con un diseño responsive para la correcta visualización en diferentes tamaños de pantalla, con diferentes estilos: uno minimalista de Microsoft y otro Material Design de Google. Este tema se encuentra disponible para ambas versiones de Drupal. Aunque al no ser el tema elegido, no inuyó a la hora de elegir la version de Drupal. Omega Theme (Drupal, 2017b) Se trata del tema elegido. Lo consideramos un tema con un sistema de estructura muy buena, con gran facilidad de cambiar la disposición y tamaño de los bloques que componen la página y así poder disponerlo a nuestro gusto. Tiene diseño responsive para su correcta visualización en diferentes tamaños de pantalla. Este tema se encuentra disponible para ambas versiones de Drupal. Aunque se puede descargar para las dos versiones. Para Drupal 8 se encuentra en una versión alpha, que a la hora de instalarlo y congurarlo nos dio muchos problemas. Para la version de Drupal 7 si existe una versión estable con la que pudimos ponernos a trabajar en seguida gracias a su buen funcionamiento. Genesis (Drupal, 2014) Se trata de un tema limpio y fácil de usar. Tiene una estructura sencilla lo que facilita el proceso de modicarla para acomodarlo al gusto del desarrollador. 18 Capítulo 4. Tecnologías utilizadas Este tema solo se encuentra disponible para Drupal 7 y ya en una fase estable. Aunque al no ser el tema elegido, no inuyó a la hora de elegir la version de Drupal. Descartamos este tema debido a que no tiene diseño responsive y este era uno de los requisitos mínimos que necesitabamos. 4.1.2. Módulos (MediacurrentBlog, 2016) (DrupalForums, 2012) Para terminar de decidirnos con la versión a instalar, buscamos algunos módulos para aumentar la productividad o actualizar ciertos componentes de Drupal, como por ejemplo: Adminimal menu Adminimal Theme (WebaimForum, 2013) Interfaz que proporciona una organización más clara de la barra de herramientas, consiguiendo así facilitar la navegación por la misma. Este módulo se encontraba solo para Drupal 7 y lo consideramos importante por la facilidad de uso de la barra de herramientas de Drupal que permitía. En este punto ya teníamos decidido que usaríamos la versión de Drupal 7. El tema que mejor se adecuaba a nuestras necesidades funcionaba mejor en Drupal 7 y además contábamos con la organización que nos proporcionaba Adminimal menu Adminimal Theme en la barra de herramientas. Todo esto junto con el poco tiempo del que disponíamos para empezar con el proyecto, fueron los responsables de que eligiéramos Drupal 7. El resto de módulos que utilizamos en Drupal se encontraban para ambas versiones: @FONT-YOUR-FACE (Drupal, 2016a) Módulo que te permite el cambio de la fuente de la página web mediante una interfaz de usuario sencilla e intuitiva. Permite tomar fuentes de orígenes distintos como puede ser Google Fonts o Font Squirrel. Backup and Migrate (Drupal, 2018a) Módulo que permite realizar backups de drupal copiando todo el contenido de drupal y de la base de datos para poder migrarlo a otro servidor, o para hacer una copia de seguridad. 4.1. Drupal 19 High Contrast (Drupal, 2017a) Módulo que permite cambiar el contraste de la página web entre alto o normal. Lo utilizamos para mejorar la accesibilidad de la página web. Text Resize (Drupal, 2015) Módulo que permite cambiar el tamaño de la fuente para mejorar la accesibilidad de la página web. JQuery Update Módulo que permite la actualización de JQuery y JQuery UI. 4.1.3. Accesibilidad Para hacer la página web más accesible, decidimos incorporar una barra de herramientas utilizando alguno de los módulos anteriormente citados. Estos módulos nos proporcionaron una serie de funcionalidades que permitían el uso de la página a personas con determinadas discapacidades. Las herramientas que hemos introducido son las siguiente: Botón ¾Dislexia? Botón que permite cambiar la fuente de la página a una que sea legible para aquellas personas que padecen de dislexia. Para ello, utilizamos la fuente de código abierto OpenDyslexic (Opendyslexic, 2018) ya que con las fuentes tradicionales se les juntan las letras. Botón cambio de contraste Botón que sirve para cambiar el contraste de la página. Para ello, utilizamos el módulo de Drupal HighContrast, cuya funcionalidad consiste en poder colocar enlaces que posibilitan el cambio de contraste de la página. Botones cambio del tamaño de la letra Botones que aumentan o disminuyen el tamaño de la letra. Para ello, utilizamos el módulo de Drupal Text Resize con el que se pueden añadir tres botones que permiten aumentar o disminuir el tamaño de la fuente de la página, y una tercera funcionalidad que permite restaurar el tamaño de la fuente. 20 Capítulo 4. Tecnologías utilizadas 4.2. CKEditor (CKEditor, 2018) Para algunos campos de los experimentos, como por ejemplo la descripción, queríamos usar áreas de texto. El problema que nos encontramos con las que existen por defecto en HTML es que no son nada personalizables, sino que solo admiten texto plano. Para solucionar este problema, buscamos un editor de texto que fuera WYSIWYG (What You See Is What You Get). De entre los que encontramos, nalmente decidimos quedarnos con CKEditor. Este es un procesador de texto de código abierto con licencias GPL, LGPL o MPL a elección, desarrollado por la empresa CKSource. Con este procesador de texto, podemos personalizar la fuente; el tamaño; etc. Quedando un texto personalizado al gusto del usuario, quien también es capaz de insertar imágenes en el texto. 4.3. Servidor Nuestro proyecto se encuentra montado en un máquina que tiene como propietario el grupo de investigación NIL (NIL, 2018) de la Facultad de Informática perteneciente a la Universidad Complutense de Madrid. Este grupo se dedica al desarrollo de interfaces basadas en el lenguaje, para aplicaciones modernas que sirven para modicar o buscar información, emitir comandos o presentar resultados de una forma fácil de comprender. En cuanto al servidor, se encuentra alojado el gestor de contenidos Drupal junto con los módulos y el tema explicados anteriormente en la sección 4.1 y se encuentra está instalado sobre un servidor Apache+PHP. 4.4. Lenguajes En esta sección explicaremos los lenguajes de marcado y de programación que se han usado para la creación de la página: HTML5 - acrónimo de HyperText Markup Language (Collins, 2017) 4.4. Lenguajes 21 Los documentos HTML, base de todo el contenido que aparece en la conocida como World Wide Web (WWW), constan de dos partes esenciales: contenido de información y un conjunto de instrucciones que le dice al dispositivo en el que se ejecuta, cómo mostrar el contenido. Estas instrucciones comprenden el lenguaje HTML. No es un lenguaje de programación en el sentido tradicional, sino más bien un conjunto de instrucciones sobre cómo mostrar contenido en un navegador web. Idealmente, el contenido de los documentos HTML debería tener el mismo aspecto, independientemente del navegador que se utilice o del sistema operativo en el que reside el navegador. Estos archivos se encuentran en la URL sites/all/libraries/ PHP/views . CSS3 - acrónimo de Cascading Style Sheet (Collins, 2017) Se trata de una tecnología desarrollada por el World Wide Web Consortium (W3C) con el n de separar la estructura de la presentación. Consiguiendo independencia entre los elementos que se muestran en pantalla con la forma en la que estos se muestran. De esta forma el programador puede presentar los elementos a su gusto de manera más sencilla y organizada. Las documentos en los que se encuentran todos los estilos se están ubicadas en la URL sites/all/themes/Omega_IamAble/style/ css . PHP - acrónimo de Hypertext Preprocessor (R.Brooks, 2017) (Creternand, 2017) Se trate de un lenguaje de programación que se ejecuta en la parte del servidor, generando HTML y enviándolo al cliente. Con 22 Capítulo 4. Tecnologías utilizadas su uso conseguimos contenido dinámico en las páginas web. Todo el código PHP es invisible para el usuario, dado que lo que recibe el usuario es el resultado de ejecutar el script con codigo PHP. El código correspondiente a este lenguaje se encuentra en el propio Drupal y en las vistas en las que se ejecuta el código PHP para conseguir el dinamisno anteriormente mencionado. JavaScript (Aravinth, 2017) Lenguaje de programación interpretado especicado por ECMASCRIPT es y mantenida por Ecma International en ECMA-262 e ISO/IEC 16262. Es utilizado en la parte del cliente que permite mejorar las interfaces de usuario y realizar páginas web dinámicas. En nuestro caso lo utilizamos para la realización de Jquery o para alguna funcionalidad, como los ltros de experimentos, de la página ubicándose sus archivos en la siguiente URL sites/all/libraries/JS . Jquery (Miles, 2016) jQuery es una biblioteca multiplataforma de javascript que permite tanto acceder mediante funciones a elementos del document object model (DOM) para acceder a sus atributos y manipularlos, como el manejo de eventos de ratón o teclado por ejemplo. También permite el manejo de datos de formularios web y enviarlos al servidor mediante peticiones HTTP o bien mediante Ajax. Por último tiene métodos para cambiar el CSS y animar elementos de la web para que la página sea agradable a la vista. La carpeta que contiene todo el jQuery se encuentra ubicado en la URL sites/all/libraries/JS . Capítulo 5 Arquitectura de la solución En este capítulo abordaremos la arquitectura que hemos implementado para la aplicación web, explicando mediante diferentes diagramas como se encuentra montado el servidor, que se puede realizar en la aplicación o una secuencia de uso de la aplicación. 5.1. Arquitectura del servidor Como se ha comentado en el capítulo anterior y mostrado en la - gura 5.1 utilizamos un servidor apache+php para proporcionar la web realizada con Drupal y con un diseño responsive para que sea posible el acceso desde distintos dispositivo sin importar su tamaño de pantalla. Para la persistencia de datos, utilizamos una base de datos mySQL. A continuación detallaremos toda la tecnología aplicada para la realización de la aplicación junto con sus versiones. Motor de BD MySQL versión 5.0.11 Servidor Apache versión 2.4.29 Drupal versión 7.56 • PHP versión 5.6.32 Figura 5.1: Implementación de la arquitectura 23 30 Capítulo 5. Arquitectura de la solución Es el tipo de usuario que menos privilegios tiene. Únicamente tiene permiso para consultar los experimentos ya sea mediante una búsqueda o eligiendo uno de la lista. En la gura 5.5 se muestra un diagrama de caso de uso para un usuario no registrado. En la siguiente tabla 5.1 hacemos un pequeño resumen de las funcionalidades a las que tiene acceso cada usuario. Administrador Registrado Sin registrar Consultar Experimentos Sí Sí Sí Gestionar Experimentos Sí Sí No Gestionar Usuarios Si No No Gestionar Noticias Sí Sí (Permiso) No Gestionar Eventos Sí Sí (Permiso) No Tabla 5.1: Tabla de funcionalidades a las que tiene acceso cada usuario 5.5. Flujo de ejecución Vistos todos los diferentes casos de usos para cada tipo de usuario de la web, vamos a ver más en profundidad como se actúa para poder llevar a cabo diferentes funcionalidad. Detallaremos mediante un diagrama de secuencia las siguientes operaciones, debido a que nos parecen las más representativas de la aplicación web: Creación de experimento 5.6. Traducción de texto a pictogramas 5.7. Leer un experimento 5.8. 5.5.1. Diagrama de secuencia de creación de experimento Como podemos ver en la gura 5.6, cuando el usuario selecciona el botón de publicar un experimento, se comprueba la validez de los datos y que estos se hayan rellenado en su totalidad. Después de esta validación, si algún dato no ha sido bien introducido, devolvemos un error a la vista que se mostrará en forma de mensaje. En cambio, si todo ha ido bien, pedimos al controlador publicar el experimento, quien después de obtener la conexión a la base de datos, pide al modelo la persistencia del experimento. El modelo es quien se encarga de introducir el experimento en la base de datos y devolver un comprobante de que todo haya ido correctamente y que la vista actúe acorde a ello. 5.5. Flujo de ejecución 31 Figura 5.6: Diagrama de secuencia de la creación de un experimento 5.5.2. Diagrama de secuencia de traducción de texto a pictogramas Como podemos ver en la gura 5.7, cuando el usuario clickea en el botón de traducir el texto de un paso, la vista realiza una llamada al servicio web para traducir este texto y de esta manera obtener los pictogramas de cada palabra. Si no encuentra el picto de la palabra, se comunica con el controlador y éste a su vez con el modelo para intentar buscar el pictograma de esta palabra en la base de datos de IamAble. Si aún así sigue sin encontrar el pictograma de la palabra, la muestra por pantalla como texto para que el experimento no quede a medias y pueda ser entendido. 32 Capítulo 5. Arquitectura de la solución Figura 5.7: Diagrama de secuencia de la traducción de un paso a pictogramas 5.5.3. Diagrama de secuencia de leer experimento Finalmente en la gura 5.8, se muestra la secuencia de ejecución para mostrar los datos de un experimento, en el que un usuario pulsa un botón mediante la vista y esta se comunica con el controlador. El controlador obtiene la conexión a la base de datos y se comunica con el modelo para obtener todos los datos relacionados con un experimento para luego juntarlos y devolverlos a la vista. 5.5. Flujo de ejecución 33 Figura 5.8: Diagrama de secuencia de leer un experimento Capítulo 6 Diseño e implementación En este capítulo detallaremos el proceso respecto al diseño y estructura por el que pasó la aplicación web desde que comenzamos a desarrollarlo hasta que obtuvimos el resultado nal. Para poder comenzar con el desarrollo, tuvimos que consultar la base de la que partíamos, es decir, tuvimos que comprobar qué se había realizado en la aplicación web del que podíamos partir. Finalmente se optó por empezar de cero aunque nos pudimos hacer una idea básica de como debía ser nuestro proyecto. A su vez recibimos un pequeño feedback por parte de la facultad de Química. Dentro de las instrucciones, nos encontramos con un pequeño esquema que resumía cómo querían que fuese la portada. También había una estructura de la página de búsqueda que mostraría los experimentos según parámetros que se indicarían, como materiales o título, antes de mostrarlos. Figura 6.1: Feedback portada de la facultad de Química 35 36 Capítulo 6. Diseño e implementación En la gura 6.1 podemos ver el pequeño feedback que recibimos de la facultad de Química, donde se muestra una propuesta de portada de la web. Es una propuesta muy simplicada ya que como se puede apreciar, solo aparecen las opciones de Proyecto I.amAble y de Experimentos. Figura 6.2: Feedback ltros de la facultad de Química En la gura 6.2 podemos ver la propuesta de un pequeño paso previo a la lista de todos los experimentos. Es un pequeño ltro que da la opción de seleccionar los experimentos con una determinada dicultad junto con la opción de mostrar todos los experimentos. 6.1. Desarrollo inicial de la web Con toda la información en nuestras manos, nos dispusimos a estructurar tanto la aplicación web como la base de datos. Para ello comenzamos realizando bocetos de la portada con enlaces a los diferentes apartados que tenemos junto con una búsqueda para facilitar al usuario encontrar el experimento indicado. Como complemento a la búsqueda principal de la página, nuestros profesores nos recomendaron la idea de añadir un ltro para el resultado que la búsqueda y para todos los experimentos. Para obtener la estructura del formulario de creación de experimentos y ver qué campos debía tener, leímos los experimentos ya subidos a la web anterior y las chas de experimentos que los profesores nos entregaron. Leídas todas, extrajimos los campos que tenían en común y los que consideramos fundamentales para los experimentos. Tras tener los primeros bocetos de la portada y las diferentes funcionalidades que debía tener la aplicación, comenzamos a implementar las páginas 6.1. Desarrollo inicial de la web 37 y a dar estilos a las diferentes páginas del proyecto explicadas en las distintas secciones que desarrollamos a continuación. 38 Capítulo 6. Diseño e implementación 6.2. Página principal La página principal se trata de la primera que el usuario ve al entrar a la web. Dentro de esta sección introducimos, a parte de los elementos que solo aparecen en la portada, elementos comunes a toda la página web como son el footer y la cabecera. En base a esto podemos hacer diferencias entre 2 tipos de elementos: Elementos siempre visibles • Cabecera • Sidebar First • SideBar Second • Footer Elementos de la propia portada • I Am Able ◦ Enlaces a las funciones de la aplicación. Figura 6.3: Primera Portada En la gura 6.3 se muestra la primera página principal que diseñamos de la web. Vemos una portada mal estructurada, con iconos en la cabecera muy pequeños y bloques de contenido descolocados. Era 6.2. Página principal 39 la primera vez que usábamos Drupal por lo que tuvimos que experimentar. Para aprender a usarlo bien comenzamos probando diferentes formas de colocar los elementos de la página principal. Figura 6.4: Portada estructurada En la gura 6.4 ya conseguimos colocar bien los Sidebars. En el primero de ellos pusimos las opciones con las que el usuario puede cambiar el tamaño de la fuente y cambiar el contraste de la página. En el segundo Sidebar se encuentra ahora la busqueda que antes estaba en la cabecera, de esta forma conseguíamos una cabecera más limpia y aprovechábamos el contenido del Sidebar. Unicamos dos de los accesos rápidos de la portada. Consideramos que tanto la información de proyecto como la de ¾Quiénes somos? podían ir juntas por lo que las unimos en Sobre Nosotros. Figura 6.5: Feedback ltros recibido por parte de la facultad de Química 46 Capítulo 6. Diseño e implementación En la gura 6.15 ya podemos ver un formulario mejor decorado y diseñado, más agradable a la vista que el anterior. Añadimos barras que muestran u ocultan los campos de los pasos, de esta forma el usuario puede tener en pantalla la información que quiere rellenar y le es mas fácil y rápido llegar al resto de campos. Figura 6.15: Página que muestra el primer formulario unicado mediante decorado y con desplegables También hicimos una recopilación de que campos estaban presentes en la mayoría de experimentos, para poder tener el formulario lo más completo posible. Al nal se acabaría añadiendo alguno más de manera adicional como el campo de tipo de experimento, ya que se quiere animar a más facultades a colaborar con el proyecto y puedan existir experimentos de física e incluso recetas de cocina adaptadas. En este punto teníamos todos los campos comunes a todos los experimentos y el formulario ya funcionando tanto las opción para guardar el experimento sin terminarlo como para publicarlo, lo único que nos faltaba era la implementación del pictotraductor. Tras unos cuantos cambios estéticos, el resultado nal podemos observarlo en la gura 6.16. Se ajustaron bien los colores después de una conversación con los tutores consideramos más adecuados para el formulario y se terminó de completar el formulario. 6.3. Página de creación de experimentos 47 Figura 6.16: Página que muestra el formulario nal Por último, nos dispusimos a implementar lo que sería el traductor de texto a pictogramas en la parte de los pasos del experimento. A la hora de traducir el paso, como se puede observar en la gura 6.17, el usuario puede elegir entre varios pictos para decidir cual se adecua mas a sus necesidades o cual se adapta mejor a la discapacidad a la que va dirigido el experimento que esta añadiendo a la página. En el caso de que no encontremos ningún picto en el servicio web que comentamos en el capítulo 4 ni en nuestra base de datos, lo que hacemos es mostrar la palabra tal cual en un recuadro negro. De esta forma siempre mostraremos el paso entero, en vez de mostrar un mensaje de error o no mostrar nada. Figura 6.17: Ejemplo de traducción de un paso de un experimento 48 Capítulo 6. Diseño e implementación 6.4. Página de listado de experimentos Explicaremos a lo largo de esta sección cuál fue el proceso de desarrollo de la página que se encargaría de mostrar todos lo experimentos y ltrarlos. Como se puede ver en la gura 6.18 comenzamos a pensar en un modelo de tarjetas que mostrara la imagen del experimento, el título y un botón para entrar en los detalles del experimento. El ltro decidimos ponerlo como un cajón aparte. Figura 6.18: Plantilla inicial que muestra todos los experimentos La idea nos convenció así que nos dispusimos a retocar los estilos de las tarjetas para hacerlas mas atractivas. Para ello, como se puede ver en la gura 6.19 decidimos quitar el botón para entrar al experimento, haciendo que toda la tarjeta fuera el enlace hacia el experimento dado que es mas cómodo poder hacer click en la tarjeta en vez de en un botón. Movimos el titulo de encima de la foto del experimento para facilitar su legibilidad. Figura 6.19: Segunda plantilla que muestra todos los experimentos 6.4. Página de listado de experimentos 49 En la gura 6.20 se puede ver los cambios en los colores de las tarjetas y añadimos un limite de 6 experimentos por página para que la misma no fuera muy larga. Figura 6.20: Paginado en la plantilla En la gura 6.21 ya se puede ver la página con experimentos reales ya subidos en la que tuvimos que acortar el tamaño destinado a la descripción del experimento porque era demasiado grande. También cambiamos el color de fondo del título en función de la dicultad del experimento, añadiendo una pequeña guía de qué signican los colores. Figura 6.21: Página nal con experimentos y guía de colores 50 Capítulo 6. Diseño e implementación 6.5. Página de un experimento Mostraremos las diferentes partes en las que dividimos un experimento de cara a mostrárselo al usuario. Veremos la información principal en primer lugar que está compuesta por el título; descripción; dicultad; materiales; etc., en segundo lugar los pasos del experimento y por último, la información extra de un experimento que no aporta información necesaria para su realización. 6.5.1. Información principal En esta sección nos disponemos a explicar como fue el proceso de desarrollo de la página encargada de mostrar todos los datos de un experimento. No se empezó a trabajar en ella hasta no tener el formulario de creación de experimentos anteriormente funcional. Figura 6.22: Plantilla inicial de la página que muestra todos los datos del experimento Como se puede ver en la gura 6.22 es una página simple que únicamente muestra los datos del experimento a la que le decidimos añadir un mapa con enlaces que te hacen scroll a la sección del experimento seleccionada. El mapa nos pareció útil aunque únicamente para la web en dispositivos de escritorio, en dispositivos móviles quitaba demasiado espacio 6.5. Página de un experimento 51 a todo el contenido del experimento que es lo importante de la página. Finalmente decidimos eliminar el mapa en los dispositivos móviles debido a la razón anteriormente mencionada. Tras terminar la página de visualización de los experimentos, nos dispusimos a subir los experimentos y probar la forma en la que se mostrarían. 6.23 y 6.24. Figura 6.23: Primera parte de la página que muestra todos los datos del experimento Figura 6.24: Segunda parte de la página que muestra todos los datos del experimento 52 Capítulo 6. Diseño e implementación 6.5.2. Pasos experimento En este apartado mostramos los pasos a seguir para realizar el experimento. Los pictogramas mostrados de cada paso, son el resultado de la traducción que se realiza en el formulario de creación del experimento. Como podemos ver en la gura 6.25, el usuario puede navegar a través de los pasos del experimento gracias a las echas de los laterales. La transición entre experimentos es instantánea por lo que resulta agradable para la interacción del usuario. También podremos volver en cualquier momento a la información básica y acceder a la información adicional del experimento. Figura 6.25: Paso de un experimento 6.5.3. Sobre el experimento En este apartado entran los siguiente puntos de un experimento: ¾Te has preguntado? Calixta te explica Saber más Bibliografía En un principio se implementaron como texto plano en el que no se podría añadir fotos, vídeos o dar formato al texto. Al ver los experimentos que se subirían a la web, nos dimos cuenta de que la mayoría incluía material multimedia por lo que decidimos usar el programa CKFinder mencionado en 4.2. 6.5. Página de un experimento 53 Al poder usar, los usuarios, el editor de texto CKEditor, son ellos los que dan formato al contenido de los diferentes apartados. Podemos ver en las guras 6.26 6.27 un ejemplo de lo que sería la información adicional con los apartados. Figura 6.26: Página sobre experimento Figura 6.27: Página sobre experimento 54 Capítulo 6. Diseño e implementación 6.6. Panel de control de un usuario En esta sección nos disponemos a explicar como fue el proceso de desarrollo de la página encargada de la gestión de los experimentos, usuarios y noticias a la que solamente se puede acceder mediante un usuario y contraseña creada por un administrador. En la página web, tenemos dos tipos de roles, cada uno con una serie de permisos que pasamos a explicar a continuación: Administrador Este rol tiene acceso a todas las funciones de la página. El administrados puede gestionar las noticias y los usuarios, también tiene acceso a todos los experimentos de la página para poder editarlos, publicarlos u ocultarlos y añadir participantes a estos. Usuario Este rol tiene acceso a la gestión de experimentos en los que es el dueño o participante. Adicionalmente, el administrador puede otorgarle unos permisos especiales para que pueda gestionar noticias o eventos. Usuario sin registrar Este rol solo tiene permiso para visualizar los experimentos con lo cual no tiene acceso al panel de usuario. Una vez explicados los roles que puede tener un usuario, creamos una página que dependiendo que rol se le ha asignado, ofrece funcionalidades diferentes según sea un usuario o un administrador. 6.6.1. Experimentos Desde el panel de usuario podemos mostrar u ocultar un experimento, verlo para saber si todo esta colocado como el usuario quiere, editarlo o eliminarlo. A parte de estas funciones básicas, el usuario puede añadir participantes que puedan al experimento para que estos también puedan modicarlo. Figura 6.28: Panel de un administrador 6.6. Panel de control de un usuario 55 En el panel de un usuario sin ningún permiso adicional, únicamente será capaz de crear experimentos y ver aquellos creados por él o en los que participa. En el caso de la gura 6.29 muestra el panel que vería un usuario que no ha creado ni participa en la creación de ningún experimento. Figura 6.29: Panel de un usuario 6.6.2. Usuarios La gestión de usuarios se realiza mediante las operaciones de creación, lectura, edición y eliminación. Figura 6.30: Página que muestra todos los usuarios En la siguiente gura, 6.31, podemos ver los diferentes campos para crear un usuario. El administrador asigna una contraseña, que se encripta para mayor seguridad, y los permisos correspondientes para editar noticias y eventos. Figura 6.31: Página que muestra las opciones de edición de un usuario 62 Capítulo 6. Diseño e implementación Para nalizar, en la gura 6.42, tenemos la página para crear un experimento en el que los campos que mas espacio ocupan, como en esta ocasión las tablas y la traducción, pasan de estar en horizontal a vertical. (a) Diseño en un dispositivo de escritorio (b) Diseño en un dispositivo móvil Figura 6.42: Diseño responsive de la página para crear un experimento 6.9. Validación de la accesibilidad En este capítulo vamos a explicar los diferentes mecanismos de pruebas y de validación que hemos usado para saber si nuestra página cumple con los estándares de accesibilidad o saber si merece la pena usar el traductor de la página o tener una persona especializada que traduzca cada frase a pictograma. Para poder comprobar si la página es accesible, existen unos estándares proporcionados por W3C (W3C, 2018c). Las Web Content Accessibility Guidelines (WCAG) (W3C, 2018d) explican cómo crear contenido web más accesible para gente con discapacidades (W3C, 2018a). 6.9. Validación de la accesibilidad 63 Tienen 12 guías que están organizados mediante cuatro principios: Perceptible: la información e interfaz de usuario deben de ser presentadas a los usuarios de manera que puedan percibirlas. • Esto signica que los usuarios deben ser capaces de percibir la información que se les presenta (no puede ser invisible para todos sus sentidos). • Para cumplirlo se dan los siguientes consejos (W3C, 2018b): ◦ Añadir alternativas de texto al contenido que no sea texto. ◦ Añadir subtítulos y otras alternativas para todo el contenido multimedia. ◦ Crear contenido que pueda ser mostrado de distintas maneras. ◦ Incluir tecnologías asistentes. ◦ Hacer más fácil a los usuarios el ver y escuchar el contenido. Manejable: los componentes de la interfaz de usuario y navegación deben de ser manejables. • Esto signica que los usuarios deben de ser capaces de manejar la interfaz (la interfaz no puede requerir interacción que un usuario no puede realizar) • Para cumplirlo se dan los siguientes consejos: ◦ Hacer que toda la funcionalidad esté disponible mediante el teclado. ◦ Dar a los usuarios el tiempo suciente para leer y usar el contenido. ◦ No usar un contenido que cause convulsiones. ◦ Ayudar a los usuarios a navegar y encontrar el contenido que necesitan. Comprensión: la información y el manejo de la interfaz de usuario deben de ser comprensible. • Esto signica que los usuarios deben ser capaces de comprender la información y el funcionamiento de la interfaz de usuario (el contenido o manejo de la interfaz no puede estar más allá de su comprensión). 64 Capítulo 6. Diseño e implementación • Para cumplirlo se dan los siguientes consejos: ◦ Hacer que el texto que sea legible y comprensible. ◦ Hacer que el contenido aparezca y se maneje de maneras predictivas. ◦ Ayudar a los usuarios a evitar y corregir errores. Robustez: el contenido debe de ser lo sucientemente robusto que sea posible ser interpretado elmente por una amplia variedad de agentes de usuario, incluidas las tecnologías de asistencia. • Esto signica que los usuarios deben poder acceder al contenido a medida que las tecnologías avanzan (a medida que las tecnologías y los agentes de usuario evolucionan, el contenido debe permanecer accesible). • Para cumplirlo se da el siguiente consejo: ◦ Maximizar la compatibilidad con las herramientas de usuario actuales o futuras. Por cada guía, existen criterios de éxito testeables que determinan el nivel de accesibilidad de la página dependiendo de cuantas condiciones cumpla la página. De esta forma puedes obtener una calicación A , AA o si cumples con todas AAA. Para comprobar qué nivel de accesibilidad tiene nuestra página utilizamos una herramienta online llamada Achecker (Achecker, 2018) que comprueba las páginas HTML individuales de acuerdo con los estándares de accesibilidad para garantizar que todos puedan acceder al contenido. Como se puede ver en las guras 6.43 y 6.44, hay que indicar la URL de la página web que quieres comprobar a esta herramienta, la guía de accesibilidad que quiere el usuario cumplir y el nivel de accesibilidad al que se quiere llegar. En base a estos parámetros, la herramienta devuelve los errores y si cumple o no con los requisitos que se le pidieron. En nuestro caso el proyecto entero, tras solucionar los errores mostrados en la gura 6.44, recibe una calicación de AAA aunque como se puede ver todavía quedan problemas potenciales que por falta de tiempo no se han podido solventar. 6.9. Validación de la accesibilidad 65 Figura 6.43: Comprobación de accesibilidad de la página principal Figura 6.44: Comprobación de accesibilidad de la página de los pasos de un experimento en la que hay errores Capítulo 7 Pruebas y validación Para evaluar la utilidad de traducción de los pasos en pictogramas, decidimos comprobar la abilidad el traductor que habíamos integrado en nuestra aplicación web. Teníamos que valorar qué tan lejos o cerca estaba nuestro traductor de los resultados ofrecidos por los expertos en educación especial. Para ello, comparamos el servicio de Pictar del estudiante de Máster en la Universidad Complutense de Madrid Alejandro Martín, la aplicación web de Pictotraductor, los pictogramas que realizaron expertos y nuestra aplicación web. De esta forma pretendemos exponer las diferencias de nuestro traductor con el resto de servicios en la web, y aunque nuestro proyecto va más allá de la traducción de los pasos de los experimentos, si que es una parte fundamental de nuestra aplicación web por lo que es importante saber el éxito de ésta. 7.1. Evaluación Para poder exponer los resultados de la comparativa, mostraremos, con el uso de tablas, el número de pictogramas y de errores que nos devuelven los servicios de una manera sencilla y visual. Haremos la comparativa usando 2 experimentos que se encuentran en la aplicación web Mostraremos los pictogramas que resultan de la traducción de los pasos y el número de errores que se devuelven en 2 experimentos como ejemplo de lo que hemos comentado anteriormente. Para el primer ejemplo hemos cogido el experimento de Huevo frito verde que consta de 10 pasos y no incluye ningún producto químico, mientras que para el segundo ejemplo hemos cogido el experimento 67 68 Capítulo 7. Pruebas y validación Medición de la acidez de sustancias de uso cotidiano que consta de 14 pasos e incluye una serie de productos químicos. 7.1.1. Ejemplo 1 - Huevo frito verde A continuación, en la tabla 7.1 reejamos el número de pictogramas traducidos sin tener en cuenta si se encuentra un pictograma para la palabra o si se muestra un picto con la palabra escrita tal cual o si se muestra un pictograma de error en caso de no mostrar la palabra. Nombre del paso IamAble Pictar Pictotraductor Expertos Se lava la col 4 4 4 2 Se corta la col en trozos 6 6 6 2 Se introducen los trozos en una cazuela 7 7 7 4 Se añade 1.5 L de agua 6 6 6 2 Se cuece la mezcla (15 minutos en olla, 30 minutos en cazuela) 13 13 13 4 Se ltra el caldo 4 4 4 1 Se rompe un huevo y se coloca en un plato 10 10 10 6 Añadir una cuchara de caldo al huevo y remover con la clara 12 12 12 7 Freír el huevo y ponerlo en un plato 8 8 8 4 Poner una pizca de sal 5 5 5 1 Total 75 75 75 29 Tabla 7.1: Tabla de pictogramas obtenidos del experimento Huevo frito verde Como podemos observar, las tres traducciones automáticas dieren mucho de la hecha manualmente por los expertos ya que devuelven más del doble de pictogramas. Esto se debe a que las automáticas traducen palabra a palabra mientras que la hecha manualmente no. Esto se maniesta por ejemplo en el ultimo paso Poner una pizca de sal ya que la automática traduce cada palabra obteniéndose un total de cinco pictogramas, mientras que la de los expertos ponen un pictograma de un salero echando sal y con eso es suciente. 7.1. Evaluación 69 Una vez vista la cantidad de pictogramas que devuelven todos los servicios y los expertos, es momento de diferenciar cuantas palabras no han devuelto un pictograma, o lo que es lo mismo, cuantas palabras han devuelto un error, para ello en la tabla 7.2 podemos ver el número de palabras de las que no se ha encontrado su correspondiente pictograma. Nombre del paso IamAble Pictar Pictotraductor Expertos Se lava la col 0 0 0 0 Se corta la col en trozos 0 0 0 0 Se introducen los trozos en una cazuela 1 1 1 0 Se añade 1.5 L de agua 1 1 1 0 Se cuece la mezcla (15 minutos en olla, 30 minutos en cazuela) 5 5 5 0 Se ltra el caldo 2 2 2 0 Se rompe un huevo y se coloca en un plato 0 0 0 0 Añadir una cuchara de caldo al huevo y remover con la clara 1 1 1 0 Freír el huevo y ponerlo en un plato 1 1 1 0 Poner una pizca de sal 0 0 0 0 Total 11 11 11 0 Tabla 7.2: Tabla de pictogramas que no han sido posible traducirlas del experimento Huevo frito verde Analizando la tabla podemos observar que las tres traducciones que devuelven los servicios automáticos dan el mismo resultado quedando así nuestra traducción a la misma altura que otras más profesionales pero con un margen de mejora como se puede observar en el siguiente ejemplo en el que se usan materiales químicos de los que no existen pictogramas. 7.1.2. Ejemplo 2 - Medición de la acidez de sustancias de uso cotidiano A continuación, en la tabla 7.3 reejamos el número de pictogramas traducidos sin tener en cuenta si se encuentra un pictograma para la palabra o si se muestra un picto con la palabra escrita tal cual o si se muestra un pictograma de error en caso de no mostrar la palabra. 70 Capítulo 7. Pruebas y validación Nombre del paso IamAble Pictar Pictotraductor Expertos Se lava la col 4 4 4 2 Se corta la col en trozos 6 6 6 2 Se introducen los trozos en una cazuela 7 7 7 4 Se añade 1.5 L de agua 6 6 6 2 Se cuece la mezcla (15 minutos en olla, 30 minutos en cazuela) 13 13 13 4 Se ltra el caldo y se deja enfriar 8 8 8 4 Se pone el caldo en vasos (se deja uno como testigo) 12 12 12 3 Se añade una pizca de bicarbonato a un vaso y se mezcla bien 13 13 13 4 Se añaden gotas o un chorrito de vinagre (o zumo de limón) a otro vaso 15 15 15 5 Se añaden gotas o un chorrito de lejía (o amoniaco) a otro vaso 13 13 13 5 Se añaden gotas o un chorrito de agua fuerte (salfumán) a otro vaso 12 12 12 5 Se añade unas gotas o chorrito de gel a otro vaso 11 11 11 5 Se añade vino blanco a otro vaso 6 6 7 4 Se añade leche a otro vaso 6 6 6 4 Total 119 119 120 53 Tabla 7.3: Tabla de pictogramas obtenidos del experimento Medición de la acidez de sustancias de uso cotidiano Como podemos observar al igual que en el anterior experimento, las tres traducciones automáticas siguen devolviendo más de el doble de pictogramas que las realizadas manualmente, aunque esta vez con una diferencia minúscula entre la traducción del servicio web y la del pictotraductor. Este cambio se debe a que el servicio web que utilizamos realiza la traducción mediante n-gramas buscando palabras compuestas. En este caso las palabras vino blanco, el servicio lo traduce con único pictograma mientras que la aplicación del pictotraductor las traduce por separado. 7.1. Evaluación 71 Una vez vista la cantidad de pictogramas traducidos, es momento de diferenciar cuantos de ellos no han sido capaz de encontrar los traductores. Para ello, en la tabla 7.4 podemos ver el número de pictos que no ha encontrado cada traductor por paso. Nombre del paso IamAble Pictar Pictotraductor Expertos Se lava la col 0 0 0 0 Se corta la col en trozos 0 0 0 0 Se introducen los trozos en una cazuela 1 1 1 0 Se añade 1.5 L de agua 1 1 1 0 Se cuece la mezcla (15 minutos en olla, 30 minutos en cazuela) 5 5 5 0 Se ltra el caldo y se deja enfriar 2 2 3 0 Se pone el caldo en vasos (se deja uno como testigo) 1 1 1 0 Se añade una pizca de bicarbonato a un vaso y se mezcla bien 0 1 1 0 Se añaden gotas o un chorrito de vinagre (o zumo de limón) a otro vaso 1 1 1 0 Se añaden gotas o un chorrito de lejía (o amoniaco) a otro vaso 2 2 2 0 Se añaden gotas o un chorrito de agua fuerte (salfumán) a otro vaso 1 2 2 0 Se añade unas gotas o chorrito de gel a otro vaso 1 1 1 0 Se añade vino blanco a otro vaso 0 0 0 0 Se añade leche a otro vaso 0 0 0 0 Total 15 17 18 0 Tabla 7.4: Tabla de pictogramas que no han sido posible traducirlas del experimento Medición de la acidez de sustancias de uso cotidiano Es aquí donde se ve la diferencia de nuestro traductor con respecto de los demás. La mejoría se debe a que este experimento utiliza productos químicos que no tienen pictogramas incluidos en las distintas bases de datos como en este caso los productos de salfumán y bi- Apéndice A Aportaciones A.1. En común Investigación, información de uso y desarrollo codicación páginas y lógica en entorno de Drupal. Creación del subtema de Omega con reubicación de los bloques de contenido. Investigación, información de uso e implementación de módulos para implementar en Drupal. Información e implementación de las reglas de accesibilidad en la aplicación. Desarrollo de tareas de la base de datos: • Diseño e implementación estructura base de datos. A.2. Pablo Márquez Fernández Investigación, información de uso e implementación de diferentes temas de Drupal como Adminimal Material Design y Genesis para su posible implementación. Diseño y creación iconos funcionalidades en portada. Desarrollo de tareas del front-end, entre ellas: • Estructuración de la mayoría de páginas mediante HTML. • Diseño de la aplicación web mediante CSS. • Desarrollo animaciones de los elementos mediante Jquery. 79 80 Apéndice A. Aportaciones Desarrollo de tareas del backend: • Subida de imágenes de los cuadros de texto de CKEditor al servidor. A.3. Pablo Martín Atienza Investigación, información de uso e implementación de diferentes temas, entre ellos el tema Omega, para implementar en Drupal. Desarrollo de tareas de la base de datos, entre ellas: • Realización de la conexión de la aplicación web con la base de datos. • Implementación de consultas contra la base de datos. Desarrollo de tareas del back-end: • Aprendizaje código lenguaje PHP por cuenta propia. • Realización de la mayoría de desarrollo del código de backend. Desarrollo de tareas del front-end: • Codicación de funciones Javascript para el formulario. • Estructura y diseño de la página de formulario. Bibliografía Achecker . Tester accesibilidad. https://achecker.ca/checker/ index.php , 2018. Último acceso: 14-05-2018. Aragón, G. Portal aragonés de la comunicación aumentativa y alternativa. http://www.arasaac.org/ , 2018. Último acceso: 28-052018. Aravinth, A. Beginning functional JavaScript . Apress. 2017. Disponible en http://cisne.sim.ucm.es/record=b3759936~S10*spi . BOE . Real decreto 334/1985, de 6 de marzo, de ordenación de la educación especial. https://www.boe.es/buscar/doc.php?id= BOE-A-1985-4305 , 1985. Último acceso: 22-05-2018. CKEditor . Editor de texto ckeditor. https://ckeditor.com/ , 2018. Último acceso: 13-04-2018. Collins, M. J. Pro HTML5 with CSS, JavaScript, and multimedia Complete Website Development and Best Practices . Apress. 2017. Disponible en http://cisne.sim.ucm.es/record= b3760549~S6*spi . ConCiencia . Proyecto conciencia inclusiva. https://www. lasallecentrouniversitario.es/comunidad/dia-a-dia/ Paginas/ProyectoConCienciaInclusiva.aspx , 2016a. Último acceso: 30-04-2018. ConCiencia . Proyecto conciencia inclusiva. http://enciende. cosce.org/proyectos/documentos/ConCiencia%20Inclusiva% 20-%20ENCIENDE%20f.pdf , 2016b. Último acceso: 30-04-2018. Creternand, G. Functional PHP uncover the secrets of functional programming with PHP to ensure your applications are as great as they can be . Packt Publishing. 2017. Disponible en http://cisne. sim.ucm.es/record=b3769034~S10*spi . 81 82 BIBLIOGRAFÍA Drupal . Tema de drupal: Genesis. https://www.drupal.org/ project/genesis , 2014. Último acceso: 19-03-2018. Drupal . Módulo de drupal: Text resize. https://www.drupal.org/ project/text_resize , 2015. Último acceso: 20-03-2018. Drupal . Módulo de drupal: @font-your-face. https://www.drupal. org/project/fontyourface , 2016a. Último acceso: 20-03-2018. Drupal . Tema de drupal: Adminimal material design. https://www. drupal.org/project/adminimal_theme , 2016b. Último acceso: 1903-2018. Drupal . Módulo de drupal: High contrast. https://www.drupal. org/project/high_contrast , 2017a. Último acceso: 20-03-2018. Drupal . Tema de drupal: Omega-theme. https://www.drupal.org/ project/omega , 2017b. Último acceso: 19-03-2018. Drupal . Módulo de drupal: Backup and migrate. https://www. drupal.org/project/backup_migrate , 2018a. Último acceso: 2003-2018. Drupal . Que son los módulos de drupal. https://www.drupal.org/ docs/user_guide/en/understanding-modules.html , 2018b. Último acceso: 17-05-2018. Drupal . Que son los temas de drupal. https://www.drupal.org/ docs/user_guide/en/understanding-themes.html , 2018c. Último acceso: 17-05-2018. Drupal . Sobre drupal. https://www.drupal.org/about , 2018d. Último acceso: 15-04-2018. DrupalForums . Módulos y temas de drupal con accesibilidad. https://groups.drupal.org/node/66383 , 2012. Último acceso: 19-10-2017. Madridmasd . Mesa redonda asistente a facultad geológicas. http://www.madrimasd.org/semanaciencia2017/actividad/ comunicacion-cientifica-inclusiva , 2017. Último acceso: 08-04-2018. Márquez, P. y Martín, P. Iamable. http://iamable.ucm.es/ IamAble2 , 2018a. Último acceso: 27-05-2018. BIBLIOGRAFÍA 83 Márquez, P. y Martín, P. Repositorio para el tfg de iamable. https://github.com/NILGroup/TFG-1718-IamAble , 2018b. Último acceso: 8-06-2018. Martín, A. Pictar. http://hypatia.fdi.ucm.es/pictar/ , 2018. Último acceso: 08-05-2018. MediacurrentBlog . Módulos de drupal con accesibilidad. http://www.mediacurrent.com/blog/ accessibility-hackathon-part-2-accessibility-drupal-7-case-study , 2016. Último acceso: 17-10-2017. Miles, T. A. JQuery essentials . Packt Publishing. 2016. Disponible en http://cisne.sim.ucm.es/record=b3579588~S10*spi . NIL . Grupo nil. http://nil.fdi.ucm.es/ , 2018. Último acceso: 22-05-2018. Opendyslexic . Fuente dislexia. https://opendyslexic.org/ , 2018. Último acceso: 12-03-2018. R.Brooks, D. Programming in HTML and PHP Coding for Scientists and Engineers . Springer International Publishing. 2017. Disponible en http://cisne.sim.ucm.es/record=b3782730~S10*spi . SMPE, G. P. Grupo promedia smpe. https://www.grupopromedia. es/ , 2018a. Último acceso: 15-05-2018. SMPE, G. P. Pictoaplicaciones. https://www.pictoaplicaciones. com/ , 2018b. Último acceso: 05-05-2018. UCM . Proyecto geodivulgar. http://eprints.ucm.es/35386/ , 2015. Último acceso: 30-04-2018. UCM . E-print de iamable. http://iamable.ucm.es/IamAble2 , 2017a. Último acceso: 23-04-2018. UCM . Semana de la ciencia facultad geológicas. http: //www.ucm.es/data/cont/docs/1334-2017-11-06-SC2017_Geol% C3%B3gicas_20171106.pdf , 2017b. Último acceso: 08-04-2018. W3C . Como las personas con discapacidad utilizan la web. https:// www.w3.org/WAI/intro/people-use-web/Overview.html , 2018a. Último acceso: 27-10-2017. W3C . Consejos rápidos para la accesibilidad web. https://www.w3. org/WAI/References/QuickTips/qt.es.htm , 2018b. Último acceso: 27-10-2017. 84 BIBLIOGRAFÍA W3C . Guia breve accesibilidad web. https://www.w3c.es/ Divulgacion/GuiasBreves/Accesibilidad , 2018c. Último acceso: 27-10-2017. W3C . Web accessibility initiative (wai). https://www.w3.org/WAI/ gettingstarted/ , 2018d. Último acceso: 04-05-2018. WebaimForum . Temas de drupal con accesibilidad. https:// webaim.org/discussion/mail_thread?thread=5950 , 2013. Último acceso: 17-10-2017.