UNIVERSIDAD DE CASTILLA-LA MANCHA ESCUELA SUPERIOR DE INFORMÁTICA GRADO EN INGENIERÍA EN INFORMÁTICA TRABAJO FIN DE GRADO

Tamaño: px
Comenzar la demostración a partir de la página:

Download "UNIVERSIDAD DE CASTILLA-LA MANCHA ESCUELA SUPERIOR DE INFORMÁTICA GRADO EN INGENIERÍA EN INFORMÁTICA TRABAJO FIN DE GRADO"

Transcripción

1 UNIVERSIDAD DE CASTILLA-LA MANCHA ESCUELA SUPERIOR DE INFORMÁTICA DEPARTAMENTO DE TECNOLOGÍAS Y SISTEMAS DE INFORMACIÓN GRADO EN INGENIERÍA EN INFORMÁTICA TECNOLOGÍA ESPECÍFICA DE TECNOLOGÍAS DE LA INFORMACIÓN TRABAJO FIN DE GRADO Herramienta de diseño y análisis de cuestionarios/tests multidominio usables y accesibles Autor: Ángel Luis Wizner Caballero Director: Ana Isabel Molina Díaz i Febrero, 2015

2

3 TRIBUNAL: Presidente: Vocal: Secretario FECHA DE DEFENSA: CALIFICACIÓN: PRESIDENTE VOCAL SECRETARIO Fdo.: Fdo.: Fdo.: iii

4

5 AGRADECIMIENTOS En el ámbito educativo muchas son las personas de las que me he empapado y he aprendido durante todos estos años de enseñanza en colegio e instituto. A todos y cada uno de los profesores que han pasado por mi vida: GRACIAS. Os agradezco vuestra gran dedicación y vuestras ganas de enseñar. Desde mi querida Doña Teresa Covisa, quién me enseñó a leer y escribir en mis primeros años de colegio, pasando por Don Manuel Sáez, quién me inculcó el por aquel entonces mejor método de estudio que tan útil me ha resultado y que a día de hoy sigo utilizando: OCASSA (observar, cuestionar, analizar, subrayar, setizar y asimilar). Especial mención a profesores de instituto de los que guardo un gran recuerdo y que han sido los mejores referentes y modelos a seguir. A Paloma por su pasión contagiosa con la cultura francesa, a Patricia por las mejores clases de biología, a Miguel por tantas batallas en clase de historia, a Sinforoso por su trato cercano y paciencia con fórmulas y ecuaciones, y en general a todos los profesores que me han ayudado a llegar hasta aquí. Tras la enseñanza secundaria llegó la esperada universidad y con ella muchas otras personas que subieron al tren de mi vida: compañeros de residencia, compañeros de clase y profesores. Especial agradecimiento a mis dos compañeros de habitación en Santo Tomás de Villanueva durante cuatro años, José Javier y Emilio José, por tantos buenos momentos y apuntes compartidos. A mis compañeras de clase Águeda, Laura y Raquel. Y a una erminable lista de compañeros de residencia que no nombre por miedo a olvidar a alguno. Agradecer también a todos mis profesores de ingeniería informática sus horas en aulas y laboratorios, donde tanto he aprendido. Especial mención a mi profesora y directora del TFG, Ana Isabel Molina Díaz, por su gran vocación por la enseñanza que tan bien refleja en las aulas, por su trato amable y cercano, por su implicación en el proyecto, su disponibilidad y por conseguir que la universidad sea un poquito mejor. Agradecer también a mis compañeros de trabajo tantas jornadas y proyectos compartidos. He aprendido mucho a vuestro lado. En el plano personal, no puedo dejar de agradecer a todos mis amigos sus ánimos y consejos cuando los he necesitado. Habéis sido uno de mis mejores apoyos en todos estos años. Especialmente a Daniel, por traer la calma en tantos momentos difíciles. Y por último, a mis padres Rafael y Manola, mis hermanos Ana y Juanma y mis sobrinas María y Lara, por toda una vida juntos, por vuestro cariño y afecto incondicional. v

6

7 RESUMEN En este proyecto se plantea la creación de una herramienta para diseñar cuestionarios y test para todo tipo de necesidades y analizar las respuestas dadas por los encuestados, prestando especial atención a la accesibilidad y usabilidad de los formularios web generados. En esta memoria se detallan todos los pasos dados para la ejecución del proyecto, desde la idea original, con el análisis de requisitos, hasta llegar a su finalización, con las últimas fases de pruebas y despliegue. En la actualidad existen múltiples herramientas en el mercado, libres o de pago, que permiten generar encuestas y analizar sus resultados. Son aplicaciones muy útiles y demandadas tanto por empresas como por instituciones, con el fin de obtener información directamente de clientes, estudiantes, trabajadores o cualquier persona implicada en procesos académicos, de formación, de ventas, de captación de clientes, etc. Todos los datos recogidos se estudian posteriormente para sacar conclusiones sobre las respuestas dadas por los encuestados y definir posibles actuaciones destinadas a mejorar procesos, incentivar compras, resolver cualquier deficiencia detectada, etc. En el análisis de resultados suele ser habitual el uso de estadísticos típicos como pueden ser porcentajes, medias, desviaciones típicas, etc. Pero algunas de las cuestiones más importantes a la hora de analizar los cuestionarios, los tests, así como los resultados obtenidos a partir de su aplicación, no se suelen tener en cuenta. Tal es el caso de la fiabilidad del test, el poder discriminativo de los ítems, su dificultad o el análisis de los distractores. Dentro del ámbito de las ciencias sociales existen varias disciplinas que abordan esta problemática, entre las que destacamos la Psicometría. Esta área de conocimiento se ocupa de aspectos teóricos y prácticos relacionados con la elaboración, evaluación y aplicación de instrumentos de medición. Aunque se encuadra en el área de la medición psicológica, los procedimientos matemáticos que propone, así como los principios de diseño y construcción de escalas de medias y análisis de tests pueden ser aplicados a una gran variedad de ámbitos. En la aplicación desarrollada en el contexto de este Trabajo Fin de Grado (TFG) se incluirán principios y modelos de diseño y análisis propuestos desde la Psicometría. Este es uno de los principales aportes de la herramienta desarrollada, y que la diferencia de las ya existentes en el mercado. Se ha optado por desarrollar la herramienta en formato web con tecnología.net y repositorio de datos en SQL Server. Esta herramienta es mucho más que un simple diseñador de encuestas. También permite una gestión egral de usuarios, gestión de invitaciones a encuestas, análisis de resultados, generación de informes, descarga de resultados en varios formatos y generación de gráficos, entre otros. vii

8

9 ABSTRACT This project outlines the creation of a tool to design questionnaires and tests for all kinds of needs and to analyse the answers provided by the respondents. In addition it highlights the accessibility and usability of the generated questionnaires. The report explains step by step the execution of the project, from the initial stage, with the requirement analysis, to the last phase with testing and deploying. To present, there are several tools available in the market, either free or pay, that generate questionnaires and analyse the results. They are very useful tools highly demanded by companies as well as institutions. The main purpose is to obtain information directly from clients, students, staff or individuals involved in different processes, such as academic, financial or commercial. Subsequently all gathered data is analysed to draw conclusions with the information given by the respondents and to create possible action plans to improve the processes, increase sales, resolve any possible deficiencies, etc. When analysing the data, it is very common to use statistical applications such as percentages, means, typical deviations, etc. However, some of the more important matters when analysing the questionnaires, such as tests or results obtained from the application are not taken o account. Factors, such as test reliability, discriminative power of the items, its difficulty or analysis of the distracting factors. In the field of social science, there are several disciplines that address these difficulties, Psychometric is one worth highlighting. This discipline covers both theoretical and practical aspects related to the creation, evaluation and application of the measuring tools. Although it fits in within the psychological measuring area, the mathematical methods proposed as well as the principles for designing and constructing average scales and analysing tests can be applied to a wider area. In the application developed in this end-of-degree project, analysis and design models and principles will be included from a psychometrics perspective. This is one of the main contributions of the developed tool as it is different from the ones already available in the market. It has been agreed to implement the tool on a design web format with NET technology and data repository in SQL Server. This tool is more than an ordinary questionnaire designer. It also facilitates users and questionnaires invitation management tools, analysis of results, report generating, results available to download in different formats and graphic generating, among others. ix

10

11 ÍNDICE GENERAL Índice de figuras... xiii Índice de tablas... xix 1. INTRODUCCIÓN Estructura del documento OBJETIVOS Objetivos Teóricos Objetivos Prácticos ANTECEDENTES Y ESTADO DE LA CUESTIÓN Usabilidad Web Accesibilidad Web Análisis de los Resultados de Encuestas Medidas Descriptivas Básicas Psicometría: Evaluación de las propiedades métricas de los instrumentos de medición Estudio de Aplicaciones Similares Existentes en el Mercado Valor Añadido de la Aplicación Desarrollada MÉTODO DE TRABAJO Metodología MPIu+a Metodología Incremental de Desarrollo del Software Marco Tecnológico de Trabajo Medios Hardware Medios Software Librerías y Componentes RESULTADOS Especificación y Análisis de Requisitos Especificación de Requisitos Análisis de Requisitos Diagramas de casos de uso UML Requisitos de seguridad de la aplicación Diseño Diagramas de clases UML Diagramas de secuencia UML Diagramas de actividad UML xi

12 Modelo de Tareas CTT Diseño de la Estructura de Datos Diseño de la Interfaz: Plantilla Base, Hoja de Estilos y Plantilla de Comunicados Estructura de la Aplicación Implementación Incremento Incremento Incremento Incremento Lanzamiento Web.config Evaluación CONCLUSIONES Y PROPUESTAS Conclusiones Posibles Mejoras y Trabajos Futuros Bibliografía y Recursos Anexos A. Manual de Usuario B. Cuestionarios TAM (Technology Acceptance Model) C. Cuestionario SUS (System Usability Scale) D. Guía para la Creación de Pruebas Tipo Test de Respuesta Múltiple E. Recomendaciones Sobre las Descripciones de Elementos Multimedia F. Resumen de los Defectos Técnicos en los Ítems G. Estrategias y Pautas para Hacer Exámenes Tipo Test H. Nota de Confidencialidad I. Documentos Excel de Importación de Datos J. Diagrama de Base de Datos K. Informes de Encuestas L. Opciones de configuración del Servidor IIS M. Configuración del Servidor IIS N. Introducción al modelado de tareas con la notación CTT O. Ejemplo de Cálculo de Métricas xii

13 Índice de figuras Figura 3.1. Steve Krug y Jakob Nielsen, dos de los principales autores e investigadores en el ámbito de la usabilidad web Figura 3.2. Ecuación de la desviación típica Figura 3.3. Ecuación del coeficiente Alpha de Cronbach para ítems no dicotómicos Figura 3.4. Ecuación del coeficiente Alpha de Cronbach para ítems dicotómicos Figura 3.5. Ecuación del índice de dificultad de un ítem Figura 3.6. Ecuación del índice de dificultad corregido de un ítem Figura 3.7. Ecuación de la correlación biserial-puntual de un ítem (RPBI) Figura 3.8. Logo y tipos de cuenta ofrecidos por Survey Monkey Figura 3.9. Logo y tipos de cuenta ofrecidos por Survio Figura Logo y tipos de cuenta ofrecidos por Encuesta Fácil Figura Logo y tipos de cuenta ofrecidos por Online Encuesta Figura Logo y tipos de cuenta ofrecidos por E-Encuesta Figura Logo y tipos de cuenta ofrecidos por Encuesta Tick Figura Logo y tipos de cuenta ofrecidos por EvalAndGo Figura 4.1. (a) Toni Granollers y Saltiveri; (b) Logotipo del grupo Griho; (c) Modelo de Proceso de la Ingeniería de la Usabilidad y la Accesibilidad (MPIu+a) Figura 4.2. (a) División del modelo en tres pilares básicos; (b) Diseño centrado en el usuario (DCU) Figura 4.3. (a) Proceso cíclico e iterativo; (b) Modelo flexible Figura 4.4 Esquema de la Metodología Incremental de Desarrollo del Software Figura 4.5. Propiedades del equipo empleado en el desarrollo de la aplicación Figura 4.6. Iconos de algunos medios software utilizados en el desarrollo de la aplicación37 Figura 4.7. Ubicación del administrador de paquetes NuGet en Microsoft Visual Studio 2010 Professional Figura 4.8. Ubicación del diagrama de base de datos en SQL Server Figura 4.9. Interfaz de IIS en Windows XP Figura Ejemplo de boceto con Balsamiq Mockups Figura Operadores y tipos de tareas en CTTE Figura (a) Extensión Firebug para Firefox; (b) Extensión Awesome Screenshot para Chrome; (c) Vista de la web de Google en 3D con Firefox Figura Logotipo de la herramienta WAVE de accesibilidad web Figura Logotipo de la herramienta Vischeck de chequeo cromático xiii

14 Figura Interfaz de la herramienta Colour Contrast Analyzer de chequeo cromático.. 40 Figura Logotipo de la herramienta de modelado de diagramas UML Figura Logotipo de AJAX para ASP.net Figura 4.18 (a) Ventana modal (ModalPopupExtender) con un calendario (CalendarExtender, MaskedEditExtender y MaskedEditValidator); (b) NumericUpDownExtender simulando un Spinner; (c) PasswordStrength, con recomendaciones sobre fondo naranja Figura Logotipo de Google Analytics Figura Ejemplo de gráficos generados con Microsoft Chart Control Figura Logo e instancia de CKEditor con estilos adaptados a la aplicación de Encuestas Figura Logotipo de Gmail de Google Figura Logotipo de ITEXT Figura Ejemplo de carrusel de la aplicación de encuestas, implementado con JSSOR Slider Figura Ejemplo de captcha empleado en la aplicación de encuestas, implementado a partir de Recaptcha de Google Figura 5.1. Diagrama de casos de uso del funcionamiento general de la aplicación Figura 5.2. Diagrama del casos de uso Diseñar encuesta Figura 5.3. Diagrama del caso de uso Rellenar encuesta Figura 5.4. Código ejemplo de parametrización de consultas SQL Figura 5.5. Diagrama de clases de persistencia UML Figura 5.6. Detalle de la clase Encuesta Figura 5.7. Detalle de la clase Pregunta Figura 5.8. Diagrama de clases de presentación/dominio UML Figura 5.9. Controles HTML disponibles en.net Figura Controles de servidor disponibles en.net Figura Diagrama de secuencia de alta de gestor Figura Diagrama de secuencia de creación de encuesta Figura Diagrama de secuencia de cumplimentación de encuesta Figura Diagrama de secuencia UML de la generación de informe Figura Diagrama de actividad para el caso de uso Diseñar encuesta Figura Diagrama de actividad del caso de uso Rellenar encuesta Figura Modelo de tareas para el alta de gestor Figura Modelo de tareas para el inicio de sesión del gestor xiv

15 Figura Modelo de tareas para la recuperación de credenciales de gestor Figura Modelo de tareas de especificación de tarea del gestor Figura Modelo de tareas de creación de una encuesta Figura Modelo de tareas de generación de informe Figura Modelo de tareas de rellenar encuesta Figura Sección módulos del diagrama de base de datos Figura Secciones gestor, convocatoria y encuesta del diagrama de base de datos Figura Sección pregunta del diagrama de base de datos Figura Sección encuestado y respuesta del diagrama de base de datos Figura Secciones recomendación y texto predefinido del diagrama de base de datos 83 Figura Secciones plantilla del diagrama de base de datos Figura Sección importación de datos del diagrama de base de datos Figura Sección log del diagrama de base de datos Figura Prototipos de plantillas de nivel 1 y Figura Vistas 3D generadas con Vista 3D de Mozilla Firefox Figura Código de comprobación de JavaScript activado Figura 5.35 Aviso de JavaScript desactivado Figura Código JavaScript de Google Analytics Figura Interfaz de Google Analytics con estadísticas por Navegador y Sistema Operativo Figura Interfaz de Google Analytics con estadísticas de flujo de usuarios Figura Código de formato CSS inicialmente utilizado en s Figura Código de formato CSS definitivo utilizado en s Figura Estructura general del sitio web y del apartado ADM Figura Código reducido del site.map de la aplicación Figura Prototipo inicial de la página principal de gestores Figura Aspecto final de la página principal de gestores Figura Interfaz de gestión de credenciales de la UCLM Figura Requisitos mínimos de clave y fortaleza de contraseña Figura Expresión regular para comprobar la validez de clave Figura de recuperación de credenciales de gestor Figura Prototipo inicial de la gestión de convocatorias Figura Aspecto final de la gestión de convocatorias Figura Prototipo inicial de la primera fase de creación de encuestas xv

16 Figura Aspecto final de la primera fase de creación de encuestas Figura Prototipo inicial de la segunda fase de creación de encuestas Figura Aspecto final de la segunda fase de creación de encuestas Figura Prototipo inicial de la tercera fase de creación de encuestas Figura Aspecto final de la tercera fase de creación de encuestas Figura Ejemplo de ruta de almacenamiento de logos de encuestas Figura Comunicación entre los formularios de gestión de encuestas y de preguntas107 Figura Prototipos de ventanas modales de inserción de módulos y preguntas Figura Aspecto final de ventanas modales de inserción de módulos y preguntas Figura Aspecto final de gestión de preguntas Figura Ventana de checklist de creación de preguntas Figura Ejemplo de ruta de almacenamiento de recurso multimedia Figura Aspecto final del apartado gestión de listas y Likerts Figura Ventana modal de edición de lista Figura Ventana modal de edición de escala de Likert Figura Aspecto final del apartado gestión de encuestados Figura Código de expresión regular para validar un Figura (a) Estadísticas de encuesta; (b) Histórico de encuestado; (c) Ejemplo de log de accesos Figura Ventana modal en procesos de cargas o envíos masivos Figura Ejemplo de campos clave codificados de un comunicado Figura Aspecto final de la gestión de plantillas Figura Aspecto final del apartado envío de notificaciones Figura Aspecto final de la consulta de histórico de notificaciones Figura Código para deshabilitar enlaces de un Figura Prototipo inicial del componente encuesta Figura Aspecto final del componente encuesta Figura Controles disponibles en las encuestas Figura Código CSS para convertir una imagen a escala de grises Figura Ejemplo de encuesta con contraste reducido Figura Ejemplo de encuesta con contraste aumentado Figura Código para implementar una cuenta atrás en.net Figura Ejemplo de resumen de validación de encuesta Figura Aspecto final de la descarga de respuestas xvi

17 Figura Código BOOM empleado en archivos CSV Figura Instrucciones para abrir documentos CSV en Excel Figura Detalle del informe de un módulo de un cuestionario Figura Detalle de gráficos de módulos del informe de un cuestionario Figura Ejemplo de Alpha de Cronbach en informe de encuesta de opinión Figura Detalle de informe de test en modo encuesta Figura Detalle de informe de test en modo resumen Figura Aspecto final de la opción de importación de datos en Excel Figura Ejemplo de declaración de una AppSetting en el web.config Figura Ejemplo de cadena de conexión a base de datos Figura Mensaje mostrado en la página de error pagerror.aspx Figura (a) Ubicación del filtro Vischeck en Adobe Photoshop; (b) Interfaz del filtro Vischeck Figura Chequeo cromático de la página de inicio de gestor. (a) Deuteranopia; (b) Protanopia; (c) Tritanopia; (d) Acromatopsia Figura Chequeo cromático de la página de inicio de encuestados. (a) Deuteranopia; (b) Protanopia; (c) Tritanopia; (d) Acromatopsia Figura Chequeo cromático del detalle de los gráficos de informes. (a) Deuteranopia; (b) Protanopia; (c) Tritanopia; (d) Acromatopsia Figura Chequeo cromático del detalle de los informes (a) Deuteranopia; (b) Protanopia; (c) Tritanopia; (d) Acromatopsia Figura Resultado del chequeo cromático de la miga con ColourContrastAnalyzer (a) Enlace/Fondo; (b) Texto/Fondo; (c) Enlace/Fondo correcto; (d) Texto/Fondo correcto; (e) Miga correcta Figura Resultado del chequeo cromático del pie de página con ColourContrastAnalyzer (a) Enlace/Fondo; (b) Enlace/Fondo correcto; (c) Enlace de pie correcto Figura Detalle del estudio de accesibilidad de la página de inicio de encuestados 150 Figura Detalle de enlace con advertencia de accesibilidad Figura Detalle del estudio de accesibilidad de la cumplimentación de una encuesta152 Figura Detalle del estudio de accesibilidad de la generación de informe Figura 6.1. Interfaz del nuevo captcha de Google Figura 6.2. Ejemplo de recomendaciones ofrecidas por el control PasswordStrength Figura 6.3. Documentación acerca de PasswordStrength donde se indica la ausencia de traducción para todos los idiomas Figura I.1. Excel de carga masiva de encuestados xvii

18 Figura I.2. Hoja encuesta del Excel de importación de resultados Figura I.3. Instrucciones de rellenado del Excel de importación de datos Figura I.4. Hoja módulos del Excel de importación de resultados Figura I.5. Hoja preguntas del Excel de importación de resultados Figura I.6. Hoja respuestas del Excel de importación de resultados Figura J.1. Diagrama de base de datos Figura K.1. Informe completo de test en modo encuesta Figura K.2. Informe completo de test en modo resumen Figura K.3. Informe de encuesta de opinión, parte Figura K.4. Informe de encuesta de opinión, parte Figura K.5. Informe de encuesta de opinión, parte Figura K.6. Informe de encuesta de opinión, parte Figura K.7. Informe de encuesta de opinión, parte Figura K.8. Informe de encuesta de opinión, parte Figura L.1. Pantallazo de opciones de configuración del servidor IIS Figura M.1. Opción de agregar o quitar programas del panel de control en Windows XP235 Figura M.2. Ventana asistente para componentes de Windows XP Figura M.3. Contenido de la carpeta herramientas administrativas de Windows XP Figura M.4. Interfaz del IIS de Windows XP Figura M.5. Pestaña directorio virtual de la ventana propiedades de Encuestas Figura M.6. Pestaña ASP.NET de la ventana propiedades de Encuestas Figura M.7. Pestaña documentos de la ventana propiedades de Encuestas Figura M.8. Ventana de propiedades de la carpeta temporal Figura M.9. Ubicación de la opción Publicar sitio web en Visual Studio Figura M.10. Ventana Publicar sitio web en Visual Studio Figura M.11. Ejemplo de publicación de la aplicación web Figura M.12. Ruta del archivo de configuración de host Figura M.13. Ejemplo de configuración de host Figura M.14. Interfaz de la aplicación llamada desde 242 xviii

19 Índice de tablas Tabla 3.1. Interpretación de los 10 Principios de Usabilidad de Steve Krug... 7 Tabla 3.2. Interpretación de las 10 Reglas de Usabilidad de Jakob Nielsen... 7 Tabla 3.3. Listado de principios de diseño accesibles del W3C Tabla 3.4. Principales características de la aplicación Survey Monkey Tabla 3.5. Principales características de la aplicación Survio Tabla 3.6. Principales características de la aplicación Encuesta Fácil Tabla 3.7. Principales características de la aplicación Online Encuesta Tabla 3.8. Principales características de la aplicación E-Encuesta Tabla 3.9. Principales características de la aplicación Encuesta Tick Tabla Principales características de la aplicación EvalAndGo Tabla Características relacionadas con las preguntas Tabla Características relacionadas con el soporte de presentación de la encuesta y la apariencia Tabla Características relativas a la encuesta en general Tabla Características relativas al análisis de resultados Tabla 5.1. Interpretación de iconos mostrados en informes Tabla 5.2. Opciones de almacenamiento de gráficos con Chart Control Tabla 5.3. Opciones de configuración del atributo customerrors de la master.page Tabla 6.1. Comparativa de características relacionadas con las preguntas Tabla 6.2. Comparativa de características relacionadas con el soporte de presentación de la encuesta y la apariencia Tabla 6.3. Comparativa de características relativas a la encuesta en general Tabla 6.4. Comparativa de características relativas al análisis de resultados Tabla B.1. Cuestionario TAM Tabla C.1. Cuestionario SUS xix

20

21 1. INTRODUCCIÓN La creciente demanda por parte empresas e instituciones públicas y privadas de mecanismos que ayuden a conocer el grado de satisfacción de sus clientes y/o usuarios, hacen necesaria la aparición de aplicaciones para encuestar determinados aspectos sobre los servicios prestados o productos disponibles. De aquí surge una gran variedad de sitios web que ofrecen aplicaciones para facilitar el lanzamiento de encuestas de opinión, de satisfacción, de usabilidad y estudios de mercado, entre otros, mediante la autogestión y diseño de formularios online, recogida de respuestas y generación de informes de resultados. El ámbito académico no queda exento de estas necesidades. Una universidad necesita conocer sus puntos fuertes y débiles en aspectos tan diversos como pueden ser la satisfacción de los alumnos con la docencia recibida por parte del profesorado, la atención recibida en los procesos administrativos, el grado de capacidad de solucionar problemas al contactar con el centro de atención al usuario, etc. El personal docente e investigador (PDI) también requiere ser encuestado sobre la satisfacción con los recursos disponibles para impartir docencia o llevar a cabo sus investigaciones. El personal de administración y servicios (PAS) también requiere de formularios para expresar su opinión sobre aspectos tales como la calidad de la formación erna recibida o el funcionamiento de aplicaciones institucionales. Las tecnologías web avanzan exponencialmente y a día de hoy ya hay medios para agilizar procesos y rutinas de trabajo que pueden ahorrar mucho tiempo y esfuerzo en tareas docentes, como pueden ser la corrección de pruebas de conocimientos o exámenes tipo test 1. Estos permiten, además, la generación de una gran cantidad de estadísticos descriptivos en tiempo real que puede ayudar al profesor a identificar aquellos ítems en los que ha habido un mayor número de aciertos o fallos y sacar conclusiones sobre si éstos estaban bien redactados, si llevaban a confusión o dobles erpretaciones, etc. Existe todo un área de conocimiento (Psicometría) que permite conocer aspectos tales como la dificultad de los ítems individuales, analizar el poder discriminativo de un ítem (para diferenciar entre los sujetos según su nivel de competencia), o analizar los distractores (alternativas no correctas de un ítem). Este proyecto pretende convertirse en una herramienta sencilla e uitiva que permita diseñar, gestionar y analizar diversos tipos de cuestionarios, para obtener datos valiosos a partir del feedback reportado en las respuestas de los encuestados y, de este modo, detectar posibles deficiencias que requieran ser revisadas de una forma rápida. 1 Al hablar de test nos referimos a pruebas objetivas de conocimiento basadas en preguntas de respuesta múltiple, también conocidas como pruebas cognitivas. Por otra parte, tendremos los cuestionarios de actitudes u opinión. 1

22 1.1. Estructura del documento Este documento se divide en seis capítulos, más una serie de anexos con información complementaria y de apoyo. 1. Introducción: es el presente capítulo e incluye una breve roducción al tema tratado en el proyecto así como una justificación de su realización. 2. Objetivos del TFG: en este capítulo se enumeran y describen los objetivos que se persiguen con la realización del proyecto, tanto a nivel teórico como a nivel práctico. 3. Antecedentes y Estado de la Cuestión: en este capítulo se detallan los conocimientos obtenidos tras el estudio de dos de los temas fundamentales en este proyecto: la accesibilidad y la usabilidad en el entorno web. También se describen algunos conceptos de Psicometría y se explica cómo podemos aplicarla en el ámbito del diseño y análisis de encuestas y tests. Para finalizar se presenta el estudio realizado sobre herramientas de características similares a la desarrollada existentes en el mercado, reflejando los resultados en una tabla comparativa que se explicará en detalle. 4. Método de Trabajo: en este capítulo se detallan algunos conceptos y las características principales de las metodología de trabajo utilizadas, MPIu+a y Metodología Incremental de Desarrollo del Software, finalizando con la explicación de cada una ellas. También se describe el marco tecnológico en que se ha desarrollado el proyecto, detallando tanto las especificaciones del hardware, como las características del software utilizado. 5. Resultados: en este capítulo se describe qué se ha realizado en cada una de las fases de la metodología MPIu+a utilizada durante el desarrollo del proyecto, comenzando con el análisis y especificación de requisitos y terminando en la fase de evaluación. 6. Conclusiones y Propuestas: en este capítulo se resumen las conclusiones a las que se ha llegado con la realización del proyecto, señalando lo más destacable de la solución propuesta. También se incluyen algunas mejoras y futuros trabajos de ampliación que se pueden realizar sobre el desarrollo presentado. Bibliografía: incluye todas las referencias bibliográficas consultadas para el desarrollo de este TFG, presentadas en orden alfabético. Anexos: incluyen todo el material de apoyo que se ha considerado de especial relevancia, como el manual de usuario, algunos diagramas, checklist de comprobaciones de usabilidad empleados en la elaboración de preguntas, etc. Una vez detallada la estructura del documento, en el siguiente capítulo se listan los objetivos teóricos y prácticos que se pretenden alcanzar con la realización de este TFG. 2

23 2. OBJETIVOS El principal objetivo que se pretende alcanzar con la realización de este TFG es la implementación de un sitio web usable y accesible que permita el diseño de encuestas, recopilación de respuestas y análisis de resultados Objetivos Teóricos Los objetivos teóricos planteados en el desarrollo de este TFG quedan resumidos en el siguiente listado: Conocer los servicios que ofrecen aplicaciones ya existentes en el mercado con el propósito de dotar al sitio web a implementar de nuevas funcionalidades que ofrezcan valor añadido. Estudiar técnicas y métodos que ayuden a aumentar la accesibilidad del sitio web y la usabilidad del contenido del mismo. Adquirir los conocimientos técnicos necesarios para diseñar, implementar y desplegar el sitio web. Estudiar y aprender cómo aplicar las métricas que calculará la aplicación desarrollada. Inclusión de un repositorio de tests prediseñados y bien conocidos en la bibliografía, pertenecientes al dominio de la Interacción Persona-Ordenador (IPO) y la evaluación de la usabilidad (TAM, SUS, etc) 2. Conocer recomendaciones y guidelines para la creación correcta de ítems en cuestionarios. Dichas recomendaciones serán incorporadas en la aplicación como checklist de comprobación que podrán consultar los usuarios de la misma Objetivos Prácticos Los objetivos prácticos planteados en el desarrollo de este TFG quedan resumidos en el siguiente listado: Diseño y gestión de encuestas personalizadas de varios propósitos: test de conocimiento (pruebas cognitivas), cuestionarios de satisfacción, encuestas de opinión (pruebas no cognitivas), etc. 2 Este trabajo ha sido desarrollado en el marco del grupo de investigación CHICO (Computer Human Interaction and Collaboration) de la ESI, y permite cubrir algunas necesidades relacionadas con la labor docente e investigadora de los profesores de dicho grupo. Puesto que la línea de investigación principal del grupo CHICO es la Interacción Persona-Ordenador, se ha incluido un repositorio con los principales cuestionarios de evaluación de usabilidad empleados en esta área de conocimiento. Dichos cuestionarios son utilizados habitualmente en la evaluación de sistemas eractivos y en la mayoría de trabajos de investigación llevados a cabo por este grupo de investigación. 3

24 Diseño y gestión de preguntas o ítems de diversa naturaleza (de dos alternativas, tipo escala, de elección múltiple, etc.), con posibilidad de asociar contenido multimedia (videos, imágenes, audios, etc.). Generación de encuestas dinámicas con control de tiempo máximo, visualización de progreso, o la posibilidad de soportar aspectos de accesibilidad web mediante cambio de contraste, cambio de tamaño de fuente, etc. Alta de encuestados y gestores, gestión de los mismos y seguimiento de sus progresos. Envío de notificaciones y consulta de histórico de mensajes enviados. Estadísticas en tiempo real de encuestas completadas. Dependiendo del tipo de encuesta creada (de satisfacción, de opinión o prueba de conocimiento) se calcularán distos tipos de estadísticos o métricas: distribuciones de frecuencia, tantos por ciento, moda, media, mediana, desviación típica, Alpha de Cronbach, etc. Análisis de resultados, cálculo de los principales estadísticos descriptivos para la generación de informes personalizados en diferentes formatos con gráficos descriptivos. Poner en funcionamiento la infraestructura más adecuada para alojar la aplicación. Tras listar los objetivos teóricos y prácticos, se procede a desarrollar el capítulo de antecedentes y estado de la cuestión. Se revisan aspectos tales como la usabilidad y accesibilidad en aplicaciones web. También se explican conceptos relacionados con la Psicometría y se detalla el estudio realizado de aplicaciones similares a la desarrollada ya presentes en el mercado. 4

25 3. ANTECEDENTES Y ESTADO DE LA CUESTIÓN En esta sección se hará una breve revisión de los fundamentos de este TFG. En primer lugar se revisarán aspectos relacionados con la usabilidad y la accesibilidad web. Dado que la aplicación desarrollada incluye un módulo de análisis de encuestas, tanto estadístico como psicométrico, se roducen algunos de los principales conceptos y métricas calculadas por la aplicación, así como su erpretación. Por último, se hace una revisión y análisis comparativo de algunas de las aplicaciones con objetivos similares a la desarrollada, destacando el valor añadido que la aplicación creada aporta frente a ellas. Comenzamos roduciendo los aspectos de usabilidad y accesibilidad web, ya que tanto en el desarrollo de la aplicación implementada, como en los cuestionarios web que la aplicación permite obtener, ambos aspectos han sido una prioridad Usabilidad Web Según la norma ISO de 1998, se puede definir la usabilidad como el grado de eficacia, eficiencia y satisfacción con la que usuarios específicos pueden lograr objetivos específicos, en contextos de uso específicos. A partir de esta definición se entiende que la usabilidad de una aplicación web siempre estará ligada a la forma y condiciones de uso por parte de los usuarios que presentan unas necesidades específicas. Por lo tanto, una aplicación web no es en sí misma usable, sino que lo es para unos contextos y grupos de usuarios específicos. La usabilidad está muy relacionada con la accesibilidad, que no se refiere a la facilidad de uso, sino a la posibilidad de acceso. La usabilidad es una condición necesaria, pero no suficiente, para ofrecer una buena accesibilidad. Se da la circunstancia algo contradictoria de que mientras los diseños usables buscan diseños concretos para un conjunto de usuarios, los diseños accesibles tratan de eliminar las barreras de acceso para la diversidad de necesidades que presentan grupos heterogéneos de usuarios. La calidad del contenido y la capacidad de encontrar la página en la que está, son los dos principales criterios de usabilidad web. Entre las principales ventajas 4 que aporta la usabilidad en una aplicación web encontramos las siguientes: Reducción de los costes de aprendizaje. Disminución de los costes de asistencia y ayuda al usuario. Optimización de los costes de diseño, rediseño y mantenimiento de los sitios. Aumento de la tasa de conversión de visitantes a clientes del sitio web. Mejora la imagen y el prestigio del sitio web. 3 Norma ISO (1998) "Guidance on usability": https://www.iso.org/obp/ui/#iso:std:16883:en 4 Ventajas que ofrece la usabilidad: 5

26 Mejora la calidad de vida de los usuarios del sitio, ya que reduce su estrés, incrementa la satisfacción y la productividad. Reducción y optimización general de los costes de producción. Aumento en la productividad de los sitios web de comercio electrónico. Mayor rapidez en la realización de tareas y reduce las pérdidas de tiempo. Dos de los principales autores de referencia sobre usabilidad son Jakob Nielsen 5 con publicaciones como Prioritizing Web Usability (2006) y Steve Krug 6 con su libro Don t Make me Think (2000). La Figura 3.1 muestra a ambos autores junto a las portadas de sus libros, que son referentes en el área de la usabilidad web Figura 3.1. Steve Krug y Jakob Nielsen, dos de los principales autores e investigadores en el ámbito de la usabilidad web. Steve Krugk definió 10 principios de usabilidad en el libro Don t Make me Think (Tabla 3.1). Por otra parte, Jakob Nielsen estudió 249 problemas de usabilidad y a partir de ellos diseñó lo que denominó las reglas generales para identificar los posibles problemas de usabilidad (Tabla 3.2) Principios de Usabilidad de Steve Krug Qué es la usabilidad? La usabilidad es asegurarse que algo funcione bien, y que una persona con ciertas habilidades y experiencia pueda utilizarlo en su propósito sin frustrarse. Las aplicaciones web deben explicarse por sí mismas. Deben ser evidente, obvio, explicarse por sí solo. No me hagas pensar. Hacer las cosas obvias para evitar la frustración del usuario. No desperdicies mi tiempo. Utilizamos Internet para ahorrar tiempo. Todavía se cliquea el botón hacia atrás del navegador. No inhabilitar el botón atrás. 5 Web de Nielsen Norman Group: 6 Web y blog de Steve Krug: 6

27 Principios de Usabilidad de Steve Krug Somos criaturas de hábitos. Lo que funciona lo tomamos como hábito. No hay tiempo para pequeñas charlas. Evitar las roducciones e ir a lo concreto. No te olvides de la búsqueda. Incluir una caja de búsqueda. Creamos mapas mentales Recordamos el camino para llegar al recurso que buscamos en un sitio web. Haz simple el camino al home Insertar siempre un enlace al inicio. Tabla 3.1. Interpretación de los 10 Principios de Usabilidad de Steve Krug Reglas Heurísticas de Usabilidad de Jakob Nielsen Visibilidad del estado del sistema. Aportar feedback al usuario sobre lo que está ocurriendo. Relación entre el sistema y el mundo real. Utilizar palabras, frases y conceptos familiares para el usuario. Control y libertad del usuario. Permitir deshacer una acción en caso de error. Consistencia y estándares. Seguir las convenciones establecidas. Prevención de errores. Buena gestión y tratamiento de errores. Reconocimiento antes que recuerdo. No ocultar objetos, acciones u opciones, mantenerlas a la vista. Flexibilidad y eficiencia de uso. Permitir adaptar el sistema a las necesidades del usuario. Estética y diseño minimalista. Mostrar sólo información relevante. Ayudar a los usuarios a reconocer, diagnosticar y recuperarse de errores. Mensajes de error claros, proponiendo una posible solución. Ayuda y documentación. Ofrecer documentación concreta y no demasiado extensa. Tabla 3.2. Interpretación de las 10 Reglas de Usabilidad de Jakob Nielsen A continuación se listan algunas de las recomendaciones de usabilidad más importantes a tener en cuenta en el diseño de páginas, sitios y contenidos. 7

28 Diseño de páginas Optimizar el espacio de la información. Los contenidos deben ocupar entre un 50 y un 80% del espacio. Los enlaces no deben representar más del 20%. Realizar un diseño independiente de la plataforma. Cuidar los tiempos de descarga y respuesta y ofrecer información del progreso. Los enlaces deben percibirse como clickables, deben cambiar de color al ser visitados y evitar abrirse en ventanas nuevas. Se debe evitar los enlaces del tipo Pulse aquí. Evitar el uso de frames. La información más importante debe situarse en la parte superior, evitar espacios en blanco y scroll para ver el contenido. Deben existir pocas líneas de referencia y haber una simetría entre los contenidos. Los menús, títulos, textos, etc. deben fluir desde la esquina superior izquierda a la inferior derecha. El lenguaje empleado debe ser claro y expositivo. Se debe hacer un correcto uso del color y los fondos. Se debe ubicar cada elemento de la página siguiendo las convenciones globales en la Web. Diseño del sitio Debe ser lo más sencillo posible, no incluir distracciones, proporcionar herramientas de navegación apropiadas y evitar al usuario recordar información de una página a otra. La página principal o homepage debe responder las preguntas dónde estoy? qué puedo hacer aquí? Debe mantener la guía de estilos del resto de páginas aunque se permiten ciertas variaciones. Debe proporcionar links y descripciones cortas. Debe contener un logo arriba a la izquierda, información actualizada que responda a la pregunta qué hace este sitio?, opciones de navegación en la columna izquierda y debe evitar las páginas splash 7. Los menús deben ser coherentes en cuanto a ubicación, aspecto y comportamiento. Debes estar jerarquizados con secciones y evitar un número excesivo de ítems. Los erfaces del sistema deben ayudar a responder las preguntas: Dónde estoy?, Dónde he estado?, Dónde puedo ir? Y Cómo puedo ir donde quiero? Las migas o breadcrumbs son muy útiles. Se debe habilitar el botón de retroceso del navegador. No se deben utilizar ventanas emergentes a menos que sirvan para mostrar ayuda o definiciones de glosarios. No anunciar características hasta que no estén disponibles, evitar las famosas páginas en construcción. 7 Páginas splash: presentaciones, animaciones o imágenes que se muestran al entrar en un sitio web. 8

29 Diseño de los contenidos El texto debe ser legible, ligero y breve, con palabras cortas. Debe existir 2 o 3 niveles de cabeceras, con títulos significativos. Se deben remarcar las palabras más clave y, en páginas extensas, incluir un listado de contenidos con enlaces. Los títulos de las páginas deben ser significativos, de entre 2 y 6 palabras, siendo una de ellas la clave. Se debe cuidar la tipografía, limitando el número que se utilizan y escogiendo aquellas que transmiten seriedad y modernidad (Georgia o Verdana son las más recomendables). Se debe usar un tamaño no inferior a 10 puntos, con buen contraste, evitando el texto en movimiento y en mayúsculas. Las imágenes y el contenido multimedia deben tener un propósito, añadir valor y se deben etiquetar. Las imágenes grandes deben representarse con thumbnails 8. Flash (o cualquier otra tecnología para la creación de contenidos animados y multimedia) sólo debe utilizarse para añadir características no disponibles en páginas estáticas. Una vez desarrollados los conceptos más importantes sobre usabilidad en aplicaciones web, se pasa a roducir el concepto de accesibilidad en entornos web Accesibilidad Web Las nuevas tecnologías están cada vez más extendidas y llegan a un mayor número de usuarios. Una parte importante son personas que sufren algún tipo de discapacidad y a los que hay que facilitarles el acceso en la medida de lo posible, para evitar que se produzcan desigualdades. Según la W3C 9, la accesibilidad Web significa que personas con algún tipo de discapacidad van a poder hacer uso de la Web va a permitir que estas personas puedan percibir, entender, navegar e eractuar con la Web, aportando a su vez contenidos. La accesibilidad web no sólo beneficia a personas con discapacidad. También se tienen en cuenta otros colectivos como las personas de edad avanzada que han visto mermadas sus habilidades a consecuencia de la edad. Por lo tanto, podemos definir la accesibilidad web 10 como posibilidad de que un producto o servicio web pueda ser accedido y usado por el mayor número posible de personas, indiferentemente de las limitaciones propias del individuo o de las derivadas del contexto de uso. 8 Thumbnail: miniatura de una imagen. 9 World Wide Web Consortium (W3C): consorcio ernacional que produce recomendaciones para la World Wide Web y que alberga la Iniciativa de Accesibilidad Web (WAI) 10 Definición de accesibilidad web extraída de la revista electrónica No solo usabilidad (ISSN ) : 9

30 Las discapacidades pueden agruparse en cuatro tipos principales: Deficiencias visuales: ceguera, visión reducida y problemas en visualización de color (deuteranopia, tritanopia y protanopia). Deficiencias auditivas: sordera parcial o total. Deficiencias motrices: debilidad muscular, limitaciones en la sensibilidad táctil, falta de alguna extremidad, limitaciones en el control muscular, movimientos que implican dolor. Deficiencias cognitivas y de lenguaje: problemas en el uso del lenguaje, la lectura, percepción, memoria, salud, etc. La WAI (Iniciativa de Accesibilidad en la Web) promovida por el W3C (World Wide Web Consortium) propone unas pautas de accesibilidad que se deben seguir a la hora de generar contenido web accesible. La Web Content Accessibility Guidelines del W3C propone un listado de principios de diseño accesible reflejado en la Tabla 3.3: Web Content Accessibility Guidelines (W3C) 1 Proporcione alternativas equivalentes al contenido visual y auditivo. 2 No se base sólo en el color. 3 Utilice marcadores y hojas de estilo, y hágalo apropiadamente. 4 Identifique el idioma original utilizado. 5 Cree tablas que se transformen correctamente. 6 Asegure que las páginas que incorporan nuevas tecnologías se transformen correctamente. 7 Asegure al usuario el control sobre los cambios de los contenidos. 8 Asegure la accesibilidad directa de las erfaces de usuario incrustadas. 9 Diseñe para la independencia del dispositivo. 10 Utilice soluciones provisionales. 11 Utilice las tecnologías y pautas del W3C. 12 Proporcione información de contexto y orientación. 13 Proporcione mecanismos claros de navegación. 14 Asegure que los documentos sean claros y simples. Tabla 3.3. Listado de principios de diseño accesibles del W3C Se establecen tres niveles de prioridad dentro de las recomendaciones: Prioridad 1: el desarrollador tiene que satisfacerlo, es posible que grupos de usuarios encuentren imposible acceder a la información. Prioridad 2: el desarrollador debe satisfacerlo, es posible que grupos encuentren dificultades en el acceso a la información. Prioridad 3: el desarrollador puede satisfacerlo, es posible que grupos encuentren alguna dificultad. 10

31 También se establecen tres niveles de adecuación: Nivel A: satisface todos los puntos de prioridad 1. Nivel AA: satisface todos los puntos de prioridad 1 y 2. Nivel AAA: satisface todos los puntos de prioridad 1, 2 y 3. Para el análisis de la accesibilidad web existen múltiples herramientas de chequeo 11 como pueden ser WAVE, EvalAcces, AChecker, adesigner, TAW, etc. También existen otras herramientas muy específicas para evaluar determinados aspectos muy concretos como pueden ser las deficiencias visuales del color (Vischeck) o los contrastes entre colores de primer y segundo plano (Colour Contrast Analyzer), entre otras muchas. Después del resumen realizado sobre aspectos relacionados con la accesibilidad web, se pasa a describir tanto las medidas descriptivas básicas como los conceptos más relevantes de Psicometría, empleados en el análisis de los resultados de encuestas que incluye la aplicación desarrollada Análisis de los Resultados de Encuestas El módulo de generación de informes de la aplicación desarrollada calcula una serie de estadísticos básicos, de gran utilidad para analizar los resultados obtenidos en cuestionarios y encuestas de opinión (pruebas no cognitivas). Por otra parte, en los test (pruebas cognitivas), se hace uso de los principios y métricas propuestos desde la Psicometría para calcular, entre otros, los índices de dificultad y discriminación de los ítems o el poder discriminativo de los distractores. A continuación se explican tanto las medidas descriptivas básicas empleadas (media, moda, mediana y desviación típica) como las medidas psicométricas más relevantes utilizadas en el análisis de resultados incorporados por la herramienta Medidas Descriptivas Básicas La estadística descriptiva se utiliza para obtener, ordenar, analizar y mostrar un conjunto de datos, con el propósito de extraer sus características más relevantes. El análisis descriptivo nos reportará unas conclusiones obtenidas a partir del estudio de una serie de medidas de tendencia central. Este estudio observará en qué grado se agrupan o dispersan los datos en torno a un valor central. Por lo tanto, las medidas descriptivas pueden clasificarse en dos grupos: de tendencia central y de dispersión. Dentro del primer grupo tenemos la media aritmética, la 11 Listado completo de herramientas de chequeo disponible en la web Usable y Accesible : 11

32 moda y la mediana. En el segundo, se estudiará la desviación típica. En el Anexo O puede verse un ejemplo del cálculo de las medidas descriptivas básicas. Media aritmética Esta medida, también conocida como promedio o simplemente media, se utiliza normalmente como valor representativo de un conjunto de puntuaciones. Se define como la cantidad total de la variable distribuida a partes iguales entre cada observación, es decir, cuánto correspondería a cada sujeto (u objeto) si todos tuvieran el mismo valor. La media aritmética es muy sensible a los valores extremos, puesto que los valores muy grandes tienden a aumentarla y los valores muy pequeños tienden a reducirla. En determinados casos deja de ser representativa del conjunto de puntuaciones. Se calcula sumando todas las puntuaciones y dividiendo esta suma entre el número de sujetos. Moda La moda es la puntuación que tiene una mayor frecuencia (donde encontramos un mayor número de casos). Es posible que en la frecuencia de puntuaciones haya dos o más modas, recibiendo el nombre de frecuencias bimodales o plurimodales. También es posible que no exista moda, cuando todos los valores tienen la misma frecuencia. Mediana Para calcular la moda hay que seguir los siguientes pasos: 1. Ordenar el conjunto de valores. 2. Obtener las frecuencias de cada valor. a. Si hay una frecuencia mayor que el resto, ésa es la moda. b. Si todas las frecuencias son idénticas, entonces no hay moda. c. Si hay dos o varias puntuaciones con la misma frecuencia y esa frecuencia es la máxima, la distribución es bimodal o multimodal, es decir, tiene varias modas. d. Si dos puntuaciones adyacentes tienen la frecuencia máxima, la moda es el promedio de las dos puntuaciones adyacentes. La mediana es el valor que divide las frecuencias en dos mitades iguales: por encima y por debajo de la mediana, encontramos el mismo número de sujetos. Dicho de otra forma, la mediana es el valor de la variable de posición central en un conjunto de datos ordenados. La mediana corresponde al percentil 50: el valor que deja por debajo a la mitad de la muestra. A diferencia de la media aritmética, la mediana no se ve afectada por las puntuaciones extremas de la distribución. 12

33 La mediana se calcula ordenando el conjunto de puntuaciones. Si el número es impar, la mediana corresponderá con el valor central. En caso de ser par, la mediana corresponde con la media de los dos valores centrales. Desviación típica La desviación típica o desviación estándar, indica el grado de heterogeneidad de las puntuaciones individuales. Es una medida de dispersión usada en estadística que nos dice cuánto tienden a alejarse los valores concretos del promedio en una distribución. La Figura 3.2 muestra la ecuación para calcular la desviación típica: Figura 3.2. Ecuación de la desviación típica Una vez explicados las medidas descriptivas básicas cuyo cálculo incluye la aplicación desarrollada, se pasa a desarrollar los conceptos más relevantes estudiados sobre Psicometría Psicometría: Evaluación de las propiedades métricas de los instrumentos de medición Según la Real Academia Española, se puede definir Psicometría como Medida de los fenómenos psíquicos. Se trata, por lo tanto, de una disciplina metodológica encargada de la medición en psicología. Desarrolla y estudia procedimientos estadísticos destinados a comprobar si una prueba psicológica es válida y fiable para medir una determinada variable. La Psicometría proporciona métodos para evaluar las propiedades métricas de los instrumentos de medición, como pueden ser la fiabilidad del cuestionario, mediante el cálculo del coeficiente Alpha de Cronbach. También nos permite, en el caso de pruebas de conocimientos, calcular el poder discriminativo de los ítems y analizar los distractores 12 a 12 Se conoce como distractores a las opciones incorrectas de un ítem aptitudinal o de rendimiento (incluido en un test de conocimiento o prueba cognitiva). 13

34 partir de la proporción de sujetos que acierta el ítem (PROP) y de la correlación biserialpuntual del ítem o del distractor (RPBI). Por otra parte, podemos conocer la dificultad de estos, mediante los índices de dificultad (ID) y de dificultad corregida (IDc). El análisis de los ítems de los test proporciona las siguientes ventajas: 1. Mejora la calidad del test: aportan información sobre cada una de las preguntas, permitiendo descartar aquellas que no discriminan correctamente la muestra de sujetos. Es una forma de autoevaluación del profesor y del diseño del test. 2. Aporta información útil: se pueden extraer conclusiones sobre el test realizado y ofrecer feedback a la muestra de sujetos sobre los aciertos y errores más frecuentes. 3. Detecta errores en la formulación: como pueden ser preguntas ambiguas, varias respuestas correctas, clave de corrección equivocada, nivel de dificultad excesivo o insuficiente. 4. Fácilmente programables: son procedimientos sencillos de calcular que aportan información muy valiosa con un coste en tiempo y esfuerzo reducido. En el Anexo O se muestran ejemplos de cálculo de las métricas que se explican a continuación. Fiabilidad del test Se trata de una estimación de la correlación esperada con una prueba semejante e indica en qué medida, en exámenes parecidos, los alumnos hubieran quedado ordenados de manera similar. En muchas ocasiones se confunde la fiabilidad con la validez. Un test es fiable si permite ordenar a los sujetos según su nivel de conocimientos. Un test es válido si permite medir aquello para lo que ha sido diseñado. La fiabilidad no conlleva la validez y viceversa. Un test puede ser muy fiable si diferencia a los sujetos por sus conocimientos, pero puede no ser válido si, por ejemplo, pretende medir la aplicación de unos conceptos mediante preguntas teóricas en lugar de casos prácticos. Por el contrario, un test puede ser muy válido si logra lo pretendido, pero en cambio no es fiable si la muestra de sujetos tiene unos conocimientos muy similares y no es posible diferenciarlos. La fiabilidad de un test depende de las diferencias entre los sujetos. Si la muestra es muy homogénea, la fiabilidad tiende a bajar, y esto no tiene por qué indicar que el test esté mal diseñado. En general, el coeficiente de fiabilidad tiende a aumentar cuando: La muestra de sujetos es heterogénea: se clasifica mejor a los sujetos cuanto más distos son entre sí. La muestra de sujetos es numerosa: puesto que cuantos más sujetos haya, mayor es la probabilidad de que sean más diferentes entre sí. 14

35 Las opciones de los ítems es superior a dos: cuantas más opciones, más facilidad de que se manifiesten las diferencias de conocimientos entre los sujetos. Lo óptimo es que tengan de 4 a 7. El número de ítems es numeroso: hay más probabilidad de que los sujetos queden más diferenciados en la puntuación global. La formulación de los ítems es semejante: cuando los ítems son muy diversificados, la fiabilidad tiende a ser menor. Por lo tanto, un coeficiente de fiabilidad alto indica que el test ha logrado ordenar la muestra de sujetos de acuerdo a sus conocimientos. Esto suele ocurrir en tests con un elevado número de ítems y una muestra numerosa de sujetos. Pero una fiabilidad alta no siempre es sinónimo de calidad del test. También hay que comprobar la validez del test, reflejado en aquellas preguntas que, por ejemplo, se han contestado correctamente de memoria, cuando lo que se pretende medir es la comprensión o erpretación. El coeficiente Alpha de Cronbach (α) surge en Su valor oscila entre 0 y 1, aunque ocasionalmente podemos encontrar valores negativos que se erpretarán como coeficiente cero. El coeficiente se puede calcular tanto para pruebas cognitivas o tests de rendimiento con ítems dicotómicos 13 (acierto/error), como para pruebas no cognitivas con ítems no dicotómicos (escalas de Likert). Valores del coeficiente superiores a 0,7 son suficientes para garantizar la fiabilidad del test, aunque no todos los autores coinciden. La ecuación para calcular el coeficiente Alpha de Cronbach en pruebas no cognitivas con ítems no dicotómicos queda reflejada en la Figura 3.3. Figura 3.3. Ecuación del coeficiente Alpha de Cronbach para ítems no dicotómicos La ecuación para calcular el coeficiente Alpha de Cronbach, mediante la Fórmula KR20 14, en pruebas cognitivas con ítems dicotómicos se muestra en la Figura Un ítem dicotómico es aquel que puede tomar solamente dos valores (acierto/error). 14 Fórmula KR20: desarrollada por Kuder-Richardson en 1937, es considerada como un caso particular del coeficiente Alpha de Cronbach para ítems dicotómicos. 15

36 Figura 3.4. Ecuación del coeficiente Alpha de Cronbach para ítems dicotómicos Análisis de los ítems individuales del test Cuando se hace el análisis de los ítems individuales de un test, se pueden medir los siguientes conceptos: Índice de dificultad del ítem (ID): hace alusión a la proporción de sujetos que lo responden correctamente. Índice de dificultad del ítem corregido (IDc): además tiene en cuenta la suerte de aquellos sujetos que sin conocer la respuesta, eligen la alternativa correcta. Poder discriminativo de un ítem: indica la capacidad para diferenciar a los sujetos con disto nivel en el rasgo medido. El índice de dificultad de un ítem (ID) puede tomar valores entre 0 y 1. Un índice próximo a 0 indica que el ítem tiene una dificultad baja, mientras que cuanto más se acerque a 1, mayor será su dificultad. Aquellos ítems con valores extremos deber retirarse del test, ya que casi todos lo aciertan o casi todos lo fallan, y no sirven para diferenciar a los sujetos con diferentes niveles del rasgo medido. La Figura 3.5 muestra la ecuación para calcular el índice de dificultad de un ítem: Figura 3.5. Ecuación del índice de dificultad de un ítem El índice de dificultad corregido (ID c ) se utiliza para corregir los aciertos por azar. La Figura 3.6 muestra la ecuación para obtener el índice de dificultad corregido de un ítem: 16

37 Figura 3.6. Ecuación del índice de dificultad corregido de un ítem Partiendo de la idea de que los sujetos con buenas puntuaciones en un test deben acertar un determinado ítem en mayor proporción que los sujetos con bajas puntuaciones, surge la necesidad del cálculo del poder discriminativo de un ítem. Además, un ítem debe poder discriminar entre sujetos con distos niveles de competencia. El poder discriminativo de un ítem se puede estudiar de distas formas: PROP: proporción de sujetos que acierta el ítem, que coincide con el índice de dificultad sin corregir. RPBI: correlación biserial-puntual del ítem-test. La correlación biserial-puntual de un ítem (RPBI) indica en qué medida el hecho de responder correctamente una pregunta está relacionado con obtener una buena puntuación en el test. La Figura 3.7 muestra la ecuación que calcula el RPBI de un ítem: Figura 3.7. Ecuación de la correlación biserial-puntual de un ítem (RPBI) La forma de erpretar este indicador es la siguiente: Correlación cercana a cero: indica que el responder bien o mal a la pregunta no es indicador de obtener una buena o mala puntuación en el test. Correlación negativa: indica que el responder bien a la pregunta es indicador de obtener una mala puntuación en el test (se trata de una mala pregunta). Correlación positiva: indica que el responder bien a la pregunta sí es un indicador de obtener una buena puntuación en el test (se trata de una buena pregunta). 17

38 Por lo tanto, las preguntas con RPBI positivo son las que mejor discriminan la muestra de sujetos. Análisis de distractores Tan importante como calcular el poder discriminativo de un ítem, lo es el calcular el poder discriminativo de cada distractor. Este análisis indica la utilidad de cada alternativa incorrecta en una cuestión de respuesta múltiple y su contribución a la calidad del ítem. También es útil para averiguar si alguna alternativa no ha sido seleccionada por ningún sujeto, o una proporción muy baja de ellos. En este análisis se tiene en cuenta lo siguiente: Cada distractor debe ser elegido por un mínimo de sujetos, basta con un 10% de la muestra. Además es recomendable que este porcentaje sea lo más parecido posible entre los diferentes distractores. Que la puntuación obtenida por los sujetos que seleccionan la opción incorrecta sea menor a la obtenida por quienes aciertan la pregunta. A medida que el nivel de aptitud de los sujetos aumente, se espera que disminuya el porcentaje de selección de los distractores y viceversa. El poder discriminativo de un distractor se puede estudiar de distas formas: PROP: proporción de sujetos que selecciona el distractor. RPBI: correlación biserial-puntual del distractor-test. El método de cálculo es similar al utilizado en el análisis de los ítems individuales de los test. Lo esperado es que el RPBI sea positivo para la opción correcta y negativo para los distractores. Tras la revisión de las principales propiedades métricas de los instrumentos de medida (cuestionarios y tests) que se emplearán en el desarrollo de este TFG, se pasa a presentar el estudio realizado sobre aplicaciones existentes en el mercado con objetivos similares a la desarrollada Estudio de Aplicaciones Similares Existentes en el Mercado El primer paso en este proyecto, antes de la recogida y análisis de requisitos, ha consistido en un estudio previo de aplicaciones ya existentes en el mercado que ofrecen una funcionalidad similar a la herramienta que se ha desarrollado. 18

39 Se ha realizado una búsqueda por la red mediante diversos buscadores, Google, Bing y Yahoo, y se han analizado aquellas webs que aparecían en las primeras posiciones, sumando un total de siete sitios, cuyas principales características se pasa a comentar. Por cada una de ellas se enumerarán las funcionalidades que ofrece, clasificadas según las tres fases principales a soportar: el diseño o generación de las encuestas, la recogida de resultados y el análisis de los mismos. Survey Monkey Es una de las webs referentes en el sector. Cuenta con más de 20 millones de clientes en todo el mundo. Ofrece diversos tipos de cuentas, las gratuitas llamadas Basic, y varios formatos de pago, siendo la Platinum la más completa (Figura 3.8). Figura 3.8. Logo y tipos de cuenta ofrecidos por Survey Monkey La Tabla resume las funciones ofrecidas por Survey Monkey. Características Survey Monkey Diseño de encuesta Recogida de resultados Análisis de resultados Preguntas y respuestas ilimitadas, 51 plantillas, 15 tipos de preguntas, lógica de página y lógica de pregunta, asignación al azar, canalización de preguntas y respuestas, distribución al azar de preguntas, temas personalizados, inserción de logotipo, opciones para distribuir al azar y ordenar las preguntas, 15 temas visuales preestablecidos, barra de progreso (% completado de la encuesta), numeración automática de páginas y preguntas, validación y respuestas obligatorias, encuestas accesibles, redirección personalizada al finalizar la encuesta, página personalizada de agradecimiento, versión para imprimir en formato PDF. Envío de enlace a encuesta: enlace web, correo electrónico o Twitter, URL personalizada, compartir encuesta en Facebook, insertar encuesta en página o sitio web, insertar encuesta en ventana emergente en sitio web, enviar encuesta a través de administrador de correo electrónico y seguridad SSL. Resultados en tiempo real, análisis de texto, egración SPSS, informes personalizados, filtro y tabulaciones cruzadas de respuestas mediante criterios personalizados, descarga de respuestas, creación y descarga de gráficos personalizados y compartir respuestas. Tabla 3.4. Principales características de la aplicación Survey Monkey 15 Se puede ampliar la información en: https://es.surveymonkey.com/pricing/details/ 19

40 Survio Se trata de otra de las webs de referencia en el diseño, recopilación y análisis de resultados de encuestas. Dicen poseer más de clientes. Ofrece tres tipos de cuentas, la gratuita llamada Free y dos de pago, siendo la Diamond la más completa (Figura 3.9). Figura 3.9. Logo y tipos de cuenta ofrecidos por Survio La Tabla resume las funciones ofrecidas por Survio. Diseño de encuesta Recogida de resultados Análisis de resultados Características Survio respuestas/mes, encuestas y preguntas ilimitadas, 52 plantillas, logotipo, personalizar pie de página, duplicar encuesta, 19 tipos de preguntas, recursos multimedia, textos de ayuda para encuestados, vista previa de encuesta, lógica de exclusión, progreso de la encuesta, respuestas obligatorias, URL personalizada, multidioma. Contraseña seguridad + restricción IP, invitaciones por , encuestas anónimas, encuesta en Facebook o Twitter. Exportaciones en XLS, CSV, XML, HTML, generación de informes personalizados. Tabla 3.5. Principales características de la aplicación Survio 16 Se puede ampliar la información en: 20

41 Encuesta Fácil Se trata de otra de las herramientas disponibles para diseñar, recopilar y analizar encuestas de forma rápida y sin emplear apenas recursos. Dicen ser los número 1 en cuanto a herramientas web de encuestas online en Europa y Latinoamérica. Dispone de una cuenta gratuita y varias de pago, siendo la de tipo Research la más completa (Figura. 3.19). Figura Logo y tipos de cuenta ofrecidos por Encuesta Fácil La Tabla resume las funciones ofrecidas por Encuesta Fácil. Diseño de encuesta Recogida de resultados Análisis de resultados Características Encuesta Fácil Gran variedad de tipos de preguntas, múltiples plantillas prediseñadas, posibilidad de imprimir las encuestas, personalización de logotipo, pie de página y colores, preguntas con elementos media, resultados en tiempo real, varios idiomas. Diversos métodos de recopilación de resultados, envío de invitaciones, preguntas obligatorias, orden aleatorio de preguntas, posibilidad de limitar la duración. Informes personalizados de resultados, generación de gráficos, descargas de resultados en varios formatos. Tabla 3.6. Principales características de la aplicación Encuesta Fácil 17 Se puede ampliar la información en: 21

42 Online Encuesta Se trata de otro de los múltiples sitios web existentes para trabajar con encuestas. Disponen de varios tipos de cuenta, desde el gratuito Basic hasta cuatro tipos de pago, siendo el Enterprise el más completo (Figura 3.11). Figura Logo y tipos de cuenta ofrecidos por Online Encuesta La Tabla resume las funciones ofrecidas por Online Encuesta. Características Online Encuesta Diseño de encuesta Recogida de resultados Análisis de resultados Preguntas variadas, secuencia lógica (sí entonces ), fotos, diseño individual del cuestionario, logotipo, posibilidad de enlaces web en el cuestionario, varios idiomas (posibilidad de traducción automática), página personalizada de agradecimiento, redirección personalizada al finalizar, acceso a CSS, preguntas, participantes y respuestas ilimitados. Optimizado para móviles y tabletas, protección por contraseña para participación en encuesta, posibilidad de pausar y reanudar más tarde, medidas para evitar participación múltiple, envío de invitaciones y recordatorios por , URL personalizada, permite al usuario subir archivos, acceso cerrado de participantes, limitar tiempo de participación, envío de notificaciones. Evaluación automática online en tiempo real, incluyendo tabulación cruzada, descargar respuestas en Excel y CSV, publicar/compartir resultados con un enlace, segmentar participantes y filtrar resultados por grupos de evaluación, filtrar resultados por fecha de participación, filtros dinámicos. Tabla 3.7. Principales características de la aplicación Online Encuesta 18 Se puede ampliar la información en: https://www.onlineencuesta.com/?url=plan 22

43 E-Encuesta Este sitio web es muy similar a los ya mencionados anteriormente. Ofrece una cuenta gratuita llamada Plan Básico y otras tres de pago, siendo la llamada Marca Blanca la más completa (Figura 3.12). Figura Logo y tipos de cuenta ofrecidos por E-Encuesta La Tabla resume las funciones ofrecidas por E-Encuesta. Características E-Encuesta Diseño de encuesta Recogida de resultados Análisis de resultados Encuestas, preguntas y encuestados ilimitados, plantillas, encuestas multipágina, logotipo, repositorio de imágenes, diferentes formatos de encuestas, 17 tipos de preguntas, imagen, video y sonido en la encuesta, lógica condicional: filtros de salto, filtros ocultar/mostrar (pregunta oculta), importar campos y valores, volcar respuestas, opción por defecto de pregunta, orden aleatorio de respuestas, preguntas obligatorias, barra de progreso, idiomas, encuesta en PDF, numeración de páginas y preguntas, redirección tras finalizar encuesta, pantalla de agradecimiento. Recopilar respuestas vía , enlace a la encuesta en un iframe egrado, publicar en Twitter o Facebook, imagen con el código QR de la encuesta, cierre programado de la encuesta, notificaciones, recordatorios y de invitación, control de duplicados, dejar y retomar la encuesta, claves de acceso. Resultados en tiempo real, compartir informe de resultados, imprimir informe, resultados en Excel y SPSS, informes con gráficos Excel avanzados, filtrado de respuestas. Tabla 3.8. Principales características de la aplicación E-Encuesta 19 Se puede ampliar la información en: 23

44 Encuesta Tick Se trata de otra web que ofrece servicios para diseñar encuestas, recopilar resultados y analizarlos de forma rápida y sencilla. Ofrece también varios tipos de cuenta, una gratuita Free y varias de pago, siendo la Professional la que más funcionalidad ofrece (Figura 3.13). Figura Logo y tipos de cuenta ofrecidos por Encuesta Tick La Tabla resume las funciones ofrecidas por Encuesta Tick. Diseño de encuesta Recogida de resultados Análisis de resultados Características Encuesta Tick Plantillas, logotipo, diferentes tipos de preguntas, pregunta condicional, página condicional, preguntas obligatorias, imprimir encuesta en papel, multidioma. Claves únicas (1 respuesta por pc), notificaciones, importar contactos CSV, recordatorios, cierre programado, página final personalizada. Informes en tiempo real, imprimir informe, descargar respuesta a Excel, filtro de resultados en informes, gráficos personalizados, informes en PDF, compartir informe de resultados. Tabla 3.9. Principales características de la aplicación Encuesta Tick 20 Se puede ampliar la información en: 24

45 EvalAndGo Se trata de otro de los sitios web estudiados, con funciones muy similares al del resto de aplicaciones vistas anteriormente. Ofrece también una cuenta de tipo gratuito Gratis y otras dos de pago, siendo la Pro+ la que ofrece mayor funcionalidad (Figura 3.14) Figura Logo y tipos de cuenta ofrecidos por EvalAndGo La Tabla resume las funciones ofrecidas por EvalAndgo. Diseño de encuesta Recogida de resultados Análisis de resultados Características EvalAndGo Encuestas, preguntas, cuestionarios y respuestas ilimitados, plantillas de encuestas, temas, personalización de logotipo y página de agradecimiento, imprimir encuesta, repositorio de preguntas, opciones multi-puntuación, múltiples tipos de pregunta, encuestas multipágina, duplicar encuestas. Envío de notificaciones, limitación por IP, fijar periodo de cumplimentación de encuesta, cronómetro, multidioma, importación de resultados en CSV. Exportación de respuestas, listado de participantes, informes personalizados, exportar resultados a Excel, cálculo de estadísticos (desviación estándar, promedio, correlación, etc). Tabla Principales características de la aplicación EvalAndGo Otros Sitios y Tabla Comparativa La cantidad de sitios web dedicados al diseño de encuestas, recogida de respuestas y análisis de resultados es erminable. Se han buscado los sitios web más destacados en los buscadores con el fin de analizar los servicios que ofrecen y obtener una tabla comparativa en la que se vean reflejadas las funciones más relevantes. Cada sitio tienes sus peculiaridades y puede ofrecer alguna característica diferente del resto, pero en general todos ofrecen unos servicios muy similares. 21 Se puede ampliar la información en: 25

46 son: Otros sitios destacados en los buscadores, que no han sido objeto de este estudio Tus Encuestas: Encuesta2: Mini Encuestas: Google Drive: entre todas las funciones que ofrece también está la de diseñar encuestas y recoger resultados. Una vez analizadas las características de cada uno de los sitios web estudiados, se han confeccionado cuatro tablas comparativas, en las que se muestran características relacionadas con las preguntas (Tabla 3.11), con el soporte de presentación de la encuesta y la apariencia (Tabla 3.12), con aspectos relativos a la encuesta en general (Tabla 3.13) y con el análisis de resultados (Tabla 3.14). PREGUNTAS Survey Monkey Survio Encuesta fácil Online Encuesta E- Encuesta Encuesta Tick Eval And Go Preguntas ilimitadas Respuestas ilimitadas Diversos tipos de preguntas Validación Obligatoriedad Secuencia lógica Tabla Características relacionadas con las preguntas APARIENCIA Plantillas Survey Monkey Survio Encuesta fácil Online Encuesta E- Encuesta Encuesta Tick Eval And Go Temas Logotipo Accesibilidad Optimizado móviles, tablets Pié de página Tabla Características relacionadas con el soporte de presentación de la encuesta y la apariencia 26

47 ENCUESTA Barra de progreso Survey Monkey Survio Encuesta fácil Online Encuesta E- Encuesta Encuesta Tick Eval And Go Página de agradecimiento al finalizar Imprimir en PDF Notificaciones: recordatorios, invitaciones, etc Exportar resultados Multidioma Pausar y reanudar Evitar duplicidades de respuestas Tiempo de participación limitado Contenido multimedia Tabla Características relativas a la encuesta en general RESULTADOS Fiabilidad Survey Monkey Survio Encuesta fácil Online Encuesta E- Encuesta Encuesta Tick Eval And Go Discriminación ítems Poder discriminativo ítems Análisis distractores Informes con gráficos Exportar resultados Estadísticos básicos Tabla Características relativas al análisis de resultados 27

48 Del estudio de los diferentes sitios web dedicados a ofrecer servicios de encuestas online se desprende que: Todos ofrecen diferentes tipos de cuentas o paquetes, en las que se va incrementando el número de características según aumentan el precio del producto contratado. Todas ofrecen algún tipo de cuenta gratuita con el fin de permitir a posibles clientes potenciales probar la herramienta, aunque con acceso restringido a determinadas características. En todos los sitios se dividen los servicios ofrecidos en tres grandes bloques: generación de encuestas, recogida de respuestas y análisis de resultados. Si cogemos como referencia el tipo de cuenta que ofrece mayor número de características para cada sitio web estudiado, se observa que una gran parte de éstas suelen ser comunes a casi todas las herramientas. En relación con la apariencia de la encuesta: Se da la posibilidad de crear encuestas a partir de plantillas predefinidas sobre diversas temáticas (política, marketing, investigación de mercados, educación, salud, RR.HH., etc). Por poner algunos ejemplos: encuestas de satisfacción de clientes, encuestas de opinión sobre un servicio específico, encuestas de test de productos, etc. Otra opción común es la personalización del logotipo de la encuesta. En relación con el diseño de las preguntas o ítems de la encuesta: Se permite un número ilimitado tanto de preguntas como de respuestas por encuesta diseñada. Se ofrece una gran variedad de tipos de preguntas (textuales, tipo test, casillas de verificación, selección desde listas, escalas numéricas, formatos de fecha, hora, etc). Obligatoriedad de las preguntas, para evitar que el encuestado deje preguntas en blanco o sin contestar. Se permite condicionar la contestación de determinadas preguntas dependiendo de la respuesta dada en otra/s pregunta/s anterior/es. En cuanto a los aspectos relativos a la encuesta, en su conjunto, podemos comentar: Muchas de las herramientas ofrecen la opción de añadir una página de agradecimiento al finalizar la encuesta. En otros casos se permite especificar 28

49 una URL a la que se debe redirigir una vez que el encuestado ha llegado al final del estudio. Otra de las características más importantes es el envío de notificaciones y recordatorios a encuestados vía correo electrónico. De esta forma se puede tener contacto directo con las personas a las que va dirigida el estudio y avisarles sobre cualquier asunto relacionado con la encuesta. Las encuestas también pueden estar limitadas en el tiempo, para abrir el estudio en un periodo determinado y evitar que se almacenen resultados fuera de los plazos establecidos. Los datos no resultarían de gran utilidad si no se pudiera extraer de ellos la valiosa información que contienen, por eso la mayoría de herramientas estudiadas permiten la generación de informes personalizados con gráficos explicativos de los principales estadísticos: promedios, desviaciones típicas, etc. Tanto la encuesta diseñada como los informes que se han generado a partir de las respuestas de los encuestados pueden ser impresos en PDF. Por otra parte, para facilitar el tratamiento de datos, se da la posibilidad de exportar en diversos formatos los resultados obtenidos (Excel, CSV, XML, etc). La última característica común es la de permitir encuestas multidioma. Por otra parte, también hay determinadas características que sólo son ofrecidas por una minoría de aplicaciones: En relación con la apariencia: Tan sólo SurveyMonkey habla de accesibilidad en sus encuestas. Pese a tratarse de una característica que genera un gran valor añadido, no se ofrece o al menos no se menciona en el resto de sitios web estudiados. Del mismo modo, sólo una minoría ofrece la optimización de erfaces para móviles y tablets, tan utilizados en nuestro día a día. Opuestamente a la personalización del logotipo de la encuesta diseñada, que es ofrecido por casi todas las herramientas, la personalización del pie de página es algo casi exclusivo de Survio. Otra característica minoritariamente ofrecida es la opción de temas predefinidos: entendiendo tema como un conjunto de colores, tipología y tamaño de letra, imágenes, etc, relacionadas entre sí. Con respecto al diseño de las preguntas: Tan sólo SurveyMonkey ofrece la validación de respuestas entre sus servicios. Consiste en comprobar que los datos insertados, por ejemplo en un campo de tipo fecha, corresponden a un día, mes y año válidos. 29

50 Por último, en relación a la encuesta: La barra de progreso, entendida como indicador del porcentaje de encuesta completada, debería estar disponible en cualquier herramienta, pues se trata de unos de los métodos más simples y eficaces de mantener informado al usuario en todo momento de en qué punto de la encuesta se encuentra. Una barra de progreso bien diseñada puede ser determinante a la hora de que una encuesta se complete o se deje sin finalizar. Sin embargo, no todos los sitios web estudiados ofrecen esa característica. Un control tan útil como lo es el control de duplicidades de respuestas también debería ser una característica básica en todas las herramientas. Nos puede ayudar a que los resultados obtenidos sean más o menos fiables. La posibilidad de insertar contenido multimedia en la encuesta, como pueden ser vídeos, audios, imágenes, documentos, etc., puede ayudar a que el estudio resulte más atractivo para los encuestados. Del mismo modo que las características anteriormente mencionadas, ésta tampoco es ofrecida por todos los sitios web estudiados. Una vez detalladas las conclusiones del estudio, se procede a explicar el valor añadido que ofrece la aplicación desarrollada frente a las estudiadas anteriormente Valor Añadido de la Aplicación Desarrollada La aplicación creada incorpora buena parte de las funcionalidades que incluyen las existentes en el mercado (tal y como se indica en la sección 5.1.1). Entre las características que la diferencian del resto de aplicaciones, destacamos la posibilidad de calcular, además de los estadísticos descriptivos habituales, cálculos de gran erés y utilidad, como son la fiabilidad de los cuestionarios (Alpha de Cronbach) y, en el caso de pruebas cognitivas, análisis de la dificultad de los ítems, el poder discriminativo de éstos y un análisis de los distractores. Tanto la herramienta de diseño y generación de los cuestionarios como los propios cuestionarios web generados, prestan especial atención al cumplimiento de criterios de usabilidad y accesibilidad, incluyendo checklist de comprobación de cumplimiento de los mismos. Tras concluir el capítulo de antecedentes y estado de la cuestión se procede a detallar las metodologías y medios hardware y software empleados en la realización del TFG. 30

51 4. MÉTODO DE TRABAJO En este capítulo se describe la metodología de trabajo seguida a lo largo de todo el proceso de desarrollo de la aplicación. Se incluye, además, un apartado en el que se explica el marco tecnológico utilizado para implementar y dar forma al sitio web creado. Junto a la metodología MPIu+a, también se hará uso de la Metodología Incremental de Desarrollo del Software, puesto que realmente la implementación se ha realizado en varios incrementos, cada uno de ellos con su correspondientes fases de análisis, diseño, implementación y pruebas Metodología MPIu+a En el año 2004, el profesor de la Universidad de Lleida Toni Granollers i Saltiveri 22, presentó su tesis doctoral 23 titulada MPIu+a. Una metodología que egra la Ingeniería del Software, la Interacción Persona-Ordenador y la Accesibilidad en el contexto de equipos de desarrollo multidisciplinares y pronto se convirtió en un auténtico referente en el Diseño Centrado en el Usuario y Usabilidad (DCU). El Grupo de Investigación de la Disciplina de la Interacción Persona-Ordenador (GRIHO) fundado por Jesús Lóres y del que es miembro Toni Granollers, desarrollan el modelo mostrado en la Figura 4.1 (c). Figura 4.1. (a) Toni Granollers y Saltiveri; (b) Logotipo del grupo Griho; (c) Modelo de Proceso de la Ingeniería de la Usabilidad y la Accesibilidad (MPIu+a) Toni Granollers i Saltiveri: 23 Tesis doctoral disponible en: 24 Más información sobre la metodología MPUI+a: 31

52 La metodología MPIu+a se fundamenta en la disciplina de la Interacción Persona- Ordenador (IPO), y trata de unificar el modelo de desarrollo de sistemas software de la Ingeniería del Software con los principios fundamentales de la Ingeniería de la Usabilidad y Accesibilidad. Ofrece una metodología organizada y formalizada que orienta y guía a los desarrolladores durante la implementación de un sistema eractivo, incluyendo aspectos de usabilidad y accesibilidad. Este modelo ofrece tres pilares básicos, Figura 4.2 (a). El primero, que agrupa las fases del ciclo de vida de la Ingeniería del Software iterativo y evolutivo (análisis de requisitos, diseño, implementación y lanzamiento), y el segundo y tercero (prototipado y evaluación) que son propios de la Ingeniería de la Usabilidad y de la IPO, y que se deben seguir desde el inicio hasta el fin del proceso de desarrollo. El prototipado ofrece técnicas (bocetos, storyboards, maquetas, escenarios, etc) que permiten la posterior evaluación mediante diferente métodos (inspección, evaluación heurística, recorrido cognitivo, etc). Figura 4.2. (a) División del modelo en tres pilares básicos; (b) Diseño centrado en el usuario (DCU) Las principales características de esta metodología se pueden resumir en: 1. Importancia del usuario: Figura 4.2 (b), es el único con potestad para calificar algo como amigable user friendly, pues es quien realmente está en contacto con la aplicación. Por lo tanto, debe situarse en el centro del desarrollo y tenerse en cuenta desde el inicio. También hay que tener en cuenta a todos los implicados o stakeholders en el proceso de desarrollo. 2. Naturaleza cíclica e iterativa del diseño: en todas las fases se facilita la ervención del usuario, desde el análisis de requisitos, hasta el prototipado o la evaluación, tantas veces como sea necesario. 32

53 3. Prototipado: se crean prototipos desde las primeras fases de desarrollo y se mantienen hasta el final, aumentando poco a poco la fidelidad de los mismos. 4. Flexibilidad y sencillez: no se trata de un modelo lineal ni restrictivo, pues se puede aplicar según la necesidad de cada desarrollo. Es un modelo escueto, con pocos nodos y ramificaciones y sin caminos condicionales que dificulten su comprensión. Figura 4.3. (a) Proceso cíclico e iterativo; (b) Modelo flexible Esta metodología se compone de un total de seis fases, que se detallan a continuación: 1. Análisis de requisitos: se recogen todos los requisitos funcionales que debe soportar la aplicación mediante técnicas apropiadas y que permitan conocer las necesidades del usuario, como pueden ser: Análisis etnográfico: mediante la observación del trabajo de los usuarios. Análisis de implicados (stakeholders). Clasificar a los usuarios en perfiles y roles. Análisis contextual de tareas. Objetos físicos y conceptuales. Plataforma: posibilidades y restricciones. Objetivos funcionales, de usabilidad y de accesibilidad. 2. Diseño: se estudian las eracciones usuario-sistema, se seleccionan las metáforas y se prepara el diseño gráfico enfocado a estándares, teniendo en cuenta: Los factores humanos: percepción y comprensión, atención selectiva, motivación, etc. Modelo mental del usuario: no basta diseñar para la funcionalidad. 33

54 3. Implementación: se hace uso de los prototipos diseñados y aceptados por el usuario final para el desarrollo de la aplicación, de manera incremental, aumentando la fidelidad de estos en cada etapa. Es recomendable realizar una evaluación heurística 25 para comprobar la consistencia global del producto. 4. Lanzamiento: se pone la aplicación a disposición del usuario final. Podremos comprobar el éxito del trabajo realizado si se cumple: Que el usuario se siente cómodo con el sistema (usabilidad y accesibilidad). Que los responsables obtienen los resultados esperados (funcionalidad). 5. Prototipado: se utilizan prototipos con diferente grado de detalle según se avance en el proyecto, con el fin de hacer participar al usuario en el desarrollo. Pueden ser de alta o baja fidelidad y horizontales (todas las características pero sin funcionalidad) o verticales (pocas características pero totalmente implementadas). Existen varias técnicas de prototipado: bocetos, storyboard, prototipos en papel, maquetas, escenarios, etc. La elección de la técnica de prototipado depende del qué se analiza y cuál es su coste en tiempo y dinero. 6. Evaluación: el usuario final evalúa si la aplicación se adapta a sus necesidades y a los requisitos inicialmente planteados. En caso de ser necesaria alguna modificación se volverá a los pasos anteriormente descritos. Existen varias técnicas de evaluación de los aspectos eractivos de una aplicación software: recorrido cognitivo, evaluación heurística, inspección de estándares, observación de campo, entrevistas, cuestionarios, Thinking aloud, Focus Group, etc. La elección del método de evaluación depende de la etapa del ciclo de vida y del coste en tiempo Metodología Incremental de Desarrollo del Software Tal y como se indica en la Figura 4.2 (a), la metodología MPIu+a se egra perfectamente con metodologías de Ingeniería del Software, incorporando técnicas propias de la IPO (bocetos, modelado de tareas, evaluación heurística, etc.). En cuanto a la metodología de desarrollo software seguida en el desarrollo de este TFG se ha seleccionado el Modelo Incremental de Desarrollo de Software. Dicho modelo surge en 1980 a propuesta de Harlan Mills como una metodología de entregas incrementales de diversas funcionalidades de la aplicación, sin la necesidad de tener que esperar a que todo el software se encuentre implementado. En este modelo se segmenta la aplicación en diferentes partes, para finalmente unirlas en una única solución final. Está pensado para equipos de trabajo de pocos 25 Analizar la conformidad de la erfaz con unos principios reconocidos de usabilidad (la "heurística") mediante la inspección de varios evaluadores expertos e independientes. 34

55 miembros y suele reducir el tiempo empleado en la captura de requisitos, ya que no es necesario definir todo el sistema antes de empezar a diseñar e implementar. Cada uno de los incrementos consta de cuatro etapas: análisis, diseño, implementación y pruebas. Una vez terminado un incremento, el programador puede entregarlo al cliente para que empiece a trabajar con él y aporte feedback sobre aquellas características o funciones que no se ajusten a sus necesidades. De esta forma, sus comentarios pueden ser tenidos en cuenta en un próximo incremento. En la siguiente imagen (Figura 4.4) se muestra un ejemplo de desarrollo de software con cuatro incrementos. A medida que pasa el tiempo, aumenta la funcionalidad implementada en cada incremento. Figura 4.4 Esquema de la Metodología Incremental de Desarrollo del Software 26 Este modelo presenta una serie de ventajas: Reduce el tiempo inicial de desarrollo, al segmentar el proyecto en incrementos. Se consigue que el usuario final se involucre más, al hacer entregas frecuentes. Este principio se alinea con los principios del diseño centrado en el usuario (DCU) defendido por la IPO. Los cambios son más sencillos, al acotar el tamaño de cada incremento. Las pruebas son más rápidas, al probar sólo ciertas partes de la aplicación. También presenta una serie de desventajas: Es difícil tener una visión global del costo del desarrollo en tiempo. Requiere una planificación compleja. Se necesitan gestores experimentados. Tras comentar las metodologías empleadas, se procede a listar los medios hardware y software utilizados durante las diferentes fases de realización de la aplicación. 26 Más información sobre la Metodología Incremental de Desarrollo del Software: 35

56 4.3. Marco Tecnológico de Trabajo En esta sección se enumeran los medios hardware y software empleados en el desarrollo de este TFG Medios Hardware En el desarrollo del proyecto se ha utiliza un portátil Toshiba Tecra A10-14Y con Procesador Intel Core 2 Duo, de 2,87 GB de RAM y sistema operativo Windows XP Profesional 2002 con Service Pack 3 (Figura 4.5). Figura 4.5. Propiedades del equipo empleado en el desarrollo de la aplicación. A continuación se procede a detallar los medios software empleados en el desarrollo del TFG Medios Software El sitio web creado se ha implementado usando el lenguaje de programación ASP.NET C# en Framework 4.0, con una base de datos SQL Server 2008 como repositorio de datos y un servidor IIS para ejecutar la aplicación. Se utiliza HTML y CSS para crear los formularios y aplicarles estilo, XML para crear el archivo de Site Map, además de JQuery, JavaScript y Ajax para aumentar la funcionalidad y dotar de mayor dinamismo a las páginas creadas. 36

57 A continuación se listan los medios software empleados en el desarrollo del proyecto (Figura 4.6): Figura 4.6. Iconos de algunos medios software utilizados en el desarrollo de la aplicación Microsoft Visual Studio 2010 Professional, como entorno de programación para sistemas operativos Windows. Se hace uso de una extensión de este IDE llamada NuGet, que sirve para buscar e instalar librerías, ya sean propias o de terceros. Se puede encontrar dentro del menú herramientas (Figura 4.7). NuGet 27 es un gestor de paquetes de la plataforma de desarrollo de Microsoft.NET. Las herramientas de cliente NuGet proporcionan la capacidad de producir y consumir paquetes. La Galería NuGet sirve de repositorio central de paquetes utilizado tanto por autores como consumidores. Figura 4.7. Ubicación del administrador de paquetes NuGet en Microsoft Visual Studio 2010 Professional. Microsoft Office 2007, tanto para la elaboración de esta memoria con Microsoft Word como para la elaboración de las plantillas de cargas masivas con Microsoft Excel. SQL Server 2008 R2 Management Studio, como repositorio de datos y gestor de bases de datos. Se hace uso de la herramienta de diseño de diagramas para la creación del modelo de datos (Figura 4.8). Figura 4.8. Ubicación del diagrama de base de datos en SQL Server Más información sobre NuGet: 37

58 Internet Information Server (IIS), como servidor en el que se ejecuta la aplicación. Durante todo el proceso de desarrollo y más concretamente durante las fases de pruebas se ha utilizado localhost desde los diferentes navegadores web, en un servidor IIS6 (Figura 4.9). Figura 4.9. Interfaz de IIS en Windows XP Balsamiq Mockups 28, como herramienta de prototipado, con la que se han desarrollado los diferentes bocetos de cada una de las secciones que componen la aplicación. En el sitio web de Balsamiq se puede descargar una versión gratuita de prueba durante unas semanas. Pasado el periodo, se puede seguir utilizando la herramienta, pero quedan deshabilitadas algunas opciones como guardar en formato propio de Balsamiq (Figura 4.10). Figura Ejemplo de boceto con Balsamiq Mockups CTTE 29 (Concur Task Trees Environment), como herramienta de creación del modelo de tareas. Creada por Fabio Paternò en 1999, esta notación se caracteriza por permitir diseñar un modelo del sistema eractivo centrado en tareas (de usuario, de aplicación, de eracción y abstractas), tener una estructura jerárquica con varios niveles de abstracción, saxis gráfica y validación formal con lenguaje LOTOS. Presenta operadores de activación, desactivación, concurrencia, errupción, elección, opcionalidad, etc. (Figura 4.11). 28 Más información sobre Balsamiq Mokups: 29 Más información sobre CTTE: 38

59 Figura Operadores y tipos de tareas en CTTE Macromedia Fireworks 8, como herramienta de diseño y retoque gráfico, tanto para diseñar algunos iconos, como para retocar imágenes o buscar patrones de colores. Adobe Photoshop CS, como herramienta de diseño para aplicar los filtros proporcionados por la herramienta de chequeo cromático Vischeck, con el fin de obtener simulaciones de diversas deficiencias visuales. Navegadores: se han utilizado Internet Explorer, Mozilla Firefox y Google Chrome y algunas de sus extensiones como el inspector de código (Ej.: FireBug de Mozilla en tecla F12, Figura 4.12 (a)) para detectar posibles deficiencias en el código HTML generado o buscar errores en el código CSS de las hojas de estilos. Se ha hecho uso de una extensión de Chrome llamada Awesome Screenshot que permite generar pantallazos completos de una página web extensa (Figura 4.12 (b)). También se ha utilizado la vista 3D de Firefox que permite mostrar la distribución de capas desde cualquier perspectiva (Figura 4.12 (c)). Figura (a) Extensión Firebug para Firefox; (b) Extensión Awesome Screenshot para Chrome; (c) Vista de la web de Google en 3D con Firefox 39

60 Wave 30 (Web Accesibility Evaluation Tool): como herramienta online para realizar los test de accesibilidad. Surgió en 2001 como un servicio gratuito ofrecido por la comunidad WebAIM y desde entonces es una de las webs de referencia para el chequeo de la accesibilidad (Figura 4.13). Figura Logotipo de la herramienta WAVE de accesibilidad web Vischeck 31 : como herramienta online para realizar test cromáticos. Se trata de otra aplicación gratuita en línea que permite realizar las pruebas tanto online como en nuestro equipo, previa descarga del software que ofrecen en su web. Figura Logotipo de la herramienta Vischeck de chequeo cromático Colour Contrast Analyzer: como herramienta para realizar test cromáticos entre los colores de primer y segundo plano. Indica la diferencia de color y de brillo e indica si se encuentran dentro de los umbrales establecidos. (Figura 4.15). Figura Interfaz de la herramienta Colour Contrast Analyzer de chequeo cromático 30 Más información sobre WAVE: 31 Más información sobre Vischeck: 40

61 Caccoo 32 : como herramienta online de modelado de diagramas UML. Ofrece un tipo de cuenta gratuita con algunas restricciones. Permite modelar un gran número de diagramas, como los de casos de uso, clases y actividades, entre otros (Figura 4.16). Figura Logotipo de la herramienta de modelado de diagramas UML Aparte de los medios software ya explicados, también se ha hecho uso de una serie de librerías y componentes, que se pasan a detallar a continuación Librerías y Componentes Se han utilizado varias librerías y componentes tanto propios de.net como externos, que se pasan a detallar a continuación. AjaxControlToolkit 33 : utilizado para extender la funcionalidad de los componentes de.net (Figura 4.17). ASP.NET AJAX Control Toolkit nace como un proyecto conjunto entre la comunidad de programadores y Microsoft. Está desarrollado en base a ASP.NET AJAX y contiene una serie de controles Web y extensores con los que utilizar las avanzadas características de ASP.NET. Figura Logotipo de AJAX para ASP.net De entre sus múltiples controles Web y extensores, se han hecho uso de los siguientes (Figura 4.18): ModalPopupExtender: extensor que, asociado a cualquier elemento que genere PostBack 34, muestra una ventana modal evitando que el usuario eractúe con el resto de elementos de la página. PasswordStrength: extensor que, asociado a un TextBox, muestra la fortaleza de la contraseña en cuanto a su seguridad. NumericUpDownExtender: extensor que, asociado a un TextBox y unos ImageButton, simula el comportamiento de un Spinner. Calendar: extensor que, asociado a un TextBox, muestra un calendario. 32 Más información en la siguiente URL: 33 Más información en las siguientes URL: https://ajaxcontroltoolkit.codeplex.com y 34 Postback: reenvío de los datos del formulario de vuelta al servidor mediante HTTP POST 41

62 MaskedEditExtender: extensor que, asociado a un TextBox, define una máscara para los datos insertados. MaskedEditValidator: extensor que, asociado a un TextBox, valida los datos de la máscara definida en el MaskedEditExtender. Figura 4.18 (a) Ventana modal (ModalPopupExtender) con un calendario (CalendarExtender, MaskedEditExtender y MaskedEditValidator); (b) NumericUpDownExtender simulando un Spinner; (c) PasswordStrength, con recomendaciones sobre fondo naranja Analytics de Google: servicio ofrecido por Google para registrar todo el tráfico de nuestro sitio web, así como generar informes y estadísticas. Basta con insertar un código facilitado por la propia herramienta en las páginas de nuestra aplicación y todos los accesos, descargar, visitas, etc, quedan registrados. Se pueden obtener estadísticas por una gran variedad de criterios, desde la situación geográfica, pasando por el navegador utilizado, las resoluciones de pantalla, el proveedor de datos y un largo etcétera (Figura 4.19). Figura Logotipo de Google Analytics 42

63 Microsoft Chart Control: control de datos propio de.net que nos permite generar gráficos simples, uitivos y visualmente atractivos para el análisis estadístico. Son muy personalizables y presentan una gran variedad de formatos. Desde su página web 35 se puede acceder a un proyecto web con todos los ejemplos, así como el código necesario para implementar cada uno de ellos (Figura 4.20) Figura Ejemplo de gráficos generados con Microsoft Chart Control CKEditor 36 : herramienta utilizada como editor de texto HTML online. CKEditor es un editor de texto HTML listo-para-usar, diseñado para simplificar la creación de contenidos web. Es un editor WYSIWYG (What You See Is What You Get) que ofrece las características de un procesador de textos incrustado en las páginas web (Figura 4.21). Figura Logo e instancia de CKEditor con estilos adaptados a la aplicación de Encuestas Gmail: se utilizan los servicios SMTP ofrecidos por Google para el envío de invitaciones y recordatorios por correo electrónico a encuestados. Al ser un servicio gratuito, tiene algunas limitaciones, en concreto 100 destinatarios a la vez y un máximo de 500 mensajes por día (Figura 4.22). Figura Logotipo de Gmail de Google ITEXT 37 : se trata de una librería de código abierto empleada en la creación y manipulación de documentos PDF mediante programación, bien en Java o en.net., 35 Más información en la siguiente URL: https://code.msdn.microsoft.com/mschart 36 Más información en la siguiente URL: 37 Más información en la siguiente URL: 43

64 directamente desde las aplicaciones software, con una mínima ervención humana (Figura 4.23). Figura Logotipo de ITEXT EPPLUS 38 : es una librería de código abierto para.net que permite leer y escribir documentos Excel 2007/2010 haciendo uso del formato Open Office Xml (xlsx). JSSOR Slider 39 : conjunto de librerías JQuery que permiten la implementación de carruseles de una forma rápida y sencilla con efectos visuales muy atractivos y completamente eractivos (Figura 4.24). Figura Ejemplo de carrusel de la aplicación de encuestas, implementado con JSSOR Slider Recaptcha: se trata de una herramienta gratuita ofrecida por Google que protege el sitio web contra el spam y otros posibles ataques. Utiliza un avanzado motor de análisis de riesgos, letras cifradas e imágenes para realizar las validaciones y distinguir entre las acciones que realiza un usuario real o los ataques indeseados lanzados normalmente por robots (Figura 4.25). Figura Ejemplo de captcha empleado en la aplicación de encuestas, implementado a partir de Recaptcha de Google Una vez enumerados los medios hardware y software empleados en el desarrollo de la aplicación web, se pasa a detallar los resultados obtenidos al aplicar las metodologías mencionadas anteriormente. 38 Más información en la siguiente URL: 39 Más información en la siguiente URL: 44

65 5. RESULTADOS En este apartado se detalla en qué ha consistido cada fase de las metodologías MPIu+a y Proceso Unificado de Desarrollo del Software, empleadas durante el desarrollo de la aplicación, desde el análisis y recogida de requisitos hasta la fase final de pruebas y redacción de documentación. Aunque se explica de forma secuencial cada fase, la naturaleza flexible de esta metodología ha permitido realizar saltos de unas a otras en determinados momentos del proceso de desarrollo. No obstante, estas circunstancias también quedan explicadas en los siguientes subapartados Especificación y Análisis de Requisitos En esta primera fase se realizó el estudio de varias herramientas ya existentes en el mercado, con el fin esbozar una idea inicial de qué características y necesidades debía satisfacer la aplicación a desarrollar Especificación de Requisitos Dos de los requisitos iniciales de los que se parten son los referentes a la accesibilidad y usabilidad. En el diseño de la aplicación se debe poner especial cuidado a la hora de crear los distos formularios, con el objetivo de cumplir el mayor número posible de puntos incluidos en las guías de accesibilidad WCAG (Web Content Accessibility Guidelines). En cuanto a la usabilidad, se debe tratar de dotar a la aplicación desarrollada de la mayor funcionalidad posible, teniendo siempre en cuenta todas las recomendaciones de usabilidad web a la hora de diseñar las páginas, el sitio y los contenidos. A raíz del estudio realizado se han recogido las características más comunes entre las distas herramientas y se ha decidido implementar los siguientes puntos: o Creación de preguntas de diferentes tipos. o Validación de respuestas y opción de obligatoriedad. o Inserción de plantillas prediseñadas. o Personalización de logotipo, pie y página final de agradecimiento. o Barra de progreso y opción de pausar y reanudar encuesta. o Envío y gestión de notificaciones: recordatorios e invitaciones. o Posibilidad de rellenar una encuesta dentro de un periodo de tiempo. o Añadir contenido multimedia asociado a las preguntas. o Exportar resultados en diversos formatos. o Generación de informes con gráficos. o Controlar la duplicidad de respuestas. 45

66 Todas estas características son relativas al diseño de encuestas y el tratamiento de los datos de las respuestas recogidas. La aplicación se estructurará en dos grandes bloques. Por un lado tendremos la parte de administración y por otro la parte pública. La parte de administración estará destinada a que los gestores diseñen sus encuestas y lancen las invitaciones para, posteriormente, generar los informes a partir de las respuestas recogidas. La parte pública de la aplicación servirá para que los encuestados puedan responder las preguntas de aquellas encuestas a las que hayan sido invitados por alguno de los gestores. En lo que respecta al bloque de administración, se definen los siguientes conceptos: a) Gestor: se entiende como un usuario con permisos para diseñar encuestas, enviar invitaciones y generar informes. b) Convocatoria: se entiende como un periodo de tiempo en el que se agrupan una o varias encuestas, las cuales pueden estar habilitadas durante todo el periodo o durante un subperiodo dentro de éste. c) Encuesta: se entiende como un agregado de uno o varios módulos que pueden incluir contenido de diversa naturaleza. d) Encuestado: se entiende como aquella persona invitada a completar una encuesta. e) Módulo: se entiende como un agregado de contenidos, que puede ser textual o puede estar formado por un conjunto de una o varias preguntas. f) Pregunta: se emplea para hacer referencia a la unidad básica de una encuesta. Formada por un texto (enunciado) y un componente que permitirá al encuestado responder a la cuestión formulada. g) Notificación: se entiende como una comunicación iniciada por el gestor y con destino el encuestado, que se realizará vía correo electrónico. h) Plantilla: se entiende como un modelo, bien de encuesta, bien de notificación, bien de importación de resultados, etc., que el gestor podrá utilizar para diseñar sus encuestas, formatear sus notificaciones, importar resultados a través de un archivo Excel, etc. i) Informe: se entiende como un conjunto de información extraída de los datos obtenidos a partir de las respuestas dadas por los encuestados. j) Gráfico: se entiende como una representación gráfica y descriptiva de un subconjunto de datos de las respuestas dadas a una encuesta. Cada uno de estos conceptos, incluye una serie de características específicas, que se definen a continuación. 46

67 Gestor: Convocatoria: Encuesta: Tendrá asociados un nombre, apellido1, apellido2 y , así como un nombre de usuario y contraseña. Sobre un gestor, se podrán realizar las siguientes operaciones: o Registro de gestor. o Recuperación de credenciales de un gestor existente. Se compondrá de una descripción y un periodo. El periodo estará formado por una fecha de inicio y una fecha de fin, con el siguiente formato: DD/MM/YYYY HH:MM. Sobre una convocatoria se podrán realizar las siguientes operaciones: o Creación de nueva convocatoria. o Edición de una convocatoria existente. o Eliminación de convocatoria existente: no se podrá eliminar una encuesta si tiene alguna convocatoria asociada. Siempre irá asociada a una convocatoria. Se compondrá de una descripción, un tipo (cuestionario, opinión o test) y podrá llevar asociado un periodo en el que estará habilitada, para que los encuestados puedan cumplimentarla. Este periodo estará comprendido entre las fechas delimitadas por la convocatoria y el formato será el mismo que el definido por la convocatoria. A continuación se define cada uno de los posibles tipos de encuestas o Cuestionario: se trata del tipo de encuesta más genérico posible. Puede contener preguntas de todos los tipos y en cualquier orden, sin ninguna restricción. o Opinión: este tipo de encuesta está ideada para la obtención de estadísticas y gráficos descriptivos agrupados por módulos. Sólo podrá contener preguntas de tipo escala de Likert. Además, la escala de Likert empleada debe ser la misma en todas las preguntas. o Test: también denominadas pruebas cognitivas, están ideadas para la obtención de determinados indicadores psicométricos obtenidos en los informes (dificultad de los ítems, análisis de distractores, etc.). Sólo podrán contener preguntas de tipo listado de elementos. Todas las preguntas deben tener el mismo número de opciones y el creador del test debe indicar cuál es la opción correcta. Una encuesta podrá contener los siguientes elementos: o Logotipo: imagen en formato jpg, jpeg, gif o png de cómo máximo 1 MB, que se ubicará en la cabecera de la encuesta. 47

68 Encuestado: o Página inicial: texto previo a los módulos que podrá contener instrucciones para rellenar la encuesta, recomendaciones para el encuestado, etc. o Página final: texto posterior a los módulos ideado como un mensaje de agradecimiento. o Pie de página: texto que aparecerá en la parte inferior de la pantalla durante la duración de la encuesta. o Módulos: podrá haber uno o varios módulos. Éstos podrán ser meros contenedores textuales o agrupadores de una o varias preguntas. El gestor podrá definir el número de módulos que desea que aparezcan en cada pantalla de la encuesta. Una encuesta podrá definir el tiempo máximo en que se debe completar en HH:MM:SS. Esta característica está pensada para las encuestas de tipo test, pero es aplicable a cualquiera de los tipos. El gestor podrá indicar, para las encuestas de tipo test, si desea que los resultados (entendidos como notas o calificaciones) estén disponibles para los encuestados. Una encuesta de tipo test debe definir obligatoriamente el número de posibles respuestas que se van a mostrar en cada una de sus preguntas. Sobre una encuesta se podrán realizar las siguientes operaciones: o Creación de nueva encuesta: se podrán crear encuestas desde cero o utilizar una de las plantillas existentes. o Edición de encuesta existente: cuando una encuesta tenga respuestas almacenadas, sólo se permitirá modificar la descripción, el periodo, la opción de mostrar las calificaciones a los encuestados, el logotipo, el pie de página y las páginas de inicio y fin. El resto de características no serán modificables. o Eliminación de encuesta existente: sólo se podrá eliminar una encuesta cuando no se haya enviado ninguna invitación. La eliminación de una encuesta implica la eliminación del logotipo (en caso de haberse asociado). Puede estar asociado a una o varias encuestas. Un encuestado se identificará a partir de una dirección de correo electrónico que será única. Es decir, no puede haber dos encuestados dados de alta en la aplicación con la misma dirección de correo electrónico. De un encuestado debe quedar constancia de: o Si se le ha enviado la invitación para completar la encuesta. o Los diferentes accesos que realiza para completar cada una de las encuestas. o El grado de avance en cada encuesta. o El tiempo que ha tardado en completar cada encuesta. Sobre los encuestados se podrán realizar las siguientes operaciones: o Asociar un encuestado a una encuesta. o Asociar múltiples encuestados a una encuesta, separados por punto y coma (;). 48

69 o Asociar múltiples encuestados a una encuesta, utilizando para ello una plantilla de archivo Excel. o Enviar invitación para completar una encuesta a un encuestado. o Eliminar invitación para completar una encuesta a un encuestado: sólo se podrá eliminar en el caso de que el encuestado no haya respondido a ninguna pregunta de la encuesta. o Consultar las encuestas a las que ha sido invitado, así como los accesos a cada una, el grado de avance y el tiempo invertido en completarlas. Módulo: Pregunta: Siempre estará asociado a una encuesta. Cada módulo incluirá una descripción, será de un tipo (textual o conjunto de preguntas) y tendrá un orden dentro la encuesta. Los módulos de tipo conjunto de preguntas contendrán una o varias preguntas y definirán si cada una de ellas es obligatoria, si incorporan la opción NS/NS (no sabe, no contesta) y qué orden tendrán dentro del propio módulo. Sobre un módulo se podrán realizar las siguientes operaciones: o Creación de nuevo módulo. o Edición de módulo existente: no se podrá modificar el tipo de un módulo una vez creado. o Eliminación de módulo existente: sólo se podrán eliminar módulos que pertenezcan a encuestas que no tienen invitaciones enviadas. Al eliminar un módulo se eliminará la asociación con todas las posibles preguntas que contuviera, en caso de ser de tipo conjunto de preguntas. Puede estar asociada a una o varias encuetas. Estará compuesta por una descripción, un tipo (campo numérico, sí/no, campo textual, lista de elementos y escala de Likert), y una categoría (que estará definida por el gestor). Además de estas características comunes, cada tipo de pregunta incluye otros elementos: o Campo numérico: se podrá especificar un número de decimales no superior a cinco. o Sí/no: este tipo de pregunta no lleva ningún otro componente asociado. o Campo textual: podrá ser de tipo delimitado o extenso. Se deberá definir el número máximo de caracteres o de líneas a insertar, respectivamente. o Lista de elementos: se debe definir el tipo de encuesta al que va a estar asociado (cuestionario, opinión o test) debido a que las encuestas de tipo test necesitan especificar el número de opciones. Por lo tanto, si la lista de elementos es de tipo test, obligatoriamente habrá que indicar de cuántas opciones se va a componen la lista. 49

70 Las preguntas de este tipo pueden utilizar una lista de elementos ya existente o definir una nueva. Las listas se componen de nombre y conjunto de elementos. Cada elemento será un par descriptor/valor, salvo para las listas de tipo test, cuyos elementos estarán compuestos por un descriptor y un check indicando si el elemento es la respuesta correcta a la pregunta. o Escala de Likert: pueden utilizar una escala de Likert ya existente o definir una nueva. Estas listas se componen de nombre, valor mínimo, valor máximo e ervalo. Estos tres valores pueden ser decimales (con un único decimal). Para el valor máximo y mínimo se deberá especificar un descriptor. Las preguntas podrán tener asociados recursos multimedia de varios tipos: o Enlace: dirección URL a un recurso de ernet. o Audio: se permitirán archivos con extensión mp3 o wav. o Vídeo: se permitirán archivos con extensión wmv o wma. o Imagen: se permitirán archivos con extensiones jpg, jpeg, png o gif. o Documento: se permitirán archivos con extensión pdf. Los recursos multimedia estarán compuestos por una descripción, un tipo, un archivo y un orden dentro de la pregunta. A la hora de insertar un nuevo recurso, el gestor tendrá disponible un checklist de recomendaciones sobre cómo insertar descripciones de recursos útiles y válidas. Sobre un recurso multimedia se pueden realizar las siguientes operaciones: o Creación de nuevo recurso: siempre asociado a una pregunta. o Edición de un recurso existente: no se podrá modificar el tipo ni el archivo subido. o Eliminación de recurso existente: no hay ninguna restricción. La eliminación de un recurso implicará la eliminación del archivo asociado (salvo para el tipo enlace ). Sobre una pregunta se podrán realizar las siguientes operaciones: o Creación de nueva pregunta: al crearla, quedará almacenada en un repositorio de preguntas al que tendrá acceso el gestor que la ha creado, con el fin de poder reutilizarla en varias encuestas. En la opción de creación habrá disponible un checklist con recomendaciones sobre la creación de preguntas, que podrá ser empleada por el gestor para asegurar la calidad de las mismas. o Edición de pregunta existente: no se podrán modificar aquellas preguntas que estén asociadas a encuestas que ya tienen respuestas. o Eliminación de pregunta existente: no se podrán eliminar aquellas preguntas que estén asociadas a alguna encuesta. Para poder eliminarla, previamente habrá que desasociar la pregunta de la encuesta. Al eliminar una pregunta también se eliminarán todos los posibles recursos multimedia que tuviera asociados. 50

71 Notificación: Informe: Siempre estará asociada a un tipo de plantilla ya existente. Se compondrá de un asunto, un contenido, un emisor y un receptor. El contenido puede tener asociados una serie de campos codificados que se emplearán para reemplazar determinados datos en los envíos, como pueden ser el nombre y apellidos, el periodo de apertura de una encuesta, en enlace de invitación a la encuesta, etc. Una notificación será lanzará por un gestor en una fecha y hora determinada. Cada envío quedará registrado para su posterior consulta en un histórico, indicando si la comunicación ha sido correcta o no. Algunas notificaciones, como la de recuperación de credenciales o alta de gestor, se enviarán de forma automática en los respectivos procesos. Aparte de los datos recogidos en las encuestas se podrá importar datos de encuestas externas tipo test a partir de una plantilla en Excel prediseñada. Pueden ser de diversa naturaleza dependiendo del tipo de encuesta del que se realice el informe: o Informes de encuestas tipo cuestionario: mostrará cada uno de los módulos de que consta la encuesta. Si el módulo es de tipo textual, se indicará que se trata de un Módulo textual sin datos estadísticos. Si el módulo es de tipo conjunto de preguntas se mostrará, para cada pregunta, su media, desviación típica, moda y mediana. También se mostrarán estos mismos estadísticos agrupados por módulo, junto con dos gráficos, uno de barras y otro de tipo radar representando la media, desviación típica y mediana para cada pregunta. Al final del informe también se generarán estos mismos gráficos agrupados por módulo. o Informes de encuestas tipo opinión: será idéntico al del apartado anterior salvo que además debe calcular el Alpha de Cronbach de fiabilidad del test (para ítems no dicotómicos). o Informes de encuestas tipo test: calculará el Alpha de Cronbach de fiabilidad del test (para ítems dicotómicos). Igual que en los dos apartados anteriores, se mostrarán los módulos de los que consta la encuesta y, para los módulos de tipo conjunto de preguntas se mostrará las preguntas de las que consta el módulo, calculando para cada una de ellas, el índice de dificultad (ID), el índice de dificultad corregido (IDc), la proporción de sujetos que aciertan el ítem (PROP) y su RPBI. Del mismo modo se deben mostrar los avisos o alertas oportunos, que permitan indicar los ítems de dificultad alta, media y baja, así como la existencia de distractores mal diseñados. Estos informes pueden verse en dos modos: 51

72 Encuestado: - Modo encuesta: con la estructura antes mencionada, en la que se muestran los módulos de la encuesta y las preguntas de cada módulo. - Modo resumen: se desglosarán cada una de las comprobaciones realizadas: Preguntas con dificultad alta. Preguntas con dificultad media. Preguntas con dificultad baja. Preguntas con porcentaje de selección de distractores mayor que el porcentaje de selección de la opción correcta. Preguntas con distractores contestados por menos de un diez por ciento de los encuestados. Preguntas con RPBI anómalo. En cuanto a la parte pública se definen las siguientes características: Sólo podrá acceder a aquellas encuestas a las que haya sido invitado a través del enlace enviado por correo electrónico. La invitación sólo le permite completar la encuesta, es decir, el encuestado no podrá acceder a ninguna otra opción. Para acceder al resto de opciones, previamente deberá solicitar la recuperación de credenciales para obtener por correo electrónico sus datos de acceso. El encuestado podrá consultas su histórico de encuestas completadas así como acceder a todas aquellas encuestas que tenga pendientes. Para las encuestas de tipo test que haya completado podrá consultar su calificación, siempre y cuando la opción haya sido habilitada por el gestor que diseñó la encuesta. A la hora de completar una encuesta, el encuestado podrá: o Aumentar o disminuir el tamaño de la letra. o Cambiar el contraste de la encuesta. o Parar y continuar más adelante, excepto para las encuestas que tengan un tiempo límite establecido para completarlas, en cuyo caso esta opción estará deshabilitada. Tras listar todos los requisitos que se pretende que cumpla la aplicación desarrollada, se procede al análisis de los mismos en el siguiente apartado Análisis de Requisitos Una vez realizada la especificación de requisitos se procede a un análisis más detallado, para comprobar si existen ambigüedades o incoherencias entre los requisitos. 52

73 Esta fase se repetirá a lo largo de todo el proceso de desarrollo, cada vez que surja una nueva necesidad no contemplada inicialmente, con el objetivo de estudiar su viabilidad y compatibilidad con los requisitos ya existentes. Durante el desarrollo de la aplicación se han dado los siguientes casos de replanteo de requisitos: Encuestas: inicialmente sólo se definió el tipo de encuesta cuestionario. En una segunda vuelta se comprobó la necesidad de añadir un segundo tipo de encuesta test (pruebas cognitivas) para poder obtener los indicadores psicométricos. Este cambio supuso la necesidad de indicar el número de ítems del que constarían las preguntas de este tipo de encuesta. En otra vuelta posterior se estudió la posibilidad de añadir un tercer tipo de encuesta opinión que permitiera el cálculo del Alpha de Cronbach para ítems no dicotómicos, así como la generación de estadísticas y gráficos agrupados por módulos. Este nuevo tipo implica la obligatoriedad de que todas las preguntas asociadas a la encuesta sólo utilicen el tipo de pregunta escala de Likert y que además la escala empleada en las preguntas sea la misma. Tipos de pregunta: el tipo de pregunta lista de elementos se definió inicialmente sin la necesidad de especificar el tipo de encuesta al que se iba a asociar. Con la aparición del tipo de encuesta test, se hace necesario añadir el tipo de encuesta a las listas de elementos. Tipos de informes: inicialmente sólo se contempló el primer modo de generación de informes, el modo encuesta. En una segunda vuelta se estudió la posibilidad de crear el modo resumen. Se decidió implementarlo por la visualización agrupada que ofrece de cada una de las comprobaciones realizadas sobre las preguntas de la encuesta. Importación de resultados: una vez se había llegado prácticamente al final de la fase de implementación, con la opción de generación de informes terminada, se plantea la posibilidad de importar datos de encuestas ajenas a la aplicación en un archivo Excel para poder generar los informes estadísticos con gráficos. Tras un pequeño estudio de alcance se busca la solución más rápida y sencilla. Se decide diseñar una plantilla Excel que rellenará el gestor para cargar los datos en la aplicación. Estos datos se volcarán en tablas independientes de la base de datos. Una vez enumerados y detallados los requisitos de la aplicación desarrollada se pasan a comentar los diagramas de casos de uso UML creados en la fase de análisis y especificación de requisitos. 53

74 Diagramas de casos de uso UML En este primer diagrama se muestra, en líneas muy generales, las principales funcionalidades soportadas por la aplicación: desde el diseño de la encuesta, pasando por el envío de invitaciones a encuestados, la recogida de respuestas de encuestas hasta llegar a la generación de informes (Figura 5.1) Aparecen dos actores, el gestor y el encuestado. El gestor será el encargado de diseñar la encuesta, enviar las invitaciones a los encuestados y generar los informes de resultados. Para ello, previamente debe estar autenticado. El encuestado puede consultar las encuestas que tiene pendientes, previa autenticación en el sistema, o también puede rellenar una encuesta a partir de una invitación, previa comprobación de validez de la misma. Un encuestado sólo podrá cumplimentar las encuestas a las que ha sido invitado por el gestor. Del mismo modo, el gestor sólo podrá enviar invitaciones a encuestados de aquellas encuestas que haya diseñado. Figura 5.1. Diagrama de casos de uso del funcionamiento general de la aplicación En el segundo diagrama de la Figura 5.2 se amplía la vista del caso de uso Diseñar encuesta, en la que se aprecia la necesidad de que el gestor esté autenticado y haya creado una convocatoria. Para diseñar la encuesta se deben crear los módulos y para ello se deben crear las preguntas, que podrán tener recursos multimedia asociados. 54

75 El gestor sólo podrá crear encuestas si hay alguna convocatoria previamente creada. Sobre esta encuesta puede asociar tantos módulos como necesite y a cada uno de estos módulos puede asociar todas las preguntas que requiera el estudio. Las preguntas pueden contener o no recursos multimedia. Figura 5.2. Diagrama del casos de uso Diseñar encuesta En el tercer y último diagrama de la Figura 5.3 queda representado el caso de uso Rellenar encuesta. En este caso, el encuestado, tras pulsar sobre el enlace de la invitación recibida por correo electrónico, hace una llamada al sistema para que compruebe si la invitación es válida. Si todo es correcto se cargarán los módulos de la encuesta y las preguntas asociadas a cada uno de ellos, así como los enlaces a los diferentes recursos multimedia que puedan contener. Si la invitación no es correcta, se muestra un mensaje informando al encuestado de tal situación. Una vez cargada la encuesta, el encuestado la puede ir completando en tantos pasos como haya definido el gestor. Una vez finalizada, se muestra el mensaje de encuesta completada y se almacena en el histórico del encuestado. 55

76 Figura 5.3. Diagrama del caso de uso Rellenar encuesta Tras detallar los diagramas de casos de uso, se pasa a especificar los requisitos que debe satisfacer la aplicación en materia de seguridad Requisitos de seguridad de la aplicación La seguridad es uno de los temas más delicados a la hora de implementar una aplicación web. Debe tenerse como una tarea obligatoria pararse y dedicar un tiempo a tomar las medidas necesarias que conviertan nuestro desarrollo en un sitio seguro, con el fin de evitar posibles ataques malencionados, robos de información, suplantaciones de identidad, etc. A continuación se detallan las medidas de seguridad que se han tomado en cuenta en la implementación de esta aplicación web. Seguridad de contraseñas Google ofrece una serie de recomendaciones 40 sobre cómo crear una contraseña: Contraseñas distas para cada cuenta: reutilizar contraseñas implica el riesgo de que si alguien la averigua, tenga acceso a todos los sitios donde se utilice, como el correo electrónico, cuenta bancaria, etc. Cambiar contraseña a menudo: es posible que alguien haya averiguado nuestra contraseña y esté accediendo a nuestras cuentas sin nosotros saberlo. Si se cambia la contraseña con cierta frecuencia, se pueden limitar estos accesos. 40 Recomendaciones de creación de contraseña segura ofrecidas por Google disponibles en: https://support.google.com/accounts/answer/32040?hl=es 56

77 Utilizar combinaciones de letras, números y símbolos: además se deben utilizar combinaciones de mayúsculas y minúsculas, para aumentar el número de posibles combinaciones. No utilizar información personal ni palabras comunes: se pueden crear contraseñas con palabras comunes pero insertando letras y símbolos ercalados para dificultar que alguien pueda averiguarla. No se debe utilizar por contraseña palabras sueltas que existan en diccionarios ni patrones del estilo o abcde o qwerty. Mantener contraseñas a salvo: hay que evitar dejar anotadas las contraseñas a la vista, ya sea en un papel o en un archivo en el ordenador. Cualquiera podría obtener esa información y hacer un uso fraudulento. En la aplicación se han establecido una serie de recomendaciones y de requisitos obligatorios en la creación de cuentas y cambio de clave de gestores y encuestados. Se explican en detalle en la fase de implementación. Puesto que las claves quedan almacenadas en base de datos, también se ha hecho uso de un algoritmo de encriptación, con el fin de que todo aquel que tenga acceso al repositorio de datos no pueda obtener la contraseña de los usuarios de la aplicación a menos que disponga de la clave de encriptación. El algoritmo utilizado es MD5 (Message-Digest Algorithm 5, Algoritmo de Resumen del Mensaje 5), diseñado en 1991 por el profesor Ronald Rivest del MIT (Massachusetts Institute of Technology, Instituto Tecnológico de Massachusetts) como sucesor de su antecesor MD4. Se trata de un algoritmo de reducción criptográfico de 128 bits ampliamente utilizado. Puesto que en determinadas páginas deben viajar datos sensibles del cliente al servidor, se debería utilizar el protocolo HTTPS (Hypertext Transfer Protocol Secure, Protocolo Seguro de Transferencia de Hipertexto) una vez que la aplicación esté subida a producción. Seguridad en el acceso a formularios abiertos Todos los formularios que no requieran autenticación para ser completados, son susceptibles de posibles ataques por robots, conocidos por el nombre de bots. Se trata de pequeños programas informáticos que realizan tareas rutinarias, en ocasiones muy perjudiciales, como puede ser la de crear cuentas en una aplicación web con el fin de colapsar el sistema. Para evitarlo existen algunos controles que, aunque no reducen en un 100% estos ataques, sí impiden en un alto porcentaje el acceso. Unos de los controles más utilizados son los captcha. Se suelen insertar justo un paso antes de mostrar el formulario para comprobar que quién está accediendo es una persona física y no un robot. Para 57

78 comprobarlo se suelen mostrar por pantalla distos elementos: imágenes, sonidos, vídeos, palabras, etc, que el usuario deberá reproducir. Sólo si la reproducción es correcta, se da paso al formulario. En la aplicación desarrollada se ha hecho uso del captcha utilizado por Google, llamado Recaptcha, como paso previo a los formularios de creación de cuentas de gestores y recuperación de credenciales de gestores y encuestados. Dentro de la fase de implementación se explica con más detalle, y en el capítulo 6 se propone como trabajo futuro la implementación de una nueva versión de este control ofrecido por Google, llamado No CAPTCHA recaptcha en el que, en lugar de mostrar una imagen donde aparecen textos o números para que usuario la reproduzca, se muestra un conjunto de imágenes que el usuario tendrá que relacionar con otra imagen clave. Seguridad en los inicios de sesión Tal como ya se ha explicado en el punto anterior, cualquier formulario abierto es susceptible de ser atacado por robots. Normalmente se suelen utilizar los captcha como paso previo, pero en un inicio de sesión esto no es recomendable, por la molestia que puede causar el usuario el tener que resolver un captcha cada vez que inicie sesión en una aplicación web. Para solucionar este problema, se suele restringir el número de accesos fallidos por día. Normalmente un usuario real no fallaría más de un par de veces al insertar su contraseña, pero si hablamos de un robot la cosa cambia, puesto que suelen realizar ataques por fuerza bruta, de ensayo y error. De esta forma conseguimos dar cierto margen de error a la hora de que un usuario inserte la contraseña, pero limitamos en gran medida la posibilidad de que se produzca una captación de credenciales y posible suplantación de identidad por parte de robots. En esta aplicación se ha limitado el número de entos de inicio de sesión fallidos de forma continuada a 10 por usuario y día. También se ha limitado el número de veces que se permite recuperar las credenciales a 5 por usuario y día. Seguridad en formularios Otro de los ataques más sufridos en aplicación web es la inyección de código SQL en formularios web. Se dice que se ha producido una inyección SQL cuando se consigue insertar código SQL invasor dentro de código SQL programado, con el fin de modificar el funcionamiento normal de la aplicación y conseguir ejecutar determinadas instrucciones. Un ejemplo de este tipo de ataques sería el siguiente. Si en un determinado momento se ejecuta una consulta SQL que requiere por parámetro un campo que rellena el 58

79 usuario en el formulario, es posible que esté codificado de la siguiente forma. La variable usuario contendría el valor insertado por el usuario en un TextBox. SELECT * FROM encuesta WHERE nombre='" + nombre_encuesta + "' Si el usuario inserta un nombre cualquiera no habría problema. Pero un usuario malencionado podría insertar algo como: Encuesta 2012'; DELETE FROM encuesta WHERE nombre LIKE '% De este modo la consulta quedaría de la siguiente forma y, al ejecutarla, se eliminarían todos los datos de la tabla encuesta. SELECT * FROM encuesta WHERE nombre='encuesta 2012'; DELETE FROM encuesta WHERE nombre LIKE '%' Se pueden evitar estos tipos de ataques mediante la parametrización de todas las consultas, especialmente aquellas en las que alguno de los parámetros sea un valor insertado por el usuario en una caja de texto. Al parametrizar un valor insertado por el usuario se consigue que en la comparación del ejemplo anterior, el campo nombre deba coincidir con todo el texto insertado por el usuario. En la aplicación desarrollada se ha tenido muy en cuenta esta medida y todas las consultas están parametrizadas. En la Figura 5.4 se incluye un sencillo ejemplo, donde se subraya la sentencia en la que se parametriza el valor id_encuesta insertado por el usuario en la caja de texto tb_encuesta. SqlConnection objconexion = Comun.openConexion(); string consulta = SELECT * FROM encuesta WHERE "; SqlCommand cmd = new System.Data.SqlClient.SqlCommand(consulta, objconexion); SqlDataReader datos; try { SqlDbType.Int).Value = tb_encuesta.text; datos = cmd.executereader(); if (datos.read()) { --- } else { --- } datos.close(); } catch (Exception err) { --- } finally { Comun.closeConexion(objConexion); } Figura 5.4. Código ejemplo de parametrización de consultas SQL 59

80 Tras revisar los principales aspectos de seguridad a tener en cuenta en el desarrollo de la aplicación web, se procede a explicar el trabajo realizado en la fase de diseño Diseño En este apartado se muestran los diagramas UML de clases, de secuencia, de actividad, así como el modelo de tareas CTT. Además se describe el diseño de la estructura de la base de datos, así como la organización de las capas de la plantilla base o página maestra (master page) de la que heredan los formularios de la aplicación y los principales estilos definidos en la hoja de estilos CSS. Por último se muestra la estructura global del sitio web y se explica cada uno de los componentes que la forman Diagramas de clases UML La Figura 5.5 muestra el diagrama de clases de persistencia de la aplicación. Se han representado las clases y relaciones más significativas, encargadas de manejar los objetos que se comunican con la base de datos para realizar las inserciones, actualizaciones, consultas y borrados. Las clases Comun y Log son utilizadas prácticamente por el resto. No se han representado todas las relaciones con el fin de hacer el diagrama más legible. Figura 5.5. Diagrama de clases de persistencia UML 60

81 Acceso: es la clase encargada de realizar todas las operaciones relacionadas con el acceso a la aplicación por parte de los gestores y encuestados. Por lo tanto, las clases Gestor y Encuestado hacen uso de ella para los inicios de sesión, recuperación de credenciales, altas, etc. Por su parte, la clase Encuestado presenta una relación con la clase Invitacion, ya que un encuestado puede tener asociadas 0 o n invitaciones a encuestas. Mail: esta clase es la encargada de registrar todas las notificaciones. Para ello hace uso de las clases Destinatario (representa a un encuestado o a un gestor), LogEnvio (utilizada para logar cada envío de forma individual) y Lanzamiento (utilizada para logar cada uno de los envíos masivos que realiza el gestor). EncuestaImp: esta clase será la encargada de gestionar las encuestas importadas en Excel. Presenta una relación de agregación con la clase ModuloImp, encargada de gestionar los módulos de las encuestas. Ésta, a su vez, presenta otra relación de agregación con la clase PreguntaImp, encargada de gestionar las preguntas de los módulos. Y por último, ésta presenta otra relación de agregación con la clase RespuestaEncuestadoImp, encargada de gestionar las respuestas de los encuestados. Si se elimina la encuesta importada, también se eliminan en cascada los módulos, las preguntas y las respuestas. RecomendacionDoc: es la clase encargada de gestionar las recomendaciones y checklist de usabilidad de todas las fuentes consultadas para crear preguntas. Presenta una relación de agregación con la clase RecomendacionGrupo encargada de gestionar los grupos de recomendaciones de una fuente. Ésta, a su vez, presenta otra relación de agregación con la clase Recomendación, encargada de gestionar cada una de las recomendaciones concretas. Si se elimina la fuente de recomendación, se eliminan en cascadas los grupos o secciones y las recomendaciones de cada grupo o sección. Convocatoria: es la clase encargada de gestionar las convocatorias y está relacionada con la clase Gestor puesto que un gestor puede tener asociadas 0 o n convocatorias. Presenta una relación de agregación con la clase Encuesta, encargada de gestionar las encuestas de una convocatoria creada por un gestor. Encuesta: presenta dos relaciones de agregación, una con la clase Invitacion y otra con la clase Modulo, puesto que una encuesta puede tener de 0 a n invitaciones y de 1 a n módulos. La clase módulo, a su vez, presenta una relación de agregación con la clase ModuloPregunta, puesto que un módulo puede estar compuesto de 0 o n preguntas. Ésta clase, pregunta una relación con la clase Pregunta de 1 a 1. 61

82 Pregunta: esta clase, encargada de gestionar las preguntas, presenta relaciones de agregación con las clases Likert y ListaItems (de 0 a 1) y Recurso (de 0 a n.) Al eliminar una pregunta, el Likert o la Lista no se eliminan y permanecen en el repositorio de listas y Likerts. En cambio, al eliminar una pregunta, sí se eliminan los recursos asociados a la misma. Por otra parte, la clase ListaItems presenta una relación de agregación de 1 a n con la clase Item, encargada de gestionar los elementos de las listas. Plantilla: esta clase se encarga de gestionar las plantillas de notificaciones y es utilizada por la clase Mail para obtener los datos de la notificación. Está relacionada con la clase Campo (de 0 a n), puesto que una plantilla puede tener asociados de 0 a n campos codificados. La Figura 5.6 muestra el detalle de la clase Encuesta, una de las más importantes, encargada de realizar todas las operaciones en la base de datos sobre ese objeto. Figura 5.6. Detalle de la clase Encuesta 62

83 Entre sus métodos están, entre otros, checkencuestaconinvitaciones, que se utiliza para comprobar si se han enviado invitaciones de una encuesta como comprobación previa al borrado de la misma. Incluye los métodos de selección (selectencuesta), inserción (insertencuesta_paso1 y insertencuesta_paso2), actualización (updateencuesta_paso1 y updateencuesta_paso2) y borrado (deleteencuesta). También implementa un método de duplicado de encuesta en una convocatoria (duplicateencuesta). Otros métodos destacables son los encargados de almacenar las respuestas de los encuestados (insertresultadoencuesta_modulo, insertresultadoencuestado_pregunta, etc), o el encargado de dar por finalizada una encuesta (finishencuesta). La Figura 5.7 muestra el detalle de la clase Pregunta, otra de las más importantes, encargada de realizar todas las operaciones en la base de datos relacionadas con la gestión de estos objetos. Entre los métodos más destacables están los básicos de selección (selectpregunta), inserción (insertpregunta), actualización (updatepregunta) y borrado (deletepregunta). Implementa otros métodos de comprobaciones como checkpreguntaenencuesta, utilizado para comprobar si una pregunta ya está asociada a algún módulo de una encuesta. Mediante los métodos de esta clase también se gestionan algunas operaciones de las listas y Likerts, como son la selección (selectlista y selectlikert) o el borrado (deletelista y deletelikert). Son destacables también todos los métodos empleados para gestionar los recursos multimedia asociados a una pregunta como (selectrecurso, insertrecurso, updaterecurso, deleterecurso, etc). La Figura 5.8 muestra el diagrama de clases de las capas de presentación y dominio UML. Se ha dividido en dos secciones, la perteneciente al apartado de administración o de gestores y la perteneciente a la parte de encuestados. Se han representado los formularios y componentes existentes en la aplicación así como sus relaciones más significativas. Los formularios están formados por dos archivos, uno con extensión.aspx que es el que engloba todos los componentes de diseño y HTML, y otro.aspx.cs que engloba toda la funcionalidad de la capa de dominio. A esta característica de separación de parte de diseño y parte de contenidos se le denomina code behind Code behind: es uno de los principales avances de ASP.NET con respecto a ASP. Es un método de trabajo, que permite mantener separado el código estático (presentación) del código dinámico (contenido) en un archivo independiente con extensión aspx.cs, si el lenguaje utilizado es C#, o aspx.vb, si se emplea VisualBasic. 63

84 Figura 5.7. Detalle de la clase Pregunta 64

85 Figura 5.8. Diagrama de clases de presentación/dominio UML Como se puede observar Plantilla_mod1 está relacionada con Plantilla_base, ambas representan los dos niveles de páginas maestras de la aplicación. Plantilla_base incorpora los componentes de mapa de sitio (SiteMapPath) y de pie de página (CMP_Pie). Las clases index tanto de encuestados como de gestores también están relacionados con Plantilla_base. El resto de clases están relacionados con Plantilla_mod1. La sección de Encuestados representa los erfaces y los componentes que incorpora cada erfaz. Form_index está relacionado con la clase JSSOR_slider, encargada de mostrar el carrusel con imágenes en la página inicial de encuestados. Form_encuesta está relacionado con la clase CMP_encuesta encargada de cargar y mostrar la encuesta a completar por un encuestado. Form_miCuenta está relacionado con las clases PasswordStrength, encargada de mostrar la fortaleza de contraseña en el cambio de clave del encuestado, y con la clase Recaptcha, encargada de mostrar un captcha como paso previo al cambio de clave. Form_recuperar también está relacionado con la clase Recaptcha, encargada de mostrar otro captcha como paso previo a la recuperación de credenciales. Por último, Form_misEncuestas utiliza la clase EPPlus encargada de generar un archivo Excel con las calificaciones obtenidas en un test. Los componentes CMP_sesion y CMP_menu_izq se utilizan en todos los erfaces que muestran el componente de inicio de sesión y de menú izquierdo. 65

86 La sección Gestores representa todos los erfaces y componentes empleados en la parte de administración de la aplicación. Form_adm_recuperar y Form_adm_registro utilizan el componente Recaptcha para mostrar un captcha como paso previo a los formularios de recuperación de credenciales y alta de gestor. Form_adm_mtto_encuesta y Form_adm_not_plantilla emplean el componente CKEditor, encargado de mostrar un editor de texto online en las erfaces de gestión de encuestas y de gestión de plantillas de notificaciones. Por otra parte, Form_adm_inf_estadisticos, utiliza el componente Chart para generar los gráficos asociados a los informes estadísticos y Form_adm_respuestas emplea los componentes EPPlus y IText para generar los documentos de respuestas de una encuesta en formato Excel y PDF respectivamente. Los componentes CMP_adm_menu_izq, CMP_adm_sesion y AjaxControlToolkit son empleados en todas aquellas erfaces que incorporan el menú izquierdo, el componente de inicio de sesión y alguno de los componentes de Ajax (PasswordStrength, ModalPopUp, Calendar, etc). No se han representado estas relaciones para hacer el diagrama más legible. Las Figuras 5.9 y 5.10 muestran la jerarquía de clases de los controles HTML y de servidor respectivamente, disponibles en.net, que forman parte de la capa de presentación de la aplicación. Se han utilizado mayoritariamente los controles de servidor. Pertenecen al espacio de nombres System.Web.UI.WebControls y se dividen en varios grupos (estándar, validación, datos, navegación etc). Poseen un mayor nivel de abstracción que los controles HTML. Al cargar la página web, el control comprueba el tipo de navegador y decide qué tipo de etiqueta es necesaria para representar la información que contiene. Se puede decir que son controles eligentes. Figura 5.9. Controles HTML disponibles en.net 66

87 Figura Controles de servidor disponibles en.net Algunos de los controles más utilizados son los Button (botones), Label (etiquetas), Panel (separadores de contenido), TextBox (cajas de texto), DropDownList (desplegables) o RequiredFieldValidator (validadores de campo). Una vez mostrados los diagramas de clases UML de la aplicación, se pasa a detallar los diagramas de secuencia de las operaciones más significativas Diagramas de secuencia UML A continuación se muestran algunos de los diagrama se secuencia UML de la aplicación. Se han diseñado cuatro diagramas, los considerados de mayor relevancia: alta de gestor, creación de nueva encuesta, cumplimentación de encuesta y generación de informe. La Figura 5.11 muestra el diagrama de secuencia UML para el alta de un nuevo gestor. El proceso se inicia cuando el usuario pulsa el botón Registro ubicado en el componente de inicio de sesión. El componente redirige al formulario de registro Form_adm_registro que cargará el captcha inicial. Una vez lo ha resuelto, debe rellenar los datos y pulsar el botón de registrarse. 67

88 Después se realizan una serie de comprobaciones. Se comprueba que no existe un gestor con el mismo nombre de usuario, ni con el mismo . Se comparan las contraseñas insertadas para ver que coinciden y, por último, se comprueba que la contraseña insertada no contiene caracteres inválidos. El siguiente paso es la inserción en la base de datos. Si todo es correcto, se loga la inserción de gestor y se busca la plantilla de notificación que indica que es gestor ha sido creado. Para finalizar, se envía el correo al nuevo gestor, se loga el envío y se inicia sesión para que pueda comenzar a diseñar encuestas. Figura Diagrama de secuencia de alta de gestor 68

89 La Figura 5.12 muestra el diagrama de secuencia UML para la inserción de una nueva encuesta. Figura Diagrama de secuencia de creación de encuesta El proceso comienza cuando el gestor pulsa el enlace de gestión de encuestas del componente del menú izquierdo. Se hace la carga del formulario y se muestra el paso 1, consistente en insertar los datos básicos de la encuesta. El gestor cumplimenta los datos y pulsa el botón de inserción. Se hacen una serie de comprobaciones, como las referentes a que las fechas sean correctas 69

90 y estén dentro del periodo de la convocatoria. Si todo es correcto, se utiliza la clase Encuesta para hacer la inserción del paso 1 y se deja registrado en el log. Se continúa con el paso 2, consistente en la inserción del logo, pie y páginas de inicio y fin, entre otros campos. Este formulario llama al componente CKEditor para mostrar el editor de texto online. El gestor rellena los datos y pulsa el botón de inserción del paso 2. Aquí se vuelve a utilizar la clase Encuesta para insertar los datos. También se utiliza la clase Log para logar la inserción. Por último, en el paso 3 de la inserción de encuesta, aparecen dos tareas iterativas, las referentes a la inserción de módulos y preguntas. Ambas utilizan la clase Modulo para hacer las inserciones y, tras cada inserción, se procede a registrar en el log la operación. La Figura 5.13 muestra el diagrama de secuencia UML de cumplimentación de una encuesta. El proceso se inicia cuando un encuestado pulsa el enlace de la invitación recibida por correo electrónico. Se carga el formulario de inicio de encuesta, que realizará una serie de comprobaciones, como que el código de invitación sea correcto. Se obtienen los datos del encuestado, se loga el acceso y se redirige al formulario de encuesta. En el formulario de encuesta se carga el componente que mostrará los módulos y preguntas mediante el método inicializar(). A este método se le llamará tantas veces como sea necesario hasta que el encuestado haya respondido todas las preguntas. El método inicializar carga los datos de encuesta y los módulos y preguntas que correspondan en cada paso. A continuación el encuestado responde y se loga cada operación. Si se ha llegado al final de la encuesta, se llama al método finishencuesta(), se registra en el log y se muestra al encuestado el aviso de finalización. La Figura 5.14 muestra el diagrama de secuencia UML para la generación de informes. El gestor pulsa el enlace de generación de encuestas del menú izquierdo y éste redirige al formulario de estadísticos, que cargará las convocatorias creadas por el gestor. Se selecciona una convocatoria y a continuación se cargan las encuestas asociadas a la misma. El gestor selecciona una encuesta y se consultan los datos de ésta. Si es una encuesta tipo test, se debe seleccionar el tipo de informe que se desea generar. Una vez seleccionado el tipo, se calcula el índice de fiabilidad y el resto de comprobaciones. Si es un cuestionario o encuesta de opinión se cargan los estadísticos de media, moda, mediana y desviación típica y se generan todos los gráficos. 70

91 Figura Diagrama de secuencia de cumplimentación de encuesta 71

92 Figura Diagrama de secuencia UML de la generación de informe Después de detallar algunos de los diagramas de secuencia creados en la fase de diseño de la aplicación, se pasa de mostrar los diagramas de actividad UML, de las dos principales características de la aplicación: creación y cumplimentación de encuestas Diagramas de actividad UML En el diagrama de la Figura 5.15 se muestra el diagrama de actividad para el caso de uso Diseñar encuesta. El nodo inicial comienza con la actividad Insertar datos básicos, como puede ser el nombre de la encuesta, el periodo en el que permanecerá abierta, el logotipo, el pie de página, las páginas iniciales y finales, etc. A continuación se empiezan a insertar los módulos. Para cada módulo se insertan las preguntas y para cada pregunta se insertan los posibles recursos multimedia que pueda tener asociados. 72

93 Este caso de uso finaliza cuando no quedan por insertar ni recursos, ni preguntas, ni módulos. Figura Diagrama de actividad para el caso de uso Diseñar encuesta El segundo diagrama (Figura 5.16) representa el caso de uso Rellenar encuesta. El primer paso consiste en pulsar el enlace de invitación enviado por correo electrónico. A continuación se comprueba que el enlace es correcto y, en caso de serlo, se registra el acceso y se cargan los módulos de la encuesta. Posteriormente se guardan los resultados insertados por el encuestado y, en caso de haber llegado al final de la encuesta, se termina el flujo. Si queda algún módulo por contestar, se volverá al paso de cargar encuesta, hasta que se hayan respondido todos los módulos que componen la encuesta. 73

94 Figura Diagrama de actividad del caso de uso Rellenar encuesta Tras mostrar y explicar algunos de los principales diagramas de actividad UML de la aplicación, se procede a explicar los modelos de tareas en notación CTT Modelo de Tareas CTT La metodología MPIu+a incluye una serie de técnicas propias de la IPO, entre las que se incluye la creación de modelos de tareas. Tal y como se ha comentado con anterioridad, una de las notaciones más extendidas para este propósito es la notación CTT, que permite especificar los principales flujos y tareas eractivas de las aplicaciones software. En el Anexo N se describe en profundidad la notación del modelado de tareas CTT. A continuación se incluyen los modelos CTT de las principales funcionalidades de la aplicación desarrollada. Los modelos mostrados en las Figuras 5.17, 5.18 y 5.19 corresponden con el acceso del gestor a la aplicación y las posibles opciones de alta, comprobación de credenciales o recuperación de clave. En la Figura 5.17 se muestra cómo el alta de gestor debe realizarse en dos pasos, primero se resuelve el captcha y, si es correcto, se insertan los datos del nuevo gestor. En la Figura 5.18 queda representado el flujo de eracción asociado al inicio de sesión de un gestor. Éste debe insertar su usuario y contraseña y, si son correctas, se registra el acceso, se muestra la información de último acceso y se permite seleccionar la siguiente tarea. 74

95 En la Figura 5.19 también se ha representado la recuperación de credenciales en dos pasos. Primero se debe resolver el captcha y después insertar el nombre de usuario o para recibir el de recuperación con las claves. Figura Modelo de tareas para el alta de gestor Figura Modelo de tareas para el inicio de sesión del gestor 75

96 Figura Modelo de tareas para la recuperación de credenciales de gestor Una vez que el gestor ha iniciado sesión, debe especificar la siguiente tarea a realizar. En la Figura 5.20 se muestran las posibles tareas. Aunque aquí no aparece representada, otras posibles tareas serían las de modificar los datos de su cuenta o cambiar su contraseña. Figura Modelo de tareas de especificación de tarea del gestor Debido a la extensión del modelo de tareas CTT, sólo se muestran los detalles de las tareas más significativas Gestionar encuesta en la Figura 5.21 y Generar informe en la Figura En la Figura 5.21 se muestran las tres tareas que se pueden realizar desde la gestión de encuestas: creación, edición y eliminación. Se ha desplegado la tarea de creación. En ella se ve cómo la creación de una encuesta consta de tres pasos secuenciales. Cuando se 76

97 termina un paso, se muestra el siguiente. En el último paso, las tareas de insertar módulo e insertar pregunta son iterativas, puesto que se pueden insertar tantos módulos y preguntas como sea necesario. En cualquiera de los tres pasos se puede abandonar el proceso. Para continuarlo habría que iniciar la tarea de edición de encuesta. Figura Modelo de tareas de creación de una encuesta En la Figura 5.22 se observa el modelo de tareas de generación de informes. El gestor debe seleccionar una convocatoria, una encuesta, un modo y el sistema mostrará, o bien un mensaje de error de generación, o bien el informe solicitado por el gestor. 77

98 Figura Modelo de tareas de generación de informe En lo que respecta a los encuestados, el inicio de sesión y recuperación de credenciales es muy similar al de los gestores. La Figura 5.23 muestra la especificación de tareas para un encuestado, concretamente la de rellenado de una encuesta. Como se puede observar, el primer paso consiste en comprobar si la invitación es correcta. En caso de serlo se carga la pantalla inicial con una serie de módulos y preguntas que el encuestado debe completar. La carga de pantallas es iterativa y se produce hasta que se ha llegado al final de la encuesta. Figura Modelo de tareas de rellenar encuesta Una vez mostrados y explicados algunos de los modelos de tareas en notación CTT, se pasa a explicar el diseño de la estructura de datos de la aplicación. 78

99 Diseño de la Estructura de Datos El repositorio de datos del sitio web se ha montado sobre SQL Server 2008, en una base de datos con el nombre Encuestas. Para poder entender mejor su estructura se hacen necesarias varias divisiones en las que se agrupan las tablas por módulos. En el Anexo J se puede consultar el diagrama de bases de datos completo, con todas las tablas y las relaciones existentes entre las mismas. Una vez agrupadas las tablas en varias secciones, tenemos: Sección módulos: contiene las tablas destinadas a almacenar datos referentes a los módulos, su tipología y la asociación de preguntas que contiene cada módulo (Figura 5.24). tipomodulo Nombre de columna Tipo de datos Permitir v... id_tipomodulo des_tipomodulo varchar(50) modulo_pregunta Nombre de columna Tipo de datos Permitir v... id_modulo id_pregunta obligatorio bit NSNC bit orden modulo Nombre de columna Tipo de datos Permitir v... id_modulo des_modulo varchar(100) id_encuesta id_tipomodulo contenido varchar(max) orden Figura Sección módulos del diagrama de base de datos modulo: contiene los datos básicos de un módulo como pueden ser la descripción, el identificador de encuesta al que pertenece, el orden dentro de la encuesta, la tipología, el contenido (en caso de ser un módulo textual), etc. tipomodulo: define los diferentes tipos de módulos: textual (si sólo contienen texto) o conjunto de preguntas (si tienen asociados una o varias preguntas). modulo_pregunta: asocia para cada módulo de tipo conjunto de preguntas, los ítems que va a contener y varios atributos como la obligatoriedad, la opción NS/NC y el orden del ítem dentro del módulo. Sección gestor, convocatoria y encuesta: se compone de un conjunto de tablas destinadas a almacenar los datos básicos de gestores, las convocatorias creadas por estos, las encuestas de cada convocatoria y su tipología (Figura 5.25). 79

100 gestor Nombre de columna Tipo de datos Permitir v... usuario varchar(20) clave varchar(500) varchar(200) nombre varchar(100) apellido1 varchar(100) apellido2 varchar(100) f_ultimoacceso datetime entos24horas f_ultimointento datetime codigos24horas f_ultimocodigo datetime encuesta Nombre de columna Tipo de datos Permitir v... id_encuesta des_encuesta varchar(250) usuario varchar(20) id_convocatoria id_tipoencuesta numopciones f_inicio datetime f_fin datetime n_modulospantalla tiempo mostrarresultados bit logo varchar(500) pie varchar(500) pag_inicio varchar(max) pag_fin varchar(max) convocatoria Nombre de columna Tipo de datos Permitir v... id_convocatoria des_convocatoria varchar(250) usuario varchar(20) f_inicio datetime f_fin datetime tipoencuesta Nombre de columna Tipo de datos Permitir v... id_tipoencuesta des_tipoencuesta varchar(50) Figura Secciones gestor, convocatoria y encuesta del diagrama de base de datos gestor: almacena los datos básicos de un gestor como son el nombre y apellidos, usuario y clave cifrada, , y las fechas de último acceso, de último ento de inicio de sesión fallido y de última recuperación de credenciales. Estas fechas se utilizar para aumentar la seguridad de la aplicación junto con los campos entos24horas y codigos24horas. Se evita de esta forma, que un usuario pueda acceder a la aplicación tras 10 entos fallidos de autenticación en 24 horas. También se establece el límite de 5 recuperaciones de clave en 24 horas. convocatoria: almacena los datos básicos de una convocatoria (descripción, gestor y fechas de inicio y de fin). encuesta: contiene todos los datos básicos de una encuesta, como la descripción, el gestor que la ha creado, el identificador de convocatoria al que está asociada, el tipo de encuesta, las fechas de apertura, el número de módulos que se mostrarán por pantalla, el logotipo, el pie de página, el texto de las páginas de inicio y fin, etc. tipoencuesta: define los posibles tipos de encuestas (cuestionarios, encuestas de opinión y test). Sección pregunta: se compone de todas aquellas tablas relacionadas de alguna manera con las preguntas, como las categorías, la tipología de pregunta o de recurso, los repositorios de listas y Likerts, etc. (Figura 5.26) 80

101 tiporecurso Nombre de columna Tipo de datos Permitir v... id_tiporecurso des_tiporecurso varchar(50) tipocategoria Nombre de columna Tipo de datos Permitir v... id_tipocategoria des_tipocategoria varchar(50) usuario varchar(20) tipopregunta Nombre de columna Tipo de datos Permitir v... id_tipopregunta des_tipopregunta varchar(50) lista Nombre de columna Tipo de datos Permitir v... id_lista des_lista varchar(50) numopciones usuario varchar(20) predefinida bit pregunta_recurso Nombre de columna Tipo de datos Permitir v... id_recurso id_pregunta id_tiporecurso ruta varchar(500) textoalternativo varchar(250) orden pregunta Nombre de columna Tipo de datos Permitir v... id_pregunta des_pregunta varchar(max) usuario varchar(20) id_tipocategoria id_tipopregunta predefinida bit id_likert id_lista numerico_numdecimales textual_corto bit textual_num listaitem Nombre de columna Tipo de datos Permitir v... id_lista des_item varchar(500) valor_item varchar(50) respuesta_item bit orden likert Nombre de columna Tipo de datos Permitir v... id_likert des_likert varchar(50) usuario varchar(20) valornumdecimales valormin decimal(18, 5) valormax decimal(18, 5) desmin varchar(50) desmax varchar(50) ervalonumdecimales ervalo decimal(18, 5) predefinido bit Figura Sección pregunta del diagrama de base de datos pregunta: contiene los datos básicos de una pregunta como el texto de la misma, su tipología, la categoría, el gestor que la ha creado, y otros campos no obligatorios que se rellenarán en función del tipo al que pertenezca. tipocategoria: define los posibles tipos de categoría de preguntas. Serán definidas por el propio gestor a la hora de crear las preguntas, con el fin de poder hacer una agrupación personalizada. tipopregunta: define los posibles tipos de pregunta (campo textual, campo numérico, sí/no, lista de elementos o escala de Likert). tiporecurso: define los posibles tipos de recursos de preguntas (enlace, vídeo, audio, imagen o documento). 81

102 pregunta_recurso: asocia, para cada pregunta, los recursos multimedia de que dispone y especifica el orden del recurso dentro de la pregunta. lista: contiene toda la información sobre una lista de elementos como la descripción o el número de opciones (necesario para los test). listaitem: asocia, para cada lista, los ítems de que consta. Estos se componen de duplas descriptor/valor, salvo para los ítems de listas destinadas a test, que contendrán descriptor/respuesta (correcta o incorrecta). También se almacena el orden del elemento dentro de la lista. likert: contiene toda la información de una escala de Likert, como puede ser el valor máximo, el valor mínimo, sus descriptores, el ervalo, etc. Sección encuestado y respuesta: está compuesta por las tablas empleadas en almacenar todos los datos relativos a los encuestados y su actividad, como puede ser el log de accesos, los módulos completados, las respuestas a las preguntas, etc. (Figura 5.27) encuestado Nombre de columna Tipo de datos Permitir v... id_encuestado uniqueidentifier varchar(200) clave varchar(500) f_ultimoacceso datetime entos24horas f_ultimointento datetime codigos24horas f_ultimocodigo datetime respuesta_encuestado Nombre de columna Tipo de datos Permitir v... id_encuestado uniqueidentifier id_encuesta id_modulo encuestado_log Nombre de columna Tipo de datos Permitir v... id id_encuestado uniqueidentifier id_encuesta fecha datetime paso varchar(50) encuestado_encuesta Nombre de columna Tipo de datos Permitir v... id_encuestado uniqueidentifier id_encuesta id_invitacion uniqueidentifier invitacionenviada bit id_cabecera f_iniciocontador datetime f_inicioencuesta datetime f_finencuesta datetime respuesta Nombre de columna Tipo de datos Permitir v... id_cabecera id_modulo id_pregunta respuesta varchar(max) cabecera Nombre de columna Tipo de datos Permitir v... id_cabecera id_encuesta f_inicio datetime f_fin datetime Figura Sección encuestado y respuesta del diagrama de base de datos encuestado: contiene los datos básicos de un encuestado (identificador de tipo uniqueidentifier, y clave). También almacena datos como las fechas de último acceso, de último ento de inicio de sesión y de última recuperación de 82

103 credenciales. Junto con los campos entos24horas y codigos24horas almacenan los datos necesarios para implementar los controles de seguridad que evitan que un encuestado pueda acceder tras 10 entos de autenticación fallidos en 24 horas. Del mismo modo sólo se permite obtener las credenciales 5 veces en 24 horas. encuestado_encuesta: asocia, para cada encuestado, las encuestas a las que ha sido invitado y otros datos de control. La invitación se almacena en un campo de tipo uniqueidentifier. También se almacenan datos relativos a la cumplimentación de la encuesta como el identificador de cabecera, la fecha en que se inició el contador de tiempo o las fechas de inicio y de fin de rellenado de la encuesta por parte del encuestado. Cabe destacar que el identificador de cabecera se almacena para permitir al usuario pausar la encuesta y continuar más adelante. Una vez finalizada la encuesta, se elimina este identificador, a excepción de los test, que debe permanecer para permitir asociar la calificación obtenida por cada encuestado. encuestado_log: registra los accesos de los encuestados a las encuestas, indicando la fecha y el paso en que se continuó con la encuesta en caso de ser el 2º o posterior acceso. respuesta_encuestado: registra los módulos que han sido completados por cada encuestado. respuesta: es el almacén principal de datos, donde se almacenan todas las respuestas de los encuestados. Desde aquí se obtienen los datos para calcular los estadísticos de informes y gráficos. cabecera: esta tabla se utiliza para agrupar las respuestas almacenadas en la tabla respuesta con una encuesta en concreto. Sección recomendación y texto predefinido: se compone de las tablas empleadas para almacenar las recomendaciones y los textos predefinidos (Figura 5.28). recomendaciondoc Nombre de columna Tipo de datos Permitir v... id_doc des_doc varchar(300) des_fuente varchar(300) orden recomendaciongrupo Nombre de columna Tipo de datos Permitir v... id_grupo des_grupo varchar(100) id_doc orden recomendacion Nombre de columna Tipo de datos Permitir v... id_recomendacion des_recomendacion varchar(300) id_grupo orden textopredefinido Nombre de columna Tipo de datos Permitir v... id_textopredefinido des_textopredefinido varchar(50) textopredefinido varchar(max) Figura Secciones recomendación y texto predefinido del diagrama de base de datos 83

104 recomendacion: contiene los datos básicos de un ítem de recomendación. recomendaciondoc: contiene la fuente y el descriptor de una serie de ítems de recomendación, así como el orden del ítem dentro del grupo de recomendaciones. recomendaciongrupo: asocia, para cada recomendación, los ítems de los que se compone. También indica el orden del grupo dentro del conjunto de recomendaciones. textopredefinido: contiene los datos de un texto predefinido que se puede asociar en las páginas de inicio y fin de una encuesta. Algunos de los existentes son la nota de confidencialidad o una serie de recomendaciones a tener en cuenta a la hora de rellenar un cuestionario. Sección plantillas: está formado por las tablas empleadas para almacenar los datos relativos a las plantillas de notificaciones, los envíos realizados, los campos codificados de cada notificación, etc. (Figura 5.29). plantilla_lanzamiento Nombre de columna Tipo de datos Permitir v... id_lanzamiento id_plantilla id_encuesta fecha datetime numcorrectos numfallos numenviados plantilla Nombre de columna Tipo de datos Permitir v... id_plantilla des_plantilla varchar(100) asuntoinicial varchar(100) contenidoinicial varchar(max) orden publico bit plantilla_historico Nombre de columna Tipo de datos Permitir v... id_historico fecha datetime id_plantilla id_encuesta remitente_usuario varchar(200) remitente_ varchar(200) destinatario_gestor varchar(20) destinatario_encuest... uniqueidentifier destinatario_ varchar(200) asunto varchar(100) mensaje varchar(max) resultado bit plantilla_campo Nombre de columna Tipo de datos Permitir v... id_plantilla id_campo plantilla_usuario Nombre de columna Tipo de datos Permitir v... id_plantilla usuario varchar(20) asunto varchar(100) contenido varchar(max) campo Nombre de columna Tipo de datos Permitir v... id_campo des_campo varchar(30) codificacion varchar(30) ejemplo varchar(max) orden Figura Secciones plantilla del diagrama de base de datos 84

105 plantilla: define las plantillas base de los posibles comunicados que se envían desde la aplicación, con unos textos predefinidos que podrán ser modificados a conveniencia del gestor. plantilla_lanzamiento: registra el resumen de aciertos, fallos y notificaciones previamente enviadas, en los envíos masivos de comunicados. Funciona básicamente como un log de ejecución de procesos de envío. plantilla_historico: registra todos los datos de cada uno de los envíos. Al igual que la tabla anterior, también funciona como un log de envíos pero a modo más general. Almacena todos los envíos tanto si los ha realizado el gestor, como si los ha realizado el sistema. plantilla_usuario: contiene los datos personalizados por el gestor para cada una de las plantillas, como son el asunto, cuerpo y campos codificados empleados. plantilla_campo: asocia, para cada plantilla, los posibles campos codificados que puede tener, y que el gestor podrá utilizar a conveniencia. campo: define los posibles campos codificados que se pueden asociar a una plantilla, incorporando un campo con datos de ejemplo para la vista previa del gestor de notificaciones. Sección importación de datos: todas las tablas de esta sección se utilizan para almacenar los datos de encuestas importadas. Nótese que todas comienzan por el prefijo imp_. De este modo se consigue diferenciarlas de las tablas utilizadas para almacenar los datos de las encuestas diseñadas desde la propia aplicación (Figura 5.30). imp_encuesta Nombre de columna Tipo de datos Permitir v... id_encuesta des_encuesta varchar(250) usuario varchar(20) numopciones fecha datetime imp_modulo Nombre de columna Tipo de datos Permitir v... id_modulo id_encuesta des_modulo varchar(100) imp_respuesta Nombre de columna Tipo de datos Permitir v... id_encuestado id_encuesta id_modulo id_pregunta respuesta imp_pregunta Nombre de columna Tipo de datos Permitir v... id_pregunta id_modulo id_encuesta des_pregunta varchar(max) opcioncorrecta Figura Sección importación de datos del diagrama de base de datos 85

106 imp_encuesta: contiene los datos básicos de una encuesta importada (descriptor de la encuesta, gestor que ha importado los datos, número de opciones y fecha de la importación). Hay que tener en cuenta, que sólo se pueden importar test. Los cuestionarios y encuestas de opinión quedan excluidos. imp_modulo: contiene los módulos de una encuesta importada. Tan sólo almacena el identificador del módulo y su descripción, así como el identificador de la encuesta a la que pertenece el módulo. imp_pregunta: contiene las preguntas de los módulos de una encuesta importada. Se almacena el descriptor de la pregunta y qué opción es la correcta. imp_respuesta: contiene las respuestas de las preguntas de una encuesta importada. Se especifican los identificadores de encuestado, encuesta, módulo y pregunta. Sección log: contiene un par de tablas utilizadas para registrar todas las acciones que realizan tanto gestores como encuestados. Ambas almacenan datos como la IP, el DNS, el usuario que realiza la acción o la fecha. También se registra si la operación ha sido correcta o no. En caso de error se almacena el mensaje y la línea del fragmento de código donde se ha producido el error (en el campo traza) (Figura 5.31). Estas dos tablas resultan vitales para detectar posibles errores en la implementación, en el tratamiento de datos, en la utilización de componentes o librerías, y en general cualquier tipo de error. log Nombre de columna Tipo de datos Permitir v... id fecha datetime ip varchar(100) dns varchar(100) usuario varchar(200) operacion varchar(500) parametros varchar(max) resultado bit mensaje varchar(max) traza varchar(max) logadm Nombre de columna Tipo de datos Permitir v... id fecha datetime ip varchar(100) dns varchar(100) usuario varchar(200) operacion varchar(500) parametros varchar(max) resultado bit mensaje varchar(max) traza varchar(max) Figura Sección log del diagrama de base de datos log: registra todas las acciones que realizan los encuestados (inicio de sesión, recuperación de credenciales, cambio de contraseña, cumplimentación de encuestas, etc). logadm: registra todas las acciones que realizan los gestores (inicio de sesión, recuperación de credenciales, cambio de contraseña, gestiones de convocatorias, 86

107 encuestas, preguntas, encuestados, plantillas, notificaciones, importaciones de datos, etc). Después de conocer la estructura y diseño de base de datos se pasa a explicar el diseño de la erfaz, prestando especial atención a la estructura de la plantilla base, el contenido de la hoja de estilos y la plantilla de comunicados Diseño de la Interfaz: Plantilla Base, Hoja de Estilos y Plantilla de Comunicados El proyecto se ha diseñado como un sitio web compuesto en su gran mayoría por formularios web (web forms). Los principios de usabilidad nos indican que todas las opciones de una web, entendiendo opción por pantalla, deben tener un aspecto similar y seguir una estructura consistente para evitar, en la medida de lo posible, que los usuarios se desorienten entre página y página. Es por ello que se ha decidido utilizar una plantilla base o página maestra (master page) que definirá la estructura que van a seguir todos los web forms que hereden de ella. A continuación se describirán los requisitos de la erfaz web y se mostrará cómo quedan reflejados en la estructuración de la master page. Todas las páginas deben contener una cabecera en la parte superior con el logotipo de la aplicación y el texto Generador de Encuestas. En esta misma cabecera, situado en la parte de la izquierda, debe situarse el componente de inicio de sesión, registro de usuarios y recuperación de contraseña. Hay que tener en cuenta que no todas las páginas llevarán incorporado este control. Bajo la cabecera debe aparecer la sección de migas (breadcrumb) indicando el lugar en que nos encontramos en cada momento. La parte central contendrá tanto el menú de navegación en la parte izquierda, como la zona de contenidos, ocupando el espacio más amplio de la erfaz. No todas las páginas contendrán menú. Las página iniciales, tanto de la parte de administración como de la parte de encuestados, no mostrarán el menú hasta que el gestor o encuestado se haya autenticado. En la parte inferior de todos los web forms debe aparecer el pie de página, con información de contacto. Una vez analizados los requisitos de la erfaz se comprueba que son necesarios dos niveles de master page. 87

108 Nivel 1: tendremos la página maestra base que incluirá la cabecera con una zona definida para la posible inclusión o no del control de inicio de sesión, la sección de migas y el pie de página. Estos elementos son comunes a todos los web forms del sitio web. Nivel 2: tendremos una segunda página maestra que heredará de la anterior, y que definirá la estructura de la zona central, añadiendo la zona en la que insertar el control de menú izquierda y la zona en la que añadir los contenidos. Para definir una zona dentro de una página maestra se utilizará el control denominado ContentPlaceHolder, que nos permite establecer un espacio que podrá personalizarse en cada web form. Utilizar dos niveles de página maestra en este caso nos aporta una ventaja añadida a los requisitos de erfaz inicialmente planteados. Al dejar sin definir la zona central en el nivel 1, podemos crear tantas páginas maestras de nivel 2 como posibles estructuras de información queramos tener. Por ejemplo, se podría definir otra master page de nivel 2 en la que el menú se sitúe en la parte derecha. En nuestro caso no es necesario puesto que todas las páginas seguirán la misma estructura y disposición de contenidos. Las siguientes imágenes son bocetos de ambos niveles de páginas maestras (Figura 5.32). Figura Prototipos de plantillas de nivel 1 y 2 A continuación se muestran varias capturas de pantalla realizadas desde diferentes ángulos con la extensión Awesome Screenshot de Mozilla Firefox. Se distinguen en diferentes colores la disposición de capas de la página de inicio de gestores (Figura 5.33) 88

109 Figura Vistas 3D generadas con Vista 3D de Mozilla Firefox La página maestra de nivel 1 incorpora una serie de elementos que se aplican en el resto de web forms que la utilizan: Control de activación de JavaScript: puesto que JavaScript debe estar habilitado en el navegador del usuario para que la aplicación web funcione correctamente, se hace necesaria dicha comprobación en todas las páginas. Es por ello que se ha añadido dicha comprobación en la página maestra de nivel 1. Consiste en colocar una etiqueta <noscript></noscript> con una redirección a una página de información (Figura 5.34): <noscript> <meta http-equiv="refresh" content="0; url=pagjavascript.aspx"> </noscript> Figura Código de comprobación de JavaScript activado 89

110 La página de información aparece cuando JavaScript está desactivado en el navegador y muestra el siguiente aviso (Figura 5.35): Figura 5.35 Aviso de JavaScript desactivado Google Analytics: puesto que Google ofrece una herramienta gratuita para registrar el tráfico de una aplicación web, se ha decidido crear una cuenta en Analytics. Tan sólo hay que copiar un código JavaScript proporcionado por Google al final de cada una de las páginas de la aplicación cuyo tráfico se desea registrar. En nuestro caso hemos situado dicho código en la página maestra de nivel 1, de esta forma se registrará el tráfico de todas las páginas y será suficiente con insertar el código una sola vez. Para permitir registrar el tráfico desde localhost fue necesaria la inserción de una instrucción específica. A continuación se muestra el código JavaScript con dicha instrucción subrayada (Figura 5.36): <script type="text/javascript"> (function (i, s, o, g, r, a, m) { i['googleanalyticsobject'] = r; i[r] = i[r] function () { (i[r].q = i[r].q []).push(arguments) }, i[r].l = 1 * new Date(); a = s.createelement(o), m = s.getelementsbytagname(o)[0]; a.async = 1; a.src = g; m.parentnode.insertbefore(a, m) })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga'); ga('create', 'UA ', 'auto'); ga('create', 'UA-XXXX-Y', { 'cookiedomain': 'none'}); // Para localhost ga('require', 'displayfeatures'); ga('require', 'linkid', 'linkid.js'); ga('send', 'pageview'); </script> Figura Código JavaScript de Google Analytics La Figura 5.37 muestra la opción Navegadores y SO de Google Analytics. Se puede comprobar que se ha registrado tráfico desde Chrome, Firefox e Internet Explorer. Se pueden obtener estadísticas aplicando una gran cantidad de filtros, 90

111 como por ejemplo la red utilizada, la zona geográfica de procedencia, el idioma, etc. Figura Interfaz de Google Analytics con estadísticas por Navegador y Sistema Operativo Una de las opciones más eresantes es la llamada Flujo de usuarios. Permite mostrar los principales caminos seguidos por los usuarios desde la primera iteración hasta la última. En la pantalla mostrada a continuación puede verse el flujo hasta la tercera iteración (Figura 5.38): Figura Interfaz de Google Analytics con estadísticas de flujo de usuarios 91

112 En cuanto a la organización de la hoja de estilos CSS, se sigue la misma estrategia que en la estructura de las plantillas. Los estilos se definen partiendo de lo más general a lo más específico: Etiquetas genéricas: los primeros estilos definidos van dirigidos a las etiquetas HTML más genéricas como son: HTML, BODY y FORM. En ellas se define el tamaño que tendrá la erfaz, los márgenes, la imagen sombreado de fondo y la tipografía: fuente, tamaño, color de letra por defecto, etc. Contenedor principal: define los estilos de la capa que agrupará al resto (cabecera, contenidos, pie, etc.) Cabecera: define los estilos de la capa cabecera. Incluye también los estilos de la capa contenedora del control de inicio de sesión. Miga: define los estilos de la capa breadcrumb. Contenedor central: define los estilos de la capa que agrupará al resto de capas de la zona central (menú izquierdo, contenidos, etc.). También define los estilos del menú izquierdo, y tres posibles estructuraciones de la zona de contenido central. Pie: define los estilos de la capa inferior del pie de página. Formcontainer: define los estilos de la capa que contiene controles de formulario. Es decir, todos los formularios siempre estarán dentro de una capa con este estilo. Gridcontainer: define los estilos de la capa que contiene estructuras de tipo tabla. Es decir, todas las tablas y componentes tipo GridView siempre se situarán dentro de una capa con este estilo. Comunes: se definen estilos genéricos utilizados comúnmente, como los empleados para generar los avisos. Encuesta: define estilos específicos empleados para dar formato a las encuestas. Ajax Toolkit: define estilos específicos de controles propios de Ajax Control Toolkit. La plantilla de comunicados ha sufrido varios cambios a lo largo del desarrollo de la aplicación hasta conseguir cuadrar todos los elementos. Se trata de una plantilla HTML con todas las etiquetas propias de una página web. El principal problema encontrado a la hora de diseñarla ha sido la elección de la estructura y la distribución de los estilos, debido a que no todos los proveedores de correo electrónico erpretan el código de igual forma y, dependiendo de dónde se visualizara, el comunicado tenía un aspecto u otro. Lo que se ha entado es mantener el formato lo más parecido posible, independientemente del proveedor de correo electrónico. Inicialmente se declararon todos los estilos dentro de la etiqueta de cabecera tal como se indica en la Figura 5.39, pero ningún proveedor parecía reconocerlo. 92

113 <head> <style type='text/css'>.negrita {font-weight:bold;} </style></head> Figura Código de formato CSS inicialmente utilizado en s También se entó aplicar estilos agrupados en etiquetas <div></div> pero tampoco funcionó. Finalmente se decidió crear una estructura de tabla en la que se maquetó la plantilla y se insertaron los estilos directamente en las etiquetas a las que aplicaba. De esta forma se consiguió que, como mínimo, GMail y Hotmail reconocieran la estructura y mostraran el comunicado tal y como se había diseñado. Por ejemplo, la etiqueta <body> de la plantilla queda tal como indica la Figura 5.40: <body style='color:#000; font-family: Verdana, Arial, sans-serif; font-size:12px; margin:0; padding:0;'> Figura Código de formato CSS definitivo utilizado en s Al trabajar desde localhost, también había un problema con las imágenes incluidas en el comunicado, ya que no llegaban a cargarse. Para solucionar este problema, se dio de alta una cuenta en Picasa 42 y se subieron las imágenes para poder enlazarlas directamente en el comunicado. Una vez explicados todos los conceptos relativos al diseño de la erfaz se procede a explicar cómo está estructurada la aplicación web, qué carpetas contiene, qué archivos especiales se utilizan, dónde se almacenan los diferentes recursos multimedia, etc Estructura de la Aplicación Cualquier sitio web se compone de una gran cantidad de elementos: imágenes, formularios, archivos de configuración, hojas de estilos, mapa del sitio, librerías, componentes y un largo etcétera. No existen unas normas predefinidas sobre dónde se debe ubicar cada archivo. En ocasiones, la elección es poco flexible pues viene dada por el propio sistema y las características de la aplicación desarrollada. Pero no siempre es así y da al programador cierta libertad para alojar los recursos. En.NET existen determinados directorios predefinidos en los que deben almacenar los archivos de un determinado tipo o naturaleza. Por ejemplo, existe el directorio App_Code, que suele incluir los archivos.cs, el directorio Bin incluye las librerías.dll, el directorio App_Data, que almacena archivos de base de datos, el directorio App_WebReferences, que almacena las referencias a servicios web, etc. 42 Más información sobre Picasa: 93

114 A continuación se explica la organización de los múltiples archivos que componen el sitio web desarrollado. Por una parte tenemos la carpeta ADM, que contiene todos los formularios que implementan las distas opciones de la parte de administración. El resto de carpetas y archivos se utilizan, o bien en la parte de encuestados, o bien son comunes a ambas (Figura 5.41) Figura Estructura general del sitio web y del apartado ADM ADM: carpeta que contiene todos los archivos utilizados en la parte de administración: formularios, controles de usuario, componentes, etc. Se han añadido un prefijo identificativo del bloque al que pertenece cada formulario: inf_ para los informes, mtto_ para los mantenimientos y not_ para las notificaciones. App_Code: carpeta que contiene los archivos.cs, utilizados para definir las entidades, las operaciones con entidades y otras operaciones comunes como pueden ser las funciones de log de aciertos y errores, las funciones de envío de comunicados a gestores y encuestados, etc. App_Comun: esta carpeta no es predefinida de.net. Se ha añadido como un nuevo elemento, siguiendo la misma nomenclatura App_nombre. En ella se almacenan todos los elementos comunes que utilizan los distos web forms. o Carrusel: contiene todas las imágenes, java scripts y hojas de estilos necesarias para implementar el carrusel de la página de inicio del apartado de encuestados. 94

115 o Cmp: esta carpeta contiene todos los controles de usuario (user controls), como pueden ser los diferentes menús izquierdos, el control de inicio de sesión, el control que contiene la información del pie de página y el más importante de todos, el control que genera una encuesta a partir de su identificador. o Css: esta carpeta contiene las hojas de estilos de la aplicación. En este caso sólo hay una llamada estilos.css. o Img: esta carpeta contiene todas las imágenes empleadas en los diferentes formularios. o Recursos: esta carpeta contiene varias subcarpetas. Docs: almacena los recursos que se pueden descargar en las cargas masivas de encuestas y la carga de resultados de encuestas. Logos: almacena los logotipos de las encuestas en subcarpetas, cuyo nombre coincide con el identificador de la propia encuesta. Multimedia: almacena todos los recursos multimedia asociados a preguntas en subcarpetas, cuyo nombre coincide con el identificador de la propia pregunta. Tmp: se trata de una carpeta temporal sin contenido y con privilegios especiales de escritura para el usuario que ejecuta la aplicación en el IIS. Es utilizada para cargar temporalmente las plantillas Excel que suben los gestores. Una vez se ha realizado la carga de datos de estas plantillas, se eliminan de la carpeta. Bin: esta carpeta almacena las librerías.dll utilizadas en la aplicación. o AjaxControlToolkit: utilizada para implementar controles y extensores con funciones avanzadas. o CKEditor: utilizada para implementar un editor de texto WYSIWYG. o EPPlus: utilizada para generar archivos Excel. o ITextSharp: utilizada para genera archivos PDF. o Recatpcha: utilizada para implementar el control captcha. Web forms: son todos los archivos con extensión.aspx. Los formularios se han diseñado utilizando la propiedad code behind, que separa el diseño y la lógica del formulario, situando ésta última en un archivo independiente con extensión.aspx.cs. Packages.config: archivo de configuración propio del administrador de paquetes NuGet. Almacena las referencias de aquellas librerías descargadas desde el propio administrador. Plantilla_base.master: es la página maestra de nivel 1, en la que se define toda la estructura que contendrán los web forms o las plantillas de nivel 2 que la utilicen. 95

116 Plantilla_mod1.master: es la página maestra de nivel 2 que utiliza plantilla_base como página maestra a la vez. Define el contenido central como una agrupación de menú izquierdo más contenido. También hay otro documento Plantilla_mod2.master, que define otra estructura para la zona central, situando el menú a la derecha, aunque no se ha llegado a utilizar en el proyecto. Web.config 43 : es el archivo de configuración del sitio web, con formato XML. Contiene todas las constantes, cadenas de conexión y opciones de configuración. En el siguiente apartado, se detalla cada una de las etiquetas utilizadas. Web.sitemap: es el archivo en formato XML que almacena el mapa del sitio web. El componente de migas hace uso del control SiteMapPath para leer el archivo XML y obtener el lugar en el que nos encontramos dentro de la aplicación en cada momento. En la Figura 5.42 se muestra una versión reducida del mapa del web.sitemap del sitio web. En la primera línea se especifica la versión del archivo y el tipo de codificación. La siguiente sentencia indica el espacio de nombres del documento. El resto de sentencias corresponden con los diferentes web forms de los que consta la aplicación. Se puede apreciar que, para crear subniveles, se deben anidar nodos <sitemapnode>. <?xml version="1.0" encoding="utf-8"?> <sitemap xmlns="http://schemas.microsoft.com/aspnet/sitemap-file-1.0" > <sitemapnode url="~/" title="encuestas" description="encuestas" > <sitemapnode url="index.aspx" title="inicio" description="inicio" /> <sitemapnode url="encuesta.aspx" title="encuesta" description="encuesta" /> <sitemapnode url="misencuestas.aspx" title="mis encuestas" description="mis encuestas" /> <sitemapnode url="micuenta.aspx" title="mi cuenta" description="mi cuenta" /> <sitemapnode url="adm/" title="gestores" description="gestores" > <sitemapnode url="adm/micuenta.aspx" title="mi cuenta" description="mi cuenta" /> <sitemapnode url="adm/registro.aspx" title="alta de gestor" description="alta de gestor" /> <sitemapnode url="adm/index.aspx" title="inicio" description="inicio" /> </sitemapnode> </sitemapnode> </sitemap> Figura Código reducido del site.map de la aplicación Una vez conocida la organización de archivos y carpetas de la aplicación, se procede a detallar el trabajo realizado en cada uno de los incrementos en que se divide la fase de implementación. 43 Web.config: en la siguiente URL se pueden encontrar todas las opciones de configuración de este tipo de archivos: 96

117 5.3. Implementación En esta fase se procede a dividir la implementación de la aplicación en varios incrementos. Inicialmente se consideran tres. Tras una posterior revisión, se añade un cuarto incremento: Incremento 1: implementación del diseño de encuestas y acceso de gestores. Conlleva el desarrollo de las gestiones de convocatorias, encuestas, preguntas, listas y Likerts y, en último lugar, la gestión de encuestados y envío de comunicados. También se implementará la creación de cuentas de gestor y el control de acceso y recuperación de credenciales. Cada una de estas gestiones se traduce en un web form que se apoyará en los requisitos de la fase 1 y en los diseños de la fase 2. Incremento 2: implementación del componente encuesta y acceso de encuestados. En este segunda incremento se procederá a generar el componente que carga una encuesta, a partir de su identificador, con toda la lógica necesaria para permitir almacenar los resultados insertados por los encuestados. Por otra parte, también se implementará la recuperación de credenciales de los encuestados y el control de acceso. Al igual que el incremento 1, ésta también se apoyará en los requisitos de la fase 1 y en los diseños de la fase 2. Incremento 3: generación de informes y descarga de resultados. En este tercer incremento se procederá a implementar los web forms necesarios para descargar los resultados de las encuestas en varios formatos. También se hará uso de las medidas descriptivas básicas y de los conceptos estudiados en psicometría para la generación de informes y gráficos. Incremento 4: importación de resultados de encuestas en Excel. Este último incremento surge por la necesidad de generar informes directamente de resultados de test ya obtenidos por otros medios, sin la necesidad de que hayan sido cumplimentados a través de esta aplicación. Para ello se diseñará un documento Excel que deberá ser rellenado por los gestores y cargado directamente en la opción de importación. Con estos datos importados se podrán generar los mismos informes que para el resto de encuestas generadas desde la aplicación. A continuación se describirá más detalladamente cómo se han implementado las características de cada uno de los incrementos, indicando qué componentes y librerías se han utilizado y de qué manera. También se describirán los problemas encontrados y cómo se les ha dado una solución, siempre que ha sido posible. 97

118 Incremento 1 Antes de comenzar a implementar los distos web forms de este incremento, se han generado los dos niveles de páginas maestras que componen la estructura básica, a partir de la cual se empiezan a ubicar todos los componentes y se implementan los comportamientos y la lógica de negocio. En cada uno de los incrementos se mostrará el prototipo de baja fidelidad o boceto de erfaz de usuario que permite acceder a las principales funcionalidades implementadas en dicho incremento. Tal y como se ha indicado con anterioridad MPIu+a propone el empleo de esta técnica de prototipado en las primeras etapas de desarrollo de las aplicaciones eractivas. La Figura 5.43 muestra el prototipo inicial de baja fidelidad de la página de inicio de la sección de gestores diseñado con Balsamiq Mockups. En la Figura 5.44 se muestra el resultado final. En el diseño final se aprecia cómo se ha seguido la misma estructura que en el boceto, aumentando el nivel de detalle en el componente de inicio de sesión, en la barra de migas, en la parte central y en el pie de página. Figura Prototipo inicial de la página principal de gestores 98

119 Figura Aspecto final de la página principal de gestores Creación de cuentas de gestores, inicio de sesión y recuperación de credenciales Tal como ya se explicó en el apartado de seguridad de la fase de especificación y análisis de requisitos, todos los formularios que no requieran autenticación para ser completados, son susceptibles de posibles ataques por robots. Tal es el caso de los formularios de alta de gestor y de recuperación de credenciales de gestor. Para evitarlo se ha hecho uso del captcha ofrecido por Google, llamado recaptcha. Su funcionamiento consiste básicamente en mostrar una imagen, en la que pueden aparecer letras y/o números, pidiendo al usuario que reproduzca dicho contenido con un alto grado de acierto. Tiene la posibilidad de generar una nueva imagen si la mostrada inicialmente no es suficientemente legible, e incluso permite generar un archivo de audio con el contenido a insertar. Otro problema de seguridad está relacionado con el cifrado de contraseñas. No es recomendable almacenarlas en base de datos sin cifrar, porque estaríamos facilitando información muy sensible no sólo a posibles hackers, sino a todo aquel que tenga acceso a la base de datos. Por lo tanto se hará uso del algoritmo MD5 de encriptación a partir de los métodos de las clases del espacio de nombres System.Security.Cryptography. Este algoritmo utiliza una clave de encriptación que se almacenará como una AppSetting dentro del web.config. El diseño del formulario y el proceso de alta un gestor es muy similar al empleado en la gestión de credenciales de la UCLM (Figura 5.45). 99

120 Figura Interfaz de gestión de credenciales de la UCLM 44 Se establecen unos requisitos mínimos de clave (Figura 5.46) muy similares a los de la UCLM y se ofrecen unas recomendaciones al usuario para que escoja una contraseña lo más segura posible. Se utiliza el componente PasswordStrength de AjaxControlToolkit para mostrar al usuario cómo de segura es la contraseña, a medida que la va escribiendo, haciendo para ello uso de una serie de imágenes de colores y textos descriptivos. Figura Requisitos mínimos de clave y fortaleza de contraseña 44 Interfaz de gestión de credenciales de la UCLM: https://mis.tic.uclm.es/credenciales/ 100

121 En la comprobación de requisitos mínimos de contraseña se utiliza un validador de campo de expresiones regulares, mediante la expresión de la Figura 5.47: ValidationExpression="(?=^.{8,}$)(?=.*\d)(?![.\n])(?=.*[A-Z])(?=.*[a-z]).*$" Figura Expresión regular para comprobar la validez de clave En cuanto al proceso de inicio de sesión, siguiendo también unas restricciones similares a las de la web de la UCLM, y por razones de seguridad, se limita el número de entos fallidos a diez por día y usuario. La recuperación de credenciales también se limitará a cinco por día y usuario. El inicio de sesión o autenticación, consiste básicamente en comprobar que el usuario y clave de gestor coinciden. A continuación se creará una variable de sesión con todos los datos necesarios para eractuar con la aplicación. Si la sesión expira, la aplicación redirigirá automáticamente a la página de inicio, ya que en todos los formularios se comprueba que existe usuario autenticado. El proceso de recuperación de credenciales es muy sencillo. Una vez el gestor ha validado el captcha, sólo tendrá que insertar, o bien su usuario, o bien su (pues ambos son únicos en la aplicación). Si el usuario o el existen, se envía un correo electrónico a la cuenta del gestor indicando sus credenciales correctas. El perfil gestor también tiene la opción de cambiar los datos asociados a su cuenta en cualquier momento, con las mismas restricciones que se han implementado en el alta de gestores. La Figura 5.48 muestra un ejemplo de de recuperación de credenciales. Figura de recuperación de credenciales de gestor 101

122 Gestión de convocatorias En este apartado se implementan las opciones de alta, modificación y eliminación de encuestas de gestores. Es destacable la utilización del componente ModalPopUpExtender de AjaxControlToolkit para implementar las ventanas modales que se utilizarán a lo largo de toda la aplicación. También se hace uso de los componentes necesarios para mostrar un calendario en los campos de fecha y controlar el patrón DD/MM/YYY mediante los controles CalendarExtender, MaskedEditExtender y MaskedEditValidator. En la Figura 5.49 se muestra el boceto inicial y en la Figura 5.50 la erfaz de usuario final que da soporte a la gestión de convocatorias. El diseño final incluye todas las opciones de menús definitivas. La tabla que muestra las convocatorias disponibles para el gestor autenticado, incluye los botones de edición y eliminación. Al igual que en el caso anterior, los componentes de inicio de sesión, barra de migas y pie tienen mayor nivel de detalle en la versión final. Figura Prototipo inicial de la gestión de convocatorias 102

123 Figura Aspecto final de la gestión de convocatorias Gestión de encuestas Se trata del formulario más complejo de este primer incremento debido a la gran cantidad de información con la que se trabaja. Desde este apartado se puede, tanto diseñar una encuesta desde cero, como crear una nueva encuesta a partir de una de las plantillas preestablecidas. La creación de una encuesta a partir de plantilla es muy sencilla. Tan sólo hay que elegir la convocatoria donde se creará y qué plantilla se quiere replicar. Una vez creada se pueden modificar determinados campos, pero queda deshabilitada la edición de módulos y preguntas. La creación de una encuesta a partir de cero se divide en tres fases secuenciales: inserción de datos básicos, personalización de encuesta e inserción de módulos y preguntas. Las Figuras 5.51 y 5.52 muestran el prototipo inicial y resultado final de la primera fase de creación de encuesta llamada Datos básicos. Las Figuras 5.53 y 5.54 muestran el prototipo inicial y resultado final de la segunda fase llamada Personalización. Por último, las Figuras 5.55 y 5.56 muestran los prototipos y resultado final de la fase tercera Módulos y preguntas. En el diseño final de la primera fase se aprecian varios cambios con respecto a su boceto. Se incluye el campo convocatoria y las fechas de inicio y fin quedan ocultas en un panel que sólo se muestra si se marca el check de periodo. 103

124 Figura Prototipo inicial de la primera fase de creación de encuestas Figura Aspecto final de la primera fase de creación de encuestas En el diseño final de la segunda fase se aprecian aún más cambios que en la fase de datos básicos. Por ejemplo, se incluyen dos Radio Button para indicar si la encuesta tendrá página de inicio y de fin. El campo de tiempo máximo se divide en tres desplegables 104

125 para seleccionar el número de horas, minutos y segundos. Para el caso de las encuestas de tipo test, también aparece un campo adicional indicando si se permite que los encuestados vean la calificación obtenida. Figura Prototipo inicial de la segunda fase de creación de encuestas Figura Aspecto final de la segunda fase de creación de encuestas 105

126 El diseño final de la tercera fase es el que más difiere de su boceto original. Inicialmente se planteó insertar sólo módulos y, una vez seleccionado un módulo, insertar las preguntas asociadas al mismo. Finalmente se decidió permitir insertar módulos o preguntas indistamente. A la hora de insertar una pregunta se debe seleccionar el módulo al que pertenece y en qué orden aparecerá dentro de ese módulo. Figura Prototipo inicial de la tercera fase de creación de encuestas Figura Aspecto final de la tercera fase de creación de encuestas 106

127 En la segunda fase se utiliza un control de AjaxControlToolkit llamado NumericUpDownExtender para imitar el comportamiento de un Spinner. También se hace uso de la librería CKEditor para implementar un editor de texto online en los campos de edición de página inicial y final de encuesta. También es destacable la utilización de las clases del espacio de nombres System.Drawing para redimensionar el logotipo de la encuesta a unas medidas preestablecidas en el web.config de 150 x 780px. Los logotipos de cada encuesta se almacenan en una carpeta con el identificador de la encuesta al que pertenecen y con un identificador de tipo uniqueidentifier (Figura 5.57). Se hace uso del método Server.MapPath del espacio de nombre System.Web.HttpServerUtility para especificar la ruta exacta de la carpeta contenedora de logotipos. Ej: /App_Comun/recursos/logos/1/ 0b96118b-8e49-45ad-98a b49.jpeg Figura Ejemplo de ruta de almacenamiento de logos de encuestas En la tercera fase es destacable la forma en que se ha implementado la asociación de preguntas a los módulos de la encuesta. Se puede tanto asociar preguntas ya prediseñadas por el gestor, como crearlas en el mismo momento de asociarlas al módulo. Para ello hay que establecer un modo de comunicación entre este formulario de gestión de encuestas y el formulario de gestión de preguntas. El método elegido ha consistido en la utilización de variables de sesión. El pulsar el botón de creación de nueva pregunta desde el formulario de gestión de encuestas, se crea una variable de sesión y se llama al formulario de gestión de preguntas. Este último comprueba si existe la variable de sesión. En caso de existir se retorna al formulario de gestión de encuestas tras crear la pregunta, mediante otra variable de sesión. A continuación se procederá a la reconstrucción de los pasos previos a la pulsación del botón de creación de pregunta. La Figura 5.58 muestra un resumen de estos pasos. Figura Comunicación entre los formularios de gestión de encuestas y de preguntas 107

128 Las Figuras 5.59 y 5.60 muestran el boceto y el resultado final de las ventanas modales de inserción de módulos y preguntas. Las ventanas modales para insertar módulos y preguntas también han sufrido algunos cambios. La de inserción de módulos es prácticamente idéntica. La de inserción de preguntas elimina el campo de respuesta, ya que la respuesta correcta ya vendrá definida entre los posibles ítems de una lista de elementos. El campo tiempo tampoco tiene sentido a este nivel, ya que se define en la fase dos de la convocatoria. Se añade un campo adicional llamado NS/NC que indica si debe aparecer esa opción entre los posibles valores que puede tomar la respuesta de una pregunta (salvo para las de tipo texto o tipo numérico). Figura Prototipos de ventanas modales de inserción de módulos y preguntas Figura Aspecto final de ventanas modales de inserción de módulos y preguntas 108

129 Gestión de preguntas En este apartado se gestionan las preguntas de los gestores: inserción, modificación y eliminación. Se han añadido una serie de recomendaciones, tanto a la hora de creación de preguntas, como a la hora de insertar la descripción de los recursos multimedia asociados a éstas. En la Figura 5.61 se muestra el resultado final de la erfaz de inserción de preguntas. Figura Aspecto final de gestión de preguntas La Figura 5.62 muestra la ventana que contiene todos los checklist con las recomendaciones de creación de preguntas. Se puede acceder a ella pulsando el enlace Recomendaciones de la pantalla de creación/edición de pregunta. En los Anexos D, E y F se listan todos los checklist, divididos por secciones, entre las que se encuentran recomendaciones sobre el contenido de la pregunta, el formato de éstas, la elección de distractores y respuesta correcta, etc. 109

130 Figura Ventana de checklist de creación de preguntas Es destacable, para el caso de creación de preguntas de tipo Lista de elementos la necesidad de utilizar una variable de sesión que almacene en una lista tipada (List<Item>) los diferentes ítems si se desea que la inserción de la pregunta se haga en un sólo paso. De no hacerlo de así, habría que insertar primero la pregunta, recoger su identificador y posteriormente especificar los elementos que la van a componer. En este apartado también se realiza la subida de los recursos multimedia. Los recursos de tipo imagen son redimensionados con un alto y ancho preestablecido en el web.config de 400 x 500px. Se almacenan en una carpeta con el identificador de la pregunta y un uniqueidentifier (Figura 5.63) por nombre seguido de su extensión, según corresponda. También se hace uso del método Server.MapPath del espacio de nombre System.Web.HttpServerUtility para especificar la ruta exacta de la carpeta contenedora de recursos multimedia. Ej: /App_Comun/recursos/multimedia/53/8a55025a-fd9d-43a2-b503-9ed1dd90a4a2.wmv Figura Ejemplo de ruta de almacenamiento de recurso multimedia 110

131 Gestión de listas y Likerts Este apartado permite gestionar las listas y los Likerts empleados en las preguntas de tipo Lista de elementos y Escala de Likert respectivamente. En la Figura 5.64 se muestra el aspecto de la gestión de estos elementos. Figura Aspecto final del apartado gestión de listas y Likerts No se pueden crear directamente listas o Likerts, pues siempre van asociadas a alguna pregunta. Aquí sólo se muestra un repositorio de los elementos existentes de preguntas ya creadas. Se permite editar algunos campos como las descripciones y sólo se pueden eliminar aquellos elementos que no se utilicen en ninguna pregunta. En las Figuras 5.65 y 5.66 se muestran las ventanas modales utilizadas para actualizar los campos permitidos de listas y Likerts respectivamente. Figura Ventana modal de edición de lista 111

132 Figura Ventana modal de edición de escala de Likert Gestión de encuestados En la Figura 5.67 se muestra el aspecto final de la erfaz de usuario que permite acceder a la funcionalidad de gestión de encuestados. Figura Aspecto final del apartado gestión de encuestados 112

133 Desde este apartado se harán las cargas de encuestados para cada una de las encuestas de los gestores. Se pueden hacer cargas tanto de un único encuestado, como cargas masivas en dos tipos de formatos: insertando todos los s separados por punto y coma ; o cargando una plantilla Excel con todos los s de encuestados. La subida de este Excel implica cargar en una carpeta temporal el archivo para poder leer su contenido. Una vez leído y cargados los encuestados, dicho archivo se elimina. En cualquiera de las tres modalidades de inserción de encuestados se utiliza una expresión regular para comprobar si el es sácticamente correcto. La expresión utilizada se muestra en la Figura Figura Código de expresión regular para validar un Desde este apartado se podrán enviar invitaciones de forma individual o de forma masiva a los encuestados insertados previamente. Al seleccionar una encuesta, se muestran todos los encuestados asociados y se ofrece información sobre si se ha enviado o no la invitación, qué porcentaje de la encuesta han cubierto, cuánto tiempo han tardado en completarla y cuántos accesos han necesitado. Figura (a) Estadísticas de encuesta; (b) Histórico de encuestado; (c) Ejemplo de log de accesos 113

134 Desde este apartado también se pueden ver estadísticas tanto a nivel de encuestado como a nivel de encuesta (Figura 5.69). Si se selecciona un encuestado, se muestra una ventana modal con el histórico de todas las encuestas a las que ha sido invitado por el gestor. Si se selecciona una encuesta se pueden obtener estadísticas sobre invitaciones enviadas y resumen de porcentajes completados por los encuestados. Tanto las cargas masivas de encuestados como el envío de invitaciones pueden ser procesos pesados. Es por ello que se ha implementado una ventana modal para indicar al gestor que el proceso se está ejecutando y que al finalizar se mostrará un resumen con las operaciones realizadas. Con ello se consigue dar feedback al gestor sobre lo que está ocurriendo. Para implementar estas ventanas modales se ha añadido una función JavaScript dentro del contenido de las etiquetas <head></head> de la master page llamada ShowProgress(). Se añade a la master page para que sea accesible desde todos los formularios. Los botones que realizan cargas o envíos masivos tendrán dos atributos OnClick, uno que llama a la función ShowProgress() para mostrar la ventana modal En proceso y otro que llama al método que realizará la carga y que produce la llamada al servidor (postback). Mientras el servidor trabaja en la petición enviada desde el cliente web, se muestra la ventana modal (Figura 5.70). Una vez terminado el trabajo, el servidor enviará al cliente la respuesta y la ventana modal dará paso a otra en la que aparecerá el resumen del proceso. Figura Ventana modal en procesos de cargas o envíos masivos Gestión de notificaciones o comunicados Esta gestión se ha dividido en tres apartados: gestión de plantillas de comunicados, envíos masivos y consulta del histórico de envíos realizados. Se han definido una serie de plantillas base para los diferentes comunicados que puede enviar un gestor: invitación inicial a encuesta, aviso de cuestionario no completado y aviso de fin de plazo de entrega del cuestionario. Las plantillas se utilizan para mostrar un texto inicial a la hora de definir un comunicado. Un gestor puede decidir si utilizar dicho texto o modificarlo a conveniencia. 114

135 El gestor de plantillas (Figura 5.72) ofrece la posibilidad de visualizar una versión previa del comunicado. Dicha vista previa reemplaza los valores de los campos clave codificados utilizados en el texto por unos valores de prueba. Para la edición del texto se ha implementado un CKEditor, al igual que en las páginas de inicio y fin de encuesta. El gestor tiene la opción de visualizar qué campos clave (Figura 5.71) puede utilizar en el texto de cada uno de los comunicados. Figura Ejemplo de campos clave codificados de un comunicado Figura Aspecto final de la gestión de plantillas 115

136 El formulario de envío masivo de comunicados permite seleccionar una encuesta y un tipo de notificación. En caso de haber sido lanzado previamente, aparecerá un cuadro resumen de cada uno de los lanzamientos previos (Figura 5.73). Figura Aspecto final del apartado envío de notificaciones La opción de consulta del histórico de comunicados (Figura 5.74) permite realizar búsquedas filtrando por periodo, convocatoria, encuesta, tipo de notificación y destinatario. En los resultados obtenidos se informa sobre la fecha del envío, el destinatario, el tipo de notificación, si fue correcto o no y se habilita un enlace para ver la notificación enviada. Figura Aspecto final de la consulta de histórico de notificaciones 116

137 Como es posible que estas notificaciones incorporen enlaces de invitación a encuestas se ha decidido deshabilitar todo el contenido de los s enviados. Para ello se ha utilizado una capa superpuesta con una imagen transparente de fondo. De esta forma se permite visualizar el contenido del comunicado, pero no se permite pulsar ninguno de los enlaces (Figura 5.75). <div id="plantilla"> <div class="mensaje"> <div class="filtro"> </div> <div class="texto"> <asp:literal ID="lt_mensaje" unat="server"></asp:literal> </div> </div> </div> #plantilla.mensaje { margin:0 auto; width:650px; } #plantilla.mensaje.filtro { background-image: url("../img/transparent.gif"); background-repeat: repeat; height:100%; position:absolute; width: 100%; z- index:20; } #plantilla.mensaje.texto { z-index:10; } Figura Código para deshabilitar enlaces de un Para el envío de notificaciones es necesario un cliente de correo SMTP. En un principio se utilizaron los servicios de AcumbaMail 45, a través de la cuenta gratuita que ofrecen limitada en 2000 correos/mes. Las pruebas realizadas eran bastante lentas y los comunicados tardaban en llegar entre 5 y 10 minutos. Además, en un determinado momento el servicio dejó de funcionar, y aunque se procedió a ponerse en contacto con el servicio técnico, no se recibió respuesta alguna, por lo que se buscó otra alternativa. Finalmente se escogió utilizar el cliente SMTP gratuito ofrecido por Google. Tan sólo es necesario tener una cuenta registrada en GMail y configurar el puerto y el host. Para este caso se deben utilizan las credenciales de la cuenta de GMail, con el puerto 587 y el host smtp.gmail.com. Pero como toda cuenta gratuita, ésta también tiene unos límites de envío por día para evitar la creación de cuentas de spammers. Por lo que es útil para hacer pruebas y comprobar que el sistema funciona correctamente, pero sería necesario contratar una cuenta menos restrictiva en el caso de tener que hacer envíos masivos a una gran cantidad de destinatarios. Tras explicar aquellas partes de la aplicación desarrolladas en el incremento 1, se procede a detallar el trabajo realizado en el incremento 2, centrado básicamente en la sección de encuestado y cumplimentación de encuestas. 45 Más información sobre AcumbaMail: https://acumbamail.com 117

138 Incremento 2 En este incremento se implementan las funcionalidades de la parte de encuestados: el control de acceso, así como la modificación del asociado a su cuenta y la recuperación de credenciales. También se implementa el componente que genera la encuesta. Gestión de cuentas de encuestados, inicio de sesión y recuperación de credenciales Tanto el inicio de sesión de encuestados como la recuperación de credenciales siguen el mismo patrón utilizado para los gestores. La única diferencia está en las tablas consultadas para comprobar las credenciales, bien dbo.encuestados o bien dbo.gestores. Para los encuestados también se limita el número de inicios de sesión fallidos a diez por día y la posibilidad de obtener como máximo cinco veces la comunicación de recuperación de credenciales por día. Para ésta última, sólo se podrán obtener las credenciales a partir del , puesto que los encuestados carecen de usuario. Un encuestado no podrá crearse una cuenta. Sólo podrá acceder a la aplicación una vez haya recibido alguna invitación, para lo que es necesario previamente que el gestor lo haya dado de alta a través de la gestión de encuestados. En la página inicial se ha implementado un carrusel de imágenes con uno de los múltiples componentes ofrecidos por JSSOR Slider 46. En su página web se pueden encontrar un gran número de diseños muy personalizables así como las instrucciones paso a paso para implementar el carrusel. Todos los archivos necesarios se ubican en la carpeta App_Comun/carrusel/. En la página maestra se encuentran todas las funciones JQuery y la importación de archivos JavaScript necesarios. En la página de inicio, en la que se muestra el carrusel, se definen los elementos HTML y las rutas de las imágenes que se van a mostrar. Componente generador de encuesta Las Figuras 5.76 y 5.77 muestran el prototipo inicial y el resultado final del componente encuesta. Pese a que algunos componentes se han cambiado de lugar y se ha reajustado su tamaño, el diseño final presenta un aspecto muy similar al del boceto original. 46 Más información sobre JSSOR Slider: 118

139 Figura Prototipo inicial del componente encuesta Figura Aspecto final del componente encuesta 119

140 Se trata del componente más complejo desarrollado en la aplicación debido a todas las funciones que debe soportar. Se ha implementado como un componente, puesto que se utilizará no sólo en la parte de encuestados, sino también en la gestión de encuestas (para mostrar una vista previa del diseño, tal como la vería el encuestado). A partir de un identificador de encuesta y un identificador de encuestado, se obtienen los módulos y las preguntas almacenados en base de datos y se generan los controles HTML en tiempo de ejecución para permitir que el encuestado pueda cumplimentarla. Un paso previo a la generación de la encuesta consiste en comprobar si el encuestado ya ha contestado a alguna pregunta, para iniciar la encuesta desde el módulo siguiente al último completado. También se controla el número de módulo que se muestra en cada pantalla y que viene definido por el gestor en la tabla de encuestas. El encuestado tiene la opción de realizar diferentes acciones sobre la encuesta (Figura 5.78): Figura Controles disponibles en las encuestas Aumentar o reducir el tamaño de letra: mediante una variable de sesión se indica el tamaño actual con el que debe cargarse la encuesta. Pulsando los botones, se aumenta o disminuye este tamaño y se recargan los módulos y preguntas. Cambiar el contraste: el funcionamiento es similar a la opción anterior. Mediante un par de botones, se permite al encuestado cambiar el contraste a escala de grises o volver al modo en color. Estos botones modifican una variable de sesión que indica el modo en que debe mostrarse la encuesta. Al hacer la recarga, todos los elementos de la encuesta aplican unos estilos u otros, dependiendo del valor de esta variable. Para convertir el logotipo de la encuesta a escala de grises (Figura 5.79), se le aplica un estilo CSS con instrucciones personalizadas para cada tipo de navegador y versión. Uno de los problemas que existe a la hora de trabajar con las hojas de estilo CSS, es que cada navegador erpreta las instrucciones de una manera. Hay que buscar mecanismos que consigan unificar criterios para que el aspecto buscado sea el mismo, independientemente del navegador utilizado. Esto no resulta siempre sencillo, siendo necesario en ocasiones buscar otras alternativas al CSS. 120

141 #encuesta img._contraste { filter: url('#grayscale'); /* Versión SVG para IE10, Chrome 17, FF3.5, Safari 5.2 and Opera 11.6 */ -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ ios */ -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); /* Para cuando es estándar funcione en todos */ filter: Gray(); /* IE4-8 and 9 */ filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><fecolormatrix type=\'matrix\' values=\' \'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */ filter: gray; /* IE6-9 */ } Figura Código CSS para convertir una imagen a escala de grises Tanto la opción aumentar/reducir el tamaño de la letra como la opción de aumentar/reducir contraste se han implementado para conseguir que la aplicación sea más accesible. En las Figuras 5.80 y 5.81 se puede apreciar el cambio en la erfaz tras pulsar el botón de aumentar contraste. Los enlaces, las imágenes y los textos se convierten a escala de grises. Figura Ejemplo de encuesta con contraste reducido 121

142 Figura Ejemplo de encuesta con contraste aumentado Pausar: se le ofrece al usuario la posibilidad de pausar la encuesta y reanudarla más adelante. Se trata de un botón que oculta el panel de módulos y preguntas y muestra otro panel con un mensaje. El componente de encuestas también debe soportar la opción de controlar la cumplimentación de una encuesta en un determinado tiempo, si el gestor así lo ha decidido. Implementar un contador de tiempo en web conlleva un trabajo extra. En.NET existe el componente Timer mediante el que se debe definir un ervalo de tiempo sobre el que queremos que se realice una determina acción. El principal problema es que cada vez que se cumple el ervalo, se realiza un postback y un refresco de pantalla. Para un contador de tiempo que debe realizar una cuenta atrás en segundos, esta solución no es útil, puesto que cada segundo se realizaría un refresco de pantalla y el encuestado no podría responder las preguntas. Para solucionarlo se han utilizado los controles UpdatePanel y AsyncPostBackTrigger para implementar una cuenta atrás asíncrona, evitando de este modo los incómodos refrescos de pantalla. El control UpdatePanel incorpora una etiqueta <Triggers></Triggers> dentro de la cual se inserta el control AsyncPostBackTrigger, que lanza de forma asíncrona la llamada al evento del Timer cada vez que se cumple el ervalo. En la etiqueta ContentTemplate se define una Label cuyo valor se actualizará con cada llamada al evento. En la Figura 5.82 se muestra un resumen de los componentes empleados. 122

143 <div class="cronometro"> <asp:label ID="lb_tiempo" runat="server" Text="" Visible="false"></asp:Label> <asp:timer ID="timer_cronometro" runat="server" Interval="1000" ontick="timer_cronometro_tick" Enabled="False" /> <asp:updatepanel ID="upanel_cronometro" runat="server" UpdateMode="Conditional"> <Triggers> <asp:asyncpostbacktrigger ControlID="timer_cronometro" EventName="Tick" /> </Triggers> <ContentTemplate> <img src="./app_comun/img/clock.png" alt="tiempo" title="tiempo" class="imgalineada"/> <asp:label ID="lb_cronometro" runat="server">--:--:--</asp:label> </ContentTemplate> </asp:updatepanel> </div> Figura Código para implementar una cuenta atrás en.net El encuestado también debe saber en cada momento el porcentaje de encuesta completado. Para ello se utiliza una función que calcula el número de elementos contestados y muestra el porcentaje en una barra mediante estilos CSS. Debido a que algunos módulos pueden contener un elevado número de preguntas obligatorias es posible que el encuestado se salte alguna en el momento de cumplimentar la encuesta. Se ha utilizado un validador especial llamado ValidationSummary que muestra un resumen del resto de validadores cuando el encuestado pulsa el botón de insertar las respuestas (Figura 5.83). Figura Ejemplo de resumen de validación de encuesta Tras la explicación del incremento 2, se procede a detallar las nuevas funcionalidades desarrolladas en el incremento 3, prestando especial atención a la generación de informes estadísticos. 123

144 Incremento 3 En este incremento se desarrollan los web forms empleados para descargar las respuestas de encuestas en diversos formatos, así como la generación de informes de resultados con gráficos descriptivos. Descarga de resultados de encuestas La descarga de resultados de encuestas (Figura 5.84) se ha planteado en los formatos más comúnmente utilizados, como son: HTML, PDF, DOC, XLS y CSV. En el caso de los test, también se habilita una opción adicional para descargar las calificaciones obtenidas en los mismos formatos. Figura Aspecto final de la descarga de respuestas HTML y DOC: el modo de generar ambos documentos es el mismo. Se hace uso de las clases HtmlForm y HtmlTextWriter de los espacios de nombres System.Web.UI.HtmlControls y System.Web.UI respectivamente para renderizar el contenido de un GridView en HTML. Los documentos se almacenan con ContentType text/html y application/ms-msword respectivamente y extensiones.html y.doc. PDF: para generar este tipo de documentos se hace uso de la librería ITextSharp. Se trata de una.dll muy potente que incorpora un lenguaje propio de creación de documentos en formato PDF. En nuestro caso se han insertado unos párrafos con los descriptores de convocatoria y encuesta, y una tabla con los datos solicitados. Estos documentos llevan asociados un ContentType de tipo application/pdf. 124

145 XLS: estos documentos quizás sean los más útiles, puesto que una vez generados, permiten realizar un gran número de operaciones en Excel. Para su generación se descargó inicialmente desde el administrador de paquetes Nuget una librería llamada Microsoft.office.erop.Excel que no terminó de funcionar y hubo que buscar una alternativa. Finalmente se ha utilizado otra librería, en este caso EPPlus. Mediante un DataTable se insertan los datos en la hoja Excel. Se definen rangos de celdas para aplicar el formato de forma conjunta a cabecera y registros. Estos documentos llevan asociados un ContentType de tipo application/vnd.openxmlformatsofficedocument.spreadsheetml.sheet CSV: este tipo de archivo se genera de forma muy parecida al HTML. En un StringBuilder se van añadiendo los datos. Los registros se separan mediante saltos de línea, sb.append("\r\n"), y las celdas se separan mediante el carácter. Se puede indicar al inicio qué separador se ha utilizado para que Excel lo reconozca y automáticamente haga la separación al abrir el documento, sb.append("sep= \r\n"). Por otra parte también se puede indicar a Excel que debe erpretar el documento en UTF-8. Para ello hay que añadir un array de bytes tal como indica la Figura byte[] BOOM = { 0xEF, 0xBB, 0xBF }; Response.BinaryWrite(BOOM); Figura Código BOOM empleado en archivos CSV El problema es que Excel no es capaz de reconocer ambas instrucciones. O se indica el separador o se añade el BOOM. En nuestro caso se ha decidido añadir el array de bytes e incorporar una serie de instrucciones para que se puedan leer los datos correctamente (Figura 5.86). Figura Instrucciones para abrir documentos CSV en Excel 125

146 Generación de informes con gráficos Desde esta opción, el gestor puede generar diferentes tipos de informes dependiendo de si la encuesta es un cuestionario, una encuesta de opinión o un test. En el Anexo K pueden verse algunos ejemplos. Los gráficos se han generado utilizado el componente Chart que ofrece.net. Cuestionarios: se generan, para los módulos de tipo conjunto de preguntas cuyas preguntas sean de tipo Lista de elementos, los principales estadísticos: media, moda, mediana y desviación típica (Figura 5.87). Asociado a cada módulo se generan dos gráficos, uno de barras y otro de tipo radar en los que se representan la media, la mediana y la desviación típica para cada pregunta. Al final del informe también se generan otros dos gráficos de barras y de tipo radar con las totalizaciones por módulo (Figura 5.88). Figura Detalle del informe de un módulo de un cuestionario 126

147 Figura Detalle de gráficos de módulos del informe de un cuestionario Encuestas de opinión: el informe generado es idéntico al del caso anterior, salvo que añade el cálculo de la fiabilidad del Alpha de Cronbach para ítems no dicotómicos (Figura 5.89). Figura Ejemplo de Alpha de Cronbach en informe de encuesta de opinión 127

148 Test: el informe generado es completamente diferente a los anteriores. Para este tipo de encuesta se muestra, en primer lugar, el indicador de fiabilidad del Alpha de Cronbach para ítems dicotómicos. El resto del informe varía según el modo escogido. Los informes generados para los test pueden mostrar una serie de advertencias en modo de icono, cuya erpretación se explica en la Tabla 5.1: Icono Índice Representación ID Aparece en las preguntas consideradas de dificultad baja. ID ID PROP RPBI PROP Aparece en las preguntas consideradas de dificultad media. Aparece en las preguntas consideradas de dificultad alta. Aparece en las opciones de una pregunta consideradas como un mal distractor, debido a que no han sido seleccionadas por, como mínimo, un 10% de los encuestados. Aparece en los distractores de una pregunta cuyo RPBI es positivo. Aparece en la respuesta correcta de una pregunta cuyo RPBI es negativo. Aparece en la respuesta correcta de una pregunta considerada de alta dificultad, debido a que el porcentaje de encuestados que han seleccionado cualquiera de los distractores es superior que el porcentaje de encuestados que han respondido la opción correcta. Tabla 5.1. Interpretación de iconos mostrados en informes Modo encuesta: se calcula, para cada pregunta de cada módulo, los indicadores de dificultad, la proporción de sujetos que acierta el ítem y el RPBI. Cada pregunta llevará asociado un código de color que identifica su dificultad: difícil (D), medio (M) o fácil (F). También se muestran, para cada distractor o para la opción correcta, varios iconos de advertencia, cuando no cumplen alguna de las condiciones definidas (Figura 5.90). Figura Detalle de informe de test en modo encuesta 128

149 Modo resumen: los datos calculados son los mismos que en el apartado anterior pero se cambia el modo de visualizarlos. En este caso se agrupan las preguntas por nivel de dificultad difícil (D), medio (M) o fácil (F). También se muestran agrupados aquellos ítems o preguntas que no cumplen alguna condición (Figura 5.91). Figura Detalle de informe de test en modo resumen A continuación, para finalizar con la fase de implementación, se explica en qué ha consistido el último incremento 4, de importación de datos en Excel. 129

150 Incremento 4 En este último incremento se ha procedido a implementar la importación de resultados de encuestas desde archivo Excel. En el Anexo I se puede ver un pequeño manual de las diferentes hojas que componen el archivo y cómo se deben rellenar los datos. En la Figura 5.92 se muestra el aspecto de la opción de importación de datos. Figura Aspecto final de la opción de importación de datos en Excel La importación consiste en almacenar el documento Excel subido por el gestor a un directorio temporal App_Comun/recursos/tmp/ desde el que se leerán los datos de cada una de las hojas y se irán insertando en las tablas oportunas. Se utiliza una transacción para evitar que algún fallo en las múltiples inserciones deje los datos inconsistentes. Una vez se han cargado todos los datos, el documento Excel se elimina del directorio temporal. Los datos cargados se almacenan en unas tablas con el prefijo imp_, independientes del resto de tablas en las que se almacenan los datos de las encuestas generadas desde la aplicación. Las encuestas importadas son visibles desde los apartados de descarga de respuestas y generación de informes estadísticos, asociadas a una convocatoria ficticia llamada Encuestas importadas en EXCEL. Tras la fase de implementación se pasa a detallar en qué ha consistido la fase de lanzamiento de la aplicación, prestando especial atención al archivo de configuración web.config. 130

151 5.4. Lanzamiento En esta fase se explica todo lo necesario para publicar la aplicación en producción, desde las opciones de configuración del web.config, los permisos especiales en carpetas o la creación del punto de publicación en el IIS, entre otros. En el Anexo M se describe paso a paso cómo configurar el servidor Web.config Tal como se ha indicado anteriormente, este archivo XML almacena todas las opciones de configuración de la aplicación. El archivo de configuración será diferente dependiendo del entorno en el que nos encontremos: desarrollo, preproducción o producción. En nuestro caso sólo desarrollo y preproducción son un mismo entorno. Para subir la aplicación a producción se deben modificar determinadas rutas y cadenas de conexión, que se explican al final de este apartado. Todas las etiquetas se anidan bajo un nodo padre llamado <configuration></configuration>. A continuación se detallan en profundidad cada una de estas etiquetas: appsettings: la sección definida por estas etiquetas almacena todas las constantes utilizadas en la aplicación. Para cada constante se define un descriptor y un valor tal como se indica en la Figura <add key="tipo_sino" value="1" /> Figura Ejemplo de declaración de una AppSetting en el web.config En nuestro caso se han agrupado las appsettings en una serie de secciones: o Constantes: almacena los identificadores de tipo de pregunta, el usuario gestor que ha creado las encuestas plantilla, las rutas en las que se almacenan los documentos temporales, y la clave de encriptación de contraseñas. o Recursos: almacena los identificadores de los tipos de recursos multimedia que se pueden asociar a una pregunta. También recoge las rutas en las que se almacenan los logos, los recursos y los documentos plantilla en Excel. o Módulos y encuestas: almacena los identificadores de los tipos de módulo y de los tipos de encuesta. 131

152 o Logo: almacena las medidas predefinidas de ancho y alto a las que se redimensionarán, tanto los logotipos de las encuestas, como los recursos multimedia de tipo imagen asociados a las preguntas. o s: almacena constantes utilizadas en el envío de notificaciones, como pueden ser el host, el puerto, el remitente, el usuario y la contraseña, así como en enlace de las invitaciones. También almacena los identificadores de las posibles notificaciones que se pueden enviar desde la aplicación. o Gráficos: esta constante almacena la configuración de los gráficos generados mediante el control Chart. Se indica cómo se van a almacenar los gráficos generados y se especifica el timeout para su generación. Hay tres posibles opciones de almacenamiento (Tabla 5.2): File: almacena los gráficos en una ruta definida. Memory: almacena los gráficos en el espacio de memoria del proceso en ejecución. Session: almacena los gráficos en una variable de sesión. Tabla 5.2. Opciones de almacenamiento de gráficos con Chart Control 47 connectionstrings: en esta sección se almacenan todas las cadenas de conexión de almacenes de datos. En nuestro caso sólo hay una cadena de conexión al repositorio de datos que utiliza la aplicación. Esta cadena habrá que modificarla al pasar de desarrollo a producción. En ella se indica el servidor, la base de datos, el usuario y contraseña, así como cuál es el proveedor de datos. La propiedad MultipleActiveResultSets indica si se permiten tener abiertos en un determinado momento más de un DataReader (Figura 5.94). <add name="con_encuestas" connectionstring="server=***;database=***;uid=***;pwd=***; MultipleActiveResultSets=True;" providername="system.data.sqlclient" /> Figura Ejemplo de cadena de conexión a base de datos 47 Más información sobre web.config: 132

153 system.web: en esta sección se agrupan otra serie de etiquetas de configuración del sistema: o httphandlers: define una serie de atributos de configuración de los manejadores de eventos HTTP, en nuestro caso, para el control de tipo Chart. o pages: agrupador de etiquetas <control></control>. Incorpora más opciones de configuración para el control de tipo Chart, en este caso sobre ensamblados y espacios de nombres. o compilation: agrupador de etiquetas <assemblies></assemblies> de ensamblado para la compilación de la aplicación. Tiene un atributo debug que indica si se permite depurar los errores y otro targetframework que indica el framework de compilación. o customerrors: indica de qué forma se van a tratar los errores inesperados producidos en la aplicación. La siguiente tabla muestra las tres posibles opciones de configuración. <customerrors mode="off" defaultredirect="pagerror.aspx"/> Tabla 5.3. Opciones de configuración del atributo customerrors de la master.page 48 La opción por defecto es RemoteOnly. Normalmente, en desarrollo se suele utilizar Off para que en caso de un error inesperado, se muestre por pantalla el mensaje devuelto por el sistema. Al pasar a preproducción o producción, se debe utilizar On para que, en caso de un error inesperado, se redirija a una pantalla con un mensaje personalizado (Figura 5.95). Figura Mensaje mostrado en la página de error pagerror.aspx 48 Más información sobre el web.config: 133

154 o httpruntime: esta etiqueta contiene atributos de configuración para la subida de archivos a la aplicación. El atributo executiontimeout indica los segundos que puede durar como máximo el proceso de subida. El atributo maxrequestlength indica el tamaño máximo en KB de los archivos que se pueden subir. En nuestro caso se permite un tiempo de 1800 segundos (30 minutos) y un tamaño máximo de KB (1MB). o sitemap: contiene los proveedores de datos que alimentan el archivo web.sitemap para la generación de las migas. system.webserver: contiene opciones de configuración para IIS7. Estas opciones no aplicarán en el caso de que la aplicación se publique en un servidor IIS con una versión anterior. Cambios en el web.config al cambiar de entorno Debido a que algunas de estas características de configuración pueden variar al publicar la aplicación de desarrollo a preproducción o de preproducción a producción, el archivo web.config hay que tratarlo de forma especial, teniendo cuidado de no sobreescrirlo en las subidas. A continuación se indican las secciones que varían al pasar de un entorno a otro para el caso de este TFG: appsettings: se modifican las rutas donde se almacenan y leen archivos, así como el enlace que construye la URL de las invitaciones a encuestas. o key="rutadocstemporales" o key="rutalogos" o key="rutarecursos" o key="rutadocs" o key= " _enlaceencuesta" connectionstrings: se modifica el repositorio de datos utilizado, puesto que habrá una base de datos para desarrollo y pruebas, y otra para producción. customerrors: se modifica el modo de Off a On al pasar de desarrollo a preproducción o de preproducción a producción. Para finalizar con el capítulo de implementación, una vez conocidos los detalles del lanzamiento de la aplicación, se procede a explicar los resultados obtenidos en la fase de evaluación. 134

155 5.5. Evaluación Tal y como se indicó en la roducción, a la hora de desarrollar la aplicación web, la usabilidad y accesibilidad eran dos de los principales requisitos a cumplir, aparte de los puramente funcionales y de seguridad, que se consideran cubiertos una vez terminada la fase de implementación. Por tanto, se pasa a continuación a comentar las evaluaciones de usabilidad y accesibilidad de la aplicación web desarrollada. El primer paso en esta fase ha consistido en un chequeo cromático para evaluar el contraste de colores empleados en imágenes y fondos (aspectos relacionados con la accesibilidad de la herramienta). Este estudio se ha realizado con las herramientas Vischeck y ColourContrastAnalyzer. Dicho análisis no responde a un aspecto puramente estético, sino que es necesario realizarlo cuando se hace uso de los colores para codificar información (tal y como ocurre en los gráficos generados por la herramienta o en la clasificación y codificación de la dificultad de los ítems en preguntas de dificultad baja, media o alta). Por otra parte, también se ha realizado un estudio de usabilidad sobre diversas características y se ha analizado la accesibilidad de la aplicación con la herramienta online WAVE. Chequeo cromático La herramienta Vischeck permite analizar el contraste de colores, tanto de imágenes como de páginas web, a partir de una URL. Dicha herramienta simula y muestra el aspecto de la erfaz cuando se sufre alguna de las deficiencias visuales más comunes: Deuteranopia: deficiencia a la hora de discriminar entre verde y rojo. Protanopia: pérdida clara de sensibilidad a la luminosidad del extremo rojo del espectro cromático. Tritanopia: carencia de sensibilidad al color azul, denominada también dicromacia azul. Acromatopsia: anomalía de la visión a consecuencia de la cual sólo son percibidos los colores blanco y negro. Las simulaciones obtenidas nos permiten detectar posibles problemas que presentarían las personas afectadas por estas deficiencias para distinguir determinados elementos en la erfaz de usuario de la aplicación. En el momento de realizar la evaluación, este servicio estaba deshabilitado pero Vischeck también ofrece la opción de descargar un plugin que se puede utilizar con varios programas de edición gráfica como Adobe Photoshop. Finalmente se optó por esta opción. Para poder utilizarlo, lo primero es ubicarlo en la carpeta donde se alojan los filtros de Adobe Photoshop: C:\Archivos de programa\adobe\photoshop CS\PlugIns\Filtros La Figura 5.96 muestra la ubicación del filtro en Adobe Photoshop, así como la erfaz que permite generar las imágenes. 135

156 Figura (a) Ubicación del filtro Vischeck en Adobe Photoshop; (b) Interfaz del filtro Vischeck Se han realizado varias simulaciones de las páginas de inicio de encuestados (Figura 5.97) e inicio de gestor (Figura 5.98). También se han analizado el detalle de los gráficos de informes (Figura 5.99) y las tablas de informes (Figura ). A las imágenes obtenidas para cada deficiencia visual, se le ha añadido una cuarta imagen en escala de grises (ya que éste es el aspecto que tendría la erfaz para usuarios que sufren acromatopsia). Como se puede observar, las simulaciones (a) y (b) referentes a la deuteranopia y protanopia respectivamente de las cuatro figuras son muy similares entre sí, variando muy ligeramente algunos colores de las imágenes, como la que representa un gráfico de barras en el paso 3 del inicio de gestores. Analizando las imágenes de las dos primeras Figuras (5.97 y 5.98) que hacen referencia a las páginas de inicio de gestores y encuestados, se puede observar que, en general, todos los contenidos son fácilmente distinguibles. Los textos son legibles y se pueden diferenciar todos los elementos de las imágenes. Pero las secciones de miga y pie de página presentan poco contraste entre el fondo y el color del texto. En ambas secciones habría que, o bien aclarar el color de fondo, o bien oscurecer el color de los enlaces, o una combinación de ambas para lograr un contraste aceptable. La Figura 5.99, que representa un detalle de los gráficos generados en los informes, muestra cómo se da un buen contraste entre los colores elegidos para representar los gráficos. En las cuatro imágenes se distinguen sin problema los dos indicadores de media y mediana. Quizás, en la imagen en escala de grises, sea menos clara esta diferencia pero, no obstante, es aceptable. En la Figura 5.100, que muestra un detalle de una de las tablas generadas en los informes de los test, también se observa una clara diferenciación entre todos los elementos y colores utilizados. Los colores seleccionados para indicar el grado de dificultad de cada ítem se distinguen claramente entre sí. Además, cabe destacar que aparte del color, también se ha añadido una letra identificativa (F, M o D) para evitar posibles problemas de 136

157 erpretación 49. Las metáforas empleadas para representar las advertencias e identificar la opción correcta y los distractores también son fácilmente distinguibles. Figura Chequeo cromático de la página de inicio de gestor. (a) Deuteranopia; (b) Protanopia; (c) Tritanopia; (d) Acromatopsia 49 Esta técnica es una recomendación de usabilidad y accesibilidad, de aplicación en las erfaces de usuario en las que se emplea semántica de colores. 137

158 Figura Chequeo cromático de la página de inicio de encuestados. (a) Deuteranopia; (b) Protanopia; (c) Tritanopia; (d) Acromatopsia 138

159 Figura Chequeo cromático del detalle de los gráficos de informes. (a) Deuteranopia; (b) Protanopia; (c) Tritanopia; (d) Acromatopsia Figura Chequeo cromático del detalle de los informes (a) Deuteranopia; (b) Protanopia; (c) Tritanopia; (d) Acromatopsia 139

160 Una vez realizado el estudio cromático con la herramienta Vischeck, se ha llegado a la conclusión de que las secciones de miga y pie de página podrían no presentar un contraste adecuado que permita diferenciar todos los elementos fácilmente entre sí. Para comprobar si el contraste es o no suficiente se ha utilizado la herramienta ColourContrastAnalyzer. La Figura muestra los resultados obtenidos al analizar los colores de fondo y de texto de la sección de migas. Las imágenes (a) y (b) muestran el contraste entre el color de enlace con el fondo y el color del texto con el fondo. Como se puede comprobar, ninguno pasa el test en su totalidad, puesto que los umbrales mínimos son 125 para el brillo y 500 para la diferencia de color. Las imágenes (c) y (d) muestran los contrastes correctos para el color de enlace con el fondo y el color del texto con el fondo. La imagen (e) muestra la miga original y la miga corregida. Figura Resultado del chequeo cromático de la miga con ColourContrastAnalyzer (a) Enlace/Fondo; (b) Texto/Fondo; (c) Enlace/Fondo correcto; (d) Texto/Fondo correcto; (e) Miga correcta 140

161 La Figura muestra el análisis de contraste realizado en el pie de página para el color del enlace y el color de fondo. Como se puede apreciar en la imagen (a), tampoco superar los umbrales mínimos establecidos. En la imagen (b) se muestran una posible combinación de colores correcta. Tan sólo habría que oscurecer el color del enlace, tal como se muestra en la imagen (c). Figura Resultado del chequeo cromático del pie de página con ColourContrastAnalyzer (a) Enlace/Fondo; (b) Enlace/Fondo correcto; (c) Enlace de pie correcto Estudio de usabilidad A continuación se muestra el estudio de usabilidad web de la aplicación desarrollada. Para dicho análisis se ha hecho uso de la plantilla de evaluación proporcionada en la asignatura Interacción Persona-Ordenador II, basada en algunas de las recomendaciones de usabilidad web más extendidas en la bibliografía. 1. Finalidad del sitio Características Ideal Sí/No Observaciones/Imágenes Se muestra el nombre y el logo con tamaño razonable y en un lugar relevante? (superior izquierda) - El logotipo está situado en la parte superior izquierda y tiene un tamaño adecuado. - El nombre no forma parte del logotipo, lo que es correcto, para que el tamaño de la fuente varíe al cambiar el zoom, evitando de esta forma la pixelación. 141

162 Características Ideal Sí/No Observaciones/Imágenes Visualizando la página principal (para usuarios que lo hagan por primera vez) resulta fácil conocer la finalidad del sitio - Para un usuario que entre por primera vez en la página web resulta muy sencillo identificar la finalidad de la misma. - En la parte de encuestados aparece un carrusel de imágenes con las principales características. - En la parte de gestores aparecen tres cuadros resumiendo la finalidad de la aplicación web en tres pasos (crear encuesta, recoger respuestas y analizar resultados), así como las características de cada uno de ellos. 2. Información acerca de la organización Características Ideal Sí/No Observaciones/Imágenes Existe el vínculo "contacte con nosotros"? - No existe un vínculo con ese texto, pero sí se muestran los datos de contacto en el pie de página. Existe en algún lugar información erna de la organización que no eresa a los usuarios? (por ejemplo sobre temas que solo eresan al personal erno de la misma) - La web ha sido creada pensando en el usuario final y la práctica totalidad del contenido está enfocado a ofrecer información que resulte útil para el mismo. 3. Redacción del contenido Características Ideal Sí/No Observaciones/Imágenes Se usa un lenguaje dirigido al usuario? Hay contenido repetido en distos lugares de la página? Hay listas o categorías de un solo elemento? - El lenguaje utilizado es sencillo, directo y claro para cualquier usuario. No es necesario tener ningún conocimiento previo especial para poder utilizar la aplicación. - No hay contenido repetido, cada página tiene una funcionalidad específica y a todas ellas se accede a través de un único menú situado en la parte izquierda de la pantalla. - No hay ninguna lista de un solo elemento. Todas las categorías del menú izquierdo contienen como mínimo dos elementos. - Tan sólo el menú izquierdo que aparece en la opción de recuperar credenciales de encuestado contiene un elemento, pero esto es correcto, ya que hasta que no se autentique en el sistema no se le mostrarán el resto de opciones. 142

163 Características Ideal Sí/No Observaciones/Imágenes Se utiliza un lenguaje imperativo sólo para las tareas obligatorias? (Ej. "roduzca el " cuando se requiera el del usuario) - Sí, sólo en el caso de que se requiera la inserción de algún dato obligatorio se utiliza el lenguaje imperativo. Incluyen los acrónimos su significado? - Esta aplicación no contiene prácticamente ningún acrónimo salvo UCLM en el pie de página. Pasando el ratón por encima muestra el significado del mismo. En la página de inicio aparece una cantidad limitada de texto? Se utilizan correctamente las reglas de estilo de redacción (gramática/ortografía)? (sin exclamaciones, uso de espacios incorrectos, signos de puntuación indebidos y mayúsculas) - En las páginas de inicio de encuestados y gestores aparece poco texto y éste es muy breve y muy descriptivo, está limitado perfectamente y se complementa con imágenes e iconos. No hay párrafos extensos ni información redundante. - El lenguaje empleado es gramatical y ortográficamente correcto. - El texto que aparece utiliza los signos de puntuación cuando es necesario y las mayúsculas exclusivamente en la palabra inicial o en los títulos de avisos, con el fin de llamar la atención del usuario. 4. Vínculos Características Ideal Sí/No Observaciones/Imágenes Los vínculos emplean colores y aspecto estándar (azul, subrayado)? - - Los vínculos que aparecen entre el texto siempre aparece subrayados, pero no utilizan el color azul, ya que rompería la estética de la guía de estilos. Los vínculos se diferencian claramente unos de los otros? - Esta aplicación no presenta una gran cantidad de vínculos, pero los que aparecen están claramente diferenciados y delimitados. Se utilizan instrucciones genéricas? (Ej. "Haga clic aquí") - No se ha encontrado ninguna instrucción parecida en esta página web. Tal como se ha comentado anteriormente, sólo se hace uso del imperativo en casos muy determinados, cuando es necesario solicitar cierto tipo de información para algún formulario de búsqueda. 143

164 Características Ideal Sí/No Observaciones/Imágenes Cuándo un vínculo ha sido visitado se diferencia de los no visitados? Si un vínculo enlaza con un PDF, inicia una reproducción audio / video, enlaza con correo electrónico u otra aplicación, esto se indica claramente, por ejemplo, con una imagen identificativa? - Los vínculos mantienen siempre el mismo color y estilo tanto si han sido visitados, como si no. - En realidad, los vínculos de esta aplicación tan sólo se utilizan para descargar contenidos o para ver alguna nota aclaratoria, por lo que no aporta demasiada información al usuario el que el vínculo esté o no marcado en otro color. - Los vínculos especiales aparecen con iconos representativos de su función. Por ejemplo, cada recurso multimedia de una pregunta incorpora un tipo especial de icono. También se muestran iconos especiales para las descargar en diferentes formatos. 5. Navegación Características Ideal Sí/No Observaciones/Imágenes Está el área de navegación en un lugar relevante? (habitualmente junto al cuerpo principal de la página) Están los elementos del área de navegación agrupados siguiendo algún patrón? - La principal área de navegación se podría considerar el menú izquierdo. - La barra de migas también permite navegar entre las secciones por las que se ha navegado. - Cualquiera de las dos secciones son relevantes en la web pues es donde normalmente se sitúan las zonas de navegación. - Tanto los elementos de la barra de migas como los elementos del menú izquierdo presentan una estructura homogénea siguiendo siempre el mismo estilo y márgenes. Existe en la página de inicio un vínculo activo que enlace con esta misma página de inicio? Los iconos que se utilizan, ayudan al usuario a reconocer una clase de elementos de forma inmediata? (Ej. noticias, vídeo...) - Desde todas las páginas se puede volver a la home pulsando el logotipo de la aplicación, situado en la esquina superior izquierda. - Sí, todos los iconos mostrados son claramente representativos de su función, como los empleados para aumentar/reducir el tamaño de la fuente o el contraste en las encuestas. 144

165 6. Herramientas de accesos directos a tareas Características Ideal Sí/No Observaciones/Imágenes Existen accesos directos a tareas de alta prioridad o que se consideran importantes del sitio web? (por ejemplo matricular, consultar correo, ) - La aplicación es muy funcional, pero no hay ninguna tarea que destaque sobre otra. Cualquier opción se encuentra accesible desde el menú izquierdo, tanto en la parte de gestores como en la parte de encuestados. 7. Imágenes y animación Características Ideal Sí/No Observaciones/Imágenes Las imágenes que aparecen en la página de inicio, están relacionadas con el sitio Web? (que no sean "de relleno/decoración") - Todas las imágenes e iconos que aparecen en las páginas de inicio están relacionadas con el contenido al que acompañan. Son muy descriptivas y simplemente con verlas, el usuario puede hacerse una idea del contenido del texto. Un claro ejemplo serían las tres imágenes de la página de inicio de gestores. Las imágenes que no se entienden a priori, disponen de un texto explicativo en el pie de la foto? - No totas las imágenes presentan un pie de foto, pues los elementos gráficos suelen ser iconos o pequeños logotipos. - En cambio, los recursos multimedia asociados a las preguntas sí muestran la descripción de su contenido. - Están etiquetadas todas las imágenes? (por ejemplo con textos ALT) Las imágenes tienen un tamaño apropiado para su visualización? (si una imagen es pequeña no puede tener demasiados detalles) - Sí, todas las imágenes presentan relleno el atributo alt. - Los elementos gráficos tienen el tamaño óptimo para la función que cumplen. Son de pequeño tamaño y no tienen demasiados detalles. Además pesan poco y se cargan muy rápidamente. - Las imágenes de mayor detalle serían las que muestra el carrusel de la página de inicio de gestores. 145

166 Características Ideal Sí/No Observaciones/Imágenes Hay imágenes con marcas de aguas, es decir, hay imágenes con texto encima? Se permite a los usuarios elegir si desean ver o no la roducción animada del sitio? (solo en el caso de sitios que cuente con este tipo de animaciones) Una vez abierta la página de inicio, existen elementos animados en ella? (esto distrae la atención del usuario) - - No hay imágenes con marcas de agua. Sólo hay algunos iconos con función de botón que muestran la extensión de un archivo (HTML, PDF, XLS, etc). - Este sitio no dispone de roducción animada. Tan sólo el carrusel de imágenes de la página de inicio de gestores presenta movimiento, pero no se trata de una roducción que impida la continuación de la navegación del usuario. - La página de inicio de gestores no contiene ningún elemento animado. - La página de inicio de encuestados contiene el carrusel de imágenes en movimiento, pero se ha colocado como elemento central precisamente para captar la atención del usuario. 8. Diseño gráfico Características Ideal Sí/No Observaciones/Imágenes Tiene el texto un diseño sencillo, limitando el estilo de fuente y otros formatos de texto (tamaño, color, etc...)? - Todo el texto presente en la página mantiene la misma tipografía: Verdana 0.9em. El color predominante es el negro. Tal y como se indica en las recomendaciones de usabilidad web, la fuente Verdana es la más legible y recomendada. Se utiliza un texto con suficiente contraste para que sea lo más legible posible? - Todo el texto se muestra sobre fondo blanco, a excepción del menú, miga, pie y componente de inicio de sesión. El contraste entre fondo y texto es suficiente en todas las secciones, salvo en la miga, en la que habría que cambiar los colores empleados (tal y como se indica en el estudio de accesibilidad realizado). 146

167 Características Ideal Sí/No Observaciones/Imágenes Los elementos más importantes de la página están visibles en su totalidad sin tener que desplazar horizontalmente la pantalla? Observación: para comprobar esta regla cambie la resolución de la pantalla a (800x600) - Al cambiar la resolución de la pantalla a 800x600, la página web muestra tanto el scroll vertical como el horizontal. Se utiliza un diseño líquido para que la página se adapte a las distas resoluciones posibles que puede tener un usuario? (una página tiene diseño líquido, cuando al cambiar de resolución, la página se adapta a la pantalla.) Observación: para comprobar esta regla debería visualizar la página en distas resoluciones (800x600 y 1024x768). Se utilizan los logotipos de organizaciones o empresas con moderación? (Demasiados logotipos perjudican al aspecto de la erfaz, además no deben incluirse sin explicación logotipos cuyo significado no sea conocido). - El tamaño mínimo de la pantalla para evitar scroll horizontal está configurado a 980 px en la hoja de estilos CSS. - La página está configurada para mostrarse con un ancho fijo establecido de 980px. - Al cambiar la resolución de pantalla, los contenidos no se reajustan, simplemente se centra la pantalla con todos sus elementos al superar el ancho de 980 px. - En esta aplicación no se utilizan logotipos de otras organizaciones o empresas. 9. Búsqueda Características Ideal Sí/No Observaciones/Imágenes En la página de inicio existe un cuadro de texto para roducir términos a buscar en el sitio Web? - La aplicación no presenta ninguna caja de búsqueda, puesto que la herramienta en sí no la necesita. No se trata de una web de contenidos, sino de una herramienta para trabajar con encuestas. 147

168 Características Ideal Sí/No Observaciones/Imágenes El cuadro de entrada de texto para la búsqueda, ocupa entre 25 y 30 caracteres visibles? Si existe la opción de búsqueda avanzada en el sitio web, Existe un vínculo con ese nombre junto al cuadro de texto de búsqueda? - Esta pregunta no aplica, al no existir caja de búsqueda. - Esta pregunta no aplica, al no existir caja de búsqueda. 10. Widgets de la IU Características Ideal Sí/No Observaciones/Imágenes Hay cuadros de entrada de texto (que no sean de búsqueda) en la parte superior de la página? Observación: Widgets son los cuadros de texto, las listas desplegables, las listas de selección... - Sí, en todas las páginas se ubica el componente de inicio de sesión en la parte superior derecha. 11. Títulos de ventana Características Ideal Sí/No Observaciones/Imágenes El título de la ventana en la que se visualiza la página de inicio, empieza por una palabra que transmite información? (que no sea, por ejemplo, "página de inicio", sino el nombre de la organización) El título de la ventana en la que se visualiza la página de inicio, tiene un tamaño entre 7 y 8 palabras y menos de 68 caracteres? - Sí, el título de la ventana es descriptivo del contenido de la aplicación: Generador de Encuestas (TFG Ángel Luis Wizner Caballero) - Presenta siete palabras, con un total de 56 caracteres (incluyendo espacios). 12. Noticias y notas de prensa Características Ideal Sí/No Observaciones/Imágenes Son los titulares de las noticias breves y descriptivos? (en el caso de que el sitio web muestre en su página principal este tipo de contenidos) - La página web no presenta titulares de noticias. - Lo más parecido podrían ser las recomendaciones de creación de preguntas, agrupadas en categorías con textos breves y descriptivos. 148

169 13. Ventanas emergentes y páginas ermedias Características Ideal Sí/No Observaciones/Imágenes Se llega a la página de inicio "real" cuando se roduce la URL? (es decir, sin pasar por ninguna página ermedia) Se utilizan las ventanas emergentes para dar información importante del sitio Web? - Sí, al insertar en el navegador la URL de la aplicación (http://tfg.uclm.es/encuestas/ o nos lleva directamente a la página de inicio. - No existen ventanas emergentes en esta aplicación. Se hace uso de ventanas modales, pero siempre para solicitar información o mostrar algún aviso importante. 14. Varios Características Ideal Sí/No Observaciones/Imágenes Existen elementos publicitarios en alguna área destacada de la página? (no han de confundirse con contenido del sitio) Se muestra la fecha de la última actualización? Las fechas se muestran en formato ernacional? (El mes debe aparecer en texto, para no confundir con el formato inglés) - - Esta aplicación no contiene ningún elemento publicitario en ninguna de sus páginas. - Al no tratarse de una web de contenidos, no es necesario mostrar una fecha de última actualización. - Salvo en los comunicados que sí se muestra el mes en formato texto, en el resto de páginas de la aplicación se muestra el mes en formato numérico. La página de inicio tiene soporte para distos idiomas? (incluir en observaciones cuales). - No, la aplicación sólo está disponible en castellano. Estudio de accesibilidad Para el estudio de accesibilidad se ha utilizado la herramienta online WAVE. Sólo es necesario facilitar la URL sobre la que se va a realizar el estudio y WAVE genera un informe con todas las deficiencias que ha detectado, dividiéndolas en categorías. Permite filtrar el informe por el nivel de revisión que se desee (Section 508, WCAG 2.0 A o WCAG 2.0 AA. El nivel WCAG 2.0 AAA aún no está disponible). Entre las utilidades que ofrece WAVE se incluye la de ver la página con o sin estilos, analizar el contraste de colores o ver la jerarquía de etiquetas de encabezado. Al generar el informe, además se localiza e identifica mediante un icono cada deficiencia detectada en la erfaz de la aplicación. Posicionando el ratón encima de cada uno de ellos, se obtiene la descripción del error, una explicación de por qué se considera como tal y cómo podría solucionarse. 149

170 A continuación se muestra el estudio de accesibilidad de la página de inicio de encuestados (Figura 5.103). La página de inicio de gestores ofrece un informe muy similar, por lo que no se ha incluido en este apartado. Figura Detalle del estudio de accesibilidad de la página de inicio de encuestados Tal como se aprecia en la Figura 5.96, no se ha encontrado ningún error, pero sí se han encontrado 9 alertas, 11 características, 1 elemento estructural y 1 aviso de contraste. A continuación se procede a estudiar cada uno de ellos. 1) Alertas: se han encontrado alertas de dos subtipos: 1.1 Elemento Noscript: la herramienta WAVE avisa de que esta etiqueta sólo muestra el contenido cuando JavaScript está deshabilitado, pero casi todos los usuarios suelen tenerlo habilitado. Por lo tanto, no se debe utilizar para mostrar una versión accesible de un contenido que es inaccesible, porque se mostrará a muy pocos usuarios. Para ello recomiendan que el contenido sea accesible sin necesidad de esta etiqueta. En 150

171 nuestro caso, la etiqueta Noscript sólo se utiliza para redirigir a una página de advertencia cuando JavaScript está deshabilitado, puesto que es necesario habilitarlo para el buen funcionamiento de las características que ofrece.net Títulos del texto redundante: nos indica que los atributos title y alt de varios elementos tienen el mismo texto. El atributo title suele utilizarse para mostrar una información descriptiva del elemento al pasar el ratón por encima. En cambio, el atributo alt suele utilizarse para proporcionar un texto descriptivo del elemento para los lectores de pantalla (utilizados por personas con discapacidad visual) o cuando el elemento no está disponible. Se puede solucionar evitando que estos dos atributos presenten la misma información. 2) Características: se han encontrado deficiencias de cuatro subtipos: 2.1. Texto alternativo: está relacionado con el punto 1.2. La herramienta avisa de que se han detectado elementos con el atributo alt relleno y nos insta a asegurarnos de que el contenido debe ser equivalente, preciso y conciso en relación a lo que representa cada elemento Texto alternativo en una imagen dentro de un enlace: relacionado también con el punto 2.1. Es exactamente la misma advertencia, solo que en este caso referida a una imagen que se encuentra dentro de un enlace. La imagen a la que hace referencia no es una imagen como tal, es un método que utiliza.net para mostrar las migas (Figura 5.104). Figura Detalle de enlace con advertencia de accesibilidad 2.3. Texto alternativo en una imagen con comportamiento de botón: relacionado con los dos puntos anteriores. Se refiere a la imagen empleada en la esquina superior izquierda de la cabecera para volver a la página principal. Nos vuelve a recordar que el contenido de la etiqueta alt debe ser preciso, conciso y descriptivo del elemento que representa Etiquetas de formulario: se han detectado dos etiquetas (Label) asociadas a dos controles, las referentes al módulo de inicio de sesión. La herramienta nos recuerda que comprobemos si la etiqueta es correcta, descriptiva, suca, y que está asociada con el elemento de control de forma correcta. Todas las etiquetas de la aplicación están asociadas al control al que van enlazadas mediante el atributo AssociatedControlID. 3) Elementos estructurales: se ha encontrado una advertencia Etiqueta de encabezado nivel 1: hace referencia a la etiqueta empleada en el título de la aplicación <h1>generación de Encuestas</h1>. La aplicación recuerda que estas etiquetas se suelen emplear para facilitar la navegación y estructurar el documento. Nos aconseja que revisemos que realmente se debe considerar como un encabezado y que 151

172 está estructuralmente en la posición correcta. En nuestro caso está todo correcto, puesto que se ha considerado que el encabezado de nivel 1 debe ser el título de la aplicación, mientras que los encabezados de nivel 2 se dejan para el título de cada página. 4) Contraste: se ha encontrado un error de contraste Error de contraste: tal como ya se ha estudiado en el chequeo cromático, el contraste entre el color de fondo de la miga y el color del enlace es insuficiente. Esta herramienta nos lo corrobora. Tan sólo habría que cambiar los colores de la manera que se ha propuesto en el estudio de contraste con Vischeck, aunque otras combinaciones también podrían ser válidas. La Figura muestra el detalle del estudio de accesibilidad para la cumplimentación de una encuesta particular. Figura Detalle del estudio de accesibilidad de la cumplimentación de una encuesta 152

173 Según la Figura 5.105, se han encontrado 2 errores, además de 3 alertas, 132 características, 3 elemento estructural y 14 avisos de contraste. A continuación se procede a estudiar cada uno de ellos. 1) Errores: se han encontrado dos enlaces sin contenido. Estos enlaces se utilizan en las ventanas modales y no presentan ningún tipo de funcionalidad, no tienen ningún propósito específico, por lo que podrían eliminarse o añadirles un texto y ocultarlos mediante CSS para evitar estos errores. 2) Alertas: las alertas encontradas son similares a las ya estudiadas para la página de inicio de encuestados: un elemento Noscript referente a la redirección a la página de aviso cuando se ha desactivado JavaScript y dos títulos de texto redundante, referentes al enlace del menú izquierdo y al icono del reloj de la barra de controles de la encuesta. 3) Características: las advertencias son prácticamente las mismas que las comentadas en la página de inicio de encuestados: textos alternativos, textos alternativos en imagen dentro de enlace, textos alternativos en imágenes con comportamiento de botón y etiquetas de formulario. Para todas ellas hay que comprobar que el contenido sea preciso, conciso y descriptivo del elemento que representa. Para las etiquetas de formulario hay que comprobar que están asociadas correctamente al control de formulario que representan. La única comprobación nueva que surge es la siguiente: 3.1. Fieldset: se han encontrado 14 fieldset, uno por cada pregunta que contiene la pantalla de cumplimentación de la encuesta. La herramienta nos aconseja que nos aseguremos que cada fieldset encierra los controles adecuados y que el elemento legend es representativo del contenido. En este caso, cada fieldset encierra el texto, controles y recursos multimedia de cada pregunta. El elemento legend indica el ordinal de la pregunta. 4) Elementos estructurales: aquí se advierte de la existencia de dos niveles de encabezados <h1> y <h2>. El primero representa el título de la aplicación y el segundo el título de la página, por lo que se han utilizado correctamente. Además <h1> precede a <h2> siguiendo la jerarquía. Como nueva comprobación tenemos: 4.1. Lista sin orden: la aplicación avisa de la existencia de una lista sin orden y nos aconseja revisar su contenido por si fuera necesario emplear una lista ordenada en su lugar. En este caso, la lista sin orden encontrada es la referente al menú izquierdo, que no requiere tener ningún orden específico. 5) Contraste: vuelve a aparecer el error de contraste del menú de la miga y además surge otro en el asterisco indicador de pregunta obligatoria. Habría que aplicarle un color más oscuro para aumentar el contraste con el fondo. La Figura muestra el detalle del estudio de accesibilidad para la generación del informe de un test. Se puede comprobar que no se ha encontrado ningún error, pero sí 153

174 hay 105 alertas, 81 características, 89 elemento estructural y 2 avisos de contraste. A continuación se procede a analizar cada uno de ellos. Figura Detalle del estudio de accesibilidad de la generación de informe 1) Alertas: aparecen nuevos avisos no estudiados hasta el momento y otros repetidos en los casos anteriores, como el elemento Noscript de la sección de miga o los textos alternativos redundantes. Respecto a los nuevos avisos tenemos: 1.1. Imágenes cercanas con el mismo texto alternativo: aparecen 19 avisos, que hacen referencia a algunos de los iconos empleados para representar las opciones correctas e incorrectas de las preguntas. La herramienta nos recomienda que si la imagen no representa un contenido especial, puede eliminarse el texto alternativo. En este caso las imágenes sólo representan si la opción de la pregunta es la correcta o se trata de un distractor, por lo que podría retirarse el texto alternativo para evitar estas advertencias Elemento Label no asociado a control: se trata de la Label empleada para mostrar el descriptor del RadioButtonList que muestra si el informe se generará en modo 154

175 encuesta o en modo resumen. Esta advertencia puede evitarse añadiendo la etiqueta AssociatedControlID a la Label huérfana JavaScript en controles: la herramienta avisa de que se han detectado dos controles que presentan código JavaScript que lanzan un Postback al cambiar el elemento seleccionado. Se trata de los dos desplegables que permiten seleccionar convocatoria y encuesta. En este caso, se hace necesario el Postback para, por ejemplo, cargar las encuestas una vez se ha seleccionada una convocatoria. 2) Características: son prácticamente las mismas que han surgido en los casos anteriores: texto alternativo, texto alternativo de imagen dentro de enlace, texto alternativo de imagen con comportamiento de botón, Label de formulario y Fieldset. Para todas estas advertencias ya se ha propuesto una posible solución anteriormente. 3) Elementos estructurales: vuelven a aparecer las advertencias ya vistas en los casos anteriores de niveles de encabezado <h1> y <h2>, así como las listas sin orden del menú izquierdo. Como nuevas advertencias tenemos: 3.1. DataTable: la herramienta avisa de la existencia de dos DataTable. Son las dos tablas que representan la leyenda de iconos y el estudio de las preguntas de la encuesta. Nos recomiendan que comprobemos si las columnas de encabezado son correctas y suficientes, así como que cada celda esté correctamente asociada a su encabezado. También nos recuerda que las tablas sólo deben utilizarse para mostrar datos tabulares, y nunca como layout de maquetación Celdas de encabezado de tabla: se han detectado 81 celdas de encabezado en los DataTable existentes. La herramienta nos indica que comprobemos que las celdas de encabezado son realmente encabezados. En caso de no serlo, deben cambiar de <th> a <td>. En nuestro caso, se han marcado algunas celdas como encabezado que deberían transformarse de <th> a <td>, como por ejemplo las que indican si una opción de una pregunta es la correcta o es un distractor. 4) Contraste: aparecen dos errores de contraste, referidos a los enlaces del menú de miga. Ya se ha estudiado anteriormente y se ha propuesto una solución en el apartado de chequeo cromático. Tras detallar los resultados obtenidos en la fase de evaluación, se procede a comentar las conclusiones a las que se ha llegado con la realización de este TFG. 155

176

177 6. CONCLUSIONES Y PROPUESTAS En este apartado de describen las conclusiones a las que se ha llegado durante el proceso de desarrollo de este TFG. Del mismo modo, se añaden todas aquellas mejoras y trabajos futuros que podrían permitir enriquecer la aplicación Conclusiones De todos los requisitos funcionales inicialmente planteados se han cubierto la gran mayoría; desde el diseño de encuestas/test accesibles y usables, pasando por la recogida de respuestas y el análisis de resultados obtenidos, con generación de informes y gráficos descriptivos. Por lo tanto se puede considerar que el objetivo inicial de este TFG queda cubierto. Del mismo modo se han adquirido los conocimientos necesarios para diseñar, implementar y desplegar la aplicación mediante el uso de las herramientas que se han considerado más adecuadas como Microsoft Visual Studio También se ha profundizado en el conocimiento de la estructura de las aplicaciones web, en los lenguajes empleados en su construcción: C#, HTML, CSS, XML, JavaScript y en los sistemas utilizados como repositorio de datos; en este caso, SQL Server En cuanto al despliegue de la aplicación, se han adquirido los conocimientos necesarios para trabajar con IIS6 y se han estudiado los aspectos de seguridad más importantes a tener en cuenta a la hora de implementar una aplicación destinada a la web. Todo sitio web debe generar un valor añadido que lo distinga del resto. Antes de lanzarse a desarrollar una aplicación online hay que tener en cuenta que probablemente ya existan otras que ofrezcan servicios similares o incluso muchos más atractivos que los que se pretenden implementar. Es por ello que se hace necesario un estudio previo que recoja el mayor número posible de sitios web similares ya existentes, con el fin de encontrar aquella característica, función o servicio que logre diferenciar nuestro producto del resto. Si retrocedemos al estudio de las aplicaciones existentes en el mercado que se describe en el capítulo 3, se puede hacer una comparativa entre las características ofrecidas por las siete aplicaciones estudiadas y las características implementadas en la aplicación que se ha desarrollado. En la Tabla 6.1 se pueden comparar aspectos relacionados con el diseño de preguntas. En la Tabla 6.2 se muestran las características relativas a la apariencia de la aplicación. En la Tabla 6.3 se listan aspectos relativos a la encuesta en general y, por último, en la Tabla 6.4 se muestran las características referentes al análisis de resultados de las encuestas y los test. En todas estas tablas, la aplicación desarrollada en el contexto de este TFG aparece en la primera columna. 157

178 PREGUNTAS Preguntas ilimitadas Respuestas ilimitadas Diversos tipos de preguntas Validación Obligatoriedad Secuencia lógica Survey Monkey Survio Encuesta fácil Online Encuesta E- Encuesta Encuesta Tick Eval And Go Tabla 6.1. Comparativa de características relacionadas con las preguntas APARIENCIA Plantillas Temas Logotipo Accesibilidad Optimizado móviles, tablets Pié de página Survey Monkey Survio Encuesta fácil Online Encuesta E- Encuesta Encuesta Tick Eval And Go Tabla 6.2. Comparativa de características relacionadas con el soporte de presentación de la encuesta y la apariencia ENCUESTA Barra progreso Página de agradecimiento al finalizar Imprimir en PDF Notificaciones Exportar resultados Multidioma Survey Monkey Survio Encuesta fácil Online Encuesta E- Encuesta Encuesta Tick Eval And Go 158

179 ENCUESTA Pausar / reanudar Duplicidades de respuestas Tiempo limitado Contenido multimedia Survey Monkey Survio Encuesta fácil Online Encuesta E- Encuesta Encuesta Tick Eval And Go Tabla 6.3. Comparativa de características relativas a la encuesta en general RESULTADOS Fiabilidad Dificultad ítems Poder discriminativo ítems Análisis distractores Informes con gráficos Exportar resultados Estadísticos básicos Survey Monkey Survio Encuesta fácil Online Encuesta E- Encuesta Encuesta Tick Eval And Go Tabla 6.4. Comparativa de características relativas al análisis de resultados Uno de los principales objetivos de este TFG se centra en el análisis de resultados de encuestas y test. Dicho análisis resulta de vital importancia para calcular determinados estadísticos descriptivos en tiempo real. Éstos, pueden ayudarnos por ejemplo, a identificar aquellos ítems que tienen un mayor porcentaje de aciertos o fallos. Con esto se puede averiguar si están bien redactados, si son demasiado sencillos o demasiado complejos, si la pregunta ha sido entendida o daba lugar a dobles erpretaciones, etc. Gracias al análisis de las propiedades métricas de los instrumentos de medida soportados (encuestas, tests, etc.) provenientes del área de la Psicometría, se pueden analizar determinadas características muy valiosas de los test como son el índice de dificultad de los ítems, que nos indica el porcentaje de aciertos, o el índice de dificultad 159

180 corregido, que tiene en cuenta la suerte de los sujetos a la hora de acertar sin conocer la respuesta. También se puede estudiar el poder discriminativo de los ítems, para diferenciar a los sujetos según su nivel de competencia. Del mismo modo y, con propósitos similares, se pueden analizar los distractores de cada ítem para comprobar la distribución de los sujetos en cada uno de ellos y detectar posibles motivos de la baja discriminación de algún ítem. El coeficiente Alpha de Cronbach también resulta muy útil para obtener el indicador de fiabilidad del cuestionario o test, es decir, cómo de fiables son los resultados obtenidos. De la comparativa de las cuatro tablas anteriores se puede deducir que, salvo la aplicación desarrollada, ninguna ofrece la posibilidad de calcular los estadísticos psicométricos relativos a la fiabilidad, la dificultad y discriminación de ítems o el análisis de distractores. De ahí surge el principal valor añadido que ofrece esta aplicación con respecto a las estudiadas. Por su parte, el análisis de las tablas también permite identificar aspectos que podrían incluirse en la aplicación, de cara a mejorarla en el futuro (soporte multidioma, optimización para otro tipo de dispositivos, etc.). Es necesario comentar también que hoy en día, apostar por la inversión en el desarrollo de tecnologías web usables y accesibles es un acierto. Internet llega cada vez a un mayor número de usuarios, entre los que se encuentra un alto porcentaje de personas que sufren algún tipo de discapacidad y que requieren de mecanismos especiales para acceder a determinada información o hacer uso de estos o aquellos servicios. Mediante la aplicación de una serie de recomendaciones podemos facilitar la navegación de estas personas y con ello, aumentar la cuota de usuarios que visitarán nuestro sitio, redundando en un aumento de los posibles beneficios económicos si se tratase de una actividad con ánimo de lucro. En la realización de este TFG se han seguido todas aquellas recomendaciones de expertos orientadas a mejorar la accesibilidad y usabilidad en aplicaciones web y, más concretamente, en formularios web. Se ha conseguido implementar una aplicación que cumple con los controles de la herramienta de chequeo de accesibilidad WAVE. Por último, es necesario comentar que en el tiempo que se ha trabajado en el desarrollo de este TFG han surgido nuevas versiones de algunos de los componentes utilizados, como puede ser el recaptcha de Google, o la última versión del paquete AjaxControlToolkit. Con esto se pretende destacar el dinamismo y la constante evolución que sufren las tecnologías web y cómo los desarrollos que hoy están implementados con las últimas tendencias, en un par de meses pueden quedar obsoletos. Es por ello que cualquier aplicación web debe estar en constante renovación si no pretende caer en el olvido. En la implementación de este TFG se han estudiado y utilizado una gran cantidad de librerías y componentes para cubrir todos los requisitos funcionales inicialmente 160

181 planteados. En ocasiones ha sido necesario recurrir a foros y sitios web de ayuda técnica, cuando la documentación ofrecida para el uso de estas librerías y/o componentes no era suficiente. Como última conclusión destacar que el valor de cualquier encuesta realizada, independientemente de la cantidad de encuestados que la hayan completado, no radica en los resultados estadísticos obtenidos, sino en tener la certeza de que esos resultados son fiables. Una vez detalladas las conclusiones alcanzadas tras la realización de este TFG, se pasa a listar algunas posibles mejoras y trabajos futuros Posibles Mejoras y Trabajos Futuros En cuanto a posibles trabajos de mejora, son tantos como funcionalidades se puedan añadir a la aplicación. Internet está en constante evolución, así como todas las tecnologías que alberga. Es por ello que cada cierto tiempo merecerá la pena pararse un momento a investigar si han surgido nuevos componentes más avanzados a los utilizados o actualizaciones de las librerías empleadas. En este sentido podemos destacar: Recaptcha: Google ha desarrollado un nuevo captcha al que ha llamado No CAPTCHA recaptcha que mejora el anterior control que ofrecía de forma gratuita. Es más sencillo de resolver, tan sólo es necesario pulsar sobre un check y automáticamente se detecta si el click lo ha realizado un robot o una persona. No en todos los casos será posible esta comprobación y el usuario tendrá que pasar a un segundo paso consistente en seleccionar todas las imágenes de un grupo que tengan relación con otra mostrada. Figura 6.1. Interfaz del nuevo captcha de Google 161

182 Documentos Word: actualmente los documentos Word generados por la aplicación no tienen realmente el formato correcto. El contenido se genera en HTML, se le aplica el contenttype application/ms-msword y se almacena con extensión.doc. Microsoft Word es capaz de reconocer y abrir dicho documento. Como acción de mejora, se podría buscar una librería que permitiese crear documento con formato propio de Word, al igual que se hace para generar los documentos Excel. PasswordStrength: el actual control empleado para mostrar la fortaleza de contraseña del paquete AjaxControlToolkit muestra, a medida que vamos escribiendo la contraseña, una serie de imágenes de colores y un texto en inglés con los elementos que faltan para tener una contraseña 100% segura. Los controles de este paquete permiten definir el lenguaje en que se mostrarán los mensajes, pero en la propia documentación de la web de CodePlex ya se advierte sobre la ausencia de traducción para algunos idiomas. Por lo tanto, otra acción a mejorar consistiría en la búsqueda de un nuevo control con funciones similares que no ofreciera problemas de traducción. Figura 6.2. Ejemplo de recomendaciones ofrecidas por el control PasswordStrength Figura 6.3. Documentación acerca de PasswordStrength donde se indica la ausencia de traducción para todos los idiomas Más información acerca de documentación de PasswordStrength: https://ajaxcontroltoolkit.codeplex.com/wikipage?title=passwordstrength%20control 162

183 Menos PostBack y más Ajax: uno de los inconvenientes al desarrollar sitios web dinámicos son las constantes llamadas al servidor (postback) para recargar información, lo que se traduce en un retardo por el ir y venir de información de cliente a servidor y una serie de refrescos de pantalla que pueden resultar molestos al usuario e incluso desorientadores si se producen con mucha frecuencia. Una posible solución viene de la mano de la tecnología Ajax, que nos permite actualizar la información en pantalla mediante llamadas asíncronas sin la necesidad de realizar los molestos refrescos. El retardo entre cliente y servidor se mantiene, aunque éste depende de muchos factores: conexión a ernet, carga del servidor, características técnicas del equipo cliente, navegador utilizado, etc. Además de los aspectos comentados (más relacionados con la implementación), en un futuro habría que completar la evaluación de la aplicación desarrollada. En el apartado 5.5 se ha descrito la evaluación de usabilidad y accesibilidad realizada. Es necesario comentar que una evaluación heurística debería involucrar a un conjunto de expertos en usabilidad. Bastaría, tal y como apunta Nielsen, con la participación de cinco expertos en IPO 51. Por cuestiones de tiempo, no ha sido posible realizar dicha evaluación, por lo que queda planteada como trabajo futuro. También sería recomendable aplicar otras técnicas de evaluación, como las comentadas en el apartado 4.1 (recorrido cognitivo, inspección de estándares, etc.). Pero más importante aún, es la evaluación con usuarios finales (diseñadores/gestores de encuestas y usuarios finales o encuestados). Dicha evaluación se realizará en los próximos meses, ya que la herramienta desarrollada se utilizará para la aplicación de una encuesta de evaluación de usabilidad de aplicaciones móviles, creada por un investigador del grupo CHICO. La encuesta será cumplimentada por un elevado número de usuarios de España y México. Se aprovechará dicha experiencia para evaluar la herramienta desarrollada con usuarios finales. Por último, entre los trabajos futuros, se incluye el envío de una comunicación, en la que se describa el recurso docente creado, a las XXI Jornadas de Enseñanza Universitaria de la Informática (JENUI 2015)

184

185 Bibliografía y Recursos En este apartado se listas las fuentes bibliográficas y los recursos utilizados para la realización de este TFG. Fuentes bibliográficas Barbero, M., Vila, E. y Holgado, F. Psicometría. Editorial Sanz y Torres (2010) Booch, G., Jacobson, I., Rumbaugh, J. El Proceso Unificado de Desarrollo Software. Editorial Addison-Wesley (2000) Esteban, A. Documentación del curso: Desarrollo de Aplicaciones Web con ASP.NET 2.0 (Aspectos básicos y aspectos avanzados). Alhambra Eidos (2007) Granollers, T. Tesis Doctoral MPIu+a. Una metodología que egra la ingeniería del software, la eracción persona-ordenador y la accesibilidad en el contexto de equipos de desarrollo multidisciplinares Departamento de Lenguajes y Sistemas Informáticos. Lleida, Universidad de Lleida.(2004) Jarrett, C. y Gaffney, G. Forms that Work. Designing Web Forms for Usability. Editorial Morgan Kaufman Publ Inc. (2008) Krug, S. Don t Make me Think. A Common Sense Approach to Web Usability. Editorial New Riders. (2000) Liberty, J. y Hurwitz, D. Programación son ASP.NET 2.0. Editorial Anaya (2007) Mancini, C., Paternò, F. ConcurTaskTree: A diagrammatic notation for specifying task models. International Conference on Human-Computer Interaction Interact 97. Editorial Kluwer Academic Publishers. (1997) Molina, A.I. Apuntes Interacción Persona-Ordenador I y II Departamento de Tecnologías y Sistemas de Información. Ciudad Real, Universidad de Castilla-La Mancha (2014) Nielsen, J. Prioritizing Web Usability. Editorial New Riders. (2006) Otros recursos Usabilidad y accesibilidad Revista online No solo usabilidad Web Discapnet Técnicas CSS para las Pautas de Accesibilidad al Contenido en la Web 1.0 TECHS_es.html Web Information & Design. Materiales de usabilidad Web ISO: https://www.iso.org/obp/ui/#iso:std:16883:en Web de Nielsen Norman Group: 165

186 Web de Olga Carreras Montoto. Recursos de usabilidad y accesibilidad y validadores y Web y blog de Steve Krug: y Web de la W3C. Guía breve de accesibilidad web Estadísticos descriptivos básicos y métricas Apuntes del Prof. Pedro Morales Vallejo (Universidad de Comillas) Metodología MPIu+a Blog de Olga Carreras Montoto Web del grupo Griho MPIu+a Herramientas similares existentes en el mercado E-Encuesta: Encuesta Fácil: Encuesta Tick: Eval & Go: Online Encuesta: https://www.onlineencuesta.com/ Survey Monkey: Survio: Tecnologías, herramientas y componentes Acumbamail: https://acumbamail.com/ AjaxControlToolkit.com: https://ajaxcontroltoolkit.codeplex.com Balsamiq Mockups: Cacoo: CKEditor: CTTE: EPPLUS: GOOGLE: https://support.google.com/accounts/answer/32040?hl=es ITEXT: JSSOR Slider: Microsoft Chart Control: Microsoft Developer Network: 166

187 NuGet: https://www.nuget.org/ Picasa: Recaptcha Google: Vischeck: Wave: Web.config: 167

188

189 Anexos A. Manual de Usuario Índice de figuras SECCIÓN GESTORES Gestores Alta de gestor Recuperación de credenciales de gestor Gestión de datos de cuenta de gestor Gestiones Gestión de convocatorias Gestión de encuestas Gestión de preguntas Gestión de listas y Likerts Gestión de encuestados Notificaciones Gestión de plantillas Gestión de envíos Histórico de notificaciones Informes Respuestas de encuestas Informes de estadísticos Importación de datos en Excel SECCIÓN ENCUESTADOS Encuestados Recuperación de credenciales de encuestado Gestión de datos de cuenta de encuestado Histórico de encuestas Cumplimentación de encuesta/test

190 Índice de figuras Figura A.1. Pantalla inicial de gestores Figura A.2. Pantalla de alta de gestor, paso Figura A.3. Requisitos mínimos de clave Figura A.4. Pantalla de alta de gestor, paso Figura A.5. Pantalla de recuperación de credenciales de gestor Figura A.6. Pantalla de gestión de datos de cuenta de gestor Figura A.7. Pantalla de gestión de convocatorias Figura A.8. Ventana modal de inserción de convocatoria Figura A.9. Mensaje de eliminación de convocatoria Figura A.10. Pantalla de gestión de encuestas Figura A.11. Ventana modal de creación de encuesta a partir de plantilla Figura A.12. Pantalla de creación de encuesta, paso Figura A.13. Pantalla de creación de encuesta, paso Figura A.14. Ventana modal con vista previa de texto predefinido Figura A.15. Pantalla de creación de encuesta, paso Figura A.16. Ventana modal de inserción de módulo textual Figura A.17. Ventana modal de inserción de pregunta Figura A.18. Mensajes de edición de encuesta Figura A.19. Mensaje de eliminación de encuesta Figura A.20. Pantalla de gestión de preguntas Figura A.21. Pantalla de inserción de pregunta de tipo lista de elementos Figura A.22. Pantalla de inserción de pregunta de tipo escala de Likert Figura A.23 (a) Ventana modal de vista previa de listado; (b) Ventana modal de vista previa de Likert Figura A.24. Detalle de pantalla de recursos multimedia Figura A.25. Ventana modal de inserción de recurso multimedia Figura A.26. Mensaje de eliminación de pregunta Figura A.27. Pantalla de gestión de listas y Likerts Figura A.28. Ventana modal de edición de lista Figura A.29. Mensaje de eliminación de Likert Figura A.30. Pantalla de gestión de encuestados Figura A.31. Ventana modal con histórico de encuestado

191 Figura A.32. Ventana modal con log de accesos de un encuestado Figura A.33. Ventana modal de proceso en ejecución Figura A.34. Pantalla de gestión de plantillas Figura A.35. Ventana modal de campos codificados de una plantilla Figura A.36. Vista previa de una plantilla Figura A.37. Pantalla de envíos masivos de notificaciones Figura A.38. Pantalla de consulta de histórico de notificaciones Figura A.39. Ventana modal con instrucciones de archivos CSV Figura A.40. Pantalla de descarga de respuestas Figura A.41. Ejemplo de informe de cuestionario Figura A.42. Ejemplo de informe de encuesta de opinión Figura A.43. Ejemplo de informe de test, modo encuesta Figura A.44. Ejemplo de informe de test, modo resumen Figura A.45. Pantalla de importación de datos en Excel Figura A.46. Pantalla de inicio de encuestados Figura A.47. Pantalla de recuperación de credenciales de encuestado, paso Figura A.48. Pantalla de recuperación de credenciales de encuestado, paso Figura A.49. Pantalla de modificación de datos de cuenta de encuestado Figura A.50. Pantalla de histórico de encuestas de encuestado Figura A.51. Ventana modal con resultados obtenidos en un test Figura A.52. Ejemplo de invitación a una encuesta Figura A.53. Ejemplo de encuesta Figura A.54. Ejemplo de encuesta con texto reducido en tamaño Figura A.55. Ejemplo de encuesta con texto aumentado en tamaño Figura A.56. Ejemplo de encuesta con texto aumentado en contraste Figura A.57. Ejemplo de paso 2 de encuesta Figura A.58. Resumen de validación de encuesta Figura A.59. Ejemplo de encuesta finalizada

192 1. SECCIÓN GESTORES La página de inicio de gestores se puede ver en la Figura A.1. Todas las páginas tendrán la misma estructura, variando únicamente el contenido de la zona central. Figura A.1. Pantalla inicial de gestores De arriba abajo y de izquierda a derecha tenemos los siguientes elementos: Cabecera: compuesta por el logotipo, el título de la aplicación y el componente de inicio de sesión. Pulsando sobre el logotipo volveremos a la página de inicio de la sección de gestores. Para acceder a la aplicación basta con insertar el usuario y contraseña de un gestor dado de alta y pulsar sobre el botón Acceso. Para dar de alta un nuevo gestor hay que pulsar el botón Registro. El botón con el símbolo + sirve para recuperar las credenciales de un gestor dado de alta previamente. Menú de migas: nos indica en qué lugar de la aplicación nos encontramos en cada momento. Para volver a una sección anterior basta con pulsar uno de los enlaces que aparecen marcados en blanco. Zona central: resume, en tres bloques generales, la funcionalidad de la aplicación así como las características principales de cada bloque. En el resto de páginas de la sección de gestores, la zona central se dividirá en menú izquierda (donde se listarán todas las opciones disponibles) y la zona de contenidos. Pie: muestra información de contacto. 172

193 1.1. Gestores En este apartado se detallan los procesos de alta de gestor, de recuperación de credenciales y de cambio de datos de las cuenta de gestores Alta de gestor Al pulsar el botón Registro se inicia el proceso de alta de un nuevo gestor. Consta de dos pasos: el primero donde hay que resolver un captcha y el segundo donde hay que insertar los datos del nuevo gestor así como elegir una contraseña. Paso 1: se puede ver en la Figura A.2. El usuario debe reproducir los caracteres que ve en la imagen y pulsar el botón Continuar. En caso de que la imagen no sea lo suficientemente legible, puede generar una nueva pulsando el botón Cambiar imagen. Figura A.2. Pantalla de alta de gestor, paso 1 Paso 2: el gestor debe rellenar los campos nombre, apellido1, apellido2 y . Los campos obligatorios vienen marcados con *. El debe ser único, es decir, no puede existir un gestor con el mismo (Figura A.4) A continuación debe rellenar los campos usuario, clave y repita clave. El usuario también debe ser único. La clave presenta una serie de requisitos mínimos que pueden verse pulsando el icono Requisitos mínimos de clave o Caracteres permitidos y no permitidos (Figura A.3). Mientras se escribe la clave aparecen una serie de imágenes representativas de la fortaleza de contraseña junto a la caja de texto y también se mostrará un mensaje con el número de caracteres, símbolos y/o dígitos que faltan para conseguir una clave con fortaleza ideal. 173

194 Figura A.3. Requisitos mínimos de clave Figura A.4. Pantalla de alta de gestor, paso 2 Una vez rellenados todos los datos, el usuario debe pulsar el botón Crear gestor. Se mostrará un mensaje por pantalla indicando si el proceso ha sido correcto o no. Del mismo modo, se enviará un correo electrónico a la dirección de correo indicada en el campo con los datos de acceso. Pulsando el botón Limpiar formulario se iniciará el proceso desde el paso Recuperación de credenciales de gestor También se divide en dos pasos. El paso 1 en el que habrá que resolver un captcha similar al del alta de gestor y el paso 2 donde se debe insertar el usuario y el . Al pulsar el botón recuperar, se envían por correo electrónico los datos de acceso (Figura A.5). 174

195 Figura A.5. Pantalla de recuperación de credenciales de gestor Gestión de datos de cuenta de gestor El gestor puede modificar los datos asociados a su cuenta pulsando el botón Mi cuenta del control de inicio de sesión. El usuario no se puede modificar. Si se desea modificar la contraseña, sólo hay que tener en cuentas las mismas restricciones que para el alta (Figura A.6). Figura A.6. Pantalla de gestión de datos de cuenta de gestor 175

196 1.2. Gestiones En este apartado se detallan las gestiones de convocatorias, encuestas, encuestados, preguntas, listas y Likerts Gestión de convocatorias Desde esta opción se pueden crear nuevas convocatorias, editar las ya existentes o eliminarlas. La Figura A.7 muestra un botón Nueva convocatoria y una tabla donde se listan las convocatorias creadas por el gestor. Esta tabla, además de mostrar el descriptor de convocatoria y el periodo que abarca, también muestra un icono de edición y otro de eliminación. Pulsando el botón Nueva convocatoria aparece una ventana modal en la que se debe indicar el nombre de la convocatoria y el periodo en el que estará abierta. Una vez rellenados todos los campos se debe pulsar el botón Insertar. Para salir de esta ventana sin crear una convocatoria se debe pulsar el botón Cancelar. Figura A.7. Pantalla de gestión de convocatorias La edición de una convocatoria muestra la misma ventana modal (Figura A.8), pero cambiando el botón Insertar por otro botón Actualizar. 176

197 Figura A.8. Ventana modal de inserción de convocatoria Sólo se podrán eliminar convocatorias que no tengan encuestas asociadas. En caso de entar eliminar una convocatoria con encuestas, aparecerá el mensaje de la Figura A.9. Figura A.9. Mensaje de eliminación de convocatoria Gestión de encuestas Desde esta opción se pueden crear encuestas desde cero o a partir de una plantilla predefinida. También se pueden editar las encuestas ya existentes o eliminarlas. La Figura A.10 muestra un par de botones Diseñar nueva encuesta y Nueva encuesta a partir de plantilla, así como una tabla donde se listan las encuestas del gestor de la convocatoria seleccionada en el desplegable. Esta tabla muestra el descriptor de la encuesta y el periodo en el que estarán activas, en caso de tenerlo. También muestra, para cada encuesta, un botón de edición, otro de vista previa y otro de eliminación. 177

198 Figura A.10. Pantalla de gestión de encuestas Pulsando el botón Nueva encuesta a partir de plantilla aparece una ventana modal (Figura A.11) en la que hay que seleccionar una de las plantillas prediseñadas y la convocatoria donde queremos hacer la copia. Al pulsar el botón Crear encuesta se procede a hacer una copia de la plantilla. Pulsando el botón Cancelar se cierra la ventana sin crear encuesta. Figura A.11. Ventana modal de creación de encuesta a partir de plantilla Pulsando sobre el botón Diseñar nueva encuesta aparece un formulario dividido en tres pasos para crear una encuesta desde cero. A continuación se explica cada uno de los pasos: Paso 1 Datos básicos: se debe insertar el descriptor, la convocatoria a la que irá asociada la nueva encuesta, el tipo de encuesta y el periodo en el que permanecerá abierta, aunque esto último es opcional (Figura A.12). La encuesta puede ser de tres tipos: cuestionario, opinión o test. En caso de seleccionar el tipo test, habrá que definir el número de opciones que van a tener las preguntas. Al pulsar el botón Insertar se procede a crear la encuesta con los datos básicos y a mostrar los campos del paso

199 Figura A.12. Pantalla de creación de encuesta, paso 1 Paso 2 Personalización: en este paso el gestor puede seleccionar el número de módulos que desea que se muestren a la vez en cada pantalla y puede indicar si la encuesta debe cumplimentarse en un tiempo máximo, expresado en horas, minutos y segundos (Figura A.13). Para el tipo test también puede decidir si los encuestados podrán ver los resultados corregidos de su test. Del mismo modo, se puede insertar un logotipo y un pie de página, así como una página de inicio y otra de fin. El logotipo debe tener extensión.jpg,.jpeg,.gif o.png y no exceder de 1 MB de tamaño máximo. 179

200 Figura A.13. Pantalla de creación de encuesta, paso 2 Las páginas de inicio y fin pueden contener cualquier tipo de información textual personalizada, con el formato que se decida. Se proponen algunos textos predefinidos (Figura A.14), que pueden visualizarse pulsando el botón vista previa. Pulsando el botón Añadir texto se incorpora el contenido del texto predefinido a la caja de edición de texto. Estos contenidos se mostrarán al inicio de la encuesta y al final, al terminar de completar todos los módulos. Al pulsar el botón Insertar se almacenan los datos y se continúa con el paso

201 Figura A.14. Ventana modal con vista previa de texto predefinido Paso 3 Módulos y preguntas: desde este último paso se construye el contenido de la encuesta. Se pueden insertar tantos módulos y preguntas como se desee y ordenarlos según se decida. Esta opción presenta dos botones, uno para insertar módulos Nuevo módulo y otro para insertar preguntas Nueva pregunta. A medida que se van haciendo inserciones se va construyendo la tabla de contenidos (Figura A.15). Figura A.15. Pantalla de creación de encuesta, paso 3 Al pulsar el botón Nuevo módulo aparece una ventana modal (Figura A.16) en la que habrá que indicar la descripción, el tipo y el orden que ocupará el módulo en la encuesta. Un módulo puede ser textual o un conjunto de preguntas. Si es textual, aparte del contenido personalizado, también se podrán insertar textos predefinidos. Al pulsar el botón Insertar se crea el módulo y se muestra en la tabla de contenidos. Al pulsar Cancelar se cierra la ventana sin insertar ningún módulo. 181

202 Figura A.16. Ventana modal de inserción de módulo textual Al pulsar el botón Nueva pregunta se abrirá una ventana modal (Figura A.17) en la que se puede seleccionar una pregunta del repositorio personal del gestor, o crearla desde cero (la creación de pregunta desde cero se explicará en el apartado de gestión de preguntas). También se debe especificar si la pregunta será obligaría y si se incluye la opción NS/NC. Además hay que indicar a qué módulo se va a asociar y qué orden tendrá dentro del módulo. Al pulsar el botón Insertar se crea la asociación de pregunta/módulo y se muestra en la tabla de contenidos. Si se pulsa el botón Cancelar se cierra la ventana sin hacer ninguna asociación. Figura A.17. Ventana modal de inserción de pregunta 182

203 La tabla de contenidos muestra los descriptores de módulos y preguntas, así como el tipo. Permite cambiar el orden de los módulos dentro de la encuesta, y el orden de las preguntas dentro de cada módulo. También se permite la edición y la eliminación de ambos. Una encuesta puede editarse cuando aún no se han enviado invitaciones a encuestados para cumplimentarla (Figura A.18). En caso de haber enviado invitaciones, sólo se podrán modificar determinados campos como la descripción de la encuesta, el periodo en que se mantiene activa, el logotipo, el pie y las páginas de inicio y fin. El resto de opciones, incluida la inserción de módulos y preguntas, quedan deshabilitadas. Lo mismo ocurre para las encuestas creadas a partir de plantillas predefinidas. Estas encuestas no podrán modificar ningún módulo ni pregunta. Figura A.18. Mensajes de edición de encuesta. Una encuesta sólo se podrá modificar si no se han enviado invitaciones a encuestados para su cumplimentación (Figura A.19). En caso de eliminarla, se borrarán en cascada los módulos asociados a la misma. Figura A.19. Mensaje de eliminación de encuesta Gestión de preguntas Desde esta opción se pueden crear, editar y eliminar preguntas. La Figura A.20 muestra un botón Nueva pregunta y una tabla en la que se listan las preguntas del gestor, del tipo seleccionado. Esta tabla, además de mostrar el descriptor de la pregunta, también presenta un par de botones para editar y eliminar la pregunta. 183

204 Figura A.20. Pantalla de gestión de preguntas Al pulsar el botón Nueva pregunta se muestra el formulario donde habrá que indicar el tipo de pregunta, la descripción y a qué categoría va a pertenecer. Las preguntas pueden ser de cinco tipos: numéricas, textuales, sí/no, lista de elementos y Likerts. Las categorías las define el gestor y puede crear tantas como considere. Cada pregunta lleva asociados una serie de campos personalizados que se explican a continuación. Sí/no: no presenta ningún campo personalizado adicional. Campo numérico: se debe definir el número de decimales de 0 a 5. Campo textual: se debe indicar si se trata de un campo delimitado o extenso así como el número de caracteres o de líneas permitidos respectivamente. Lista de elementos: se debe indicar para qué tipo de encuesta está destinado puesto que si va a ser para un test, aparte de las distas opciones, se debe indicar cuál será la correcta. También se debe indicar qué lista de elementos va a contener la pregunta, que puede ser de nueva creación o se puede utilizar una lista ya definida en una pregunta anterior (Figura A.21). Si la lista es de nueva creación, habrá que insertar los elementos que va a contener y, en el caso de ser para un test, también se debe indicar qué elemento es el correcto. Si la lista de nueva creación no es para test, aparte del elemento, hay que insertar el valor asociado a cada elemento. Los elementos se pueden reordenar, insertar y eliminar, teniendo en cuenta que, si se trata de una pregunta para un test, el número de opciones debe coincidir con el número de elementos, y sólo se debe insertar un elemento como correcto. 184

205 Si se decide utilizar una lista ya existente, se puede seleccionar del desplegable teniendo en cuenta que, si la pregunta es para un test, sólo se mostrarán las listas con el mismo número de elementos que opciones tenga la pregunta. Figura A.21. Pantalla de inserción de pregunta de tipo lista de elementos Escala de Likert: al igual que las listas de elementos, hay que indicar si la pregunta utilizará una escala de Likert nueva o existente (Figura A.22). Si se crea desde cero, se debe indicar el nombre de la nueva escala, los valores y descriptores máximos y mínimos, así como el ervalo. Si se utiliza una escala ya existente, sólo habrá que seleccionarla del desplegable. Una vez seleccionada, se puede ver cómo quedará representa (esto mismo se puede hacer con las listas de las preguntas de tipo lista de elementos). 185

206 Figura A.22. Pantalla de inserción de pregunta de tipo escala de Likert En la Figura A.23 se muestran un par de ventanas modales con la representación de una lista y de una escala de Likert. Figura A.23 (a) Ventana modal de vista previa de listado; (b) Ventana modal de vista previa de Likert 186

207 Las preguntas también pueden tener recursos multimedia asociados (Figura A.24). Al editar una pregunta, aparece un panel en la parte inferior con un botón Nuevo recurso y una tabla de contenidos con la descripción del recurso, y varios botones para editar, ordenador, visualizar y eliminar un recurso asociado a una pregunta. Figura A.24. Detalle de pantalla de recursos multimedia Al pulsar el botón Nuevo recurso aparece una ventana modal (Figura A.25) en la que hay que especificar el tipo de recurso, la descripción, y el orden. Los recursos pueden ser tipo enlace, audio, vídeo, imagen o documento. Si es de tipo enlace, habrá que indicar la URL del mismo. Si es de cualquier otro tipo, habrá que seleccionar el archivo a subir. En la parte inferior de la ventana modal se muestran unas recomendaciones para redactar correctamente la descripción del recurso multimedia. Al pulsar el botón Insertar, se añade el recurso y se asocia a la pregunta. Si se pulsa Cerrar, se cierra la ventana sin insertar ningún recurso. Figura A.25. Ventana modal de inserción de recurso multimedia Al crear o editar una pregunta también se muestran una serie de recomendaciones en la parte superior. Una pregunta sólo podrá ser eliminada si no se utiliza en ninguna encuesta (Figura A.26). 187

208 Figura A.26. Mensaje de eliminación de pregunta Gestión de listas y Likerts Mediante esta opción (Figura A.27) se pueden editar o eliminar las listas de elementos y las escalas de Likert asociadas a las preguntas del gestor. Esta pantalla muestra en una tabla las listas o los Likerts, según se hayan seleccionado unos u otros. La tabla, además de mostrar la descripción, también incluye botones para la edición, la vista preliminar y la eliminación. Figura A.27. Pantalla de gestión de listas y Likerts Al pulsar el botón de edición, se muestra una pantalla modal con los datos de la lista o el Likert (Figura A.28). Pulsando sobre el botón Actualizar se modifican los datos editables. Si se pulsa Cancelar se cierra la ventana sin actualizar ningún dato. 188

209 Figura A.28. Ventana modal de edición de lista Las listas y los Likerts podrán ser eliminados cuando no estén asociados a ninguna pregunta. La Figura A.29 muestra el mensaje mostrado al entar eliminar un Likert ya asociado a varias preguntas. Figura A.29. Mensaje de eliminación de Likert Gestión de encuestados Desde esta opción se pueden asociar encuestados a encuestas, enviar las invitaciones y consultar estadísticas de encuestas y encuestados (Figura A.30). 189

210 Figura A.30. Pantalla de gestión de encuestados La pantalla muestra varios paneles. En el primero se listan los encuestados que ha insertado el gestor en alguna de sus encuestas. Seleccionando uno de ellos y pulsando el botón Ver histórico, se listan todas las encuestas a las que ha sido invitado, su porcentaje completado, el listado de accesos a cada encuesta (Figura A.32) y el tiempo que ha tardado en completar cada una de ellas (Figura A.31). Figura A.31. Ventana modal con histórico de encuestado 190

211 Figura A.32. Ventana modal con log de accesos de un encuestado El segundo panel sirve para asociar encuestados a las encuestas y enviar las invitaciones. Una vez seleccionada la convocatoria y la encuesta, se permiten tres tipos de inserciones: única, separados por punto y coma o carga masiva en Excel. Si se selecciona ésta última se muestra un enlace para descargar la plantilla Excel de carga masiva de encuestados. Pulsando el botón Insertar se realizan las cargas. Si se pulsa el botón Limpiar formulario, se inicia el proceso desde el principio. Al seleccionar convocatoria y encuesta se muestran todos los encuestados que hay asociados a esa encuesta. Se muestra el , el check de invitación enviada o no, el porcentaje de encuesta completada, un botón del log de accesos a la encuesta, y el tiempo que ha tardado en completarla. Si la invitación no ha sido aún enviada, aparecerá un botón para enviar pulsando sobre él. También se pueden seleccionar varios encuestados, o todos, y lanzar todas las invitaciones. Como el proceso de carga de encuestados y el de envío masivo puede ser lento dependiendo del número de encuestados, aparecerá la siguiente ventana modal mientras se realiza el proceso (Figura A.33). Una vez finalizado, se mostrará otra ventana modal con el resultado de las operaciones realizadas. Figura A.33. Ventana modal de proceso en ejecución 191

212 1.3. Notificaciones En este apartado se detallan las gestiones de plantillas, de envíos masivos y de consulta de histórico Gestión de plantillas Desde este apartado se pueden editar las plantillas de notificaciones que se enviarán a los encuestados (Figura A.34). Tan sólo hay que indicar el asunto y rellenar el contenido, que puede contener alguno de los campos codificados permitidos según la notificación seleccionada. Figura A.34. Pantalla de gestión de plantillas Los campos codificados pueden verse pulsando el enlace del campo contenido. Se muestra una ventana modal como la de la Figura A.35. Para utilizar un campo codificado sólo hay que copiar el contenido de la celda codificación en la parte del texto que queramos que aparezca. 192

213 Figura A.35. Ventana modal de campos codificados de una plantilla También se puede abrir una vista previa del tal como se enviará pulsando sobre el botón Vista previa (Figura A.36). En esta pantalla se reemplazan los campos codificados por los datos de ejemplo. Figura A.36. Vista previa de una plantilla 193

214 Gestión de envíos Desde este apartado se pueden lanzar los diferentes envíos masivos (Figura A.37): Invitación inicial a encuesta. Aviso de cuestionario no completado. Aviso de fin de plazo de entrega del cuestionario. Para lanzar un envío masivo hay que seleccionar convocatoria, encuesta y tipo de notificación. Si el envío ya se realizó con anterioridad, se mostrará la tabla de histórico indicando la fecha del envío, el número de notificaciones enviadas, no enviadas y enviadas previamente. Al pulsar el botón Enviar notificación se inicia el proceso de envío que tardará más o menos dependiendo del número de encuestados a los que haya que enviar el correo. Una vez terminado el proceso se mostrará un resumen del resultado y se añadirá un registro a la tabla de histórico. Figura A.37. Pantalla de envíos masivos de notificaciones Histórico de notificaciones Desde este apartado se pueden consultar todas las notificaciones enviadas por un gestor, aplicando diferentes filtros: periodo de envío, tipo de notificación, destinatario, etc. (Figura A.38). Se mostrará una tabla con los datos de las notificaciones enviadas. También se muestra un botón que permite visualizar los datos de la notificación que se envío. 194

215 Figura A.38. Pantalla de consulta de histórico de notificaciones 1.4. Informes En este apartado se detallan las opciones de descarga de respuestas, de generación de informes y de importación de datos en Excel Respuestas de encuestas Desde este apartado se pueden descargar las respuestas de las encuestas completadas por los encuestados en varios formatos (Figura A.40). Se pueden descargar tanto los valores, como los descriptores. Para los test, también se pueden descargar los resultados corregidos. Se han añadido unas recomendaciones para abrir los documentos.csv. Pueden verse pulsando el botón Aviso archivos.csv (Figura A.39). Figura A.39. Ventana modal con instrucciones de archivos CSV 195

216 Figura A.40. Pantalla de descarga de respuestas Informes de estadísticos Desde este apartado se pueden obtener los diversos informes dependiendo del tipo de encuesta seleccionada. Cuestionarios: el informe de este tipo de encuesta muestra la media, desviación típica, moda y mediana de cada pregunta, siempre y cuando sean del tipo escala de Likert. También muestra los mismos estadísticos agrupados por módulo, para aquellos de tipo conjunto de preguntas. Se generan gráficos de barras y de tipo radar para cada módulo, en los que se representan la media y la mediana de las preguntas que contiene. Al final del informe se generan otros dos gráficos similares a los anteriores, con la media y la mediana por módulo. En la Figura A.41 se muestra un ejemplo de informe de cuestionario en el que aparecen los tres tipos de módulos que pueden darse. En primer lugar se encuentra el módulo 1, de tipo textual, sin datos estadísticos. En segundo lugar hay un módulo de tipo conjunto de preguntas para el que no se ha podido calcular ningún dato estadístico ni se han generado los gráficos. Esto se debe a que todas sus preguntas son de tipo booleano sí/no y los estadísticos se calculan a partir del tipo escala de Likert. 196

217 En tercer y último lugar se muestra un módulo para el que sí se han calculado todos los estadísticos para todas las preguntas. También se ha totalizado por módulo y se han generado los gráficos. Figura A.41. Ejemplo de informe de cuestionario 197

218 Encuestas de opinión: el informe generado para este tipo de encuesta muestra los mismos estadísticos y gráficos que el anterior. Se diferencia en que también calcula el Alpha de Cronbach, que nos indica la fiabilidad de la encuesta. En la Figura A.42 se muestra un ejemplo de informe de encuesta de opinión. Figura A.42. Ejemplo de informe de encuesta de opinión 198

219 Test: el informe generado para este tipo es muy diferente de los dos anteriores. En primer lugar se calcula el Alpha de Cronbach de fiabilidad del test y el resto del informe varía dependiendo de la opción seleccionada. Modo encuesta: se muestran las preguntas de cada módulo y para cada una de ellas, se calculan los indicadores de dificultad, la proporción de encuestados que selecciona cada ítem y el RPBI. Cada pregunta incorpora un código de color indicando su dificultad: difícil (D), medio (M) o fácil (F). También se muestran, para cada distractor o para la opción correcta, iconos de advertencia en caso de no cumplir alguna de las condiciones definidas. Modo resumen: al seleccionar esta opción se muestran los mismos datos del apartado anterior, pero agrupados de diferente forma. Las preguntas se clasifican en tres grupos según su nivel de dificultad. También se muestran agrupados aquellos ítems que no cumplen alguna de las condiciones. En las Figuras A.43 y A.44 aparecen los informes de un test en ambos modos. La primera corresponde con el modo encuesta y la segunda con el modo resumen. Como se puede comprobar, la estructura es muy similar en ambos informes. En primer lugar se muestra la leyenda de los diferentes iconos utilizados. Más abajo aparece el indicador de fiabilidad calculado mediante el Alpha de Cronbach. En último lugar se muestran los datos de cada módulo y pregunta agrupados en diferentes formatos. 199

220 Figura A.43. Ejemplo de informe de test, modo encuesta 200

221 Figura A.44. Ejemplo de informe de test, modo resumen 201

222 Importación de datos en Excel Desde este apartado se pueden importar datos de encuestas no diseñadas desde la aplicación. Se puede descargar la plantilla Excel pulsando el enlace situado en la parte inferior del botón de importación (Figura A.45) Para cargar los datos tan sólo hay que pulsar el botón Importar nueva encuesta. Se abrirá una ventana modal en la que habrá que seleccionar el archivo y pulsar el botón Sí, importar. Pulsando el botón No, cancelar se cierra la ventana. Figura A.45. Pantalla de importación de datos en Excel Las encuestas previamente importadas se muestran en la tabla, en la que se indica la fecha de importación y el descriptor de la encuesta. También se permite eliminar los datos importados sin ningún tipo de restricción. Los datos de estas encuestas se pueden descargar en los formatos que permite el apartado Respuestas. También se pueden generar los informes estadísticos oportunos. 202

223 2. SECCIÓN ENCUESTADOS Esta sección describe todos los procesos relacionados con los encuestados. Desde la recuperación de credenciales, pasando por la cumplimentación de una encuesta/test, hasta la consulta de histórico de encuestas completadas. La página de inicio de la sección de encuestados tiene el aspecto de la Figura A.46. Se pueden distinguir la cabecera con el componente de inicio de sesión, la barra de migas, la zona central y el pie de página. Cabe destacar en la zona central el carrusel de imágenes donde se muestran las indicaciones para completar un estudio. Figura A.46. Pantalla de inicio de encuestados 2.1. Encuestados En este apartado se detallan los procesos de recuperación de credenciales de encuestado, de cambio de datos de cuenta de encuestado y la consulta de histórico de encuestas cumplimentadas y pendientes Recuperación de credenciales de encuestado El proceso de recuperación de credenciales es idéntico al de la sección de gestores. Se compone de dos pasos: la resolución de un captcha y la inserción del del encuestado, donde se recibirá el correo electrónico con las credenciales. En las Figuras A.47 y A.48 se pueden observar estos dos pasos. Rellenando el captcha y pulsando el botón Continuar se accede al formulario de inserción de

224 Figura A.47. Pantalla de recuperación de credenciales de encuestado, paso 1 Figura A.48. Pantalla de recuperación de credenciales de encuestado, paso Gestión de datos de cuenta de encuestado La gestión de datos de la cuenta de un encuestado es muy similar a la de un gestor. La única diferencia es que un encuestado no puede insertar su nombre y apellidos, pues esos datos no se almacenan. Sólo podrá modificar su , que debe ser único entre todos los encuestados. También puede cambiar su contraseña siguiendo los requisitos mínimos de clave y las recomendaciones de fortaleza. Esta opción está accesible desde el panel de inicio de sesión, una vez que el encuestado se ha autenticado. Pulsando el botón Mi cuenta se accede al formulario de la Figura A

225 Figura A.49. Pantalla de modificación de datos de cuenta de encuestado Histórico de encuestas Esta opción se encuentra en el menú izquierdo, con el nombre Mis encuestas. Aquí se muestran tanto las encuestas/test pendientes de completar del encuestado autenticado, como el listado de encuestas/test ya completadas (Figura A.50). La tabla muestra el descriptor de la encuesta y la fecha en que finaliza el plazo para completarla. En caso de aparecer en blanco, significa que no tiene plazo establecido. También se muestra una barra del porcentaje completado. Figura A.50. Pantalla de histórico de encuestas de encuestado 205

226 Para el caso de test, es posible que aparezca un icono adicional en la tabla de histórico de encuestas junto al nombre del test. Si se pulsa, aparecerá una ventana modal con los resultados que ha obtenido el encuestado. En la Figura A.51 se muestra un ejemplo de ventana modal de resultados de test. Se listan todas las preguntas que componen el test y se indica la respuesta escogida por el encuestado y cuál es la correcta. El final se hace la media en base 10 para la obtención de la calificación. Pulsando el botón Generar Excel se da la opción de descargar los resultados obtenidos en formato Excel. Figura A.51. Ventana modal con resultados obtenidos en un test 2.2. Cumplimentación de encuesta/test Un encuestado sólo puede cumplimentar una encuesta/test si ha recibido una invitación por correo electrónico como la mostrada en la Figura A.52. Figura A.52. Ejemplo de invitación a una encuesta 206

227 Al pulsar sobre el enlace de la parte central se cargará automáticamente la encuesta en un navegador web. En la Figura A.53 se muestra un ejemplo de encuesta. Se pueden observar varios elementos, como la barra superior con los botones de aumentar/reducir tamaño de letra, aumentar/reducir contraste, parar/reanudar, contador de tiempo (en este caso la encuesta no está limitada en el tiempo) y barra de progreso. Después aparece el nombre de la encuesta, el logotipo, la página inicial con la nota de confidencialidad, el botón de continuar y el pie de encuesta. Figura A.53. Ejemplo de encuesta Las Figuras A.54, A.55 y A.56 muestran el resultado de pulsar los botones aumentar/reducir tamaño de letra y aumentar/reducir contraste. En la Figura A.54 se aprecia el texto reducido. En la Figura A.55, el texto ampliado. En la Figura A.56 se ha aumentado el contraste. Para volver al tamaño de texto predeterminado, hay que pulsar el botón central representado con una T en tamaño mediano. Para volver al contraste reducido o predefinido, hay que pulsar el botón con el icono de menor tamaño representativo de esta característica. 207

228 Figura A.54. Ejemplo de encuesta con texto reducido en tamaño Figura A.55. Ejemplo de encuesta con texto aumentado en tamaño 208

229 Figura A.56. Ejemplo de encuesta con texto aumentado en contraste Al pulsar el botón se muestra el siguiente bloque de módulos de la encuesta (Figura A.57). Se puede observar cómo la barra de progreso se ha modificado. Todas las preguntas de este módulo son obligatorias puesto que incorporan el asterisco indicativo de obligatoriedad. 209

230 Figura A.57. Ejemplo de paso 2 de encuesta Si pulsamos el botón Continuar sin rellenar ninguna pregunta aparecerá una ventana modal como la mostrada en la Figura A.58. Figura A.58. Resumen de validación de encuesta 210

231 Una vez se han completado todos los módulos y se ha llegado al final de la encuesta/test, aparece el mensaje mostrado en la Figura A.59. Figura A.59. Ejemplo de encuesta finalizada 211

232 B. Cuestionarios TAM (Technology Acceptance Model) Este anexo muestra el contenido del cuestionario TAM (incluido en el repositorio de cuestionarios de la aplicación). Página inicial Por favor valore la utilidad y facilidad de uso de la aplicación. Responda a todas las preguntas teniendo en cuenta que 1 representa Completamente de acuerdo y 7 representa Completamente en desacuerdo. Para aquellas que no aplique, marque NS/NC. Módulo 1: Percepción de la utilidad Pregunta NS/NC 1. La aplicación me permite realizar las tareas con mayor rapidez 2. La aplicación me permite mejorar el rendimiento en el trabajo 3. La aplicación me ayuda a aumentar la productividad en el trabajo 4. La aplicación mejora mi efectividad en el trabajo 5. La aplicación me facilita la realización de las tareas en el trabajo 6. La aplicación me resulta útil en el trabajo Módulo 2: Percepción de la facilidad de uso Pregunta NS/NC 1. Resulta sencillo aprender a manejar la aplicación 2. Resulta sencillo que la aplicación haga exactamente lo que quiero 3. La eracción con la aplicación resulta clara y comprensible 4. El sistema permite una eracción flexible 5. Es sencillo adquirir un buen dominio de la aplicación 6. La aplicación es fácil de usar Tabla B.1. Cuestionario TAM 212

233 C. Cuestionario SUS (System Usability Scale) Este anexo muestra el contenido del cuestionario SUS (incluido en el repositorio de cuestionarios de la aplicación). Página inicial Por favor valore la utilidad de la aplicación. Responda a todas las preguntas teniendo en cuenta que 1 representa Completamente de acuerdo y 5 representa Completamente en desacuerdo. Para aquellas que no aplique, marque NS/NC. Módulo 1: Cuestiones Pregunta 1. Utilizo la aplicación frecuentemente 2. La aplicación es innecesariamente compleja 3. La aplicación es fácil de usar 4. He necesitado la ayuda del equipo técnico para utilizar la aplicación 5. Las funciones de la aplicación están bien egradas 6. La aplicación presenta una gran inconsistencia 7. La gran mayoría aprendería a utilizar la aplicación rápidamente 8. La aplicación es difícil de usar 9. Me sentí seguro usando la aplicación 10. Necesité aprender algunos conceptos antes de utilizar la aplicación NS/NC Tabla C.1. Cuestionario SUS 213

234 D. Guía para la Creación de Pruebas Tipo Test de Respuesta Múltiple Este anexo incluye un checklist con las recomendaciones a tener en cuenta a la hora de diseñar preguntas para test. Fuente: José Luis Ucieda (Profesor Titular de Economía Financiera y Contabilidad, Universidad Autónoma de Madrid) 1.- Cuestiones generales sobre el procedimiento Usar el formato «mejor respuesta» o la «opción correcta». Evitar preguntas complejas. Formatear la pregunta vertical y horizontalmente. Editar y revisar las preguntas antes de utilizarlas. Evitar errores de gramática, abreviaturas, puntuación y ortografía. Minimizar el tiempo de lectura. Evitar las preguntas con trampa. 2.- Cuestiones generales sobre el contenido Cada pregunta debe basarse en un objetivo de aprendizaje importante. Centra cada pregunta en un único problema. Usa el vocabulario de manera consistente con el grupo de estudiantes que se examinan. Evita enlazar o relacionar una pregunta con la anterior o siguiente; mantén la independencia de cada pregunta. Evita preguntar sobre el conocimiento muy específico. Evita citar o parafrasear los libros o apuntes. Evita las preguntas basadas en opiniones. Enfatiza el uso de preguntas de pensamiento superior. Pregunta sobre material importante o significativo; evita cuestiones triviales. 3.- Construcción de las preguntas Las preguntas deben ir en formato de pregunta en lugar de frase a completar. Si se usa el formato de frase a completar, no dejes un espacio en medio o al comienzo de la pregunta. Asegura que la pregunta es clara y que permite al estudiante saber exactamente qué se le pregunta. Evita preguntas retóricos o con verborrea. Formula la pregunta de manera afirmativa; evita frases negativas. Incluye la idea central en la pregunta. 4.- Construcción de opciones (respuestas) 214

235 Usa tantos distractores como sea posible dentro de lo razonable. Ordena las respuestas de una manera lógica y numérica. Escribe respuestas independientes y que no se superpongan. Escribe todas las respuestas con contenido homogéneo. Escribe respuestas de longitud similar. Evita usar «todas las anteriores». Evita usar «ninguna de las anteriores». Evita usar «no lo sé». Escribe las respuestas en sentido positivo (o al menos remárcalo en negrita). Evita usar pistas de ortografía o gramática. 5.- La respuesta correcta Equilibra la respuesta correcta entre las alternativas. Usa sólo una respuesta correcta. 6.- Desarrollo de distractores (respuestas incorrectas) Utiliza distractores lógicos y plausibles. Utiliza los errores más comunes de los estudiantes. Utiliza frases técnicas. Utiliza frases verdaderas pero incorrectas. Evita el sentido del humor. 215

236 E. Recomendaciones Sobre las Descripciones de Elementos Multimedia Este breve anexo muestra las recomendaciones ofrecidas al gestor a la hora de insertar el descriptor de un contenido multimedia. Debe ser concisa y breve. Sé consistente en el uso de las descripciones. No es necesario añadir «imagen de», «video de...», «audio de...» al describir un recurso. Describa lo que representa, lo que se ve o se escucha. Trate de iniciar la descripción con una palabra clave. 216

237 F. Resumen de los Defectos Técnicos en los Ítems Este anexo muestra un checklist de recomendaciones a la hora de elaborar preguntas de test. Fuente: «Cómo elaborar preguntas para evaluaciones escritas en el área de ciencias básicas y clínicas» National Board of Medical Examiners (NBME) 1.- Temas relacionados con la estrategia para rendir exámenes Pistas gramaticales: uno o más distractores no tienen correspondencia gramatical con el enunciado. Pistas lógicas: un subgrupo de las opciones son en conjunto exhaustivas. Términos absolutos: se usan términos como «siempre» o «nunca» en algunas opciones. Respuesta correcta extensa: la respuesta correcta es más extensa, más específica o más completa que las otras opciones. Repeticiones de palabras: se incluye una palabra o frase en el enunciado y en la respuesta correcta. Estrategia de convergencia: la respuesta correcta incluye la mayor cantidad de elementos en común con las otras opciones. 2.- Temas relacionados con dificultades irrelevantes Las opciones son extensas, complicadas o dobles. Los datos numéricos no se expresan de manera uniforme. Los términos en las opciones son poco precisos (por ejemplo, «pocas veces», «normalmente»). La redacción en las opciones no es paralela. Las opciones están en un orden que no es lógico. «Ninguna de las anteriores» se usa como una opción. Los enunciados son engañosos o innecesariamente complicados. La respuesta a una pregunta depende de la respuesta a otra pregunta relacionada. 3.- Pautas generales para la elaboración de un ítem Asegúrese de que el ítem pueda ser respondido sin mirar las opciones o bien de que las opciones sean 100% verdaderas o falsas. Incluya en el enunciado la mayor cantidad de datos posible; el enunciado debe ser extenso y las opciones cortas. Evite incluir información innecesaria. Evite redactar ítems engañosos y excesivamente complicados. Redacte opciones que sean gramaticalmente coherentes y lógicamente compatibles con el enunciado; enumérelas en orden alfabético o lógico. Redacte distractores que sean verosímiles y de la misma longitud que la respuesta. 217

238 Evite usar términos absolutos, tales como «siempre», «nunca» y «todo» en las opciones; también evite usar términos poco precisos, como «normalmente» y «con frecuencia». Evite las preguntas redactadas en forma de oración negativa (por ejemplo, aquellas que incluyen «excepto» o «no» en la pregunta roductoria). Si es necesario expresar el enunciado mediante una oración negativa, use solamente opciones breves (preferentemente de una sola palabra). Y lo que es más importante: concéntrese en conceptos importantes; no pierda tiempo en evaluar datos triviales. 218

239 G. Estrategias y Pautas para Hacer Exámenes Tipo Test Este anexo listas las estrategias y pautas a la hora de hacer exámenes tipo test. Este listado puede añadirse en las páginas de inicio y fin de encuesta o en los módulos textuales. Algunas estrategias y pautas para hacer exámenes tipo test Presta atención al tiempo con que cuentas para hacer el test; es recomendable que lleves un reloj. Entérate de si hay penalización por las respuestas incorrectas. Hojea el test: a medida que lo lees toma nota de aquellos ítems que parecen más sencillos y aquellos que parecen más complicados Comienza con las preguntas que puedes responder fácilmente; no pierdas tiempo al principio con las preguntas más complicadas. Asegúrate los puntos de los ítems que te sabes bien. Vuelve a las preguntas que no pudiste responder en el primer ento. Quizás puedas responder con facilidad ahora por el sólo hecho de estar más relajado por haber respondido ya a otras preguntas; algunas veces la respuesta a una pregunta nos da pistas para responder a otra. Lee e enta comprender el enunciado antes de mirar las alternativas y de elegir una. Evita sacar conclusiones apresuradas acerca de lo que crees que el ítem pregunta. Identifica los términos clave y las palabras que aporten pistas. Cuando te encuentres con términos ambiguos tradúcelos a tus propias palabras. Piensa en la respuesta correcta y después búscala entre las alternativas. En caso de que las alternativas difieran sólo en una o dos palabras, o en el orden de uno o dos términos, puede resultar útil leer el enunciado de la pregunta seguido de una alternativa (mientras cubres las demás). Con este método será más fácil discriminar las opciones y eliminar aquellas que no completan adecuadamente al enunciado. También puedes responder a todas las preguntas de un mismo tema, y evitar la mezcla de temas inherente al diseño de este tipo de test. Esto requiere tener mucho cuidado en completar todos los ítems sin saltarse ninguno. Presta especial atención a la terminología que conecta las alternativas o preguntas con áreas clave de la asignatura, las clases o capítulos; puede ayudarte a reducir las alternativas posibles y llegar a la mejor respuesta. Suelen ser incorrectas las opciones: - que tienen un estilo muy diferente de las demás opciones, - que no concuerdan gramaticalmente con el enunciado, - que no son del área o tópico de la pregunta, pero tienen que ver con otra área de la asignatura. 219

240 Cuando las cosas se complican... No entes adivinar demasiado deprisa! Es importante leer todas las alternativas y no parar cuando encuentres una que creas probable. Debes de seleccionar una alternativa no sólo técnicamente correcta, sino la más correcta. Alternativas como «todas las anteriores» o «ninguna de las anteriores» son muy inclusivas y tienden a ser más veces correctas que incorrectas. Ten cuidado con alternativas que incluyan términos como «nunca», «siempre», «garantiza», «asegura». Tales palabras son bastante restrictivas y muy difíciles de defender en caso de ser elegidas. En la mayoría de las ocasiones son alternativas incorrectas. Por el contrario, otros términos como «a veces resulta en», «ocasionalmente puede derivar hacia», pueden resultar correctos en más ocasiones. Ten cuidado con las opciones demasiado largas o que incorporen «jerga» (terminología informal o no científica). Suelen ser utilizadas como señuelos o trampas. Utiliza tu conocimiento previo sobre sufijos, prefijos y raíces de palabras para hacer adivinaciones eligentes sobre términos que desconoces. Conocer el prefijo «hiper» por ejemplo, te ayudará a erpretar que la hipertensión se refiere presión sanguínea alta, no baja. Estate pendiente de pistas procedentes de la gramática. La respuesta correcta al enunciado de un ítem que acaba en preposición o conjunción (ej. «en», «a») suele empezar por un artículo. Utiliza la información y conocimientos que has adquirido al ir haciendo el test para revisar respuestas previas de las que no estabas seguro. Si no estás seguro de una respuesta y has de jugártela, hazlo pero... metódicamente. Elimina alternativas que son claramente incorrectas y a continuación relaciona las que queden con el enunciado para comprobar si encajan. Quédate con una o dos alternativas y compáralas para identificar diferencias entre ellas. Finalmente, adivina con fundamento. Si no tienes ninguna idea de cuál es la respuesta correcta, y no puedes utilizar las técnicas anteriores, y no hay penalización por respuestas incorrectas, escoge las opciones B o C (algunas investigaciones indican que estas alternativas suelen ser correctas en más ocasiones que por puro azar). Cuando se te presenten opciones del tipo «todas las anteriores», «ninguna de las anteriores» o «Ni A, ni B... es correcta», considera cada alternativa como una pregunta de verdadero/ falso, y después relaciónala con el enunciado. Piensas que te has equivocado en una respuesta? Quieres cambiarla? Si estás seguro de que tu primera respuesta está errada, cámbiala; pero si no tienes certezas y al escoger la primera respuesta tenías una mínima seguridad, no la cambies. Finalmente, recuerda que la mejor manera de asegurar la selección de la opción correcta es saberse la respuesta correcta

241 H. Nota de Confidencialidad Este anexo muestra la nota de confidencialidad que se puede añadir a las páginas de inicio y fin de encuestas, y en los módulos textuales. De acuerdo con lo dispuesto en la Ley orgánica 15/1999 de Protección de Datos de Carácter Personal, le informamos que sus datos pasan a formar parte del fichero del aplicativo "Generador de Encuestas", cuya finalidad es la recogida de resultados de encuestas para su posterior análisis. Asimismo, le comunicamos que puede ejercitar los derechos de acceso, rectificación, cancelación y oposición de sus datos remitiendo un a adjuntando copia de documento que acredite su identidad. 221

242 I. Documentos Excel de Importación de Datos En este anexo se muestran los documentos Excel de importación de datos en la aplicación desarrollada. Se explican las hojas que los componen y las instrucciones a seguir para completarlos. Todas las hojas de los documentos Excel se han protegido. Del mismo modo se han bloqueado todas las celdas clave empleadas en la importación de datos. También se han Cargas Masivas de Encuestados Se compone de una única hoja Hoja1 (Figura I.1). Los s de los encuestados que se van a cargar de forma masiva en la aplicación se insertarán bajo la celda A1 (donde aparece el encabezado ). Importación de Resultados de Test Figura I.1. Excel de carga masiva de encuestados 1) Encuesta: incluye las instrucciones a seguir para la inserción de datos en las diferentes hojas (Figura I.3). En esta hoja se especifica el número de opciones de las preguntas del test bajo la celda A1 numopciones y el nombre de la encuesta bajo la celda B1 nombre (Figura I.2). Figura I.2. Hoja encuesta del Excel de importación de resultados 222

243 INSTRUCCIONES Hay que completar las 4 hojas de la plantilla según las siguientes instrucciones. Se han insertado varios datos de prueba orientativos en cada hoja que deben ser eliminados. Encuestas 1. Inserte el nº de opciones de las preguntas del test. 2. Inserte el nombre de la encuesta (máximo 250 caracteres). Módulos 1. Inserte el identificador numérico del módulo. 2. Inserte el descriptor del módulo (100 caracteres máximo). Preguntas 1. Inserte el identificador numérico de la pregunta. 2. Inserte el identificador numérico del módulo (debe coincidir con alguno de los identificador de la hoja 'Modulos'). 3. Indique la opción correcta de la pregunta (debe ser un valor numérico comprendido entre 1 y el valor de la casilla numopciones de la hoja 'Encuesta'). 4. Inserte el descriptor de la pregunta. Respuestas 1. Inserte las respuestas de cada encuestado en una fila, haciendo coincidir el número de pregunta con la respuesta correspondiente. 2. Las respuestas nulas o en blanco debe marcarlas con un 0. Figura I.3. Instrucciones de rellenado del Excel de importación de datos 2) Módulos: en esta hoja se insertan los identificadores y descriptores de los módulos que componen la encuesta bajo las celdas A1 id_modulo y B1 des_modulo respectivamente (Figura I.4). Figura I.4. Hoja módulos del Excel de importación de resultados 223

244 3) Preguntas: en esta hoja se insertan los identificadores y descriptores de las preguntas de cada módulo bajo las celdas A1 id_pregunta y D1 des_pregunta, debiendo especificar también el identificador del módulo al que pertenecen bajo la celda B1 id_modulo y el nº de opción correcta bajo la celda C1 opcioncorrecta (Figura I.5). Figura I.5. Hoja preguntas del Excel de importación de resultados 4) Respuestas: en esta hoja se insertan las respuestas dadas por cada encuestado a cada pregunta. Cada fila contendrá todas las respuestas de un encuestado. Se han definido un máximo de 100 preguntas de la celda A1 a la celda CV1 (Figura I.6). Figura I.6. Hoja respuestas del Excel de importación de resultados 224

245 J. Diagrama de Base de Datos En este anexo se muestra el diagrama de base de datos completo, con todas las tablas y las relaciones que se establecen entre ellas. plantilla_historico Nombre de columna Tipo de datos Permitir v... id_historico fecha datetime recomendaciondoc Nombre de columna Tipo de datos Permitir v... id_doc des_doc varchar(300) des_fuente varchar(300) orden recomendaciongrupo Nombre de columna Tipo de datos Permitir v... id_grupo des_grupo varchar(100) id_doc orden id_plantilla id_encuesta remitente_usuario remitente_ destinatario_gestor destinatario_encuest... destinatario_ asunto mensaje resultado varchar(200) varchar(200) varchar(20) uniqueidentifier varchar(200) varchar(100) varchar(max) bit plantilla_lanzamiento Nombre de columna Tipo de datos Permitir v... id_lanzamiento id_plantilla id_encuesta fecha datetime numcorrectos numfallos numenviados recomendacion Nombre de columna Tipo de datos Permitir v... id_recomendacion des_recomendacion varchar(300) id_grupo orden textopredefinido Nombre de columna Tipo de datos Permitir v... id_textopredefinido encuestado Nombre de columna Tipo de datos Permitir v... id_encuestado uniqueidentifier varchar(200) clave varchar(500) f_ultimoacceso datetime entos24horas f_ultimointento datetime codigos24horas f_ultimocodigo datetime encuestado_log Nombre de columna Tipo de datos Permitir v... id id_encuestado uniqueidentifier id_encuesta fecha datetime paso varchar(50) campo Nombre de columna Tipo de datos Permitir v... id_campo des_campo varchar(30) codificacion varchar(30) ejemplo varchar(max) orden des_textopredefinido varchar(50) textopredefinido varchar(max) cabecera Nombre de columna Tipo de datos Permitir v... id_cabecera id_encuesta f_inicio datetime f_fin datetime respuesta_encuestado Nombre de columna Tipo de datos Permitir v... id_encuestado uniqueidentifier id_encuesta id_modulo encuestado_encuesta Nombre de columna Tipo de datos Permitir v... id_encuestado uniqueidentifier id_encuesta id_invitacion uniqueidentifier invitacionenviada bit id_cabecera f_iniciocontador datetime f_inicioencuesta datetime f_finencuesta datetime plantilla_campo Nombre de columna Tipo de datos Permitir v... id_plantilla id_campo plantilla Nombre de columna Tipo de datos Permitir v... id_plantilla des_plantilla varchar(100) asuntoinicial varchar(100) contenidoinicial varchar(max) respuesta Nombre de columna Tipo de datos Permitir v... id_cabecera id_modulo id_pregunta respuesta varchar(max) encuesta Nombre de columna Tipo de datos Permitir v... id_encuesta des_encuesta varchar(250) usuario varchar(20) id_convocatoria id_tipoencuesta numopciones f_inicio datetime convocatoria Nombre de columna Tipo de datos Permitir v... id_convocatoria des_convocatoria varchar(250) usuario varchar(20) f_inicio datetime f_fin datetime orden publico bit plantilla_usuario Nombre de columna Tipo de datos Permitir v... id_plantilla f_fin datetime usuario varchar(20) tipoencuesta Nombre de columna Tipo de datos Permitir v... id_tipoencuesta des_tipoencuesta varchar(50) tipomodulo Nombre de columna Tipo de datos Permitir v... n_modulospantalla tiempo mostrarresultados logo pie pag_inicio pag_fin bit varchar(500) varchar(500) varchar(max) varchar(max) modulo_pregunta Nombre de columna Tipo de datos Permitir v... id_modulo id_pregunta obligatorio bit NSNC bit orden asunto varchar(100) contenido varchar(max) gestor Nombre de columna Tipo de datos Permitir v... usuario varchar(20) clave varchar(500) id_tipomodulo varchar(200) des_tipomodulo varchar(50) modulo Nombre de columna Tipo de datos Permitir v... nombre apellido1 varchar(100) varchar(100) id_modulo des_modulo varchar(100) pregunta_recurso apellido2 f_ultimoacceso varchar(100) datetime tipocategoria Nombre de columna Tipo de datos Permitir v... id_tipocategoria des_tipocategoria varchar(50) usuario varchar(20) id_encuesta id_tipomodulo contenido orden varchar(max) Nombre de columna Tipo de datos Permitir v... id_recurso id_pregunta id_tiporecurso ruta varchar(500) entos24horas f_ultimointento codigos24horas f_ultimocodigo datetime datetime textoalternativo varchar(250) orden pregunta tipopregunta Nombre de columna Tipo de datos Permitir v... id_tipopregunta des_tipopregunta varchar(50) lista Nombre de columna Tipo de datos Permitir v... id_lista des_lista varchar(50) numopciones usuario varchar(20) predefinida bit Nombre de columna Tipo de datos Permitir v... id_pregunta des_pregunta varchar(max) usuario varchar(20) id_tipocategoria id_tipopregunta predefinida bit id_likert id_lista numerico_numdecimales textual_corto bit textual_num tiporecurso Nombre de columna Tipo de datos Permitir v... id_tiporecurso des_tiporecurso varchar(50) likert Nombre de columna Tipo de datos Permitir v... id_likert des_likert varchar(50) log id Nombre de columna Tipo de datos Permitir v... fecha ip dns usuario operacion parametros resultado mensaje traza datetime varchar(100) varchar(100) varchar(200) varchar(500) varchar(max) bit varchar(max) varchar(max) listaitem Nombre de columna Tipo de datos Permitir v... id_lista des_item varchar(500) valor_item varchar(50) respuesta_item bit orden imp_modulo Nombre de columna Tipo de datos Permitir v... id_modulo id_encuesta des_modulo varchar(100) usuario varchar(20) valornumdecimales valormin decimal(18, 5) valormax decimal(18, 5) desmin varchar(50) desmax varchar(50) ervalonumdecimales ervalo decimal(18, 5) predefinido bit logadm Nombre de columna Tipo de datos Permitir v... id fecha datetime ip varchar(100) dns varchar(100) usuario varchar(200) operacion varchar(500) parametros varchar(max) resultado bit mensaje varchar(max) traza varchar(max) imp_encuesta imp_pregunta Nombre de columna Tipo de datos Permitir v... imp_respuesta Nombre de columna Tipo de datos Permitir v... Nombre de columna Tipo de datos Permitir v... id_pregunta id_encuestado id_encuesta id_modulo id_encuesta des_encuesta varchar(250) id_encuesta id_modulo usuario varchar(20) des_pregunta varchar(max) id_pregunta numopciones opcioncorrecta respuesta fecha datetime Figura J.1. Diagrama de base de datos 225

246 K. Informes de Encuestas En este anexo se muestran ejemplos de informes completos que se pueden obtener para todas las posibles opciones de cuestionarios, encuestas de opinión y test. Figura K.1. Informe completo de test en modo encuesta 226

247 Figura K.2. Informe completo de test en modo resumen 227

248 Figura K.3. Informe de encuesta de opinión, parte 1 228

249 Figura K.4. Informe de encuesta de opinión, parte 2 229

250 Figura K.5. Informe de encuesta de opinión, parte 3 230

251 Figura K.6. Informe de encuesta de opinión, parte 4 231

252 Figura K.7. Informe de encuesta de opinión, parte 5 232

253 Figura K.8. Informe de encuesta de opinión, parte 6 233

254 L. Opciones de configuración del Servidor IIS7 En este anexo se muestra una captura de la pantalla de configuración del servidor IIS7. Se muestran las características que deben marcarse para el correcto funcionamiento. Figura L.1. Pantallazo de opciones de configuración del servidor IIS7 234

255 M. Configuración del Servidor IIS6 En este anexo se detalla, paso a paso, cómo se debe configurar el servidor IIS6 para poder alojar la aplicación. Para poder ejecutar una aplicación web en.net, antes hay que habilitar el servidor IIS. Para ello hay que abrir el Panel de Control y pulsar sobre Agregar o quitar programas. Aparecerá la ventana de la Figura M.1. Figura M.1. Opción de agregar o quitar programas del panel de control en Windows XP Después hay que pulsar la opción Agregar o quitar componentes de Windows. Se mostrará un listado (Figura M.2) en el que hay que buscar el elemento Servicios de Internet Information Server (IIS), marcar el check correspondiente y pulsar el botón Siguiente. Si se utiliza IIS7, hay que especificar más detalladamente la configuración. Figura M.2. Ventana asistente para componentes de Windows XP 235

256 Una vez habilitado el IIS, se puede acceder a la consola de administración del IIS desde el icono Herramientas administrativas del Panel de Control (Figura M.3). Figura M.3. Contenido de la carpeta herramientas administrativas de Windows XP Lo primero que se debe realizar para poder lanzar la aplicación es configurar el punto de publicación donde se alojarán todos los archivos de la aplicación web. Las opciones de configuración y el modo de proceder varían dependiendo de la versión del IIS. Para este proyecto se ha utilizado un IIS6. Tras configurar IIS6, se procede a crear el punto de publicación. El servidor define el directorio de un sitio web predeterminado, donde deben alojarse todas las aplicaciones: C:\Inetpub\wwwroot. IIS7 nos permitiría definir nuevos sitios web, no tendríamos que utilizar el predefinido. Se procede a crear un directorio dentro de esa ruta Encuestas/ que alojará todos los archivos de la aplicación web y se configura el punto de publicación. En la siguiente imagen se muestra la erfaz del IIS de Windows XP. Se puede observar cómo cuelgan varias aplicaciones del sitio web predeterminado, entre las que se encuentra la de Encuestas (Figura M.4). 236

257 Figura M.4. Interfaz del IIS de Windows XP Pulsando sobre Encuestas con el botón derecho del ratón, aparece un menú contextual. De ese menú se debe seleccionar la opción Propiedades y se abrirá una ventana como la mostrada en la Figura M.5. En la pestaña Directorio virtual, pulsando sobre el botón Crear ya tendremos el punto de publicación listo. Figura M.5. Pestaña directorio virtual de la ventana propiedades de Encuestas Desde la pestaña ASP.NET se debe seleccionar el Framework de desarrollo desde el desplegable con el nombre Versión de ASP.NET (Figura M.6). 237

258 Figura M.6. Pestaña ASP.NET de la ventana propiedades de Encuestas En la pestaña Documentos (Figura M.7) se debe agregar el documento index.aspx y ubicarlo en la primera posición para indicar al servidor que en una llamada a esta aplicación, la primera página que debe mostrar es index.aspx en caso de que el usuario no especifique ninguna. Figura M.7. Pestaña documentos de la ventana propiedades de Encuestas Otro tema importante a tener en cuenta es que los archivos con extensión.config no deben tener permiso de descarga. En caso contrario, cualquier usuario podría obtenerlo 238

259 fácilmente y tener acceso a información muy sensible como son las contraseñas de acceso al repositorio de datos o la clave de encriptación de password de gestores y encuestados. En IIS6 este tipo archivos no son descargables por defecto. Por último, hay determinadas carpetas en la aplicación que requieren permisos de escritura como la que almacenan los logos de las encuestas, o la que almacena los recursos multimedia asociados a las preguntas, así como la carpeta temporal donde se suben las plantillas Excel para poder leerlas. Desde localhost no es necesario dar permisos especiales de escritura, pero al subir la aplicación al entorno de producción sí es necesario. Para ello basta con pulsar sobre la carpeta a la que hay que dar permisos especiales, buscar el usuario que ejecuta la aplicación en el IIS y marcar la casilla que da permisos de modificación (Figura M.8). Figura M.8. Ventana de propiedades de la carpeta temporal Para subir la aplicación a producción, debemos publicarla previamente desde Visual Studio, con el fin de subir los documentos compilados y no los fuentes. Para ello hay que abrir el proyecto y pulsar sobre el sitio web con el botón derecho. En el menú contextual que aparece se selecciona Publicar sitio web. A esta opción también se puede llegar desde la barra de menús superior, desplegando Generar (Figura M.9). 239

260 Figura M.9. Ubicación de la opción Publicar sitio web en Visual Studio 2010 Aparecerá una ventana como la mostrada en la siguiente imagen. Se selecciona la ruta donde se generarán los compilados y se marcan las dos primeras casillas: Permitir que el sitio precompilado se actualice: esta opción sirve para que el contenido de las páginas.aspx no se compile en el ensamblado, lo que permite realizar cambios en la funcionalidad del cliente y el código HTML incluso después de haber subido la aplicación a producción. Utilizar nomenclatura fija y ensamblados de una sola página (Figura M.10): esta opción sirve para que se genere un ensamblado por cada documento.aspx y.master con el mismo nombre. También generará, para los directorios de nivel superior como puede ser App_Code, un solo ensamblado para todos los archivos.cs que pueda contener. Figura M.10. Ventana Publicar sitio web en Visual Studio

261 Tras pulsar el botón Aceptar, comienza la compilación y generación de ensamblados. El resultado de este proceso puede seguirse a través de la Ventana de resultados, la cual se puede activar desde la barra de menús superior, desplegando la opción Ver y seleccionando Resultados. A continuación se muestra un ejemplo resumido de compilación: Operación Generar iniciada: proyecto: configuración: Debug Any CPU Precompilando el sitio web Directorio de generación '/Encuestas/App_Code/'. Precompilación completada Publicación iniciada: proyecto: configuración: Debug Any CPU Conectando al sitio C:\Documents and Settings\UCLM\Escritorio\Publicado... Eliminando archivos existentes... Publicando directorio /... Publicando directorio adm... Publicando directorio App_Comun... ========== Generar: 1 correctos o actualizados, 0 incorrectos, 0 omitidos ========== ========== Publicación: 1 procesados, 0 no procesados, 0 omitidos ========== Figura M.11. Ejemplo de publicación de la aplicación web Una vez finalizada la publicación, se copiarán los archivos en la ruta donde hayamos creado el punto de publicación. Si queremos utilizar un nombre más representativo que localhost para ejecutar la aplicación desde desarrollo, debemos modificar el archivo host ubicado en la ruta de la Figura M.12: C:\WINDOWS\system32\drivers\etc\host Figura M.12. Ruta del archivo de configuración de host Tan solo hay que incluir la dirección IP e indicar el nombre que deseamos utilizar. En el siguiente cuadro se muestra el contenido de dicho archivo, resaltando en amarrillo el nombre del host que hemos insertado: 241

262 # Copyright (c) Microsoft Corp. # # Éste es un ejemplo de archivo HOSTS usado por Microsoft TCP/IP para Windows. # # Este archivo contiene las asignaciones de las direcciones IP a los nombres de # host. Cada entrada debe permanecer en una línea individual. La dirección IP # debe ponerse en la primera columna, seguida del nombre de host correspondiente. # La dirección IP y el nombre de host deben separarse con al menos un espacio. # # # También pueden insertarse comentarios (como éste) en líneas individuales # o a continuación del nombre de equipo indicándolos con el símbolo "#" # # Por ejemplo: # # rhino.acme.com # servidor origen # x.acme.com # host cliente x localhost tfg.uclm.es Figura M.13. Ejemplo de configuración de host A partir de ahora, podemos ejecutar la aplicación desde la URL: Figura M.14. Interfaz de la aplicación llamada desde 242

263 N. Introducción al modelado de tareas con la notación CTT En este anexo se incluye una breve roducción al modelado de tareas con la notación CTT, prestando especial atención a los tipos de tareas y operadores soportados por dicha notación. El modelado de tareas se utiliza ampliamente para representar las actividades lógicas que realiza el usuario mientras eractúa con una aplicación, es decir, muestra las tareas que el usuario debe realizar para eractuar con el sistema. La notación CTT (ConcurTaskTrees) 53 fue propuesta en 1999 por Fabio Paternò. Es muy empleada en el área de la Interacción Persona-Ordenador (IPO) para crear los modelos las tareas. La representación utiliza una saxis gráfica en forma de árbol, sencilla de erpretar, con una estructura jerárquica muy uitiva y varios niveles de abstracción. Presenta un amplio conjunto de operadores temporales, que permiten expresar las relaciones que pueden darse entre las tareas incluidas en el modelo. La información aportada por un modelo de tareas puede ser útil para el diseñador, usuarios, analistas, psicólogos, sociólogos, etc. Permite realizar el diseño de la nueva aplicación según el actual modelo conceptual, teniendo en cuenta las características más importantes del funcionamiento lógico. Por último cabe destacar el beneficio que aporta en las etapas de análisis y evaluación de la usabilidad. La notación CTT distingue cuatro tipos de tareas, mostradas en la Tabla N.1. Representación Descripción Tareas de usuario: tareas cognitivas o físicas que no eractúan con el sistema. Son realizadas completamente por el usuario. Describen procesos realizados por el usuario a partir de la información de su entorno. Tareas de aplicación: tareas realizadas únicamente por la aplicación, el usuario no erviene. Obtienen información erna del sistema o generan información para el usuario. Tareas de eracción: tareas que realiza el usuario eractuando con la aplicación, por medio de alguna técnica de eracción. Tareas abstractas: tareas que requieren acciones complejas que no definen dónde se realizan exactamente. Se descomponen en un conjunto de nuevas subtareas. Tabla N.1. Tipos de tareas propuestos por la notación CTT Los operadores soportados por la notación CTT se describen en la Tabla N.2. Son una ampliación del conjunto de operadores ofrecidos por LOTOS 54 y facilitan la LOTOS: es un lenguaje de especificación de sistemas concurrentes y distribuidos. La flexibilidad de su operadores generalmente permite descripciones claras e uitivas en diferentes tipos de especificaciones. 243

264 descripción de las relaciones temporales existentes entre tareas. El uso de estos operadores facilita la descripción de un gran número de comportamientos complejos. Activación Operador Ejemplo Descripción Activación con paso de información Elección Concurrencia Sincronización Independencia Desactivación Desactivación con paso de información T1 >> T2 T1 []>> T2 T1 [] T2 T1 T2 T1 [] T2 T1 = T2 T1 [> T2 T1 [] [> T2 Cuando termina T1 se activa T2. Las dos tareas se realizan de forma secuencial. T2 no puede comenzar hasta que no haya concluido T1. T2 no puede comenzar hasta que se ejecute T1, ya que la información producida en T1 se usa como entrada en T2. Selección alternativa entre T1 y T2. Una vez que se está realizando una de ellas la otra no está disponible al menos hasta que termine la que está activa. T1 y T2 se pueden ejecutar en cualquier orden y al mismo tiempo. Puede empezar una tarea sin que el resto se hayan completado. En realidad es una concurrencia con ercambio de información. T1 y T2 pueden ercambiar información mientras se realizan de forma independiente. Las tareas se pueden ejecutar en cualquier orden, pero cuando una comienza, debe concluir antes de que se inicie la otra. T1 (normalmente una tarea eractiva) es completamente errumpida por T2. T1 es completamente errumpida por T2, pero además hay un ercambio de información entre ambas tareas. Suspender/Reanudar T1 > T2 T1 puede ser errumpida por T2. Cuando T2 termina, T1 puede reactivarse desde el estado anterior a la errupción. Iteración T1* T1 se realiza de forma repetitiva hasta que otra tarea la desactive. Iteración finita T1(n) T1 se realiza n veces. Se utiliza cuando el diseñador sabe las veces que debe realizarse la tarea. Tarea opcional [T1] No es obligatorio que se realice la tarea. Tabla N.2. Operadores de la notación CTT Para el modelado de tareas en CTT se utiliza el entorno CTTE (ConcurTaskTrees Environment) 55. Permite una edición flexible del modelo de tareas, así como la verificación formal de completitud donde se pueden detectar inconsistencias. También ofrece varias herramientas adicionales para realizar la simulación del modelo paso a paso y para exportarlo a múltiples formatos JPG, HTML, XML o LOTOS. La Figura N.1 muestra la erfaz del entorno de modelado CTTE

265 Figura N.1. Interfaz del entorno de modelado CTTE 245

Una herramienta de diseño y análisis de instrumentos de evaluación e indagación docente

Una herramienta de diseño y análisis de instrumentos de evaluación e indagación docente Una herramienta de diseño y análisis de instrumentos de evaluación e indagación docente Ana Isabel Molina 1, Ángel Luis Wizner 1, Carmen Lacave 1, Jesús Gallardo 2 1 Dpto. de Tecnologías y Sistemas de

Más detalles

USABILIDAD Y ACCESIBILIDAD EN WEB Guillermo M. Martínez de la Teja

USABILIDAD Y ACCESIBILIDAD EN WEB Guillermo M. Martínez de la Teja USABILIDAD Y ACCESIBILIDAD EN WEB Guillermo M. Martínez de la Teja "La usabilidad trata sobre el comportamiento humano; reconoce que el humano es emotivo, no está interesado en poner demasiado esfuerzo

Más detalles

1) Configuración general del curso:

1) Configuración general del curso: GUÍA MOODLE UP PROFESORES Moodle es una herramienta para dar soporte y apoyo a procesos de enseñanza aprendizaje. Dicha herramienta permite crear espacios virtuales de trabajo a través de los recursos

Más detalles

Accesibilidad PID_00167609

Accesibilidad PID_00167609 Accesibilidad PID_00167609 FUOC PID_00167609 Accesibilidad Ninguna parte de esta publicación, incluido el diseño general y la cubierta, puede ser copiada, reproducida, almacenada o transmitida de ninguna

Más detalles

Introducción a la accesibilidad y usabilidad

Introducción a la accesibilidad y usabilidad Introducción Ponentes Antonio Manuel Gutiérrez Fernández Alumno de Ingeniería Informática Manuel Jesús Recena Soto Alumno de Ingeniería Técnica en Informática de Sistemas Introducción Estructura Introducción

Más detalles

MANUAL DE USUARIO DE LA PLATAFORMA DE CESUR

MANUAL DE USUARIO DE LA PLATAFORMA DE CESUR MANUAL DE USUARIO DE LA PLATAFORMA DE CESUR Manual de Usuario de la Plataforma de CESUR... 1 1. El Campus Virtual... 2 1.1 Requisitos del sistema... 2 2. Primer Acceso... 4 2.1.1 Volver al menú principal

Más detalles

UTILIZACIÓN DE LA PLATAFORMA VIRTUAL ekasi EN LA DOCENCIA DE TECNOLOGÍA FARMACÉUTICA. Begoña Calvo Hernáez

UTILIZACIÓN DE LA PLATAFORMA VIRTUAL ekasi EN LA DOCENCIA DE TECNOLOGÍA FARMACÉUTICA. Begoña Calvo Hernáez UTILIZACIÓN DE LA PLATAFORMA VIRTUAL ekasi EN LA DOCENCIA DE TECNOLOGÍA FARMACÉUTICA Begoña Calvo Hernáez Departamento de Farmacia y Tecnología Farmacéutica. Facultad de Farmacia. Universidad del País

Más detalles

Especialista en Creación de Portales Web con Joomla 3.3

Especialista en Creación de Portales Web con Joomla 3.3 Especialista en Creación de Portales Web con Joomla 3.3 TITULACIÓN DE FORMACIÓN CONTINUA BONIFICADA EXPEDIDA POR EL INSTITUTO EUROPEO DE ESTUDIOS EMPRESARIALES Especialista en Creación de Portales Web

Más detalles

LMS: Manual del administrador

LMS: Manual del administrador Santillana Compartir LMS: Manual del administrador En este Learning Coffee aprenderá a: Incorporar usuarios y crear grupos en el LMS. Crear temas y subir recursos en el LMS. Gestionar y clasificar la biblioteca

Más detalles

Accesibilidad en el Diseño de Aplicaciones Web

Accesibilidad en el Diseño de Aplicaciones Web Accesibilidad en el Diseño de Aplicaciones Web Sergio Luján Mora CÓMO HAGO QUE MI SITIO WEB SEA ACCESIBLE? 1 El WAI 10 consejos breves WCAG 1.0 Contenido Método de aplicación Niveles de conformidad WCAG

Más detalles

HERRAMIENTA WEB PARA LA ELABORACIÓN DE TEST BAJO LA ESPECIFICACIÓN IMS-QTI

HERRAMIENTA WEB PARA LA ELABORACIÓN DE TEST BAJO LA ESPECIFICACIÓN IMS-QTI HERRAMIENTA WEB PARA LA ELABORACIÓN DE TEST BAJO LA ESPECIFICACIÓN IMS-QTI Muñoz-Bouchard J.P., y Álvarez-González L.A. jp.knap@gmail.com@gmail.com, lalvarez@inf.uach.cl Grupo de Investigación en Tecnologías

Más detalles

INDICE PASO 1: REGISTRO DE DATOS PASO 2: LA PÁGINA DE INICIO.. 7 PASO 3: EDITANDO PÁGINAS...8 PASO 4: AÑADIENDO NUEVAS PÁGINAS...

INDICE PASO 1: REGISTRO DE DATOS PASO 2: LA PÁGINA DE INICIO.. 7 PASO 3: EDITANDO PÁGINAS...8 PASO 4: AÑADIENDO NUEVAS PÁGINAS... MANUAL GOOGLE SITE Google Sites INDICE INTRODUCCIÓN PASO 1: REGISTRO DE DATOS...5 PASO 2: LA PÁGINA DE INICIO.. 7 PASO 3: EDITANDO PÁGINAS...8 PASO 4: AÑADIENDO NUEVAS PÁGINAS.....18 PASO 5: CONFIGURANDO

Más detalles

Guía de Moodle para Estudiantes

Guía de Moodle para Estudiantes Guía de Moodle para Estudiantes 1. Introducción En este tutorial se asume que: 1. Usted tiene al menos el conocimiento básico del uso de una computadora, incluyendo el ratón y el teclado, y está familiarizado

Más detalles

Servicios de accesibilidad Web

Servicios de accesibilidad Web experiencias reales, soluciones reales Servicios de accesibilidad Web Ref.: SER_ACC_V3_julio_ 2009 w w w. o b s e r v a l i a. c o m Índice 1. Introducción a la accesibilidad [ 3] 2. Auditorías de accesibilidad

Más detalles

ADAPTAEMPLEO INFORME ACCESIBILIDAD. octubre 2013. Versión 1.0

ADAPTAEMPLEO INFORME ACCESIBILIDAD. octubre 2013. Versión 1.0 ADAPTAEMPLEO INFORME ACCESIBILIDAD octubre 2013 Versión 1.0 1.0 Primera versión del documento. CONTROL DE CAMBIOS Índice de Contenido 1. ACCESIBILIDAD WEB...4 2. PUNTOS DE VERIFICACIÓN...5 2.1. IMÁGENES

Más detalles

Guía Google Sites. En este tema se desarrolla una guía rápida de uso para editar con Google Sites

Guía Google Sites. En este tema se desarrolla una guía rápida de uso para editar con Google Sites 1. INTRODUCCIÓN Google Sites es una aplicación gratuita que se enmarca dentro de la filosofía Web 2.0. Permite crear el sitio que puede adaptarse a cualquier situación: web personal, informativa, educativa,

Más detalles

Web ITSM -GUIA RÁPIDA DE USUARIO-

Web ITSM -GUIA RÁPIDA DE USUARIO- Web ITSM -GUIA RÁPIDA DE USUARIO- Manual básico de la aplicación WebITSM donde se visualiza la funcionalidad completa de la misma y la forma adecuada y eficaz de utilizarla. Ingeniería Técnica en Informática

Más detalles

Manual del Aula Virtual para Profesores

Manual del Aula Virtual para Profesores 2011 Manual del Aula Virtual para Profesores InfoGroupPeru 1 INDICE GENERAL I. Introducción... 3 II. Ingreso al Aula Virtual... 4 III. Descargar Mozilla Firefox... 6 IV. Actualizar Información Personal...

Más detalles

ENTORNO DE UN CURSO. Antes de empezar sería conveniente conocer la estructura de Moodle y entender los siguientes conceptos básicos:

ENTORNO DE UN CURSO. Antes de empezar sería conveniente conocer la estructura de Moodle y entender los siguientes conceptos básicos: ENTORNO DE UN CURSO Antes de empezar sería conveniente conocer la estructura de Moodle y entender los siguientes conceptos básicos: Cursos Categorías Cuentas de usuario y roles Perfil de usuario En Moodle,

Más detalles

MANUAL ONLINE. Plataforma de Teleformación INAEM

MANUAL ONLINE. Plataforma de Teleformación INAEM MANUAL ONLINE Plataforma de Teleformación INAEM Índice 1. Acceso a la plataforma 3 2. Estructura de plataforma 5 Contenidos 5 Recursos 11 3. Herramientas de colaboración y comunicación 12 Foros de Debate

Más detalles

PROGRAMA FORMATIVO MICROSOFT OFFICE XP PROFESIONAL

PROGRAMA FORMATIVO MICROSOFT OFFICE XP PROFESIONAL PROGRAMA FORMATIVO MICROSOFT OFFICE XP PROFESIONAL www.bmformacion.es info@bmformacion.es Objetivos Se describen todos los programas que integran la suite ofimática Microsoft Office XP: Word, Excel, Access,

Más detalles

TEMA. Diseño orientado a la web. Internet y las páginas web. [9.1] Cómo estudiar este tema? [9.2] Internet y los navegadores

TEMA. Diseño orientado a la web. Internet y las páginas web. [9.1] Cómo estudiar este tema? [9.2] Internet y los navegadores Diseño orientado a la web. Internet y las páginas web [9.1] Cómo estudiar este tema? [9.2] Internet y los navegadores [9.3] Accesibilidad e interactividad [9.4] Resolución de pantalla [9.5] Optimización

Más detalles

PUCV - Pontificia Universidad Católica de Valparaíso

PUCV - Pontificia Universidad Católica de Valparaíso PUCV - Pontificia Universidad Católica de Valparaíso INICIO IBM QUICKR IBM Quickr es un software de colaboración en equipos, el cual permite compartir archivos e información de forma instantánea y directa

Más detalles

Blogger: herramienta de creación y gestión de blogs

Blogger: herramienta de creación y gestión de blogs Blogger: herramienta de creación y gestión de blogs Objetivo de aprendizaje Las personas participantes serán capaces de crear y gestionar un blog con Blogger. Existen numerosos servicios gratuitos para

Más detalles

Adobe Dreamweaver CS3 - Curso online Creación profesional de sitios web

Adobe Dreamweaver CS3 - Curso online Creación profesional de sitios web Adobe Dreamweaver CS3 - Curso online Creación profesional de sitios web Índice Conceptos básicos En este capítulo se enseñan los conceptos básicos de trabajo en Adobe Dreamveaver CS3. También se describen

Más detalles

DISEÑO Y DESARROLLO DE PÁGINA WEB

DISEÑO Y DESARROLLO DE PÁGINA WEB DISEÑO Y DESARROLLO DE PÁGINA WEB TOTAL HORAS: 200 HORAS (100 PRESENCIALES 100 INVESTIGACIÓN) TOTAL CICLO: 16 SÁBADOS INTRODUCCIÓN En este Diplomado se establecen las bases y el método de trabajo necesario

Más detalles

Prácticas de Programación Multimedia.

Prácticas de Programación Multimedia. Prácticas de Programación Multimedia. Las prácticas de la asignatura Programación Multimedia van a consistir en el diseño de un sitio web con distintos contenidos multimedia sobre el que se irán añadiendo

Más detalles

Copyright 2015 Endalia, S.L. Todos los derechos reservados.

Copyright 2015 Endalia, S.L. Todos los derechos reservados. Copyright 2015 Endalia, S.L. Todos los derechos reservados. Este documento contiene información propietaria de Endalia, S.L. Se emite con el único propósito de informar proyectos Endalia, por lo que no

Más detalles

Web Mastering y Design

Web Mastering y Design Web Mastering y INTRODUCCIÓN Propósito de este documento El presente documento contiene el programa del curso online de Web Mastering y. OBJETIVOS Y MÉTODO DE USO Y EVALUACIÓN Objetivo y métodos de uso

Más detalles

14 Guía de Microsoft Word 2010 Guía de contenido digital accesible

14 Guía de Microsoft Word 2010 Guía de contenido digital accesible 14 Guía de Microsoft Word 2010 Guía de contenido digital accesible Mireia Ribera Este documento tiene una licencia Reconocimiento-No Comercial-Compartir- Igual 3.0 de Creative Commons. Se permite la reproducción,

Más detalles

Diseño y desarrollo Web con HTML 5, CSS y Dreamweaver CS 4

Diseño y desarrollo Web con HTML 5, CSS y Dreamweaver CS 4 Diseño y desarrollo Web con HTML 5, CSS y Dreamweaver CS 4 Modalidad: Distancia, On-Line Duración: 154 horas Objetivos: Diseño y desarrollo Web con HTML 5 y CSS Dotar al alumno de conocimientos teóricos

Más detalles

Gestores de Contenidos (CMS)

Gestores de Contenidos (CMS) Joomla Gestores de Contenidos (CMS) Sistema de Gestión de Contenidos o Content Managment System (CMS) Aplicación informática para crear, editar, manejar y publicar contenidos de una forma organizada y

Más detalles

LMS: Manual del coordinador

LMS: Manual del coordinador Sistema UNOi LMS: Manual del coordinador En este Learning Coffee aprenderá a: Crear proyectos y subir recursos en el LMS. Gestionar y clasificar la biblioteca del LMS. Configurar correctamente las clases

Más detalles

Introducción a la Accesibilidad Web

Introducción a la Accesibilidad Web Introducción a la Accesibilidad Web Ricardo Borillo Domenech borillo@uji.es Índice Introducción. Referencias. Marco legislativo. Herramientas. Comprobación de la accesibilidad en un sitio web. Principales

Más detalles

MANUAL DE USUARIO PORTAL EDUCATIVO ARAUCA

MANUAL DE USUARIO PORTAL EDUCATIVO ARAUCA MANUAL DE USUARIO PORTAL EDUCATIVO ARAUCA ARAUCA VIVE DIGITAL CAMPUS VIRTUAL MOODLE 2.6 ARAUCA VIVE DIGITAL REGIONAL Pertenece Potenciado Manual Pertenece a la Gobernación de Arauca pág. 1 CONTENIDO LISTA

Más detalles

Capítulo V. Resultados de evaluación y pruebas de usabilidad

Capítulo V. Resultados de evaluación y pruebas de usabilidad Capítulo V. Resultados de evaluación y pruebas de usabilidad Una vez que se concluyó la fase de desarrollo de una primera versión inicial de Aula social, se procedió a poner la plataforma en un modo de

Más detalles

Guía de uso de Moodle para participantes

Guía de uso de Moodle para participantes Guía de uso de Moodle para participantes ÍNDICE 1 QUÉ ES MOODLE?... 3 2 INTRODUCCIÓN A LA PLATAFORMA... 4 2.1 ACCESO... 4 2.2 CURSO... 5 2.2.1 BLOQUES... 6 3 RECURSOS Y MÓDULOS... 8 3.1 TRANSMISIVOS...

Más detalles

Usabilidad web para PYMES y autónomos 6 de febrero de 2006

Usabilidad web para PYMES y autónomos 6 de febrero de 2006 Usabilidad web para PYMES y autónomos 6 de febrero de 2006 www.torresburriel.com Índice de contenidos Qué es la usabilidad Contexto Objetivo: ganar dinero Evaluación de la usabilidad Aspectos prácticos

Más detalles

Acceso al panel de gestión

Acceso al panel de gestión 1 Acceso al panel de gestión Para acceder a la gestión de tu web entra en http://www.siweb.es y pulsa en Acceso clientes en el menú superior. Introduce tus datos de acceso (usuario y contraseña) y pulsa

Más detalles

EDICION DE PRESENTACIONES CON POWERPOINT 2007

EDICION DE PRESENTACIONES CON POWERPOINT 2007 EDICION DE PRESENTACIONES CON POWERPOINT 2007 1. Qué es POWERPOINT? Microsoft Office PowerPoint 2007 es una aplicación que permite la creación de presentaciones gráficas, al estilo de diapositivas que

Más detalles

DISEÑO Y DESARROLLO WEB CON HTML 5, CSS Y DREAMWEAVER CS4 OBRA COMPLETA 2 VOLÚMENES

DISEÑO Y DESARROLLO WEB CON HTML 5, CSS Y DREAMWEAVER CS4 OBRA COMPLETA 2 VOLÚMENES DISEÑO Y DESARROLLO WEB CON HTML 5, CSS Y DREAMWEAVER CS4 OBRA COMPLETA 2 VOLÚMENES Objetivos Dotar al interesado de conocimientos teóricos y prácticos para poder desarrollar un sitio Web con HTML y aplicar

Más detalles

Curso: El uso de Internet y las TIC en el entorno escolar PRIMERA PARTE: Sitios web

Curso: El uso de Internet y las TIC en el entorno escolar PRIMERA PARTE: Sitios web Curso: El uso de Internet y las TIC en el entorno escolar PRIMERA PARTE: Sitios web Por qué utilizar sitios web en educación? Los sitios web integran recursos variados, lo que los hace muy útiles en el

Más detalles

GUÍA PARA EL PROFESOR DE LA PLATAFORMA SAKAI

GUÍA PARA EL PROFESOR DE LA PLATAFORMA SAKAI GUÍA PARA EL PROFESOR DE LA PLATAFORMA SAKAI Septiembre 2012 INTRODUCCIÓN A SAKAI QUÉ ES EL E-LEARNING? El e-learning es un sistema de educación a distancia para el cual se usan (LMS) o Sistema de Gestión

Más detalles

PROGRAMA FORMATIVO. Diseño y desarrollo web con HTML 5, CSS y Dreamweaver CS4 - Obra completa - 2 volúmenes

PROGRAMA FORMATIVO. Diseño y desarrollo web con HTML 5, CSS y Dreamweaver CS4 - Obra completa - 2 volúmenes PROGRAMA FORMATIVO Diseño y desarrollo web con HTML 5, CSS y Dreamweaver CS4 - Obra completa - 2 volúmenes Sector: Desarrollo Web Multimedia Modalidad: Distancia Duración: Objetivos: Código: 4356 Dotar

Más detalles

ACCIÓN FORMATIVA FINANCIADA POR EL SERVICIO PÚBLICO DE EMPLEO ESTATAL

ACCIÓN FORMATIVA FINANCIADA POR EL SERVICIO PÚBLICO DE EMPLEO ESTATAL MF0491_3: PROGRAMACIÓN WEB EN EL ENTORNO CLIENTE. (IFCD0210: DESARROLLO DE APLICACIONES CON TECNOLOGÍAS WEB) 180 HORAS PRESENCIALES Nº DE EXPEDIENTE: FC/2013/0064 ACCION 141 GRUPO 1 ACCIÓN FORMATIVA FINANCIADA

Más detalles

Joomla! 3.3 Cree y administre sus sitios Web

Joomla! 3.3 Cree y administre sus sitios Web Capítulo 1: Descubrir Joomla! A. Razones para crear un sitio con Joomla! 9 B. Documentarse sobre Joomla! 9 C. La hoja de ruta de Joomla! 10 D. Qué es un CMS? 12 E. HTML y XHTML 12 F. Diferenciar el contenido

Más detalles

TEMA 8: CREACIÓN Y PERSONALIZACIÓN DE UN BLOG

TEMA 8: CREACIÓN Y PERSONALIZACIÓN DE UN BLOG Colegio La Inmaculada Misioneras Seculares de Jesús Obrero Nueva del Carmen, 35. 47011 Valladolid. Tel: 983 29 63 91 Fax: 983 21 89 96 e-mail: lainmaculadava@planalfa.es TEMA 8: CREACIÓN Y PERSONALIZACIÓN

Más detalles

IT CONSULTING, tiene a bien hacerle llegar la oferta de Capacitación de DISENO DE SITIOS WEB & BLOGS CON JOOMLA + WORDPRESS + MAGENTO

IT CONSULTING, tiene a bien hacerle llegar la oferta de Capacitación de DISENO DE SITIOS WEB & BLOGS CON JOOMLA + WORDPRESS + MAGENTO Señor(a): Cliente. Presente.- Santa Cruz, 23 de Octubre del 2012 REF.: COTIZACION CURSO DISENO DE SITIOS WEB & BLOGS CON JOOMLA + WORDPRESS + MAGENTO Distinguido Señores: IT CONSULTING, tiene a bien hacerle

Más detalles

Ximdex 3.3. Descripción de la Interfaz. Fecha: Enero 2013 Versión 3.0

Ximdex 3.3. Descripción de la Interfaz. Fecha: Enero 2013 Versión 3.0 Ximdex 3.3 Descripción de la Interfaz Fecha: Enero 2013 Versión 3.0 Índice 1. Descripción General...1 2. Panel de gestión...2 2.1. Pestaña de proyectos...2 2.2. Panel de control...3 2.3. Información sobre

Más detalles

ÍTEMS DEL MENÚ CREACIÓN Y GESTIÓN (Última revisión: lunes, 9 de marzo de 2009)

ÍTEMS DEL MENÚ CREACIÓN Y GESTIÓN (Última revisión: lunes, 9 de marzo de 2009) JOOMLA! ÍTEMS DEL MENÚ CREACIÓN Y GESTIÓN (Última revisión: lunes, 9 de marzo de 2009) Es necesario comentar que este manual ha sido diseñado en su mayor parte por comunidadjoomla.org. Este manual es una

Más detalles

MANUAL DE USO. 1 Manual de uso

MANUAL DE USO. 1 Manual de uso 1 Manual de uso Índice: Nº de Página 1. Introducción 3 2. Qué es aulaplaneta? 3 3. Registro en aulaplaneta 4 4. Home 6 5. Los docentes 9 5.1 Las materias 9 5.2 Preparar 10 5.2.1 La guía didáctica 12 5.2.2

Más detalles

DESARROLLO DE CONTENIDOS A MEDIDA E-DUCATIVA

DESARROLLO DE CONTENIDOS A MEDIDA E-DUCATIVA DESARROLLO DE CONTENIDOS A MEDIDA E-DUCATIVA 1 Adaptación y conversión Muchas empresas disponen de contenidos muy completos en formato papel, utilizados en educación presencial o bien en formación a distancia

Más detalles

Diseño de Sitios Web Dinámicos CMS JOOMLA

Diseño de Sitios Web Dinámicos CMS JOOMLA Diseño de Sitios Web Dinámicos CMS JOOMLA NIVEL INTERMEDIO Los sitios web dinámicos con CMS JOOMLA!. Instalación y Configuración de Joomla. Gestión de Plantillas Gestión de Secciones y Categorías Gestión

Más detalles

PROGRAMACIÓN DE MÓDULO MÓDULO. Este módulo se imparte en 2º en el primer y segundo trimestre y tiene una carga docente de 126 horas.

PROGRAMACIÓN DE MÓDULO MÓDULO. Este módulo se imparte en 2º en el primer y segundo trimestre y tiene una carga docente de 126 horas. Página 1 de 14 DEPARTAMENTO INFORMATICA CURSO 2º CICLO FORMATIVO Desarrollo de Aplicaciones Web Diseño de Interfaces Web MÓDULO 1. Introducción. Este módulo se imparte en 2º en el primer y segundo trimestre

Más detalles

Manual para la gestión de contenidos web a través del CMS de wordpress www.ventanasgasteiz.com

Manual para la gestión de contenidos web a través del CMS de wordpress www.ventanasgasteiz.com Manual para la gestión de contenidos web a través del CMS de wordpress www.ventanasgasteiz.com Índice 1.Introducción 2.Acceder en modo Editor 3.Explorando el escritorio de wordpress 4.Administración de

Más detalles

Solicitud de Requerimiento No. Fecha de Solicitud: 01-08-2010

Solicitud de Requerimiento No. Fecha de Solicitud: 01-08-2010 Solicitud de Requerimiento No. Fecha de Solicitud: 01-08-2010 NOMBRE DEL IDENTIFICACIÓN DEL ÁREA SOLICITANTE: SOLICITANTE: Monica Serna Vasquez OPC OFICINA DE PRENSA Y COMUNICACIONES NOMBRE DEL REQUERIMIENTO:

Más detalles

PROGRAMA: Diseño y desarrollo Web con HTML 5,

PROGRAMA: Diseño y desarrollo Web con HTML 5, PROGRAMA: Diseño y desarrollo Web con HTML 5, CSS y Dreamweaver CS 4 Objetivos: Diseño y desarrollo Web con HTML 5 y CSS Dotar al alumno de conocimientos teóricos y prácticos para poder desarrollar un

Más detalles

Manual de Usuario. Preparado para INACAP. Módulo Egresados. Microsoft Dynamics Partner of the Year for Latin America WINNER 2012

Manual de Usuario. Preparado para INACAP. Módulo Egresados. Microsoft Dynamics Partner of the Year for Latin America WINNER 2012 Microsoft Dynamics Partner of the Year for Latin America WINNER 2012 Manual de Usuario Preparado para INACAP Módulo Egresados CMetrix Business Solutions S.A. Gertrudis E cheñique 30, Oficina 43 Las Condes,

Más detalles

Manual de usuario Aula virtual

Manual de usuario Aula virtual Manual de usuario Aula virtual 1. LA PÁGINA DE INICIO Para acceder a la plataforma de teleformación de Academia Contreras escribiremos en nuestro navegador la siguiente dirección: http://academiacontreras.com/formacion.

Más detalles

Confección y publicación de páginas Web

Confección y publicación de páginas Web 2014 Confección y publicación de páginas Web Docente: Manuel Fernández Catalán 0 ÍNDICE 1 Presentación... 2 2 Objetivos... 2 3 Tecnología... 2 4 Metodología y evaluación... 3 5 Material didáctico... 3

Más detalles

Manual de Usuario Sitio Dinámico e-ducativa Versión 7.01.00

Manual de Usuario Sitio Dinámico e-ducativa Versión 7.01.00 Manual de Usuario Sitio Dinámico e-ducativa Versión 7.01.00 ÍNDICE DE CONTENIDOS INTRODUCCIÓN...3 ÁREAS DEL SITIO WEB...4 1. ENCABEZADO...5 2. SECCIONES Y PÁGINAS DEFINIDAS...5 3. CONTENIDO...5 4. NOVEDADES

Más detalles

Mantenimiento Correctivo Aplicado a un Sitio Basado en Joomla. Una Propuesta Centrada en la Accesibilidad

Mantenimiento Correctivo Aplicado a un Sitio Basado en Joomla. Una Propuesta Centrada en la Accesibilidad Mantenimiento Correctivo Aplicado a un Sitio Basado en Joomla. Una Propuesta Centrada en la Accesibilidad Daiana E. Casaro, Pedro L. Alfonzo, Sonia I. Mariño, María V. Godoy Departamento de Informática.

Más detalles

TÉCNICO PROFESIONAL EN DISEÑO WEB PROFESIONAL CON DREAMWEAVER CS6

TÉCNICO PROFESIONAL EN DISEÑO WEB PROFESIONAL CON DREAMWEAVER CS6 Modalidad: Distancia Duración: 77 Horas Objetivos: En la actualidad Dreamweaver es uno de los principales programas utilizados por los profesionales para el diseño y maquetación de páginas web. Estos materiales

Más detalles

ALCALA GRUPO EDITORIAL S.A.S. IMPORTACION - DISTRIBUCION NIT 900.533.108-9 DESARROLLO WED / MULTIMEDIA

ALCALA GRUPO EDITORIAL S.A.S. IMPORTACION - DISTRIBUCION NIT 900.533.108-9 DESARROLLO WED / MULTIMEDIA ALCALA GRUPO EDITORIAL S.A.S. IMPORTACION - DISTRIBUCION NIT 900.533.108-9 DESARROLLO WED / MULTIMEDIA ADOBE PREMIERE PRO CS4 Autor(es): José Manuel Cabello García Páginas: 224 ISBN: 978-84-8364-409-6

Más detalles

Firmar Solicitud. Manual de usuario

Firmar Solicitud. Manual de usuario Firmar Solicitud Manual de usuario Madrid, Marzo de 2014 ÍNDICE 1. INTRODUCCIÓN... 3 2. PANTALLAS... 4 2.1. Login... 4 2.2. Ayuda... 4 2.3. Pantalla de Solicitudes de Registro... 5 2.4. Listado de documentos

Más detalles

Interacción persona-computador. Accesibilidad

Interacción persona-computador. Accesibilidad Interacción persona-computador Accesibilidad Accesibilidad Contenidos Introducción El diseño universal Tipos de discapacidades y soluciones Accesibilidad en la Web Comprobación de la accesibilidad Accesibilidad

Más detalles

PLATAFORMA DE FORMACIÓN MANUAL DEL ALUMNO CONSEJO GENERAL DE FARMACÉUTICOS

PLATAFORMA DE FORMACIÓN MANUAL DEL ALUMNO CONSEJO GENERAL DE FARMACÉUTICOS PLATAFORMA DE FORMACIÓN MANUAL DEL ALUMNO CONSEJO GENERAL DE FARMACÉUTICOS 1. PRIMEROS PASOS...3 1.1. Idiomas...4 1.2. Sistema de ayuda...5 1.3. Perfil del alumno...5 2. LOS CURSOS DE LA PLATAFORMA...8

Más detalles

CUALIFICACIÓN CONFECCIÓN Y PUBLICACIÓN DE PÁGINAS WEB PROFESIONAL. Nivel 2. Versión 6. Actualización

CUALIFICACIÓN CONFECCIÓN Y PUBLICACIÓN DE PÁGINAS WEB PROFESIONAL. Nivel 2. Versión 6. Actualización Página 1 de 19 CUALIFICACIÓN CONFECCIÓN Y PUBLICACIÓN DE PÁGINAS WEB PROFESIONAL Familia Profesional Informática y Comunicaciones Nivel 2 Código IFC297_2 Versión 6 Situación Contraste externo Actualización

Más detalles

Introducción a la plataforma Moodle Aníbal de la Torre 2006. Plataforma Moodle. Gestión y administración de un curso

Introducción a la plataforma Moodle Aníbal de la Torre 2006. Plataforma Moodle. Gestión y administración de un curso Plataforma Moodle Gestión y administración de un curso El panel de administración----------------------------------------------------------- 2 Gestión de personas (alumnos y profesores) ------------------------------------

Más detalles

Manual de usuario. Perfil Profesor-tutor-directivo

Manual de usuario. Perfil Profesor-tutor-directivo Manual de usuario Perfil Profesor-tutor-directivo ÍNDICE Introducción...3 Acceso a la aplicación...4 Configuración personal...5 1 Parte privada...8 1.1 Espacio personal...8 1.1.1 Barra inferior...8 1.1.2

Más detalles

Nombre. El nombre corto del recurso. Éste será mostrado en la página principal de curso.

Nombre. El nombre corto del recurso. Éste será mostrado en la página principal de curso. 4.4. ENLAZAR UN ARCHIVO O UNA PÁGINA WEB 4.4.1. Características El contenido de un curso no sólo se limita a los creados mediante los editores de Moodle, puesto que este tipo de recursos permite enlazar

Más detalles

UNIVERSIDAD DEL VALLE MANUAL PRACTICO SOBRE LA PLATAFORMA CAMPUS VIRTUAL

UNIVERSIDAD DEL VALLE MANUAL PRACTICO SOBRE LA PLATAFORMA CAMPUS VIRTUAL Bienvenidos UNIVERSIDAD DEL VALLE MANUAL PRACTICO SOBRE LA PLATAFORMA CAMPUS VIRTUAL Ajustes comunes El Campus Virtual Univalle está basada en la Plataforma Moodle (versión 2.5), que es una aplicación

Más detalles

REQUISITOS DE INTEGRACIÓN EN UNA COMUNIDAD VIRTUAL WEB PARA USUARIOS DISCAPACITADOS UTILIZANDO LA COMBINACIÓN DE DIFERENTES LÍNEAS METODOLÓGICAS

REQUISITOS DE INTEGRACIÓN EN UNA COMUNIDAD VIRTUAL WEB PARA USUARIOS DISCAPACITADOS UTILIZANDO LA COMBINACIÓN DE DIFERENTES LÍNEAS METODOLÓGICAS REQUISITOS DE INTEGRACIÓN EN UNA COMUNID VIRTUAL WEB PARA USUARIOS DISCAPACITADOS UTILIZANDO LA COMBINACIÓN DE DIFERENTES LÍNEAS METODOLÓGICAS Eva VILLEGAS Marc PIFARRÉ David FONSECA Oscar GARCIA RESUMEN

Más detalles

MANUAL DE USO DE LA APLICACIÓN

MANUAL DE USO DE LA APLICACIÓN MANUAL DE USO DE LA APLICACIÓN ÍNDICE 1. Acceso a la aplicación 2. Definición de funciones 3. Plantillas 4. Cómo crear una nueva encuesta 5. Cómo enviar una encuesta 6. Cómo copiar una encuesta 7. Cómo

Más detalles

Guía rápida de evaluación automatizada de contenidos web según WCAG 2.0 usando herramientas de software libre

Guía rápida de evaluación automatizada de contenidos web según WCAG 2.0 usando herramientas de software libre Guía rápida de evaluación automatizada de contenidos web según WCAG 2.0 usando herramientas de software libre José R. Hilera 1, Teresa Díez 1, Mª José Domínguez 1, Lourdes Moreno 2, David Sangilbert 1

Más detalles

HOSTALIA TU WEB. Manual de Usuario V 1.0. Hostalia Guías de uso 4/8/2014

HOSTALIA TU WEB. Manual de Usuario V 1.0. Hostalia Guías de uso 4/8/2014 HOSTALIA TU WEB Manual de Usuario V 1.0 4/8/2014 Calle San Rafael, 14 28108 Alcobendas (Madrid) Teléfono: 900 103 253 www.hostalia.com ÍNDICE INTRODUCCIÓN 3 VISIÓN GENERAL DE LA APLICACIÓN ONLINE TU WEB

Más detalles

Manual de publicación de contenido y actualización de sitios web

Manual de publicación de contenido y actualización de sitios web Manual de publicación de contenido y actualización de sitios web Basados en sistemas Wordpress El presente manual le presentará los distintos pasos para publicar contenidos a través de páginas y editar

Más detalles

INTRODUCCIÓN... 4 REQUERIMIENTOS TÉCNICOS... 4 CÓMO ACCEDER AL AULA VIRTUAL... 5. Cómo accedo a la plataforma?... 5

INTRODUCCIÓN... 4 REQUERIMIENTOS TÉCNICOS... 4 CÓMO ACCEDER AL AULA VIRTUAL... 5. Cómo accedo a la plataforma?... 5 Contenido INTRODUCCIÓN... 4 REQUERIMIENTOS TÉCNICOS... 4 CÓMO ACCEDER AL AULA VIRTUAL... 5 Cómo accedo a la plataforma?... 5 Cómo me inscribo en un curso?... 5 He perdido mi contraseña, cómo puedo recuperarla?...

Más detalles

Person IP CRM Manual Básico

Person IP CRM Manual Básico Manual Básico División Informática BuscPerson Telecomunicaciones : Manual Básico 0.- Introducción 3 1.- Candidatos y Cuentas 5 1.1 Configuración 5 1.2 Candidato 6 1.3 Cuenta 7 2.- Campañas 12 2.1 Configuración

Más detalles

La Suite Google. Fácil instalación y uso. Pocos requisitos de la máquina. Gratuitas.

La Suite Google. Fácil instalación y uso. Pocos requisitos de la máquina. Gratuitas. Ventajas: Inconvenientes: Ejemplos de uso: Fácil instalación y uso. Pocos requisitos de la máquina. Gratuitas. La Suite Google Orientadas a la colaboración y a trabajar en grupo. Es el alumno quien marca

Más detalles

MANUAL INICIAL PARA LA GESTIÓN DE CURSOS ONLINE

MANUAL INICIAL PARA LA GESTIÓN DE CURSOS ONLINE MANUAL INICIAL PARA LA GESTIÓN DE CURSOS ONLINE MEDIANTE LA PLATAFORMA WEB MOODLE INSTALADA EN LOS CENTROS EDUCATIVOS DE LA XUNTA DE GALICIA Moodle es un sistema de gestión de cursos de distribución libre

Más detalles

Especialista en Creación de Portales Web con Joomla 3.3

Especialista en Creación de Portales Web con Joomla 3.3 Especialista en Creación de Portales Web con Joomla 3.3 Titulación certificada por EUROINNOVA BUSINESS SCHOOL Especialista en Creación de Portales Web con Joomla 3.3 Especialista en Creación de Portales

Más detalles

Manual de Ayuda para el Alumno

Manual de Ayuda para el Alumno Manual de Ayuda para el Alumno INTRODUCCIÓN 3 OBJETIVOS 3 CÓMO LEER ESTE MANUAL? 4 REQUISITOS DE LA PLATAFORMA 5 ACCESO A LA PLATAFORMA 6 PASO 1: (CÓMO INGRESAR LA DIRECCIÓN DE WEBUNLP) 6 PASO 2: (CONECTÁNDOSE

Más detalles

PLIEGO DE PRESCRIPCIONES TÉCNICAS PARA LA PRESTACIÓN DEL SERVICIO PYME.NET COMERCIO ELECTRÓNICO

PLIEGO DE PRESCRIPCIONES TÉCNICAS PARA LA PRESTACIÓN DEL SERVICIO PYME.NET COMERCIO ELECTRÓNICO PLIEGO DE PRESCRIPCIONES TÉCNICAS PARA LA PRESTACIÓN DEL SERVICIO PYME.NET COMERCIO ELECTRÓNICO DENOMINACIÓN: SERVICIO PYME.NET COMERCIO ELECTRÓNICO DE CÁMARA TERUEL 1. INTRODUCCIÓN Y OBJETIVOS 2. ALCANCE

Más detalles

Desarrollo de Aplicaciones con Tecnologías Web (Online) (Dirigida a la Acreditación de las Competencias Profesionales R.D.

Desarrollo de Aplicaciones con Tecnologías Web (Online) (Dirigida a la Acreditación de las Competencias Profesionales R.D. Desarrollo de Aplicaciones con Tecnologías Web (Online) (Dirigida a la Acreditación de las Competencias Profesionales R.D. 1224/2009) Titulación certificada por EUROINNOVA BUSINESS SCHOOL Desarrollo de

Más detalles

Jornadas de INCLUSION DIGITAL. a través de las TIC ORGANIZAN: CAPACITA: CLAEH

Jornadas de INCLUSION DIGITAL. a través de las TIC ORGANIZAN: CAPACITA: CLAEH Jornadas de INCLUSION DIGITAL a través de las TIC ORGANIZAN: CAPACITA: CLAEH Con Google Docs puedes crear, compartir y editar documentos online con facilidad. A continuación te indicamos algunas acciones

Más detalles

Pavel Kasík, Technet.cz

Pavel Kasík, Technet.cz Imagina que quieres crear tu propio sitio web. Normalmente, tendrías que descargar el software, instalarlo y comenzar a programar. Con Webnode no es necesario instalar nada. Puedes crear tu página web

Más detalles

Haciendo Drupal un poco más accesible. @kikoalonsob

Haciendo Drupal un poco más accesible. @kikoalonsob Haciendo Drupal un poco más accesible @kikoalonsob Acerca de mi Desarrollador Drupal Freelance (Back-end) Axel Springer España Autobild Computer Hoy Hobby Consolas @kikoalonsob kikoalonsob www.kikoalonsob.com

Más detalles

Análisis de la accesibilidad del sitio web. Ayuntamiento de El Campello (http://www.elcampello.es)

Análisis de la accesibilidad del sitio web. Ayuntamiento de El Campello (http://www.elcampello.es) Análisis de la accesibilidad del sitio web Ayuntamiento de El Campello (http://www.elcampello.es) Alexandre López Berenguer Sergio Luján Mora Fecha de realización:24-3-2011 Esta obra está bajo una licencia

Más detalles

Curso de Técnico Superior Diseño Web Profesional con Dreamweaver CS6

Curso de Técnico Superior Diseño Web Profesional con Dreamweaver CS6 Modalidad Curso de Técnico Superior Diseño Web Profesional con Dreamweaver CS6 cod / EU 0518 A Distancia Duración 300 Horas Objetivos Aportar al alumno todas las competencias y conocimientos necesarios

Más detalles

DESARROLLO DE APLICACIONES CON TECNOLOGÍAS WEB PROFESIONAL

DESARROLLO DE APLICACIONES CON TECNOLOGÍAS WEB PROFESIONAL Página 1 de 21 CUALIFICACIÓN DESARROLLO DE APLICACIONES CON TECNOLOGÍAS WEB PROFESIONAL Familia Profesional Informática y Comunicaciones Nivel 3 Código IFC154_3 Versión 5 Situación RD 1087/2005 Actualización

Más detalles

Aplicaciones Web que Permitan Administrar Portafolios para Gestionar el Aprendizaje

Aplicaciones Web que Permitan Administrar Portafolios para Gestionar el Aprendizaje Escuela Universitaria de Ingeniería Industrial, Informática y Sistemas Área de Computación e Informática Universidad Tarapacá Arica Aplicaciones Web que Permitan Administrar Portafolios para Gestionar

Más detalles

MANUAL DE AYUDA INFORMATIVAS WINDOWS

MANUAL DE AYUDA INFORMATIVAS WINDOWS MANUAL DE AYUDA INFORMATIVAS WINDOWS Agencia Tributaria CENTRO DE ATENCIÓN TELEFÓNICA DEPARTAMENTO DE INFORMÁTICA TRIBUTARIA ÍNDICE PLATAFORMA DE INFORMATIVAS INTRODUCCIÓN... 4 Requisitos mínimos... 4

Más detalles

Formarnos / Instructivo para tutores

Formarnos / Instructivo para tutores PROGRAMA DE FORMACIÓN DE DIRIGENTES EN GESTIÓN PÚBLICA Y SOCIAL Formarnos / Instructivo para tutores Universidad Nacional de Lanús / Vicerrectorado / Campus Virtual / 2015 Índice Ingreso a la plataforma

Más detalles

Aula Virtual Diseño Funcional. Plataforma e-learning para Proyecto Hombre. Diseño Funcional. Aula Virtual. 1. Visión General

Aula Virtual Diseño Funcional. Plataforma e-learning para Proyecto Hombre. Diseño Funcional. Aula Virtual. 1. Visión General Plataforma elearning para Proyecto Hombre Aula Virtual 1. Visión General Versión: Fecha: Editor: Notas: 0.1 28/08/2008 Marta Rodríguez Borrador vision_general.doc Página 1 de 17 ÍNDICE Aula Virtual...1

Más detalles

MANUAL DE USUARIO Correo, Contactos, Calendario y Chat GOOGLE APPS

MANUAL DE USUARIO Correo, Contactos, Calendario y Chat GOOGLE APPS MANUAL DE USUARIO Correo, Contactos, Calendario y Chat GOOGLE APPS Tabla de Contenidos 1. Ingreso a la cuenta de correo 2. Mail de Google Apps. Lectura de emails. Organizar y buscar en tu bandeja de entrada.

Más detalles