Tablero de comunicación configurable basado en pictogramas

Tablero de comunicación congurable basado en pictogramas Carmen López Gonzalo Directoras Virginia Francisco Gilmartín Raquel Hervás Ballesteros Trabajo de Fin de Grado en Ingeniería Informática Facultad de Informática Universidad Complutense de Madrid Curso 2018/2019 Documento maquetado con TEX i S v.1.0. Este documento está preparado para ser imprimido a doble cara. Tablero de comunicación congurable basado en pictogramas Trabajo de Fin de Grado en Ingeniería Informática Departamento de Ingeniería del Software e Inteligencia Articial Versión 1.0 Trabajo de Fin de Grado en Ingeniería Informática Facultad de Informática Universidad Complutense de Madrid Curso 2018/2019 Agradecimientos En primer lugar agradecer a todos y cada uno mis profesores, cada uno ha dejado huella en mi aportando su granito de arena en este camino, ayudándome a crecer profesional y personalmente. En especial a mis directoras, Raquel y Virginia, que han pasado a formar parte de mi vida durante este último año, dedicándome su tiempo y esfuerzo en este proyecto, que no habría sido posible sin sus directrices. También quiero hacer una mención especial a la Asociación Autismo Sevilla y al colegio Angel Riviere, por ayudarnos a entender un poquito mas las necesidades de los usuarios dándonos consejos e ideas en el desarrollo del trabajo, colaborando además en la realización de la evaluación de la aplicación. Gracias de todo corazón. Para acabar quiero agradecer a mi familia y amigos la paciencia que han tenido y los ánimos que me han brindado en este ultimo año, haciéndome sacar fuerzas en los momentos mas difíciles para seguir adelante. v Resumen Las personas con discapacidad cognitiva suelen presentar diversas di- cultades en el uso del lenguaje natural, desde problemas de comprensión del lenguaje oral o escrito hasta dicultades para expresarse con su entorno y necesitan buscar apoyos que les ayuden a obtener una comunicación efectiva. Uno de los apoyos mas utilizado son los pictogramas (símbolos grácos que sirven para representar objetos, acciones,...). En la comunicación con pictogramas es habitual el uso de los llamados tableros de comunicación (supercie sobre la que se disponen los pictogramas para comunicarse). Aunque existen multitud de herramientas destinadas a la creación de tableros de comunicación, los usuarios nales suelen tener dicultades para encontrar una que se adapte a sus necesidades encontrándose con bastantes limitaciones a la hora de generar los tableros. Un problema muy común en las soluciones existentes radica en que hay que crear siempre los tableros desde cero o usando plantillas muy generales e iguales para todos (agenda, calendario, normas, ...). El objetivo de este trabajo ha sido desarrollar una herramienta que permite a padres, tutores y profesores de personas con discapacidad cognitiva generar plantillas personales que luego podrán ser reutilizadas en la creación de tableros y así agilizar su creación. Esta herramienta se ha diseñado como una aplicación web para que sea accesible desde cualquier dispositivo y así llegar al mayor numero de usuarios posible. La aplicación está desarrollada de tal manera que los usuarios pueden generar los tableros sin ningún tipo de restricción, permitiendo cambiar la posición y el tamaño de los elementos que forman los mismos. Una vez desarrollada la aplicación, ha sido sometida a una evaluación con usuarios nales que nos ha permitido saber que la aplicación es de utilidad y se puede adaptar a las necesidades de los usuarios, aunque es mejorable en algunos aspectos. Palabras clave Tablero de comunicación, Pictogramas, Discapacidad cognitiva, Aplicación Web, Accesibilidad, Plantillas. vii Abstract People with cognitive disabilities usually present various diculties in the use of natural language, from problems of comprehension of oral or written language to diculties to express themselves with their environment and need to seek support to help them obtain eective communication. One of the most used supports are the pictograms (graphic symbols used to represent objects, actions, ...). In communication with pictograms it is usual to use so-called communication boards (surface on which the pictograms are arranged to communicate). Although there are many tools for the creation of communication boards, end users often have diculties in nding one that suits their needs, with many limitations when generating boards. A very common problem in existing solutions is that you have to create boards from scratch or using very general and equal templates for everyone (agenda, calendar, rules, ...). The objective of this work has been to develop a tool that allows parents, tutors and teachers of people with cognitive disabilities to generate personal templates that can then be reused in the creation of boards to speed up their creation. This tool has been designed as a web application so that it can be accessed from any device to reach as many users as possible. The application is developed in such a way that the users can generate the boards without any type of restriction, allowing to change the position and the size of the elements that form them. Once the application has been developed, it has been subjected to an evaluation with end users that has allowed us to know that the application is useful and can be adapted to the needs of the users, although it can be improved in some aspects. Keywords Communication Board, Pictograms, Cognitive Disability, Web Application, Accessibility, Templates. ix Capítulo 1 Introducción Resumen: En este capítulo se explica la motivación que hay detrás de este TFG (Sección 1.1), los objetivos que nos marcamos al comienzo del proyecto (Sección 1.2) y por último, la estructura de esta memoria (Sección 1.3). 1.1. Motivación Algunas personas con discapacidad cognitiva generalmente presentan di- cultades a la hora de comunicarse mediante el lenguaje natural, y necesitan buscar alternativas que les ayuden a comunicarse de forma efectiva. Para ayudarles en la comunicación en algunos casos se utilizan los pictogramas, que son símbolos grácos que representan ideas, objetos, acciones, etc. Para permitir la comunicación mediante pictogramas se suelen utilizar tableros de comunicación, que permiten representar mensajes mediante pictogramas en una supercie como en la Figura 1.1 que muestra un tablero en el que se indican las normas del aula. Para facilitar la comprensión de los tableros se suelen emplear plantillas. Así, al ver la plantilla, los usuarios entienden el tipo mensaje más rápido y se facilita la comprensión. Algunos de los formatos habituales son los tableros de normas, las agendas, los calendarios, ... Actualmente, a pesar del avance de las tecnologías, en muchos centros aún se crean los tableros de forma manual con papel, cartulina, recortables, pegatinas, etc. Incluso para situaciones en las que se necesita un tablero con urgencia (en una excursión para explicar un cambio de planes, en el 1 2 Capítulo 1. Introducción Figura 1.1: Tablero que sirve para indicar las normas del aula. supermercado cuando al niño le da una rabieta, en el coche para indicar que vamos a tardar más de lo habitual, ...) se ven en la necesidad de hacerlo con papel y bolígrafos de colores ya que no tienen ninguna herramienta que les permita crear los tableros de forma rápida y desde cualquier lugar. Al tener que realizar esta tarea manualmente, cada vez que se crea un tablero tienen que crearlo de cero. Una manera de poder agilizar esta tarea es el uso de plantillas que permiten tener una estructura ja ya creada en la que solo hay que añadir los pictogramas especícos de cada caso para crear el tablero (por ejemplo, si tenemos una plantilla para elecciones, solo habría que modicar los pictogramas para las distintas opciones de elección). Además estas plantillas permiten que los tableros tengan siempre un mismo formato y que la comprensión del mensaje sea más rápida y efectiva. A pesar de la multitud de herramientas existentes destinadas a facilitar la comunicación de los usuarios que utilizan tableros de comunicación, es difícil encontrar alguna que se ajuste a los formatos que el usuario entiende y a sus necesidades, lo que provoca que sea el usuario el que se tenga que adaptar a las herramientas y no al revés. 1.2. Objetivos 3 Por todas las razones anteriormente mencionadas, surge la necesidad de desarrollar una aplicación que permita a los usuarios generar plantillas y tableros personalizados, sin tener que empezar de cero siempre o tener que adaptarse a plantillas universales que no se corresponden con las que usan habitualmente. Debe ser una aplicación a la que los usuarios puedan acceder desde cualquier dispositivo y en cualquier momento. De este modo podrán integrarla en su día a día y así mejorar la comunicación de los usuarios que necesitan los tableros de comunicación con pictogramas para comunicarse de forma efectiva. 1.2. Objetivos Uno de los objetivos principales de este trabajo es desarrollar una aplicación que permita a los usuarios generar plantillas y tableros de comunicación personalizados basados en pictogramas, permitiendo ademas que se puedan reutilizar fácilmente y agilizando la creación de tableros a partir de una plantilla. Para que la aplicación tenga el mayor alcance posible y se adapte a las necesidades de los usuarios se va a realizar un diseño centrado en el usuario. Para ello se mantendrán reuniones y se realizarán evaluaciones con los usuarios nales, con el n de saber las necesidades que tienen y conocer su opinión acerca de la aplicación y su usabilidad. También nos marcamos como objetivo en este trabajo aplicar los conocimientos adquiridos durante el grado en un proyecto con un sentido social y que además sea de utilidad más allá de ser un proyecto académico. Por último, también nos marcamos como objetivo adquirir nuevos conocimientos que nos ayuden a ampliar los ya adquiridos durante el grado. 1.3. Estructura del trabajo Esta memoria consta de un total de siete capítulos incluyendo este capitulo introductorio. A continuación se expondrá un breve resumen de cada uno de ellos: En el capítulo tres se realiza una introducción a los pictogramas y sus distintos usos. También se realiza un análisis de los distintos sistemas de pictogramas y de las aplicaciones que existen para generar contenido basado en pictogramas. 4 Capítulo 1. Introducción En el capítulo cuatro se describirán las herramientas utilizadas en el proyecto. Se introducirán Interact.js , html2canvas y Realtime Database de Firebase . En el capítulo cinco se explicará detalladamente el desarrollo del proyecto, la fase de análisis de requisitos, el diseño de la interfaz, la implementación del proyecto, y las evaluaciones de los usuarios con sus resultados. En el capítulo seis y capítulo siete , en español y en inglés, se presentan las conclusiones del proyecto y el trabajo futuro. Capítulo 2 Introduction Resumen: This chapter explains the motivation behind this TFG (Section 2.1), the objectives that we set at the beginning of the project (Section 2.2) and nally , the structure of this memory (Section 2.3). 2.1. Motivation Some people with cognitive disabilities usually have diculties when communicating through natural language, and they need to look for alternatives that help them communicate eectively. To help them in communication in some cases pictograms are used, which are graphic symbols representing ideas, objects, actions, etc. To allow communication through pictograms, communication boards are usually used, which allow to represent messages by means of pictograms on a surface as in Figure 2.1 that shows a board in which the norms of the classroom are indicated. To facilitate the understanding of the boards, templates are usually used. Thus, when viewing the template, users understand the message type faster and understanding is facilitated. Some of the usual formats are the rules boards, the agendas, the calendars, ... Currently, despite the advance of the technologies, in many centers the boards are still created manually with paper, cardboard, cut-outs, stickers, etc. Even for situations in which a board is urgently needed (on a eld trip to explain a change of plans, in the supermarket when the child gives a tantrum, in the car to indicate that we are going to take longer than usual, ...) they have to do it with paper and colored pens, since they do not have 5 6 Capítulo 2. Introduction Figura 2.1: Board that serves to indicate the rules of the classroom. any tool that allows them to create boards quickly and from any place. When having to perform this task manually, each time a board is created they have to create it from scratch. One way to speed up this task is the use of templates that allow having a xed structure already created in which you only have to add the specic pictograms of each case to create the board (for example, if we have a template for elections, there would only be to modify the pictograms for the dierent options of choice). In addition, these templates allow the boards to always have the same format and to make the message faster and more eective. Despite the multitude of existing tools designed to facilitate the communication of users who use communication boards, it is dicult to nd any that ts the formats that the user understands and their needs, which causes the user to be have to adapt to the tools and not vice versa. For all the reasons mentioned above, there is a need to develop an application that allows users to generate customized templates and boards, without always having to start from scratch or having to adapt to univer- 2.2. Goals 7 sal templates that do not correspond to those that use usually. It must be an application that users can access from any device at any time. In this way they will be able to integrate it in their daily life and thus improve the communication of the users who need the communication boards with pictograms to communicate eectively. 2.2. Goals One of the main goals of this work is to develop an application that allows users to generate templates and personalized communication boards based on pictograms, allowing also to be easily reused and speeding up the creation of boards from a template. In order for the application to have the widest possible range and to adapt to the needs of the users, a user-centered design will be carried out. For this, meetings will be held and evaluations will be carried out with the end users, in order to know the needs they have and to know their opinion about the application and its usability. We also set ourselves the goal in this work to apply the knowledge acquired during the degree in a project with a social sense and that is also useful beyond being an academic project. Finally, we also set ourselves the goal of acquiring new knowledge that will help us to extend the ones already acquired during the degree. 2.3. Project's Structure This report consists of a total of seven chapters, including this introductory chapter. Below is a brief summary of each of them: In the chapter three an introduction to the pictograms and their dierent uses. There is also an analysis of the dierent pictogram systems and the applications that exist to generate content based on pictograms. In the chapter four the tools used in the project will be described. Enter Interact.js , html2canvas and Realtime Database from Firebase . In the chapter ve will be explained in detail the development of the project, the phase of analysis of requirements, the design of the 8 Capítulo 2. Introduction interface, the implementation of the project, and the evaluations of the users with their results. In the chapter six and chapter seven , in Spanish and English, the conclusions of the project and future work are presented. Capítulo 3 Estado del arte Resumen: En este capitulo se da una visión general de lo que son los pictogramas en la Sección 3.1, de los sistemas pictográcos más utilizados y de cómo se realiza la comunicación mediante pictogramas. En la Sección 3.2 se analizarán las herramientas tecnológicas existentes para la creación de tableros. 3.1. Pictogramas Las personas con discapacidad cognitiva tienen dicultades en el desarrollo y el uso del lenguaje natural, y necesitan una alternativa al mismo. Por esta razón surgen los Sistemas Aumentativos y Alternativos de Comunicación (SAAC). Los Sistemas Aumentativos y Alternativos de Comunicación (SAAC), son sistemas que permiten al usuario tener una alternativa al lenguaje natural, suciente para permitir la comunicación. Son aumentativos ya que sirven para complementar o aumentar el lenguaje oral y son alternativos porque lo compensan o lo sustituyen cuando por si solo el lenguaje natural no es suciente o se carece de él 1 . Estos sistemas sirven también como complemento al habla natural, y ayudan a recuperarla cuando se encuentran dicultades en el uso de la misma. En estos casos, se pueden considerar un método de rehabilitación. Los SAACs pueden ser de dos tipos (Gil, 2015): Sin ayuda : no necesitan ningún elemento externo para transmitir el mensaje. Por ejemplo los gestos del lenguaje de signos. 1 http://www.logopeda-madrid.es/tratamientos-logopedia/ otros-sistemas-de-comunicacion.php 9 16 Capítulo 3. Estado del arte Figura 3.9: Representación de niña, su plural niñas y su representación para genero masculino niño y niños. Figura 3.10: Representación de las preposiciones con, a y ante. 3.1.2. Comunicación mediante Pictogramas Las personas con discapacidad cognitiva suelen emplear tableros de comunicación para comunicarse mediante pictogramas. Un tablero es una supercie en la que colocar los pictogramas para transmitir un mensaje. Hay formatos de tableros (plantillas) que se utilizan con mucha frecuencia ya que al utilizar siempre el mismo formato visualmente es más fácil y rápido comprender el objeto de la comunicación (dar una serie de normas, preguntar por una elección, dar la agenda de la semana,...)(Ventoso, 1995). Algunos de los formatos de tableros más empleados son: Agenda personal: sirve para mostrar todas las actividades que se van a realizar en un periodo de tiempo determinado (Sanz y Martén, 2002). En la Figura 3.11 se puede ver la agenda personal de una semana. Secuencias de actividades: sirven para mostrar los pasos necesarios para realizar una actividad. En la Figura 3.12 se muestra la secuencia de pasos que hay que seguir para lavarse los dientes. 3.2. Editores de Tableros basados en Pictogramas 17 Figura 3.11: Ejemplo de tablero para agenda personal. Figura 3.12: Ejemplo de tablero con la secuencia de pasos para lavarse los dientes. Normas: representación gráca de normas de conductas y reglas sociales que se han de tener en cuenta en determinadas ocasiones. En la Figura 3.13 se puede ver un tablero con las normas de lo que se puede hacer y lo que no en el supermercado. 3.2. Editores de Tableros basados en Pictogramas Existen diversas aplicaciones destinadas a facilitar la tarea de generar material con pictogramas para mejorar la comunicación de usuarios con dis- 18 Capítulo 3. Estado del arte Figura 3.13: Ejemplo de tablero de normas para el supermercado. capacidad cognitiva. En las siguientes subsecciones se ofrece una breve descripción de algunas de ellas. 3.2.1. Pictoselector Pictoselector 8 es una herramienta gratuita que permite crear agendas visuales y tableros de comunicación, todos ellos basados en tablas. Se centra en facilitar la elección e impresión de los materiales con pictogramas, imágenes y fotografías. Contiene mas de 28.000 pictogramas y da soporte al holandés, ingles, español, portugués y francés. Los pictogramas utilizados vienen de ARASAAC, Sclera, Mulberry y algunos propios de la aplicación. Para seleccionar el conjunto de pictogramas con el que se desea trabajar tenemos una lista como la de la Figura 3.14. Para la creación del material hay que seguir un formulario por pasos que permite elegir como será la estructura del documento. Después de pedir el nombre del material se puede elegir entre cuatro opciones para generar el material, entre ellas esta la opción de escoger una plantilla predenida o elegir el numero de las y columnas de la tabla. En la Figura 3.15 se pueden ver el resto de opciones y una previsualización del estado nal. En el caso 8 https://www.pictoselector.eu/es/ 3.2. Editores de Tableros basados en Pictogramas 19 Figura 3.14: Vista de las opciones de selección de pictogramas en Pictoselector. de seleccionar la opción de las y columnas, hay que denir el número de las y columnas, con un máximo de 25 en cada caso. Finalmente, se puede elegir la posición donde se desea mostrar el nombre de los pictogramas, y el formato de las celdas. Figura 3.15: Vista de las opciones de selección de pictogramas en Pictoselector. Una vez terminado dicho formulario habrá un área de trabajo en blanco sobre el que se irán añadiendo los pictogramas. En la Figura 3.16 se ve la 20 Capítulo 3. Estado del arte pantalla y las opciones disponibles a la hora de elegir el contenido. Figura 3.16: Pantalla principal de Pictoselector. Pictoselector limita la estructura del material a una cuadrícula, lo que conlleva que los pictogramas sean todos del mismo tamaño. Partiendo de estas limitaciones, trata de ofrecer al usuario la mejor experiencia posible, permitiendo crear espacios en blanco, subir imágenes propias, etc, para poder personalizar el contenido al máximo. Además, cuenta con una pequeña ventana, en la parte inferior izquierda, en la que podemos visualizar como sería el resultado nal del trabajo. 3.2.2. Editores propios de ARASAAC En el portal de ARASAAC 9 se pueden encontrar algunas herramientas propias que permiten generar recursos online. Cada herramienta es independiente y encontramos opciones bastante diversas, desde un generados de bingos hasta un generador de tableros de comunicación. Las herramientas del portal de ARASAAC con las funcionalidades más similares a este proyecto son las siguientes: Generador de tableros : permite generar un tablero a partir de un numero de las y de columnas, obteniendo así un tablero en el que 9 http://www.arasaac.org/herramientas.php 3.2. Editores de Tableros basados en Pictogramas 21 también se puede determinar el tamaño de las celdas. En la Figura 3.17 se puede ver el resultado de generar un tablero de cinco columnas. Figura 3.17: Tablero generado por el generador de tableros de ARASAAC. Generador de calendarios : se puede elegir el mes sobre el que se quiere trabajar y la forma de mostrar los días (con o sin pictogramas). La Figura 3.18 muestra el calendario creado por la aplicación para el mes de mayo, como se puede ver en la la superior se indica mediante pictogramas el día de la semana, y en cada celda se indica el numero del día. Figura 3.18: Calendario del mes de mayo generado por ARASAAC. 22 Capítulo 3. Estado del arte Generador de horarios : para crear un horario hay que indicar el número de días, el número de horas que se necesita representar, y a partir de qué hora. En la Figura 3.19 se muestra un horario de cinco dias empezando por el lunes a las 9:00 de la mañana, y a partir de esa hora una la por cada hora. Figura 3.19: Horario generado por ARASAAC. Una vez generada la plantilla con cualquiera de estas tres herramientas se puede editar el contenido de cada celda eligiendo qué pictograma se quiere poner. Como se puede ver en la Figura 3.20 estas herramientas también permiten personalizar cada celda y cada pictograma eligiendo el fondo, el borde y que tenga texto o no. Esta personalización es la misma para todas las herramientas. Figura 3.20: Conguracion de las Celdas ARASAAC Ademas, todas las herramientas permiten exportar un chero .rtf que se puede abrir en cualquier procesador de textos, pudiendo personalizarlo aún mas y dando la posibilidad de imprimirlo o exportarlo a pdf. 3.2. Editores de Tableros basados en Pictogramas 23 3.2.3. Piktoplus Piktoplus 10 es una aplicación para dispositivos Android que ofrece un apoyo integral audiovisual. Permite crear contenidos personalizados para comunicación, secuencias de trabajo y normas. Esta herramienta permite registrar a los usuarios para personalizar el contenido que utiliza cada usuario. También se pueden personalizar los rasgos del avatar del usuario para que se identique con él. Como se puede ver en la Figura 3.21, a la hora de generar el contenido se parte inicialmente de un tablero compuesto por siete columnas y cuatro las, asignando a cada celda un pictograma. Las celdas se pueden modicar para que ocupen más celdas. Por ejemplo en la Figura 3.21 el avatar de Roi ocupa cuatro celdas. Figura 3.21: Generador de material con Piktoplus. 3.2.4. BoardMaker BoardMaker 11 es una aplicación que existe en versión de escritorio y online. Esta herramienta permite al usuario diseñar cualquier tipo de contenido, partiendo de un lienzo en blanco en el que se pueden crear áreas, textos, y también pictogramas, estos pueden ir solos o estar asignados a un área. Además, cuenta con la opción de asociar a los pictogramas una cadena de texto en la posición que deseemos. 10 https://piktoplus.com/ 11 https://www.boardmakeronline.com/ 24 Capítulo 3. Estado del arte En la Figura 3.22 se puede ver la pantalla inicial de la herramienta online, sobre la que empezar a trabajar. En la barra superior hay distintas opciones como generar uno o varios recuadros, formas libres, insertar texto o pictogramas. En el menú lateral se muestran las distintas opciones de conguración dependiendo del elemento seleccionado. Para seleccionar los pictogramas esta herramienta cuenta con un buscador que da soporte a múltiples idiomas. Figura 3.22: Pantalla inicial de BoardMaker Online. El mayor inconveniente que tiene esta aplicación es su precio, ya que su versión básica de escritorio cuesta $399,00 y para tener la versión online hay que pagar $9,99 al mes o $99,00 al año. 3.2.5. Pictar Pictar 12 es una herramienta de traducción de texto a pictogramas (Martín, 2018), que también permite elaborar contenido. Como se puede ver en la Figura 3.23 para generar un tablero hay que seleccionar el número de columnas y el número de elementos a repartir entre las columnas. También se puede ver que a la derecha cuenta con un buscador que contiene todos los pictogramas de ARASAAC. Una vez colocado un pictograma en la tabla 12 http://hypatia.fdi.ucm.es/pictar/ 3.2. Editores de Tableros basados en Pictogramas 25 se puede decidir si ponerlo en escala de grises o en el color original. Pictar además permite decidir si se muestra o no el texto en las celdas y en qué posición (arriba o abajo). Figura 3.23: Pantalla principal de Pictar. El gran inconveniente que tiene es que la distribución de los pictogramas está limitada a una tabla, haciendo también que el tamaño de cada pictograma esté preestablecido. 3.2.6. Conclusiones A pesar de existir numerosas herramientas dedicadas a la creación de materiales basados en pictogramas, los usuarios aún no han encontrado una herramienta que les permita generar tableros de comunicación con la facilidad y exibilidad que ellos necesitan. La excepción podría ser BoardMaker, pero tiene un precio demasiado elevado, lo que provoca que la mayoría de los usuarios no utilicen esta herramienta. Una vez analizadas las aplicaciones existentes, se han obtenido una serie de conclusiones sobre las principales desventajas de las mismas: En las herramientas existentes se limita el tamaño de los pictogramas, impidiendo que los usuarios puedan poner un pictograma que representa una acción importante con un tamaño mayor. Usan tablas o cuadrículas que obligan al usuario a colocar los elementos en posiciones determinadas. Sin embargo, al generar un tablero no siempre se quiere seguir una cuadrícula, el uso de tablas disminuye la exibilidad a la hora de generar tableros de distintos tipos. Las herramientas analizadas no dan la opción de decidir en qué pictogramas se quiere mostrar la palabra asociada al pictograma y en Capítulo 5 PicTableros Resumen: En este capítulo se explica el proceso de desarrollo de la aplicación PicTableros, una aplicación web para la creación de plantillas y tableros de comunicación con pictogramas. En este capítulo se explicarán cada una de las fases del desarrollo: en la Sección 5.1 se explica en detalle cómo se llevó a cabo la captura de requisitos, en la Sección 5.2 se explica cómo se diseñó la aplicación y en la Sección 5.3 se explica cómo se implementó PicTableros. Por ultimo, en la Sección 5.4 se explica la fase de evaluación con usuarios nales. 5.1. Captura de requisitos En este proyecto se ha dado mucha importancia al usuario nal de la aplicación, con la intención de desarrollar una herramienta que cubra de verdad sus necesidades. Los usuarios nales en este proyecto son los padres, profesores o tutores de las personas con discapacidad cognitiva, pues son ellos los encargados de crear los tableros de comunicación. Por ello, durante todo el proceso se ha trabajado con la Asociación de Autismo Sevilla y con el Colegio Ángel Riviere de Sevilla. Como ya se ha explicado anteriormente, para facilitar la comunicación con personas con discapacidad cognitiva se suelen emplear siempre las mismas plantillas y así los receptores del mensaje sabrán identicar rápidamente el objetivo del tablero: secuencia de acciones, agenda, normas,...A pesar de que ya existen herramientas digitales para la creación de tableros de comunicación con pictogramas, tal y como se ha visto en el Capítulo 3.2, los usuarios aún no han encontrado una que cubra todas sus necesidades. Esto motivó el 33 34 Capítulo 5. PicTableros desarrollo de una herramienta que permita a los usuarios diseñar sus plantillas y tableros de una manera más sencilla y rápida, entendiendo como una plantilla el material que sirve de base para después generar distintos tableros de comunicación. En una reunión que tuvo lugar el 22 de Febrero de 2017 durante la Jornada de Trabajo en Aulas TIC, desde la Asociación de Autismo Sevilla nos transmitieron la necesidad de una aplicación que les permitiese digitalizar las plantillas que utilizan para comunicarse con sus usuarios, ya que hasta entonces era un trabajo que realizaban de manera manual. Cada vez que deseaban hacer un tablero para una agenda, por ejemplo, tenían que dibujarlo de manera manual desde cero. Nos indicaron que les sería de gran utilidad tener una herramienta que les permitiera crear las plantillas según el tipo de tablero (agenda, normas, secuencias de acciones,...) y luego usar estas plantillas para generar los tableros modicando o añadiendo solo la información propia del tablero concreto. En la Figura 5.1 se muestra a la izquierda la plantilla de elegir entre tres opciones y a la derecha se muestra el tablero creado a partir de dicha plantilla para elegir entre tres juguetes. Figura 5.1: A la izquierda la plantilla de elegir y a la derecha el tablero creado a partir de la plantilla para elegir entre tres juguetes. Para identicar todos los requisitos de la aplicación desde la Asociación de Autismo Sevilla nos hicieron llegar las plantillas que utilizaban con más frecuencia (ver Figura 5.2). En base a estas plantillas y a las necesidades expresadas por la asociación se establecieron los siguientes requisitos: La aplicación debe ser accesible desde cualquier dispositivo y en cualquier momento y para que los usuarios puedan acceder a su material en cualquier situación. Los usuarios deben poder tener tantas plantillas y tableros como deseen. Además, es importante que los puedan compartir entre distintos dispositivos y con distintos usuarios. Debe haber un buscador que permita encontrar cualquier pictograma de ARASAAC. 5.2. Diseño de la interfaz 35 Se deben poder arrastrar y soltar los elementos en cualquier posición de la plantilla, sin las restricciones impuestas por los típicos formatos de cuadrícula. El tamaño de los elementos del tablero debe ser congurable. Tal y como se puede observar en la Figura 5.2 no todos los elementos de las plantillas tienen el mismo tamaño. Se debe permitir al usuario crear cuadros de texto, en los que poder establecer el color del texto, el borde y el fondo. Esto será necesario para crear las plantillas de normas o de sistemas de puntos. Hay que permitir al usuario crear áreas en las que poder colocar los pictogramas. Estas áreas deben ser personalizables y se debe poder cambiar el color del borde y del fondo para conseguir áreas personalizadas como las de la plantilla de Normas 1. Los pictogramas se tienen que poder personalizar cambiando el color del borde y del fondo. Además los pictogramas también se deben poder tachar. Esto será necesario para crear plantillas como Normas 2. Se debe permitir crear pictogramas en blanco que permitan al usuario sustituirlos por el pictograma deseado cuando se cree un tablero usando la plantilla. Por ejemplo, en la plantilla Elegir las opciones entre las que se puede elegir estarán en blanco y cuando el usuario cree un tablero utilizando esta plantilla podrá rellenar estas opciones con los pictogramas entre los que se puede elegir. El usuario debe poder trabajar con guras geométricas. Así podrá crear plantillas como el Calendario Semanal en la que los días de la semana están representados por distintas formas geométricas. Teniendo en cuenta los requisitos obtenidos en esta fase se procedió a diseñar la primera versión de la aplicación. 5.2. Diseño de la interfaz Para diseñar la interfaz de la aplicación, se han realizado distintas etapas. En la primera fase se diseño un prototipo tecnológico para explorar si tecnológicamente era posible implementar todos los requisitos capturados en la fase anterior. En la segunda fase se diseñaron prototipos en papel que permitían a los usuarios interactuar con los elementos, para así implicar a los usuarios nales en el diseño y obtener una herramienta que se ajustase 36 Capítulo 5. PicTableros Figura 5.2: Plantillas enviadas por la Asociación Autismo Sevilla durante la fase de captura de requisitos. realmente a sus necesidades. Por último, se validaron los prototipos con los usuarios nales de la aplicación. En las siguientes secciones se explican en detalle cada una de estas etapas. 5.2.1. Prototipo tecnológico Después de los requisitos obtenidos se decidió desarrollar este proyecto como una aplicación web, para hacerlo accesible desde cualquier dispositivo, ya sea ordenador, móvil o tablet. De esta manera el único requisito que deben cumplir los dispositivos de los usuarios es contar con conexión a internet. Antes de diseñar los prototipos en papel y presentárselos a los usuarios, era necesario comprobar si tecnológicamente era posible implementar los requisitos capturados en una aplicación web. De los requisitos obtenidos el que representaba un mayor reto tecnológico era permitir a los usuarios interactuar libremente con los elementos de las plantillas y tableros. Para ello se investigó acerca de las librerías que permitían arrastrar y soltar elementos como HTML5 nativo, dragula ó dragable.js , pero ninguna permitía la libertad que los usuarios requerían, nalmente se decidió usar interact.js. En un primer momento se valoró la opción utilizar la funcionalidad de esta librería, que permite que en el área de destino existiese 5.2. Diseño de la interfaz 37 una cuadrícula en el fondo para que los usuarios pudiesen alinear fácilmente los elementos, pero no era posible aplicar esta opción y cumplir con el requisito de que los elementos pudiesen cambiar de tamaño. El prototipo tecnológico permitió validar qué requisitos se podían cubrir con la aplicación, y así a la hora de realizar los prototipos en papel y presentárselos a los usuarios, tener la certeza de que las funcionalidades de los prototipos en papel se podían implementar en la aplicación. 5.2.2. Prototipo de papel interactivo Una vez estaba claro que todos los requisitos capturados se podían implementar y se tenía una idea de como debía ser la aplicación, se realizaron prototipos en papel de la aplicación, para que los pudiesen evaluar los usuarios nales y así obtener una aplicación que se adaptase lo máximo posible a sus necesidades. Los prototipos en papel al completo se encuentran en el repositorio de GitHub 1 del proyecto. En la Figura 5.3 se muestra el prototipo de la lista de plantillas privadas, en el caso de los otros listados el formato es similar. En el menú lateral se pueden observar las opciones para los distintos listados de plantillas desplegadas: públicas, privadas, y crear una nueva plantilla. En el caso de los tableros serían las mismas opciones: tableros públicos, privados y crear un nuevo tablero. Para cada plantilla privada tenemos las siguientes opciones: Figura 5.3: Prototipo en papel de la lista de plantillas privadas. 1 https://github.com/NILGroup/TFG1819-Tableros/blob/master/Prototipos/ prototipos.pdf 38 Capítulo 5. PicTableros Publicar : sirve para publicar la plantilla y dejarla accesible para todo el mundo. De este modo la asociación o el colegio podrían crear las plantillas que usan habitualmente y hacerlas públicas para que todos los profesores, padres o tutores, puedan utilizarlas también. Editar : lleva al editor de plantillas para poder hacer modicaciones sobre la plantilla ya creada. Utilizar como tablero : sirve para crear un tablero a partir de la plantilla. Duplicar : crea una copia de la plantilla. Eliminar : elimina la plantilla. Al nal del listado de las plantillas privadas se encuentran dos opciones: Importar plantillas : permite a los usuarios importar un archivo con plantillas. Descargar plantillas : permite a los usuarios descargar todas las plantillas privadas, para así tener un archivo que poder compartir con otros dispositivos. Para las plantillas públicas las opciones disponibles son: Crear copia privada : sirve para crear una plantilla privada a partir de la pública. Utilizar como tablero : sirve para crear un tablero privado a partir de la plantilla. Ver : permite visualizar la plantilla. Para los tableros privados las opciones son: publicar, ver, editar, duplicar, eliminar, descargar e importar tableros privados. Para los tableros públicos las opciones son: crear copia privada y ver. En la Figura 5.4 se puede observar el editor de plantillas, que cuenta con tres secciones: En la parte superior, se muestra una barra con un botón que lleva a la vista de los listados ( home ) y el nombre del elemento que estamos 5.2. Diseño de la interfaz 39 Figura 5.4: Prototipo en papel de la vista del editor de plantillas. editando. Para editar este nombre se dispone de un botón con un lápiz. Al pulsarlo se mostrará un cuadro de texto que permitirá cambiar el nombre del titulo. A la izquierda se muestra el área destinada a la plantilla. A la derecha se muestra el buscador de pictogramas, y debajo los tres elementos que permiten al usuario personalizar la plantilla: área, pictograma en blanco, y cuadro de texto. El pictograma en blanco sirve para generar una plantilla con los huecos que posteriormente se sustituirán por pictogramas en el tablero. En el caso de la plantilla de la Figura 5.4 los pictogramas del area de la plantilla en los que pone Nuevo se sustituirán por los pictogramas de las opciones entre las que elegir. Todos los elementos que se pueden utilizar para crear una plantilla se pueden personalizar. Si en el área principal se pulsa sobre un elemento aparece en el menú de la derecha un menú con las distintas opciones de personalización. En la Figura 5.5 se muestra el editor de plantillas junto con las opciones de personalización de los pictogramas. De un pictograma se puede cambiar el color del borde y del fondo, el texto asociado al pictograma y decidir si se quiere mostrar o no el texto. La última opción disponible es la opción de tachar el pictograma, esta opción cambia según pulsas en ella permitiendo tachar, poner un tick o no poner nada. El resto de elementos 40 Capítulo 5. PicTableros que se pueden poner en una plantilla tienen unas opciones de personalización similares. También se podrán cambiar de tamaño aunque eso no se vea reejado en el prototipo de papel. Figura 5.5: Prototipo en papel del editor de plantillas con menú de ajustes de los pictogramas. El editor de tableros tiene una interfaz similar al editor de plantillas, como se puede ver en la Figura 5.6 la barra superior y el área principal no tienen ningún cambio con respecto al editor de plantillas, pero en este caso en el menú de la derecha solo contamos con el buscador de pictogramas, ya que cuando se edita un tablero la idea es que solo sea necesario colocar los pictogramas relativos al tablero. 5.2.3. Validación de prototipos Después de realizar los prototipos en papel, el 28 de marzo tuvo lugar una reunión con la Asociación Autismo Sevilla, en el colegio Angel Riviere. En ella se mostraron a los usuarios nales los prototipos en papel. Una de las partes más interesantes de la reunión fue que nos enseñaron el contexto de uso y la importancia que tienen las plantillas en su trabajo del día a día. Todos los colegios y asociaciones bajo la inuencia a nivel provincial de la Asociación usan sus plantillas de manera estándar, entrenando tanto a los docentes como a los familiares en su uso. De esta manera, los jóvenes con autismo aprenden qué signican y se las encuentran en todos los 5.2. Diseño de la interfaz 41 Figura 5.6: Prototipo en papel de la vista del editor de tableros. ámbitos de su vida (escolar, familiar, etc.), haciendo así mucho más fácil la comunicación con ellos. Nos enseñaron cómo trabajan actualmente con los tableros y plantillas en papel. En todas las clases hay numerosas instancias de las plantillas por las paredes, en cuadernos personales de los alumnos, en libretas de profesores...Estas plantillas son la base de la comunicación con sus estudiantes. Actualmente todo se hace con papel y cartulina, recortables, pegatinas y transparencias. Por ejemplo, el kit básico del profesor es una libreta en blanco y un bolígrafo de cuatro colores para que cuando lo necesitan puedan crear el tablero que necesiten en cada momento para comunicarse con el estudiante. Esto se recomienda también a los padres, a los que se involucra para que ayuden haciendo materiales de este tipo para el colegio y la asociación. Lo que les gustaría que hiciera el sistema es que todo este método artesanal para generar tableros se pudiera digitalizar y llevar en el móvil o la tablet. Así, en cualquier momento se podría crear un tablero rápidamente sin necesidad de pararse a dibujarlo desde cero. El uso de la aplicación debe ser sencillo y rápido, ya que cuando se necesita uno de estas tableros no hay mucho tiempo para reaccionar, por ejemplo si el joven con autismo se pone nervioso necesitamos tranquilizarle rápidamente y para ello necesitaremos crear un tablero de comunicación. Teniendo claro el contexto de uso, procedimos a mostrarles los prototipos en papel que habíamos creado y les dejamos interactuar con ellos. En esta 48 Capítulo 5. PicTableros Figura 5.10: Vista del listado de las plantillas públicas. En la Figura 5.10 se puede ver el listado de plantillas públicas. Las opciones por cada plantilla pública son las siguientes: Crear copia privada : crea una copia privada de la plantilla en LocalStorage, para que el usuario pueda trabajar con ella. Utilizar como tablero : se crea un tablero privado a partir de la plantilla, guardando un nuevo elemento con un identicador distinto. Además redirecciona al editor del tablero. Ver : lleva a una vista en la que únicamente se muestra la plantilla. Figura 5.11: Vista del listado de los tableros privados. En la Figura 5.11 se puede ver el listado de tableros privados, las opciones por cada tablero privado son las siguientes: 5.3. Implementación 49 Publicar : permite publicar el tablero. Duplicar : se duplica el tablero, generando uno igual pero añadiendo -copia al nal del titulo. Editar : lleva a la vista del editor de tableros, cargando el tablero seleccionado. Ver : lleva a una vista en la que únicamente se muestra el tablero. Eliminar : elimina el tablero seleccionado. Figura 5.12: Vista del listado de los tableros públicos. En la Figura 5.12 se puede ver el listado de tableros públicos. Las opciones por cada tablero público son las siguientes: Crear copia privada : crea una copia privada del tablero en LocalStorage para que el usuario pueda trabajar con el. Ver : lleva a una vista en la que únicamente se muestra el tablero. La opción de Ver lleva a la misma vista en cualquiera de los casos, en la Figura 5.13 se muestra un ejemplo de la vista de un tablero. Esta vista cuenta únicamente con el tablero para así evitar distracciones. Cuando se pública cualquier tipo de elemento se hace mediante el método set de Firebase, que permite guardar un objeto, identicándolo con una clave. El uso de Firebase y de LocalStorage permite que los objetos tengan la misma estructura ya sean públicos o privados. La estructura de los objetos es la siguiente: 50 Capítulo 5. PicTableros Figura 5.13: Ejemplo de la vista en la que solo se muestra el tablero, en este caso un tablero creado para elegir juguetes. contenido : contiene el elemento del DOM correspondiente a la plantilla o tablero. id : identicador de cada elemento, generado aleatoriamente para cada elemento. miniatura : contiene una imagen codicada en base64 , para poder mostrar las miniaturas. tamano : se guarda el ancho y el alto del elemento original, para después poder ajustarlo si cambia el tamaño de la pantalla. tipo : determina el tipo del elemento (plantilla o tablero). titulo : contiene el título asociado al elemento. En la Figura 5.14 se puede ver un ejemplo de un objeto de Firebase de una plantilla pública. La opción de publicar común a las plantillas y a los tableros privados guarda el elemento en una base de datos realtime de Firebase que permite que las listas de plantillas y tableros públicos se actualicen cada vez que se publica un tablero o plantilla. Esto es posible por el método on que permite quedarse observando a la espera de cambios en la base de datos. 5.3.2. Editor de plantillas Al editor de plantillas se puede llegar de dos formas: creando una nueva plantilla o editando una plantilla ya existente. La Figura 5.15 se corresponde 5.3. Implementación 51 Figura 5.14: Ejemplo de un objeto tipo plantilla. con la vista del editor para una nueva plantilla. Cuando se llega editando una plantilla ya existente, se realizan ajustes en el tamaño de los elementos para asegurar que las plantillas se pueden abrir en cualquier dispositivo. Para esto se ha desarrollado una función que calcula el tamaño que deben tener los elementos en caso de que el tamaño de la pantalla cambie, para que se ajusten al nuevo tamaño. El editor de plantillas esta dividido en dos zonas principales: el área a la que arrastrar los elementos y el menú lateral derecho donde se mostrarán las distintas opciones de edición. En la barra superior se muestra un input de texto que permite editar el titulo de la plantilla sobre la que estamos trabajando. En la parte derecha del editor se encuentra el menú con los elementos con los que se puede interactuar. Este menú tiene un buscador que hace uso de la API de ARASAAC, explicada en capítulo 4.3. Inicialmente los resultados de la búsqueda se iban a mostrar en un cajón con scroll , pero la librería que permite arrastrar los elementos no era compatible con esa opción, así que se decidió mostrar los resultados de la búsqueda en una lista completa, tal y como se puede ver en la Figura 5.16. Para mostrar u ocultar los resultados se puede utilizar el botón con un aspa que se encuentra al nal de la barra de búsqueda. El resto del menú está compuesto por opciones para crear un área, un pictograma en blanco, un cuadro de texto y diferentes guras geométricas. Para que el usuario pudiera generar los materiales libremente y sin restricciones, se ha implementado un sistema que permite arrastrar los elementos del menú de la derecha al área principal. Para implementar esto se ha utilizado la librería interact.js que mediante eventos permite al usuario mover y cambiar el tamaño de los elementos. Cuando se arrastra un elemento al área principal se crea una copia del mismo en las coordenadas en las que se ha soltado, haciendo que el original vuelva a su posición para que esté 52 Capítulo 5. PicTableros Figura 5.15: Vista del editor de plantillas. disponible siempre que se necesite. La librería interact.js funciona mediante eventos y cada elemento necesita tener asociados una serie de eventos frente a los que reaccionar. El área de destino reacciona al evento ondrop que ejecuta las funciones cuando se suelta un elemento en el área. El resto de elementos (los que forman parte del menú de la derecha) inicialmente reaccionan al evento de arrastre y una vez que están en el área de destino reaccionan también ante el evento de cambio de tamaño. Figura 5.16: Vista del editor de plantillas con los resultados de la búsqueda de agua desplegados. Una vez creada la plantilla, cuando se pulsa sobre el botón Guardar, se guarda un objeto en LocalStorage con el mismo formato que el objeto de Firebase usado para los listados de plantillas y tableros explicado en la Sección 5.3.1. De esta manera al publicar un elemento no es necesario 5.3. Implementación 53 realizar una transformación del objeto para mantener la coherencia. Además, al guardar el objeto en LocalStorage se asocia a cada usuario y dispositivo sin necesidad de registrarlos. Cuando se pulsa sobre algún elemento del área principal de la plantilla, en el menú de la derecha se muestran las opciones de personalización relativas al elemento pulsado. Esto es posible gracias a los eventos de la misma librería que permite arrastrar los elementos, ya que también gestiona eventos táctiles y de ratón de manera unicada. Cuando se pulsa un elemento para personalizarlo se pone una sombra en el elemento para dejar claro que elemento se está modicando. A continuación, se explican las distintas opciones de personalización de cada elemento: Pictograma y pictograma en blanco: se puede cambiar el color de borde y el color del fondo, el texto asociado al pictograma y si se quiere o no mostrar el texto asociado. Además, se pueden tachar o poner un tick. En la Figura 5.17 se pueden ver todas estas opciones. Figura 5.17: Vista del editor de plantillas con el menú de ajustes de pictogramas. Área: se puede cambiar el color del borde y el del fondo, se puede añadir un texto en la parte superior del área y tachar o poner un tick. En la Figura 5.18 se muestran las opciones de edición del área. Cuadro de texto: tiene las mismas opciones que el área pero ademas se puede modicar el color del texto y decidir si en los tableros se podrá editar este texto o no. En la Figura 5.19 se muestran estas opciones. Figuras geometricas: solo se puede cambiar el color de fondo y el texto asociado a las mismas tal y como se puede ver en la Figura 5.20. 54 Capítulo 5. PicTableros Figura 5.18: Vista del editor de plantillas con el menú de ajustes de áreas. Figura 5.19: Vista del editor de plantillas con el menú de ajustes de los cuadros de texto. 5.3.3. Editor de tableros Al editor de tableros se puede llegar editando un tablero ya existente o utilizando una plantilla para crear un tablero. Tal y como se muestra en la Figura 5.21 el editor de tableros tiene a la izquierda el área principal donde se va creando el tablero y a la derecha solo cuenta con el buscador de pictogramas, que se pueden arrastrar a cualquier posición del tablero. En la barra superior se encuentra el input de texto para cambiar el título, indicando en este caso que se trata de un tablero, para que el usuario lo tenga siempre presente. Los elementos que están en el tablero tienen unas opciones de personali- 5.3. Implementación 55 Figura 5.20: Vista del editor de plantillas con el menú de ajustes de guras. Figura 5.21: Vista del editor de tableros. zación distintas a las plantillas: Pictogramas: se permite tacharle, ponerle un tick, un punto amarillo o una transparencia azul, tal y como se puede ver en la Figura 5.22. Las opciones de personalización del área son las mismas que en las plantillas. Los cuadros de texto solo se podrán editar si al generar la plantilla se han marcado como editables. En la Figura 5.23 se puede ver el input que permite cambiar el texto. En las guras geométricas solo se puede cambiar el color, tal y como se puede ver en la Figura 5.25. 56 Capítulo 5. PicTableros Figura 5.22: Vista del editor de tableros con el menú de ajustes de pictogramas. Figura 5.23: Vista del editor de tableros con el menú de ajustes de cuadros de texto. 5.4. Evaluación Gracias a la Asociación de Autismo Sevilla y al Colegio Angel Riviere se han podido realizar una evaluación de la aplicación con los usuarios nales. La aplicación está destinada padres, tutores y profesores, y por tanto serán profesionales del colegio los encargados de hacer la evaluación. 5.4. Evaluación 57 Figura 5.24: Vista del editor de tableros con el menú de ajustes de las guras geométricas. 5.4.1. Diseño de la evaluación El objetivo de esta evaluación es determinar la usabilidad y la utilidad de la aplicación para los usuarios nales. Lo primero que se hace es recoger del usuario su nombre y apellidos y el cargo que ocupa en el colegio (esto sirve para saber como de familiarizados están con este tipo de herramientas), y también los detalles sobre el dispositivo en el que se realizará la prueba (ordenador, tablet o móvil) para poder estudiar los resultados según el tipo de dispositivo. Después de rellenar estos datos, comienza la evaluación de la aplicación que consta de cuatro fases: Fase uno : se pedía a los evaluadores crear la plantillas que se muestran en la Figura 5.2. Después de crear cada plantilla debían rellenar el tiempo que les había llevado crearla, el nivel de parecido entre la plantilla creada y la plantilla objetivo (asignando un valor entre uno y cinco, siendo uno nada parecido y cinco muy parecido), nivel de dicultad (asignando un valor entre uno y cinco, siendo uno muy fácil y cinco muy difícil), nivel de satisfacción con el resultado obtenido (asignando un valor entre uno y cinco, siendo uno nada satisfecho y cinco muy satisfecho) y observaciones. Fase dos : tenían que utilizar cada una de las plantillas realizadas anteriormente para crear un tablero. En esta fase se recogía información sobre el tiempo invertido en crear el tablero, el nivel de dicultad y el nivel de satisfacción con el resultado. Al igual que en la fase anterior 64 Capítulo 6. Conclusiones y trabajo futuro Diseño de Sistemas Interactivos : donde aprendí a diseñar aplicaciones centradas en el usuario, realizando pruebas con prototipos interactivos, evaluaciones sobre la aplicación nal, etc. Por ultimo, el tercer objetivo era aprender cosas nuevas y este proyecto me ha permitido profundizar en el uso de JavaScript explorando al máximo sus funcionalidades y trabajando con distintas librerías como interact.js y html2canvas . También me ha permitido aprender a trabajar con nuevas tecnologías como Firebase y LocalStorage. 6.2. Trabajo futuro Una vez terminado el proyecto, existen diversas mejoras que se pueden añadir en el futuro y así dotar a la aplicación de mayor funcionalidad: Implementar un buscador por el titulo de la plantilla o tablero en los listados. Así cuando los usuarios tengan mucho material pueden buscar por nombre fácilmente. Denir categorías para ltrar el contenido de las listas de plantillas y tableros. Esto sería muy útil en el caso de que el contenido público sea demasiado grande y se quiera buscar un tipo de contenido concreto, por ejemplo: normas, agendas, calendarios, etc. Vincular unas plantillas con otras. Por ejemplo en la plantilla del Sistema de puntos los usuarios podrían vincular un tablero a cada punto y en el tablero asociado mostrar la actividad que tienen que realizar para conseguir una recompensa. Permitir a los usuarios utilizar imágenes propias, en las plantillas y tableros. Así los usuarios puedan personalizar aún más las plantillas y tableros, por ejemplo para los usuarios es mejor poner una foto de su madre, que el pictograma madre. Permitir que el usuario pueda interactuar con el tablero marcando el pictograma elegido. Por ejemplo, si se muestra el tablero de elegir juguetes, que el juguete elegido por el usuario se marque en el tablero. Mejorar el buscador de tal manera que al buscar por ejemplo la palabra hola, los resultados de la búsqueda sean todos aquellos que empiezan por la palabra buscada, en este caso hola y holanda y no solo los pictogramas con la coincidencia exacta. 6.2. Trabajo futuro 65 Añadir un botón en la lista de contenidos, que permita a los usuarios imprimir fácilmente sus plantillas y tableros. Ajustar el texto dentro de los elementos, así cuando un elemento es pequeño el texto se debería ajustar a su tamaño. Capítulo 7 Conclusions and Future work Resumen: In this chapter in Section 7.1 the conclusions drawn from the work presented in this report and in Section 7.2 future work are shown. 7.1. Conclusions The main goal of this project was to develop a web application that would allow users to digitally create the boards they use in their day to day. To do this, it was necessary to create the possibility of creating templates that would serve as the basis for creating boards. In order that the application created was adapted as much as possible to the needs of the users, a library was used that allowed to drag and drop the elements to any position and change the size of the same, thus allowing the creation of any type of material from a blank canvas. The application was created following a user-centered design. The design of the application was created with the end users who also participated in the evaluation of the application. This evaluation has made it possible to verify the usefulness of the application, as well as to identify the aspects that need improvement. The second objective of this TFG was to apply some of the knowledge acquired during the degree, especially useful have been the following subjects: Web Applications : where I acquired the basic knowledge of HTML, CSS and JavaScript, necessary to create the application. 67 68 Capítulo 7. Conclusions and Future work Interactive Systems Design : where I learned to design user-centered applications, testing with interactive prototypes, evaluations on the nal application, etc. Finally, the third objective was to learn new things and this project has allowed me to deepen the use of JavaScript by fully exploring its functionalities and working with dierent libraries such as interact.js and html2canvas . It has also allowed me to learn to work with new technologies such as Firebase and LocalStorage. 7.2. Future Work Once the project is nished, there are several improvements that can be added in the future and thus provide the application with greater functionality: Implement a search engine by the title of the template or board in the listings. So when users have a lot of material they can search by name easily. Dene categories to lter the content of template and panel lists. This would be very useful if the public content is too large and you want to nd a specic type of content, for example: rules, agendas, calendars, etc. Link some templates with others. For example, in the Point System template, users could link a board to each point and in the associated board show the activity they have to perform to get a reward. Allow users to use their own images, in the templates and boards. So users can further customize templates and boards, for example for users it is better to put a picture of their mother, than the mother pictogram. Allow the user to interact with the board by marking the chosen pictogram. For example, if the board of choosing toys is shown, the toy chosen by the user is marked on the board. Improve the search engine in such a way that when searching for the word hello, for example, the search results are all those that start with the searched word, in this case hello and holland and not just the pictograms with the exact match. 7.2. Future Work 69 Add a button in the list of contents, which allows users to easily print their templates and boards. Adjust the text within the elements, so when an element is small the text should be adjusted to its size. Bibliografía Bertola, E. Análisis empírico de las características formales de los símbolos pictográcos ARASAAC. Disponible en http://hdl.handle.net/10803/ 454891 . Ferníndez, M. C. , Angiono, V. A. y Mercado, L. B. Comunicación aumentativa y trastornos de la comunicación y el lenguaje . Editorial Brujas, 2017. García, R. Pictogramas y sistemas grácos de comunicación e información. Disponible en http://oa.upm.es/37991/1/INVE_MEM_2014_206047.pdf . Gil, E. M. INTERacción comunicativa en mensajería instantánea bajo sistemas SAACs : INTERSAACs . Trabajo de Fin de Máster, Universidad Complutense de Madrid, 2015. Martín, A. PICTAR: una herramienta de elaboración de contenido para personas con TEA basada en la traducción de texto a pictogramas . Trabajo de Fin de Máster, Universidad Complutense de Madrid, 2018. Sanz, M. L. P. y Martén, A. M. T. Agendas visuales no hace falta la agenda él me entiende. El Guiniguada , vol. 11, Disponible en https://accedacris.ulpgc.es/bitstream/10553/5459/1/0235347_ 02002_0013.pdf . Ventoso, M. R. Pictogramas: Una alternativa para comprender el mundo. Disponible en http://aetapi.org/download/ pictogramas-una-alternativa-para-comprender-el-mundo/?wpdmdl= 1386 . 71