Máster Universitario en Ingeniería Informática Universidad Politécnica de Madrid Escuela Técnica Superior de Ingenieros Informáticos TRABAJO FIN DE MÁSTER SISTEMA DE EVALUACIÓN DE LA CALIDAD DE LOS COMPONENTES WEB CENTRADO EN LOS USUARIOS FINALES Autor: Miguel Ortega Moreno Director: Genoveva López Gómez MADRID, JUNIO 2018 Agradecimientos Gracias a David y Genoveva por darme la oportunidad de trabajar con ellos y guiarme a lo largo de este tiempo. A mis compañeros del grupo de trabajo que en cierto modo forman parte de todo el proceso llevado a cabo. A amigos y compañeros de viaje en esta etapa, por conseguir que los días de estudio se convirtieran en momento para el recuerdo. A Sandra por acompañarme de la mano en los buenos y malos momentos. Y en especial a mi familia por enseñarme que todo objetivo se puede conseguir con esfuerzo y sacrificio. Gracias. Contenido Introducción y Objetivos............................................................................................................ 1 1.1 Contexto del proyecto.................................................................................................. 2 1.2 Objetivos...................................................................................................................... 2 Estado de la cuestión.................................................................................................................. 5 2.1 Web Components......................................................................................................... 5 2.1.1 Shadow DOM....................................................................................................... 7 2.1.2 Template ............................................................................................................... 8 2.1.3 Imports ................................................................................................................. 8 2.1.4 Custom Elements................................................................................................ 10 2.1.5 Frameworks........................................................................................................ 12 2.2 Estándares de calidad web tradicionales ................................................................... 17 2.2.1 ISO/IEC 9126..................................................................................................... 18 2.2.2 ISO/IEC 25010................................................................................................... 20 2.2.3 Web Quality Model (WQM) .............................................................................. 23 2.3 Guías y herramientas para el desarrollo software...................................................... 24 2.3.1 WCAG................................................................................................................ 24 2.3.2 A11Y .................................................................................................................. 25 2.3.3 Escomplex .......................................................................................................... 26 Automatización de la medición de calidad .............................................................................. 29 3.1 Estudio de métricas asociadas a los Web Components ............................................. 30 3.2 Desarrollo de componentes ....................................................................................... 42 3.2.1 Versionado de los componentes ......................................................................... 53 3.3 Implementación de la plataforma de integración ...................................................... 55 3.3.1 Estructura de la plataforma ................................................................................ 56 3.4 Servicio automático de gestión de escenarios ........................................................... 63 3.5 Herramientas para la medición de calidad................................................................. 67 3.6 Modelo predictivo de la calidad ................................................................................ 71 Resultados ................................................................................................................................ 75 4.1 Descripción de la muestra de estudio ........................................................................ 75 4.2 Resultados del análisis de las opiniones de los usuarios ........................................... 76 Conclusiones y Líneas Futuras................................................................................................. 87 5.1 Conclusiones.............................................................................................................. 87 5.2 Líneas Futuras............................................................................................................ 88 Bilbliografía ............................................................................................................................. 91 Anexo ....................................................................................................................................... 95 I. Guion empleado de las entrevistas ................................................................................ 95 II. Mapa jerárquico de las métricas ................................................................................ 96 III. Categorías de la métrica de accesibilidad.................................................................. 96 IV. Preguntas realizadas a los usuarios sobre los componentes ...................................... 97 V. Estudio estadístico de la descripción de los datos......................................................... 98 i Índice de Figuras Figura 1. Estructura de shadow DOM........................................................................................ 7 Figura 2. Mapa de links de un documento HTML..................................................................... 9 Figura 3. Compatibilidad de Polymer[12].................................................................................. 12 Figura 4. Estructura de una aplicación de Angular 2[20] ........................................................... 16 Figura 5. Estructura de la ISO 9126......................................................................................... 19 Figura 6. Estructura de la ISO 25010[27] .................................................................................. 20 Figura 7. Cubo de las dimensiones del WQM.......................................................................... 23 Figura 8. Gráfico de referencias a las métricas por los expertos.............................................. 32 Figura 9. Soporte de los navegadores a custom elements[44].................................................... 41 Figura 10. Estilo del componente (izquierda) vs estilo de la aplicación (derecha).................. 43 Figura 11. Flujo de peticiones del componente de Google+.................................................... 44 Figura 12. Componente desarrollado (izquierda). Post en Facebook (derecha) ...................... 45 Figura 13. Flujo de peticiones del component de Twitter ........................................................ 47 Figura 14. Componente desarrollado (izquierda). Estilo de la página de Twitter (derecha).... 47 Figura 15. Componente de Finanzas ........................................................................................ 48 Figura 16. Componente para buscar empresas en bolsa........................................................... 48 Figura 17. Flujo de peticiones del componente de Finanzas.................................................... 49 Figura 18. Componente de Tráfico........................................................................................... 50 Figura 19. Flujo de peticiones del componente de tráfico ....................................................... 50 Figura 20. Componente de tiempo ........................................................................................... 51 Figura 21. Componente de Reddit (izquierda). Web de Reddit (derecha) ............................... 52 Figura 22. Flujo de peticiones del componente de Reddit ....................................................... 52 Figura 23. Estructura de la aplicación de lado cliente.............................................................. 57 Figura 24. Arquitectura del back-end....................................................................................... 63 Figura 25. Página HTLM con elresumen de los valores obtenidos ......................................... 71 Figura 26. Distribución del cross-validation con k igual a 5 ................................................... 73 Figura 27. Regresión lineal (rojo), regresión polinomial de grado 2 (azul) y 3 (amarillo)...... 74 Figura 28. Histograma de los atributos de los datos ................................................................ 77 Figura 29. Gráfico de dispersión de los datos e histograma (diagonal) ................................... 78 iii Índice de Tablas Tabla 1. Evalaluación de los riegos según el nivel de complejidad ......................................... 35 Tabla 2. Mapa de equivalencias entre normas de WCAG y A11Y .......................................... 68 Tabla 3. Tabla de correlación con la variable Reputation ........................................................ 78 Tabla 4. Ecuación general de la regresión lineal.....................................................................