ESCUELA DE INGENIERIA INFORMÁTICA (SEGOVIA) Grado en Ingeniería Informática de Servicios y Aplicaciones ENGLISHFORKIDS APLICACIÓN WEB ALUMNA: Cecilia Aguilar Méndez TUTOR: Fernando Díaz Gómez Cecilia Aguilar Méndez 1 Cecilia Aguilar Méndez “Caminando en línea recta no puede uno llegar muy lejos.” Antoine de Saint-Exupéry Agradecimientos: A mi tutor Fernando Díaz Gómez por el tiempo dedicado a este proyecto y por compartir sus conocimientos conmigo. A mi madre y mi hermana, por todo el sacrificio que ha conllevado estar aquí y salir adelante juntas. A mi novio y mis amigos, por creer en mí y animarme cuando sentía que no podía. Gracias a todos. 2 Cecilia Aguilar Méndez INDICE DE CONTENIDO SECCION 1: MEMORIA DEL PROYECTO WEB ____________________________________ 9 1. IDENTIFICACIÓN DEL PROYECTO _______________________________________ 10 2. ORGANIZACIÓN DE DOCUMENTACIÓN __________________________________ 10 3. ORGANIZACIÓN CD ___________________________________________________ 11 4.DESCRIPCION GENERAL DEL TFG ________________________________________ 13 4.1.MOTIVACIÓN ____________________________________________________ 13 4.2.DESCRIPCIÓN ___________________________________________________ 14 4.3.CUESTIONES METODOLÓGICAS ___________________________________ 16 4.4TECNOLOGIAS DE DESARROLLO __________________________________ 17 5. DESCRIPCIÓN DEL PRODUCTO _________________________________________ 19 5.1.FUNCIONALIDAD DEL PRODUCTO _________________________________ 20 5.2.ARQUITECTURA DEL PRODUCTO __________________________________ 23 5.3.DESPLIEGUE DEL PRODUCTO ____________________________________ 24 6. SOFTWARE UTILIZADO ________________________________________________ 25 7. PLANIFICACIÓN Y PRESUPUESTO ______________________________________ 26 7.1.ESTIMACION DE TRABAJOS ______________________________________ 26 7.1.1.PROCESO DE ESTIMACIÓN ____________________________________ 26 7.1.2.ESTIMACIÓN POR PUNTOS DE FUNCIÓN ________________________ 29 7.1.3.ESTIMACIÓN MEDIANTE COCOMO _____________________________ 32 7.2.PLANIFICACIÓN _________________________________________________ 34 7.3.PRESUPUESTO _________________________________________________ 36 8. ASPECTOS A RESALTAR ______________________________________________ 37 8.1.ESTRUCTURA DE DESARROLLO __________________________________ 37 8.1.1.LIBRERIAS PHP ______________________________________________ 37 8.1.2.FUNCIONAMIENTO DE LAS ACTIVIDADES CON PHP Y JAVASCRIPT_ 39 8.1.3.ESTILOS ____________________________________________________ 42 8.2.FORMATOS DE ARCHIVOS _______________________________________ 43 9. CONCLUSIONES______________________________________________________ 43 9.1.PUNTOS POSITIVOS _____________________________________________ 43 9.2.PUNTOS NEGATIVOS ____________________________________________ 44 10. GLOSARIO DE TÉRMINOS ___________________________________________ 45 11. BIBLIOGRAFIA _____________________________________________________ 47 3 Cecilia Aguilar Méndez SECCION 2: MANUAL TECNICO _______________________________________________ 48 1. RESUMEN ___________________________________________________________ 49 2. ANALISIS DEL SISTEMA _______________________________________________ 49 2.1.OBJETIVOS _____________________________________________________ 49 2.2.IDENTIFICACIÓN DE USUARIOS ___________________________________ 51 2.3.REQUISITOS DEL SISTEMA _______________________________________ 51 2.3.1.REQUISITOS FUNCIONALES ___________________________________ 51 2.3.2.REQUISITOS NO FUNCIONALES ________________________________ 52 2.3.3.RESTRICCIONES _____________________________________________ 53 2.4.MATRIZ DE RASTREABILIDAD OBJETIVOS/REQUISITOS ______________ 54 2.5.CASOS DE USO _________________________________________________ 55 2.5.1.ESPECIFICACION DE CASOS DE USO ___________________________ 57 2.6.DIAGRAMAS DE SECUENCIA ______________________________________ 67 3. DISEÑO DEL SISTEMA_________________________________________________ 72 3.1.BASE DE DATOS ________________________________________________ 72 3.1.1.DICCIONARIO DE DATOS ______________________________________ 73 3.1.2.GRAFO RELACIONAL _________________________________________ 76 3.2.INTERFAZ DE USUARIO __________________________________________ 77 3.3.PRUEBAS ______________________________________________________ 84 3.3.1.CAJA BLANCA _______________________________________________ 84 3.3.2.CAJA NEGRA ________________________________________________ 84 3.3.3.PRUEBAS REALIZADAS _______________________________________ 85 4 Cecilia Aguilar Méndez SECCION 3: MANUAL DE USUARIO____________________________________________ 86 1. INTRODUCCIÓN ______________________________________________________ 87 2. ¿QUÉ ES ENGLISHFORKIDS? __________________________________________ 87 3. ESTRUCTURA DE LA WEB _____________________________________________ 89 4. MANUAL DE USUARIO ________________________________________________ 90 4.1.REQUISITOS MÍNIMOS____________________________________________ 90 4.2.REGISTRO DE USUARIO __________________________________________ 91 4.3.DESARROLLO DE ACTIVIDADES. __________________________________ 93 4.3.1.TEMATICA __________________________________________________ 93 4.3.2.ACTIVIDAD __________________________________________________ 93 4.3.3.NIVEL ______________________________________________________ 94 4.4.DESCARGA DE ARCHIVOS ________________________________________ 96 5. MANUAL DE ADMINISTRADOR _________________________________________ 97 5.1.REQUISITOS MINIMOS____________________________________________ 97 5.2.INICIO DE SESIÓN _______________________________________________ 98 5.3.ESTRUCTURA DE LA WEB _______________________________________ 100 5.4.AÑADIR Y ELIMINAR ACTIVIDADES A LA WEB. _____________________ 101 5.4.1.TEMAS ____________________________________________________ 102 5.4.2.PLANTILLAS _______________________________________________ 102 5.4.3.NIVELES ___________________________________________________ 103 5.5.ASOCIAR ACTIVIDADES _________________________________________ 104 5.6.LISTADO DE TEMAS ____________________________________________ 105 5.7.LISTADO DE NIVELES ___________________________________________ 105 5.8.LISTADO DE ACTIVIDADES ______________________________________ 106 5.9.MODIFICAR DESCARGAS _______________________________________ 107 5 Cecilia Aguilar Méndez INDICE DE FIGURAS Figura 1: Descripción del sitio web ____________________________________________ 14 Figura 2: Modelo de desarrollo ________________________________________________ 16 Figura 3: Explorador de actividades ___________________________________________ 20 Figura 4: Desarrollo de actividades ____________________________________________ 21 Figura 5: Gestión de actividades I _____________________________________________ 22 Figura 6: Gestión de actividades II _____________________________________________ 22 Figura 7: Arquitectura del sistema _____________________________________________ 23 Figura 8: Dispositivos compatibles ____________________________________________ 24 Figura 9: Diagrama de Gantt __________________________________________________ 35 Figura 10: Fragmento de código puzzle.php _____________________________________ 39 Figura 11: Fragmento de código puzzle.js_______________________________________ 39 Figura 12: Fragmento de código hangman.php __________________________________ 40 Figura 13: Fragmento de código hangman.js ____________________________________ 41 Figura 14: Fragmento de código pronunciation.php ______________________________ 41 Figura 15: Fragmento de código de estilos ______________________________________ 42 Figura 16: Jerarquía de actores _______________________________________________ 55 Figura 17: CU - usuario no registrado __________________________________________ 56 Figura 18: CU - usuario registrado _____________________________________________ 56 Figura 19: CU - administrador _________________________________________________ 56 Figura 20: DS – Registrar usuario _____________________________________________ 67 Figura 21: DS – Iniciar sesión _________________________________________________ 68 Figura 22: DS – Realiza actividad ______________________________________________ 69 Figura 23: DS – Añade actividad _______________________________________________ 69 Figura 24: DS – Alta actividad _________________________________________________ 70 Figura 25: DS – Baja actividad ________________________________________________ 71 Figura 26: DS – Cerrar Sesión _________________________________________________ 71 Figura 27: Diagrama Entidad - Relación ________________________________________ 72 Figura 28: Estructura de la web I ______________________________________________ 89 Figura 29: Estructura de la web II ______________________________________________ 89 Figura 30: Registro de usuario ________________________________________________ 91 Figura 31: Inicio sesión I - usuario _____________________________________________ 92 Figura 32: Inicio sesión II - usuario ____________________________________________ 92 Figura 33: Listado temas _____________________________________________________ 93 Figura 34: Listado actividad __________________________________________________ 93 Figura 35: Listado niveles ____________________________________________________ 94 Figura 36: Actividad - ahorcado _______________________________________________ 94 Figura 37: Actividad - puzzle __________________________________________________ 95 Figura 38: Actividad – pronunciación __________________________________________ 95 Figura 39: Descarga _________________________________________________________ 96 Figura 40: Inicio sesión I – administrador _______________________________________ 98 Figura 41: Inicio sesión II – administrador ______________________________________ 98 Figura 42: Acceso restringido _________________________________________________ 99 Figura 43: Listado de las actividades dadas de alta______________________________ 100 Figura 44: Inicio de página administrador ______________________________________ 101 Figura 45: Modificar temas __________________________________________________ 102 Figura 46: Modificar actividades ______________________________________________ 102 Figura 47: Modificar niveles _________________________________________________ 103 Figura 48: Alta y baja de actividades __________________________________________ 104 Figura 49: Listado de temas (administrador) ___________________________________ 105 Figura 50: Listado de niveles (administrador) __________________________________ 105 6 Cecilia Aguilar Méndez Figura 51: Listado de actividades (administrador) _______________________________ 106 Figura 52: Modificar descargas (administrador) _________________________________ 107 INDICE DE TABLAS: Tabla 1: Multiplicadores de complejidad ________________________________________ 27 Tabla 2: Valor de complejidad de las características del proyecto __________________ 27 Tabla 3: Grado de complejidad ________________________________________________ 28 Tabla 4: Factores de ajuste ___________________________________________________ 28 Tabla 5: Multiplicadores y valores _____________________________________________ 30 Tabla 6: Factores de ajuste y complejidad del proyecto ___________________________ 30 Tabla 7: Lineas de código por lenguaje ________________________________________ 31 Tabla 8: Modelos de desarrollo contemplados por cocomo ________________________ 32 Tabla 9: Factores de coste ___________________________________________________ 32 Tabla 10: Planificación temporal ______________________________________________ 34 Tabla 11: Recursos materiales ________________________________________________ 36 Tabla 12: Recursos personales _______________________________________________ 36 Tabla 13: OBJ – 1: Crear una aplicación escalable _______________________________ 49 Tabla 14: OBJ – 2: Crear una aplicación escalable _______________________________ 49 Tabla 15: OBJ – 3: Crear una aplicación escalable _______________________________ 50 Tabla 16: OBJ – 4: Crear una aplicación escalable _______________________________ 50 Tabla 17: Matriz de rastreabilidad______________________________________________ 54 Tabla 18: CU-01 Registrar ____________________________________________________ 57 Tabla 19: CU-02 Iniciar sesión ________________________________________________ 57 Tabla 20: CU-03 Desarrolla actividad ___________________________________________ 58 Tabla 21: CU-04 Descarga contenido ___________________________________________ 58 Tabla 22: CU-05 Cierra sesión _________________________________________________ 59 Tabla 23: CU-06 Inicia sesión (administrador) ___________________________________ 59 Tabla 24: CU-07 Visualiza estructura web _______________________________________ 60 Tabla 25: CU-08 Listado temáticas _____________________________________________ 60 Tabla 26: CU-09 Listado niveles _______________________________________________ 61 Tabla 27: CU-10 Listado actividades ___________________________________________ 61 Tabla 28: CU-11 Añadir temática ______________________________________________ 62 Tabla 29: CU-12 Eliminar temática _____________________________________________ 62 Tabla 30 CU-13 Añadir actividad _______________________________________________ 63 Tabla 31: CU-14 Eliminar actividad_____________________________________________ 63 Tabla 32: CU-15 Añadir Nivel _________________________________________________ 64 Tabla 33: CU-16 Eliminar Nivel ________________________________________________ 64 Tabla 34: CU-17 Dar de alta actividad __________________________________________ 65 Tabla 35: CU-18 Dar de baja actividad __________________________________________ 65 Tabla 36: CU-19 Cerrar Sesión (administrador) __________________________________ 66 Tabla 37: Diccionario de datos - User_Login ____________________________________ 73 Tabla 38: Diccionario de datos - Resources _____________________________________ 73 Tabla 39: Diccionario de datos - themes________________________________________ 73 Tabla 40: Diccionario de datos - activityTemplate ________________________________ 73 Tabla 41: Diccionario de datos - my_level ______________________________________ 74 Tabla 42: Diccionario de datos - activity ________________________________________ 74 Tabla 43: Diccionario de datos - resourcesForTemplate __________________________ 74 Tabla 44: Diccionario de datos - association ____________________________________ 75 Tabla 45: Diccionario de datos - download _____________________________________ 75 Tabla 46: DI-01 Bosquejo principal_____________________________________________ 77 Tabla 47: DI-02 Página de inicio _______________________________________________ 78 7 Cecilia Aguilar Méndez Tabla 48: DI-03 Listado de actividades _________________________________________ 79 Tabla 49: DI-04 Listado de imágenes ___________________________________________ 80 Tabla 50: DI-05 Modificación de estructura ______________________________________ 81 Tabla 51: DI-06 Listado de temas - Administrador ________________________________ 82 Tabla 52: DI-07 Inserción, eliminación y listado de imágenes - Administrador_________ 83 Tabla 53: Pruebas realizadas _________________________________________________ 85 8 Cecilia Aguilar Méndez SECCION 1: MEMORIA DEL PROYECTO WEB 9