Análisis y divulgación web de estudios estadísticos sobre competiciones futbolísticas a nivel de de selecciones

Análisis y divulgación web de estudios estadísticos sobre competiciones futbolísticas a nivel de de selecciones Trabajo Fin de Grado Autor: Ramón Relinque Delgado Tutor: Luis Valencia Cabrera Facultad de Matemáticas Grado en Estadística. Curso 2016/2017 Departamento de Ciencias de la Computación e Inteligencia Artificial Sevilla, Junio de 2017 Índice Página | 1 ÍNDICE. Índice de figuras .................................................................................................................. 4 1 RESUMEN Y ABSTRACT ...................................................................................................... 8 1.1 Resumen ................................................................................................................ 8 1.2 Abstract .................................................................................................................. 9 2 INTRODUCCIÓN ............................................................................................................. 10 3 JUSTIFICACIÓN ............................................................................................................... 11 4 MATERIALES Y MÉTODOS ............................................................................................... 12 4.1 Recogida de la información .................................................................................. 12 4.1.1 Procedimiento a seguir .................................................................................. 12 4.1.2 Acceso a los datos ........................................................................................ 13 4.1.3 Problemas en la recogida de datos ................................................................ 18 4.1.4 Preparación de los datos .............................................................................. 19 4.1.5 Organización de los datos ............................................................................. 30 4.2 Base de Datos ...................................................................................................... 34 4.2.1 Características del diseño .............................................................................. 35 4.2.2 Diseño conceptual ......................................................................................... 35 4.2.3 Diseño lógico ................................................................................................ 37 4.2.4 Implementación MySQL ................................................................................ 38 4.2.5 PhpMyAdmin ................................................................................................ 40 4.3 Estudios estadísticos ............................................................................................ 41 4.3.1 Encuesta sobre calidad de Eurocopas ............................................................. 42 4.3.2 Estudios Descriptivos .................................................................................... 48 4.3.3 Estudios Predictivos....................................................................................... 52 Índice Página | 2 4.3.4 Estudios de Clasificación ................................................................................ 55 4.3.5 Consultas SQL ................................................................................................ 62 4.4 Sitio web .............................................................................................................. 64 4.4.1 HTML ........................................................................................................... 80 4.4.2 CSS ............................................................................................................... 83 4.4.3 JavaScript ..................................................................................................... 85 4.4.4 PHP .............................................................................................................. 87 5 CONCLUSIONES Y FUTUROS ESTUDIOS ............................................................................ 91 6 BIBLIOGRAFÍA ................................................................................................................ 93 7 ANEXO. CÓDIGO DEL SITIO WEB ..................................................................................... 94 Índice de figuras Página | 4 Índice de figuras Figura 1 - Menú principal de la web oficial de la UEFA ............................................................... 13 Figura 2 - Histórico de ediciones de la Eurocopa ........................................................................ 14 Figura 3 - Partidos Euro 2004 - Web UEFA .................................................................................. 14 Figura 4 - Partidos Cuartos de Final - EURO 2004 ....................................................................... 15 Figura 5 - Información Partido Francia-Grecia - Web Oficial ...................................................... 15 Figura 6 - Estadísticas Partido Francia-Grecia - Web Oficial ....................................................... 16 Figura 7 - Estadísticas Jugadores Francia. Partido Francia-Grecia - Web Oficial ........................ 17 Figura 8 - Estadísticas Jugadores Grecia. Parido Francia-Grecia. Web Oficial ............................ 17 Figura 9 - Organización de datos Excel - Qué variables están disponibles en cada partido ....... 19 Figura 10 - Organización de datos Excel - Qué variables no están disponibles para los partidos de Croacia en 2004 ...................................................................................................................... 19 Figura 11 - Información sobre las tarjetas. Partido Suecia-Croacia. ........................................... 20 Figura 12 - Información a través de documentos PDF. EURO 2016 ............................................ 20 Figura 13 - Organización de los datos Excel - Variables en cada caso......................................... 21 Figura 14 - Excel estadísticas por jugadores. Selección alemana. Alemania-Holanda Euro 2004 ..................................................................................................................................................... 22 Figura 15Excel estadísticas por jugadores. Selección alemana. Letonia-Alemania Euro 2004 . 23 Figura 16 - Excel estadísticas por jugadores. Selección alemana. Alemania-RepCheca Euro 2004 ..................................................................................................................................................... 24 Figura 17 - Estadísticas equipo selección alemana. Euro 2004 ................................................... 24 Figura 18 - Estadísticas de cada selección en cada partido - Web Oficial ................................... 25 Figura 19 - Datos Excel estadísticas selección alemana. EURO 2004 - Parte I ............................ 25 Figura 20 - Datos Excel estadísticas selección alemana. EURO 2004 - Parte II ........................... 25 Figura 21 - Datos Excel estadísticas selección alemana. EURO 2004 - Parte III .......................... 25 Figura 22 - Estadísticas de cada selección en cada edición......................................................... 26 Figura 23 - Datos Excel. Estadísticas generales de cada partido ................................................. 27 Figura 24 - Filtro Excel - Estadísticas generales de los partidos que disputó España en 2004 ... 27 Figura 25 - Estadísticas generales de los partidos que disputó España en 2008 ........................ 27 Figura 26 - Generación de filtro en Excel - Parte I ....................................................................... 28 Figura 27 - Generación de filtro en Excel - Parte II ...................................................................... 28 Figura 28 - Generación de filtro en Excel - Parte III ..................................................................... 29 Figura 29 - Generación de filtro en Excel - Parte IV .................................................................... 29 Figura 30 - Generación de filtro en Excel - Parte V ..................................................................... 30 Figura 31 - Generación de filtro en Excel - Parte VI .................................................................... 30 Figura 32 - Generación de filtro en Excel - Parte VII ................................................................... 30 Figura 33 - Organización de los datos - Parte I ............................................................................ 31 Figura 34 - Organización de los datos - Parte II ........................................................................... 31 Figura 35 - Organización de los datos - Parte III .......................................................................... 32 Índice de figuras Página | 5 Figura 36 - Organización de los datos - Parte IV ......................................................................... 32 Figura 37 - Organización de los datos - Parte V .......................................................................... 33 Figura 38 - Organización de los datos - Parte VI ......................................................................... 33 Figura 39 - Diagrama Entidad - Relación en DIA ......................................................................... 36 Figura 40 - Relación 1:N .............................................................................................................. 36 Figura 41 - Relación N:M ............................................................................................................. 37 Figura 42 - Diseño relacional en DIA ........................................................................................... 37 Figura 43 - Foreign Key en tablas MySQL Workbench ................................................................ 38 Figura 44 - Diseño relacional con MySQL Workbench ................................................................ 38 Figura 45 - Tablas eurocopas MySQL Workbench ....................................................................... 39 Figura 46 - Campos tablas MySQL ............................................................................................... 39 Figura 47 - Consulta SQL a partir de Excel - Parte I ..................................................................... 39 Figura 48 - Consulta SQL a partir de Excel - Parte II .................................................................... 40 Figura 49 - Estadísticas de cada jugador en cada partido en MySQL Workbench ...................... 40 Figura 50 - Usuarios en phpMyAdmin ......................................................................................... 41 Figura 51 - Cuestionario Calidad de Eurocopas ........................................................................... 42 Figura 52 - Selección de distritos con R ....................................................................................... 43 Figura 53 - Nº de muestra por distritos....................................................................................... 44 Figura 54 - Resultados Encuesta ................................................................................................. 45 Figura 55 - Representación de variables más importantes en la calidad de una Eurocopa ....... 45 Figura 56 - Variables más significativas en la calidad de Eurocopas ........................................... 46 Figura 57 - Puntuación para cada variable en cada edición ........................................................ 46 Figura 58 - Tabla de la Normal (0,1) ............................................................................................ 47 Figura 59 - Puntuación normalizada para cada variable en cada edición de la Eurocopa .......... 47 Figura 60 - Representación de la calidad de cada Eurocopa para la población de Sevilla .......... 48 Figura 61 - Representación de la relación Ataques/Gol .............................................................. 48 Figura 62 - Representación de los goles recibidos por cada selección en 2012 ......................... 49 Figura 63 - Representación del nº de goles anotados por cada selección en 2008 .................... 50 Figura 64 - Estadísticas a nivel de partidos para la EURO 2004 .................................................. 50 Figura 65 - Representación del nº de goles en cada edición ...................................................... 51 Figura 66 - Gráfico dinámico Excel. Evolución de las selecciones en el tiempo en cuanto a ronda alcanzada ..................................................................................................................................... 51 Figura 67 - Evolución en el tiempo en cuando a ronda alcanzada. Alemania, España, Inglaterra ..................................................................................................................................................... 52 Figura 68 - Estudio Serie Temporal - Parte I ................................................................................ 53 Figura 69 - Estudio Serie Temporal - Parte II ............................................................................... 53 Figura 70 - Estudio Serie Temporal - Parte III .............................................................................. 54 Figura 71Estudio Serie Temporal - Parte IV .............................................................................. 54 Figura 72 - Estudio Serie Temporal - Parte V .............................................................................. 54 Figura 73 - SPSS Modeler - Parte I ............................................................................................... 55 Figura 74 - SPSS Modeler - Parte II .............................................................................................. 56 Índice de figuras Página | 6 Figura 75 - SPSS Modeler - Parte III ............................................................................................. 56 Figura 76 - SPSS Modeler - Parte IV............................................................................................. 57 Figura 77 - SPSS Modeler - Parte V.............................................................................................. 57 Figura 78 - SPSS Modeler - Parte VI............................................................................................. 58 Figura 79 - SPSS Modeler - Parte VII............................................................................................ 58 Figura 80 - SPSS Modeler - Parte VIII .......................................................................................... 59 Figura 81 - SPSS Modeler. Modelo II. Parte I .............................................................................. 60 Figura 82 - SPSS Modeler. Modelo II. Parte II ............................................................................. 60 Figura 83 - SPSS Modeler. Modelo II. Parte III ............................................................................ 61 Figura 84 - SPSS Modeler. Modelo II. Parte IV ............................................................................ 61 Figura 85 - SPSS Modeler. Modelo II. Parte V ............................................................................. 62 Figura 86 - Consulta SQL para tabla de máximos anotadores en la Euro 2004 .......................... 63 Figura 87 - Tabla máximos anotadores Euro 2004 ...................................................................... 63 Figura 88 - Estadísticas de jugadores en la EURO 2004 mediante consulta SQL ........................ 64 Figura 89 - Estadísticas de jugadores en la EURO 2008 mediante consultas SQL ....................... 64 Figura 90 - Sitio Web. Bienvenida - Parte I .................................................................................. 65 Figura 91 - Sitio Web. Bienvenida - Parte II ................................................................................ 66 Figura 92 - Sitio Web. Bienvenida - Parte III ............................................................................... 66 Figura 93 - Sitio Web. Acceso a estadísticas ............................................................................... 67 Figura 94 - Sitio Web. Registra tu cuenta .................................................................................... 67 Figura 95 - Sitio Web. Formulario de contacto ........................................................................... 68 Figura 96 - Sitio Web. Acceso a estadísticas - Parte II ................................................................. 68 Figura 97 - Sitio Web. Estadísticas - Parte I ................................................................................. 69 Figura 98 - Sitio Web. Estadísticas - Parte II ................................................................................ 69 Figura 99 - Sitio Web. Estadísticas - Parte III ............................................................................... 70 Figura 100 - Sitio Web. Estadísticas - Parte IV ............................................................................. 70 Figura 101 - Sitio Web. Estadísticas Jugadores - Parte I .............................................................. 71 Figura 102 - Sitio Web. Estadísticas Jugadores - Parte II ............................................................. 71 Figura 103 - Sitio Web. Estadísticas Jugadores - Parte III ............................................................ 72 Figura 104 - Sitio Web. Estadísticas Jugadores - Parte IV ........................................................... 72 Figura 105 - Sitio Web. Estadísticas Partidos - Parte I ................................................................. 73 Figura 106 - Sitio Web. Estadísticas Partidos - Parte II ................................................................ 73 Figura 107 - Sitio Web. Estadísticas Partidos - Parte III ............................................................... 74 Figura 108 - Sitio Web. Estadísticas Selecciones y ediciones - Parte I ........................................ 74 Figura 109 - Sitio Web. Estadísticas Selecciones y ediciones - Parte II ....................................... 75 Figura 110 - Sitio Web. Estadísticas Selecciones y ediciones - Parte III ...................................... 75 Figura 111 - Sitio Web. Estadísticas Selecciones y ediciones - Parte IV ...................................... 76 Figura 112 - Sitio Web. Estadísticas Selecciones y ediciones - Parte V ....................................... 76 Figura 113 - Sitio Web. Estadísticas Selecciones y ediciones - Parte VI ...................................... 77 Figura 114 - Sitio Web. Estadísticas Selecciones y ediciones - Parte VII ..................................... 77 Figura 115 - Sitio Web. Estadísticas Selecciones y ediciones - Parte VIII .................................... 77 Índice de figuras Página | 7 Figura 116 - Sitio Web. Conclusiones - Parte I ............................................................................ 78 Figura 117 - Sitio Web. Conclusiones - Parte II ........................................................................... 78 Figura 118 - Sitio Web. Conclusiones - Parte III .......................................................................... 78 Figura 119 - Diseño Responsive - Parte I ..................................................................................... 79 Figura 120 - Diseño Responsive - Parte II .................................................................................... 79 Figura 121 - Diseño Responsive - Parte III ................................................................................... 80 Figura 122 - HTML - Parte I .......................................................................................................... 81 Figura 123 - HTML - Parte II ......................................................................................................... 81 Figura 124 - HTML - Parte III ........................................................................................................ 81 Figura 125 - HTML - Parte IV ....................................................................................................... 82 Figura 126 - HTML - Parte V ........................................................................................................ 82 Figura 127 - HTML - Parte VI ....................................................................................................... 83 Figura 128 - HTML - Parte VII ...................................................................................................... 83 Figura 129 - CSS - Parte I ............................................................................................................. 84 Figura 130 - CSS - Parte II ............................................................................................................ 84 Figura 131 - CSS - Parte III ........................................................................................................... 85 Figura 132 - JavaScript - Parte I ................................................................................................... 85 Figura 133 - JavaScript - Parte II .................................................................................................. 86 Figura 134 - JavaScript - Parte III ................................................................................................. 86 Figura 135 - JavaScript - Parte IV ................................................................................................. 87 Figura 136 - PHP - Parte I ............................................................................................................ 87 Figura 137 - PHP - Parte II ........................................................................................................... 88 Figura 138 - PHP - Parte III .......................................................................................................... 88 Figura 139 - PHP - Parte IV .......................................................................................................... 88 Figura 140 - PHP - Parte V ........................................................................................................... 89 Figura 141 - PHP - Parte VI .......................................................................................................... 89 Figura 142 - PHP - Parte VII ......................................................................................................... 89 Figura 143 - PHP - Parte VIII ........................................................................................................ 90 Figura 144 - Función enviar mensaje con PHP ............................................................................ 90 Resumen y abstract Página | 8 1. RESUMEN Y ABSTRACT 1.1 Resumen El presente Trabajo Fin de Grado, titulado "Análisis y divulgación web de estudios estadísticos sobre competiciones futbolísticas a nivel de de selecciones", tiene como objetivo proporcionar conocimientos sobre la gestión del dato, su posterior tratamiento y difusión de los resultados y conclusiones en la red. Como se indica en el título del proyecto, se han realizado estudios sobre la Eurocopa, una competición futbolística celebrada cada 4 años y en la que se disputan partidos entre las mejores selecciones de fútbol europeas. Por un lado, se han recogido los datos procedentes de la página oficial de la UEFA, la institución encargada de esta competición, por lo que es la fuente que proporciona los datos más fiables. Por otro lado, se ha diseñado y elaborado una base de datos en la que almacenar información perteneciente a los datos recogidos. Se han llevado a cabo distintos estudios estadísticos con el objetivo de extraer resultados a partir de los datos. Se han realizado, entre otros, estudios descriptivos, estudios de clasificación, modelos predictivos y series temporales, para obtener estadísticas y resultados a nivel de jugadores, partidos, equipos, torneos y otros elementos relacionados. Por último, y muy importante, se ha desarrollado un sitio web en el que publicar parte de las estadísticas y resultados obtenidos en los estudios estadísticos. Durante el desarrollo del presenta trabajo, se ha hecho uso de los métodos, técnicas, tecnologías y conocimientos ya adquiridos a lo largo del Grado en Estadística (lenguajes y programas tales como SPSS Statistics, Rstudio, HTML, PHP, CSS, Microsoft Excel o MySQL Workbench, entre otros) y de otras tecnologías como SPSS Modeler o cuestiones para la elaboración de un sitio web, con el uso de componentes no vistos durante el grado. Resumen y abstract Página | 9 1.2 Abstract The present Final Degree Work, titled “Analysis and dissemination of statistical studies on soccer competitions at the level of national teams”, aims to provide knowledge about data management, its subsequent treatment and knowledge in order to disseminate the conclusions in the network. As indicated in the title of this project, studies have been performed about the Eurocopa, a football competition held every 4 years and in which the best European teams compete. On the one hand, data have been collected from the official UEFA website, the institution in charge of this competition, so it is the source that provides the most reliable data. On the other hand, a database has been designed and developed to store the data collected in the previous phase. Several statistical studies have been carried out with the aim of extracting results from the data. In addition, descriptive studies, classification studies, predictive models and temporal series have been conducted to obtain statistics and results at the level of players, matches, teams, tournaments and other related elements. Finally, a website has been developed to publish some of the statistics and results obtained in the statistical studies. During the development of the present work, it has been made use of the methods, techniques, technologies and knowledge already acquired throughout the Degree in Statistics (languages and programs such as SPSS Statistics, Rstudio, HTML, PHP, CSS, Microsoft Excel or MySQL Workbench, and others). Besides, it was a good work with additional technologies such as SPSS Modeler and deepen into some skills related with the development of a website, including the use of components not studied during the degree. Materiales y métodos Página | 16 Figura 6 - Estadísticas Partido Francia-Grecia - Web Oficial Aparecen estadísticas a nivel del partido y a nivel de los jugadores. En este caso, como se dijo anteriormente, sólo se necesitan las estadísticas de los jugadores, ya que a partir de estas se van a obtener las estadísticas a nivel de partidos, selecciones y ediciones. Materiales y métodos Página | 17 Figura 7 - Estadísticas Jugadores Francia. Partido Francia-Grecia - Web Oficial Figura 8 - Estadísticas Jugadores Grecia. Parido Francia-Grecia. Web Oficial Materiales y métodos Página | 18 4.1.3 Problemas en la recogida de datos A la hora de recoger los datos, se presentan tres casos. Unos partidos contienen información acerca de unas determinadas variables y otros partidos acerca de otras. Las variables que incluyen estos casos son las siguientes: Sería ideal que para todos los partidos estuviesen disponibles las variables del caso 3 incluyendo las tarjetas amarillas y tarjetas rojas que sí se tienen en el caso 1, pero no sucede así. En negrita se observan las variables que son comunes en los tres casos, siendo estas variables las variables del primer caso exceptuando las tarjetas amarillas y tarjetas rojas. La información acerca de las tarjetas amarillas y rojas para los casos 2 y 3, se pueden obtener de otras fuentes, en cambio, para las variables de los casos 2 y 3 no comunes con el caso 1, no se puede obtener esa información, por lo que se podría, por un lado, eliminar esas variables, o bien, incluirlas y dejar los valores de campo como vacios cuando no se tenga disponible esa información. Para conocer en qué partidos se pueden encontrar unas estadísticas u otras, se ha creado un archivo Excel2 con 3 hojas, cada una referente a cada edición (excepto la de 2016, que sí contiene todas las variables ), que indica las variables que faltan en cada partido para la posterior recopilación de dicha información. 2 Toda la organización y limpieza de los datos almacenados se ha llevado a cabo a través de Microsoft Excel, una aplicación de hojas de cálculo con fórmulas, gráficos y un lenguaje de programación. Caso 1 Dorsal Nombre del jugador Goles anotados Asistencias Faltas cometidas Faltas recibidas Tarjetas amarillas Tarjetas rojas Caso 2 Dorsal Nombre del jugador Goles anotados Tiros a puerta Tiros fuera Asistencias Fuera de juego Faltas cometidas Faltas recibidas Caso 3 Dorsal Nombre del jugador Goles anotados Tiros a puerta Tiros fuera Asistencias Fuera de juego Faltas cometidas Faltas recibidas Pases intentados Pases completados Materiales y métodos Página | 19 Figura 9 - Organización de datos Excel - Qué variables están disponibles en cada partido Lo que interesa recopilar es la información acerca de las tarjetas, para así trabajar con todas las variables del caso 1. Por ejemplo, para la selección croata en la Euro 2004, no se dispone de información relacionada con las tarjetas, por lo que hay que acudir a otra sección para recoger esos datos. Figura 10 - Organización de datos Excel - Qué variables no están disponibles para los partidos de Croacia en 2004 A continuación se muestra el enlace donde se observan las tarjetas que reciben los jugadores del encuentro entre Suiza y Croacia del 13 de junio de 2004. http://www.uefa.com/uefaeuro/season=2004/matches/round=1581/match=1059166/postma tch/lineups/index.html Para llegar a esa pestaña, desde la página principal de la Eurocopa (http://www.uefa.com/uefaeuro/index.html), hacer clic en History, luego seleccionar la edición 2004, luego Matches, a continuación, en Group Stage, seleccionar el día 13 de Junio que es cuando se disputó dicho partido, buscar dicho día, y hacer clic en el resultado entre Suiza y Croacia, es decir, en el 0-0. Por último, en Lineups, se puede ver la información acerca de las tarjetas para los jugadores de ambas selecciones. Habría que repetir este proceso con todos aquellos partidos en los que no esté disponible la información sobre las tarjetas. Materiales y métodos Página | 20 Figura 11 - Información sobre las tarjetas. Partido Suecia-Croacia. Otro problema que se presenta, para la Euro 2016, es que la UEFA proporciona la información a través de documentos PDF, por lo que la forma de recoger esa información se complica. Para acceder a las estadísticas de la Euro 2016 hay que realizar lo siguiente: se parte de la página principal de la EUFA para competiciones entre selecciones ( http://es.uefa.com/uefaeuro/index.html ), a continuación se hace clic en "Partidos", después se selecciona el partido del que se pretende recopilar la información. Se abrirá una nueva página en la que habrá que seleccionar la sección "Información del partido", y por último, al final de la nueva página ( sección Dossiers de prensa ), se observan los documentos PDF que contienen la información. Como se dijo anteriormente, interesa recopilar la información referente a las estadísticas de los jugadores, por lo que habrá que descargar el documento "Estadísticas de jugador" y obtener las estadísticas de forma manual en un archivo Excel. Figura 12 - Información a través de documentos PDF. EURO 2016 4.1.4 Preparación de los datos  Datos a nivel de jugadores: Cómo se ha indicado anteriormente, no se presentan las variables de una forma homogénea, sino que se puede encontrar la información de tres formas distintas. Materiales y métodos Página | 21 Las variables comunes en los 3 casos son las siguientes: Dorsal, Nombre del jugador, Goles anotados, Asistencias, Faltas cometidas y Faltas recibidas. Cómo se ha mostrado antes, las tarjetas sí se pueden obtener, por lo que además de las variables anteriores, todos los partidos van a contener las tarjetas amarillas y rojas que reciben los jugadores. Por lo que los partidos quedaría de la siguiente forma: Figura 13 - Organización de los datos Excel - Variables en cada caso Caso 1 Dorsal Nombre del jugador Goles anotados Asistencias Faltas cometidas Faltas recibidas Tarjetas amarillas Tarjetas rojas Caso 2 Dorsal Nombre del jugador Goles anotados Tiros a puerta Tiros fuera Asistencias Fuera de juego Faltas cometidas Faltas recibidas Caso 3 Dorsal Nombre del jugador Goles anotados Tiros a puerta Tiros fuera Asistencias Fuera de juego Faltas cometidas Faltas recibidas Pases intentados Pases completados Materiales y métodos Página | 22 Cómo se verá en la organización de los datos a nivel de jugadores en el siguiente punto , cada archivo Excel pertenece a una Selección en una edición determinada, y cada archivo Excel contiene tantas hojas como partidos juega esa selección. Una vez que se tiene la estructura, se dispone a guardar las estadísticas de cada variable de cada jugador manualmente. Por ejemplo, para acceder a las estadísticas de los jugadores de España en la Euro 2012, habría que seguir la siguiente ruta: TFG EUROCOPA / Jugadores / Jugadores 2012 / España2012.xlsx . Si se quiere acceder a las estadísticas de los jugadores de Italia en la Euro 2004, la ruta a seguir sería la siguiente: TFG EUROCOPA / Jugadores / Jugadores 2014 / Italia2004.xlsx .  Datos a nivel de selecciones: Una vez que se tienen las estadísticas de cada jugador en cada partido, si se suman estas estadísticas, se obtienen las estadísticas de la selección en cada partido, y sumando las estadísticas de cada selección en cada partido, se obtienen las estadísticas de cada selección en cada edición de la Euro disputada. Por ejemplo, Alemania en la Euro 2004; a continuación se ven las estadísticas de la selección alemana en sus tres partidos, es decir, las estadísticas de cada jugador y la suma resultante para calcular la de la selección: Figura 14 - Excel estadísticas por jugadores. Selección alemana. Alemania-Holanda Euro 2004 Materiales y métodos Página | 23 Figura 15Excel estadísticas por jugadores. Selección alemana. Letonia-Alemania Euro 2004 Materiales y métodos Página | 24 Figura 16 - Excel estadísticas por jugadores. Selección alemana. Alemania-RepCheca Euro 2004 Sumando cada estadística de equipo en los tres partidos, resulta las estadísticas de la selección de Alemania en 2004: Figura 17 - Estadísticas equipo selección alemana. Euro 2004 De esta forma, se obtienen las estadísticas de juego para todas las selecciones en cada edición de la Euro. Hay que tener en cuenta que en otros partidos se han medido más variables en los jugadores, por lo que se pueden obtener más estadísticas de juego. Estas estadísticas no se pueden obtener sumando las estadísticas de cada jugador en cada partido, ya que como se viene diciendo, algunos partidos contienen unas variables y otros partidos contienen otras, por lo que habría que tomar estas estadísticas manualmente. Para obtenerlas se siguen los mismos pasos que para acceder a las estadísticas de los jugadores en un partido, pero en este caso, lo que nos interesa es guardar las estadísticas de las selecciones en los partidos en lugar de las estadísticas de los jugadores. Materiales y métodos Página | 25 Figura 18 - Estadísticas de cada selección en cada partido - Web Oficial Esto se llevaría a cabo con todos los partidos para así poder obtener un mayor número de variables para su posterior estudio. En el ejemplo, pasamos de tener un número de variables reducido a un número considerable de variables (14 variables). Figura 19 - Datos Excel estadísticas selección alemana. EURO 2004 - Parte I + Figura 20 - Datos Excel estadísticas selección alemana. EURO 2004 - Parte II + Figura 21 - Datos Excel estadísticas selección alemana. EURO 2004 - Parte III Materiales y métodos Página | 32 Figura 35 - Organización de los datos - Parte III  A nivel de partidos: 1Carpetas por cada edición: se crea una carpeta para cada edición. Figura 36 - Organización de los datos - Parte IV 2Dos archivos Excel : en cada carpeta correspondiente a cada Euro, se crean dos archivos Excel; el primer archivo va a incluir la lista de todos los partidos disputados en una edición concreta con sus respectivas estadísticas en una primera hoja. Además, en la segunda hoja se puede ver el filtro por selecciones aplicado. Materiales y métodos Página | 33 El segundo archivo contiene tantas hojas como selecciones hayan participado en una edición determinada. En cada hoja se pueden observar las estadísticas de cada selección en cada partido.  A nivel de selecciones: 1Estadísticas selección-edición: se crea un archivo Excel con 4 hojas, cada una correspondiente a cada edición de la Eurocopa. En cada hoja se pueden ver las estadísticas de cada selección en cada edición disputada. 2Palmarés de selecciones: se crea un archivo Excel en el que se observa a qué ronda llegó cada selección en toda la historia de la Eurocopa, con el objetivo de presentar los resultados gráficamente. Figura 37 - Organización de los datos - Parte V  A nivel de ediciones: 1Estadísticas globales de cada edición: se presentan es un archivo Excel las estadísticas correspondientes a las Eurocopas de las cuatro últimas ediciones. Figura 38 - Organización de los datos - Parte VI Materiales y métodos Página | 34 4.2 Base de Datos Uno de los principales objetivos de este trabajo es diseñar e implementar una Base de Datos que contenga la información correspondiente a las cuatro últimas ediciones de la Eurocopa, y a partir de la misma, poder diseñar y conducir los estudios estadísticos que se consideren de interés a través de consultas. A continuación, se pueden ver los diseños elaborados para generar la Base de Datos, tanto el diseño conceptual (Diagrama Entidad-Relación), como el diseño lógico, generado a partir del diseño conceptual. Una vez que se tiene la Base de Datos con su correspondiente introducción de los datos, se podrá realizar consultas con el objetivo de extraer estadísticas a nivel de jugadores, partidos, equipos, etc. A continuación, como se ha dicho anteriormente, además de presentar el diseño conceptual y relacional, se describen las características del diseño de la Base de Datos a modo de enunciados. 4.2.1 Características del diseño Con el objetivo de gestionar la información correspondiente a las cuatro últimas ediciones de la Eurocopa, se debe crear una Base de Datos que recoja los datos referentes a los jugadores que participan en las distintas Eurocopas, los partidos que se juegan en cada fase y edición de una Eurocopa, datos de cada selección en cada partido y datos de cada edición en general. A modo de enunciados, las características del diseño son las siguientes:  Para cada una de las cuatro últimas ediciones de la Eurocopa, se almacena su sede, fecha de inicio y fecha de fin.  Una Eurocopa es dividida en fases, cada una con una fecha correspondiente.  Dichas fases pueden tener grupos o no dependiendo de la fase de la que se trate, la cual pertenece a un tipo de fase general.  Los distintos grupos de la fase "Fase de Grupos" van a contener una serie de selecciones, es decir, desde un inicio, las selecciones van a pertenecer a un grupo.  En las fases se disputan muchos partidos, y cada partido sólo pertenece a una fase determinada. Del mismo se almacenan campos como equipo local, equipo visitante, o resultado del partido. Materiales y métodos Página | 35  Luego se tiene que en un partido participan dos equipos. En cada uno de esos equipos participantes, muchos jugadores disputarán el partido.  Se almacenan los datos de cada país que haya participado en una Eurocopa. Se denominará Equipo al combinado que represente a un determinado país en una edición concreta de la Eurocopa. Del país se va a almacenar el código del país y su nombre, y del equipo, las estadísticas de cada selección en cada partido.  Un jugador sólo pertenece a un país, pero un país puede tener muchos equipos. Un equipo participa en muchos partidos con muchos jugadores. De los jugadores se almacenan el nombre y apellidos, dorsal, y estadísticas en cada partido disputado.  Se relaciona Jugadores, Equipos y Partidos con una entidad llamada Participación, ya que se desea almacenar las estadísticas de cada jugador y cada selección en cada partido. Además, se va a almacenar una entidad "Usuarios", que tendrá aplicación directa a la hora de la interactuación de los usuarios con el sitio web que ha de crearse como otro de los principales objetivos del trabajo. Esta entidad Usuarios va a almacenar el nombre de usuario, apellidos, correo, usuario, clave y teléfono (ver sección 4.2.5 PhpMyAdmin). 4.2.2 Diseño conceptual Cuando se empieza a diseñar una Base de Datos, se comienza por el diseño conceptual, seguido del diseño lógico (en nuestro caso, basado en el modelo relacional) y diseño físico. Para realizar el esquema conceptual, se tienen en cuenta las características del diseño citadas en la sección anterior, y a partir de éste, se pasará a la segunda fase del diseño, el diseño lógico. Se ha utilizado el programa DIA (Dia Diagram Editor) para el diseño conceptual y su paso al diseño lógico, y MySQL Workbench para su implementación. Materiales y métodos Página | 36 Figura 39 - Diagrama Entidad - Relación en DIA En el diseño se observan elementos esenciales de una Base de Datos, tales como entidades fuertes o débiles, atributos, cardinalidades en las relaciones, etc.  Entidad: representación de un objeto o concepto real o abstracto del que se desea almacenar información en la base de datos.  Atributo: los atributos representan características o propiedades de una entidad. Las relaciones también pueden tener atributos.  Clave: atributo o conjunto de atributo que siendo única puede identificar a la entidad.  Cardinalidad: forma en la que se relacionan dos entidades. Existen tres tipos de relaciones a establecerse entre entidades: - Relación uno a uno (1:1) - Relación uno a muchos (1:N) o cero a muchos (0:N). Un país presenta muchas selecciones a lo largo del tiempo, pero dicha selección sólo es de un país. Figura 40 - Relación 1:N Materiales y métodos Página | 37 - Relación muchos a muchos (N:M). Un equipo tiene muchos jugadores, y un jugador puede jugar en varios equipos (Iker Casillas puede jugar en España en 2004, 2008, 2012, juega en diferentes equipos de un mismo país). Figura 41 - Relación N:M 4.2.3 Diseño relacional El diseño lógico (en este caso, empleando el modelo relacional) constituye la segunda fase en el diseño de una base de datos. Se construye a partir del modelo conceptual, por lo que hay que tener correctamente diseñado dicho modelo, ya que un error en el diseño conceptual se traspasará al diseño relacional y a la base de datos final. Hay dos cuestiones a tener en cuenta en el paso del diseño conceptual al relacional.  Para aquellas relaciones N:M que se tengan en el diseño conceptual, se creará una nueva entidad en el diseño relacional  Para aquellas relaciones 1:N se introducirán claves ajenas o foráneas (Foreign Key, FK) en la entidad que tenga la relación N. Figura 42 - Diseño relacional en DIA Materiales y métodos Página | 38 4.2.4 Implementación MySQL Workbench Una vez que se tiene el diseño conceptual y relacional, se pasa a la implementación del modelo. La implementación se ha llevado a cabo con MySQL Workbench3. En primer lugar, se crea el diseño entidad-relación propuesto y que hemos diseñado con DIA anteriormente. En este paso hay que incluir las claves ajenas y sus correspondencias. Figura 43 - Foreign Key en tablas MySQL Workbench Figura 44 - Diseño relacional con MySQL Workbench Una vez que se tiene el diseño final, se pasa a crear las tablas en la base de datos. La base de datos con la que se ha trabajado recibe el nombre de "eurocopas". Las tablas originadas son las siguientes: 3 Software para modelar diagramas de entidad-relación para bases de datos MySQL. Materiales y métodos Página | 39 Figura 45 - Tablas eurocopas MySQL Workbench A continuación se pueden ver algunos campos para algunas de las tablas creadas. Figura 46 - Campos tablas MySQL Para incluir los registros en los campos de las tablas, se han aprovechado los datos recogidos en Excel, de tal forma que se genera una consulta SQL a través de Excel que sea aprovechable para todos los casos posibles. Por ejemplo, para incluir las estadísticas de cada jugador en cada partido, se ha hecho lo siguiente. Figura 47 - Consulta SQL a partir de Excel - Parte I Materiales y métodos Página | 40 Figura 48 - Consulta SQL a partir de Excel - Parte II De modo que al final, la tabla en la que se almacenan las estadísticas de cada jugador en cada partido queda de la siguiente forma. Figura 49 - Estadísticas de cada jugador en cada partido en MySQL Workbench De la misma forma se ha procedido para completar todas las tablas con sus registros correspondientes. 4.2.5 PhpMyAdmin PhpMyAdmin es una herramienta para Base de Datos escrita en PHP, con la intención de crear y eliminar Bases de Datos, modificar y eliminar tablas, editar, borrar, y añadir campos, ejecutar sentencias SQL, etc. Para poder trabajar con phpMyAdmin se ha instalado WampServer, un entorno de desarrollo web para crear aplicaciones basadas en Apache, PHP y bases de Datos. Se crea una nueva Base de Datos en phpMyAdmin que recibe el nombre de bdprueba1tfg. En dicha Base de Datos se crea una tabla que recibe el nombre de usuarios, la cual va a guardar la información de los usuarios que se registran a través del formulario de registro del sitio web. Materiales y métodos Página | 41 Las variables que guarda la tabla usuarios son las siguientes: id, nombre, apellidos, correo, usuario, clave y teléfono. Figura 50 - Usuarios en phpMyAdmin 4.3 Estudios estadísticos En esta sección se explican los estudios estadísticos realizados a nivel de partidos, jugadores, selecciones y ediciones. Se ha llevado a cabo la realización de una encuesta para medir la calidad de las Eurocopas en la población de Sevilla, se han realizado estudios temporales para ver qué posición alcanzará una selección en una futura edición de la Eurocopa en función de su historial de posiciones, otros estudios como conocer qué posición le pertenece a un jugador en función a sus estadísticas de juego, estadísticas descriptivas con representaciones gráficas y estadísticas a nivel de consultas sobre la Base de Datos, entre otras. Partidos Jugadores Selecciones y Ediciones - Comparación entre las 4 ediciones objeto de estudio en cuanto a estadísticas de juego. - Realizar una encuesta para saber qué variables en los partidos son las más importantes a la hora de determinar la calidad de una edición de la Eurocopa, con el objetivo de comparar qué edición de las 4 estudiadas fue la de mayor calidad según dichas variables. - Partidos con más goles, tarjetas, faltas, mayores goleadas, etc. - Filtro para ver las estadísticas en cada partido por selecciones. - Evolución de los jugadores en cuanto a estadísticas de juego. - Analítica predictiva para conocer qué posición le corresponde a un jugador jugadores. Hay que tomar los datos de los jugadores al final de cada edición (por partido es probable que salgan anomalías, ya que un defensa puede anotar en un partido o tirar a puerta de forma significativa y que el modelo estadístico lo clasifique con las características de un delantero). - Jugadores con mayor número de goles anotado, más faltas recibidas, etc. - Evolución y comparación de selecciones en cuanto a estadísticas de juego. - Evolución y comparación de selecciones en cuanto a ronda alcanzada en cada edición (aquí sí se puede ver el palmarés histórico). - Qué posición alcanzará una selección según su histórico de datos. Serie temporal. - Analítica predictiva para conocer qué posición alcanza una selección en función de sus estadísticas de juego. - Estudio mediante encuesta de la calidad de las últimas cuatro ediciones de la Eurocopa. Materiales y métodos Página | 48 Figura 60 - Representación de la calidad de cada Eurocopa para la población de Sevilla A través del gráfico, se puede concluir que la edición que resultó tener una mayor calidad en cuanto a estadísticas de juego para la población de Sevilla fue la Euro 2012, seguida de la EURO 2008. La edición que menos gustó a la población de Sevilla fue la Euro 2016. 4.3.2 Estudios descriptivos A través de Excel, se ha generado distintos estudios descriptivos a nivel de partidos, selecciones y ediciones.  Estudios descriptivos a nivel de selecciones: Figura 61 - Representación de la relación Ataques/Gol 0 1 2 3 2004 2008 2012 2016 ¿Qué Eurocopa gustó más a la población de Sevilla? Puntuacion 0 3 6 9 12 15 18 21 24 27 30 33 36 39 42 45 48 51 54 57 Alemania Austria Croacia España Francia Grecia Holanda Italia Polonia Portugal República Checa Rumanía Rusia Suecia Suiza Turquía ¿Cuántos ataques necesitan para anotar un gol? Euro 2008. Materiales y métodos Página | 49 Cómo se puede observar, las selecciones que necesitaron más ataques para anotar un gol en la EURO 2008 fueron Austria, Francia y Polonia, y las que menos Alemania, República Checa y Holanda, de ahí el potencial ofensivo estas selecciones, ya que necesitan pocas ocasiones para anotar un gol. Figura 62 - Representación de los goles recibidos por cada selección en 2012 Las selecciones que más goles encajaron en la EURO 2012 fueron la República de Irlanda, Italia y Grecia. Las selecciones que menso goles encajaron Croacia y España. 0 2 4 6 8 10 Alemania Croacia Dinamarca España Francia Grecia Holanda Inglaterra Italia Polonia Portugal República Checa República de Irlanda Rusia Suecia Ucrania Goles recibidos por selección. EURO 2012. Materiales y métodos Página | 50 Figura 63 - Representación del nº de goles anotados por cada selección en 2008 En 2008, la selección que más goles anotó fue la selección española con 12 tantos a su favor, seguida de Alemania y Holanda con 10 goles cada una.  Estudios descriptivos a nivel de partidos: Figura 64 - Estadísticas a nivel de partidos para la EURO 2004 0 2 4 6 8 10 12 14 Alemania Austria Croacia España Francia Grecia Holanda Italia Polonia Portugal República Checa Rumanía Rusia Suecia Suiza Turquía Nº de goles anotados por selecciones. EURO 2008. Materiales y métodos Página | 51  Estudios descriptivos a nivel de ediciones: Figura 65 - Representación del nº de goles en cada edición Cómo se muestra en el gráfico, el nº de goles anotados por partido en las ediciones 2004, 2008 y 2012 son casi idénticos, sin embargo, en la Eurocopa 2016 esta estadística disminuyó significativamente.  Gráfico dinámico para ver evolución en el tiempo de la fase que alcanza cada selección en cada Eurocopa disputada: Figura 66 - Gráfico dinámico Excel. Evolución de las selecciones en el tiempo en cuanto a ronda alcanzada El gráfico muestra que no existe una tendencia en cuanto a la posición alcanzada por una selección en el tiempo. A la hora de realizar predicciones donde el objetivo es prever qué posición alcanzará una selección en una edición futura, la inexistencia de dicha tendencia hace casi imposible su correcta predicción. 0 0,5 1 1,5 2 2,5 2004 2008 2012 2016 Nº Goles por partido en cada edición Goles Por Partido Materiales y métodos Página | 52 4.3.3 Estudios predictivos Mediante el uso del software estadístico SPSS Statistics6, se ha llevado a cabo el estudio mediante series temporales de la posición que alcanzará una selección en el futuro en función de su historial clasificatorio. Cabe destacar el gran factor aleatorio que presentan este tipo de estudios, ya que las selecciones, de una edición a otra, pueden no participar, pueden que no cuenten con sus jugadores estrellas que sí tenían en otras ediciones, cambios en estilos de juego, etc.. Otro factor importante es que la serie temporal es muy corta, ya que es una competición que se disputa cada 4 años desde 1960 y no se disponen de los datos suficientes para poder realizar una correcta predicción. Por lo que tratar de predecir qué posición alcanzará una selección en función de la ronda que alcanzó en ediciones pasadas puede no resultar del todo fiable. En este caso, se utiliza el software SPSS Statistics para calcular la tendencia. Además, antes se mostró el gráfico dinámico de la posición alcanzada por selección en cada edición, por ejemplo, para las selecciones de Alemania, España e Inglaterra: Figura 67 - Evolución en el tiempo en cuando a ronda alcanzada. Alemania, España, Inglaterra Se puede observar que las selecciones van cambiando de forma significativa en cuanto a la ronda alcanzada en distintas selecciones. 6 IBM SPSS Statistics es un software de análisis estadístico que cubre todo el proceso del estudio estadístico de principio a fin.. 0 1 2 3 4 5 6 7 8 Posición alcanzada Posición alcanzada por selección en cada edición Alemania España Inglaterra Materiales y métodos Página | 53 Figura 68 - Estudio Serie Temporal - Parte I Creamos un archivo .sav para tratarlo con SPSS. Una columna hace referencia a cada edición disputada, excepto la de 2016, para predecir la posición en esta edición. Las demás columnas hacen referencia a la posición alcanzada por cada selección en cada edición. Figura 69 - Estudio Serie Temporal - Parte II A continuación se muestra la evolución de España. Materiales y métodos Página | 54 Figura 70 - Estudio Serie Temporal - Parte III Como se puede ver, el modelo es incapaz de predecir de forma correcta la posición que alcanzará España en futuras ediciones, debido a que no existe una tendencia en su histórico de datos. El tipo de modelo ARIMA (0,0,0) es la prueba de ello. Descripción del modelo Tipo de modelo ID de modelo España Modelo_1 ARIMA(0,0,0) Figura 71Estudio Serie Temporal - Parte IV Estadísticos del modelo Modelo Número de predictores Estadísticos de ajuste del modelo Ljung-Box Q(18) Número de valores atípicos R cuadrado estacionaria Estadístico s DF Sig. EspañaModelo_1 0 -2,220E-16 . 0 . 0 Figura 72 - Estudio Serie Temporal - Parte V Por lo que como se decía en la introducción de estos estudios, no se tienen unos resultados fiables a la hora de predecir estas posiciones, ya que en estos caso de toma la media de las Materiales y métodos Página | 55 posiciones que se han alcanzado hasta el momento para predecir la posición en instantes futuros de tiempo. 4.3.4 Estudios de clasificación En cuanto a estudios estadísticos de clasificación, se han realizado dos estudios con la ayuda del software de análisis predictivo SPSS Modeler7. El primero de ellos pretende conocer qué posición le corresponde a un jugador en función a sus estadísticas de juego. El segundo de ellos intenta predecir qué posición alcanzará una selección en función de sus estadísticas de juego en los partidos.  Qué posición le corresponde a un jugador. A continuación, se muestra la ruta del modelo generado, así como los distintos pasos que se llevan a cabo para llegar al resultado final. Figura 73 - SPSS Modeler - Parte I El conjunto de datos con el que se va a trabajar es el siguiente. El fichero contiene información acerca de todos los jugadores de la selección Española (posición, goles anotados, faltas cometidas, asistencias, tarjetas, etc.) en la Eurocopa 2012. 7 IBM SPSS Modeler es una plataforma de análisis predictivo para generar modelos predictivos precisos de forma rápida e intuitiva, con el fin de aportar inteligencia predictiva a las decisiones llevadas a cabo por personas. Materiales y métodos Página | 56 Figura 74 - SPSS Modeler - Parte II Mediante un nodo Tipo, se definen las características de las distintas variables del conjunto de datos. Lo que se quiere predecir es la variable Posición, por lo que definimos el rol de esta variable como rol destino, y las demás variables estadísticas como variables de entrada. La variable Nombre_Jugador no posee ningún rol porque lógicamente, el nombre del jugador no influye en la posición que ocupa dicho jugador. Figura 75 - SPSS Modeler - Parte III A continuación, en la pestaña Modelado, se selecciona el nodo Clasificador automático, que se utiliza para generar los mejores modelos a la hora de predecir una variable categórica y, en este caso, la variable Posición es una variable categórica. En caso de querer predecir una variable continua, por ejemplo el número de goles por jugador, habría que seleccionar el nodo Autonumérico. Materiales y métodos Página | 57 Figura 76 - SPSS Modeler - Parte IV El nodo Clasificador automático recibe el nombre de Posición, debido a que en las características de las variables se ha definido la variable Posición como variable objetivo o de destino. Como se puede ver en la imagen, en la pestaña Modelo, se seleccionar los 3 mejores modelos a la hora de predecir dicha variable. Figura 77 - SPSS Modeler - Parte V En la pestaña Experto se pueden ver todos aquellos modelos que van a ser probados con el objetivo de obtener los tres mejores. Se utiliza una combinación de modelos en lugar de un único modelo debido a que siempre es mejor trabajar con una combinación de modelos, ya que se generan unos mejores resultados a la hora de predecir los valores de una variable determinada. Materiales y métodos Página | 64 Figura 88 - Estadísticas de jugadores en la EURO 2004 mediante consulta SQL Figura 89 - Estadísticas de jugadores en la EURO 2008 mediante consultas SQL 4.4 Sitio web Para acabar con los principales objetivos de este trabajo se desarrolla un sitio web en el que publicar información relacionada con los estudios estadísticos realizados e información almacenada en la base de datos diseñada. En la actualidad, el poder publicar propios estudios estadísticos podría resultar de gran interés a la hora de concluir dichos estudios. Materiales y métodos Página | 65 Se desea construir un sitio web con una apariencia agradable, con estilo uniforme y que todo el contenido sea homogéneo en cuanto a aspecto, cuidando los estilos del menú, disposición de elementos en las páginas, estilos del footer, etc. El sitio web se ha desarrollado con Brackets, un editor de código abierto para diseño web. En la mayoría de veces se ha trabajado con la estructura HTML, estilos con CSS y formularios y acceso a la base de datos basados en PHP. En algunos casos se han creado gráficos interactivos con la tecnología de JavaScript. El sitio web consta de las siguientes partes:  Página de bienvenida al sitio web. Consta de un banner en la parte superior de la página, una sección en la que se introduce el trabajo realizado, otra sección donde se ven algunos programas y softwares con los que se ha trabajado, una sección de agradecimiento al tutor y a la Universidad, y para finalizar, el footer de la página. Un elemento muy importante y que será común en todas las páginas es el menú, que permanecerá fijo en la parte superior de la página y por encima de todos los elementos de la página. Figura 90 - Sitio Web. Bienvenida - Parte I Materiales y métodos Página | 66 Figura 91 - Sitio Web. Bienvenida - Parte II Figura 92 - Sitio Web. Bienvenida - Parte III Materiales y métodos Página | 67  Página de acceso a estadísticas. Esta página contiene un formulario de login para acceder a las estadísticas que se han desarrollado a la largo del proyecto. Más adelante, en el apartado para PHP, se mostrará cómo funciona. Figura 93 - Sitio Web. Acceso a estadísticas  Página de registro. Para poder acceder a las estadísticas, se impone la condición de que los usuarios deben estar registrado en la Base de Datos diseñada, por lo que se crea una página que contenga un formulario de registro para incluir nuevos usuarios en la Base de Datos. Los únicos campos que no se pueden repetir son los campos Correo y Usuario, ya que pueden existir personas con el mismo nombre y apellidos, y la contraseña se puede repetir, al igual que el teléfono. Figura 94 - Sitio Web. Registra tu cuenta Materiales y métodos Página | 68  Página de contacto. Se incluye un formulario de contacto con el objetivo de que todo aquel que quiera ponerse en contacto y enviar un mensaje pueda hacerlo a través de dicho formulario. Llegará un correo a la cuenta de gmail deseada. Figura 95 - Sitio Web. Formulario de contacto  Acceso a estadísticas. Para acceder a las estadísticas, hay que registrar un usuario y luego hacer login con el usuario y contraseña establecida. Tras hacer clic en el botón ingresar, en caso de que los datos introducidos sean correctos, se direcciona al usuario a la página de estadísticas. Se ha creado una alerta que muestre un mensaje de error en caso de que el usuario no esté registrado o los datos sean erróneos, y un mensaje que comunica el acceso a las estadísticas en caso de un login correcto. Figura 96 - Sitio Web. Acceso a estadísticas - Parte II Materiales y métodos Página | 69  Página de estadísticas. Esta página contiene un banner en la parte superior de la página, una sección donde se ven los programas usados para la realización de estadísticas, una sección para ver los niveles para los que se han generado estadísticas (a nivel de jugadores, partidos, selecciones y ediciones), y por último el footer correspondiente. Como en todas las páginas, el menú permanece fijo en la parte superior por encima de todos los elementos de la página. Figura 97 - Sitio Web. Estadísticas - Parte I Aquí se puede observar el banner del que se hablaba arriba. Se ha usado un color blanco en las letras del título y subtítulo del banner porque otros colores no resultaban adecuados. Justo debajo del banner se tiene una sección que muestra algunos de los programas utilizados. Figura 98 - Sitio Web. Estadísticas - Parte II Materiales y métodos Página | 70 Tras los programas utilizados, aparecen cuatro imágenes. Cada imagen hace referencia a un nivel de estadísticas, ya sean a nivel de jugadores, selecciones, partidos o ediciones. Figura 99 - Sitio Web. Estadísticas - Parte III Figura 100 - Sitio Web. Estadísticas - Parte IV  Acceso a estadísticas para cada nivel. Para acceder a las estadísticas de los jugadores, partidos, selecciones y ediciones, solo hay que hacer clic en la imagen correspondiente. Es decir, si se desea acceder a las estadísticas de los jugadores, habría que hacer clic en la primera imagen (imagen de Iker Casillas; estadísticas a nivel de jugadores). Materiales y métodos Página | 71  Página de estadísticas a nivel de jugadores. Una vez que se acceder a las estadísticas por niveles, cambia el menú de la parte superior. El menú contiene la pestaña Inicio, Estadísticas-Jugadores, Estadísticas-Partidos, Estadísticas Selecciones y Ediciones. Esta página contiene un banner, una sección para introducir algunas estadísticas que se han realizado en el trabajo, una sección para ver algunas estadísticas generadas, otra sección para mostrar el uso del software de análisis predictivo SPSS Modeler para conocer qué posición le corresponde a un jugador en función de sus estadísticas de juego, y el footer correspondiente. Figura 101 - Sitio Web. Estadísticas Jugadores - Parte I Tras el banner y la sección de información, se pueden observar algunas estadísticas a nivel de jugadores para cada edición. Figura 102 - Sitio Web. Estadísticas Jugadores - Parte II Materiales y métodos Página | 72 Tras las estadísticas a nivel de jugadores, se tiene una sección que presenta al software de análisis predictivo SPSS Modeler y su uso para conocer qué posición le corresponde a un jugador. Figura 103 - Sitio Web. Estadísticas Jugadores - Parte III Tras presentar SPSS Modeler y el objetivo de su estudio, se muestran los pasos seguidos mediante una galería de imágenes para llegar a los resultados deseados. Figura 104 - Sitio Web. Estadísticas Jugadores - Parte IV  Página de estadísticas a nivel de partidos. Esta página contiene un banner, una sección para introducir algunas estadísticas que se han realizado en el trabajo a nivel de partidos, una sección para ver algunas estadísticas generadas, otra sección que contiene un vídeo Materiales y métodos Página | 73 que muestra el uso de un filtro creado para ver las estadísticas de cada partido según la selección seleccionado, y el footer correspondiente. Figura 105 - Sitio Web. Estadísticas Partidos - Parte I - Figura 106 - Sitio Web. Estadísticas Partidos - Parte II Tras la sección de estadísticas a nivel de partidos, se tiene una sección con un vídeo que muestra un filtro creado en Excel para ver las estadísticas de cada selección en cada partido. Materiales y métodos Página | 80 Figura 121 - Diseño Responsive - Parte III 4.4.1 HTML HyperText Markup Language (HTML), hace referencia al lenguaje de marcado8 con el objetivo de elaborar páginas web. Como bien se sabe, la estructura básica de un documento HTML contiene una etiqueta de apertura <HTML> y dicha etiqueta de cierra </HTML>. Dentro de estas etiquetas aparecen dos partes fundamentales: la cabecera, que está delimitada por la etiqueta <HEAD> y el cuerpo con el contenido principal, delimitado por su etiqueta <BODY>. Por ejemplo, para la página de bienvenida (pagina1.html), se tiene lo siguiente: 8 Lenguaje de marcado o lenguaje de marcas es una manera de codificar un documento que, además de incorporar texto, presenta etiquetas o marcas que informan de la estructura o presentación del texto. Materiales y métodos Página | 81  Definiciones de la cabecera (head). Contiene el título de la página y los estilos del diseño web, entre otras. Figura 122 - HTML - Parte I  Cuerpo (body). El cuerpo está dividido en tres partes. La primera de ella es la parte superior de la página, el header, donde se encuentra el menú. Figura 123 - HTML - Parte II La segunda parte del cuerpo es la parte principal, main, que va a contener diferentes secciones. La primera es la sección que hace referencia al banner. Figura 124 - HTML - Parte III Materiales y métodos Página | 82 En la segunda sección se da la bienvenida al sitio web. Figura 125 - HTML - Parte IV En la tercera sección del cuerpo, se presentan algunas imágenes de las herramientas con las que se ha trabajado. Figura 126 - HTML - Parte V Materiales y métodos Página | 83 La cuarta y última parte principal del cuerpo es la sección de agradecimientos, con la etiqueta de cierre </main>. Figura 127 - HTML - Parte VI Por último, antes de cerrar con la etiqueta </body> y cerrar la estructura HTML, se diseña un pie de página o footer, ya fuera de la parte principal del cuerpo. Figura 128 - HTML - Parte VII Cómo se puede observar en las imágenes, toda sección contiene una clave id y una clase class, esto es que todos los elementos que estén dentro de esa clave o clase van a presentar el estilo definido en los estilos CSS. En el anexo de este trabajo se podrá ver toda la codificación correspondiente a cada página web del sitio web creado. 4.4.2 CSS CSS hace referencia a Hojas de Estilo en Cascada (Cascading Style Sheets), un mecanismo para describir cómo se van a mostrar los documentos HTML en pantalla. Materiales y métodos Página | 84 Por ejemplo, a continuación se van a mostrar algunos estilos CSS aplicados a la página de bienvenida (pagina1.html). Una vez que se tiene la estructura HTML para la página de bienvenida (visto en el punto anterior), se procede a dar estilo a dicha página. Se empieza dando un estilos básicos a toda la página en un archivo css con nombre estilos.css, quitando el margen (margin), relleno (padding) y dando un box-sizing: border-box a todo, para que cuando se le de paddings o bordes a un elemento esos paddings o bordes se contengan en un modelo de caja y que encajen en el diseño responsive. A continuación se le da estilo de fuentes a todo el cuerpo o body, con fuente Open Sans. Figura 129 - CSS - Parte I Al header, se le impone que tenga un ancho del 100% y una altura de 50px. Además un color de fondo negro-grisáceo y con color de texto blanco. Además, se desea que el menú siempre aparezca en la parte superior, por lo que hay que darle una posición fijada y que siempre esté por delante de los demás elementos. Figura 130 - CSS - Parte II A todas las clases contenedor, se le da un ancho del 98% y un margin auto, para que todas las secciones aparezcan de forma alineada y centrada. Por otro lado, se crean diferentes archivos css para trabajar sólo con partes específicas de la página. Se va a trabajar de forma independiente con el menú, banner, sección de agradecimiento y sección de información sobre agradecimientos. Por lo que hay que importar Materiales y métodos Página | 85 en la hoja de estilos que recibía el nombre de estilos.css los diferentes estilos para cada sección. Figura 131 - CSS - Parte III Al igual que todo el código HTML se puede ver en el Anexo de este trabajo, con el código css ocurre lo mismo. Se ha trabajado con una gran cantidad de estilos por lo que para ver los detalles de los estilos para cada página, es conveniente mostrar en el código css en el Anexo y no en el trabajo en sí. 4.4.3 JavaScript JavaScript es un lenguaje de programación utilizado para crear páginas web dinámicas principalmente, incorporando efectos como texto que aparece y desaparece, animaciones, acciones que se activan al pulsar botones, ventanas con mensajes de aviso al usuario, etc. En este proyecto, se ha usado esta tecnología para el desarrollo de gráficos dinámicos. Figura 132 - JavaScript - Parte I Materiales y métodos Página | 86 Figura 133 - JavaScript - Parte II Se ha creado un gráfico dinámico para ver la evolución de España en las cuatro últimas ediciones de la Eurocopa, en el que pasando el puntero del ratón por las diferentes barras del gráficos se puede ver los partidos jugados en la Eurocopa seleccionada, los goles anotados y los goles recibidos. Para llevar a cabo el diseño y los efectos del gráfico se tomado como muestra un gráfico diseñado en Google Charts.  Programación con JavaScript. Mediante la función drawChart se dibuja el gráfico visto anteriormente, con la que se definan las variables que se van a representar (Año, Partidos Jugados, Goles Anotados y Goles Recibidos) y los valores que toman cada variable. Figura 134 - JavaScript - Parte III A continuación se elige el título y subtítulo del gráfico y se define el estilo de las barras del gráfico, en este caso se eligen barras verticales, el tamaño de las barras y los colores de éstas. Materiales y métodos Página | 87 Figura 135 - JavaScript - Parte IV 4.4.4 PHP Para los usuarios que visiten el sitio web y quieran acceder a la parte de las estadísticas, se les requerirán sus credenciales de acceso a través de un formulario, siempre que se haya registrado previamente. Este paso se habrá debido realizar previamente mediante el formulario de registro en la base de datos diseñada, así como para aquellos usuarios que quieran enviar un mensaje de contacto. La funcionalidad se ha basado en PHP9. Se ha trabajado con PHP a la hora de registrar a un nuevo usuario en la Base de Datos, a la hora de acceder a las estadísticas mediante un formulario de login y para poder enviar un mensaje mediante un formulario de contacto.  Registro de nuevos usuarios. Para que un nuevo usuario sea registrado, debe completar los campos Nombre, Apellidos, Correo, Usuario, Contraseña y Teléfono. Figura 136 - PHP - Parte I 9 PHP es un lenguaje de programación de uso general de código del lado del servidor originalmente diseñado para el desarrollo web de contenido dinámico. Materiales y métodos Página | 88  Insertar usuario en la Base de Datos. Insertar en la tabla usuarios de la Base de Datos, en los campos nombre, apellidos, correo, usuario, clave y teléfono, los valores recogidos en el formulario. Figura 137 - PHP - Parte II  Correo y nombre de usuario únicos. No puede existir una cuenta con un correo y nombre de usuario repetido. Esto se comprueba con la función mysqli_num_rows. Figura 138 - PHP - Parte III  Ejecutar consulta. Figura 139 - PHP - Parte IV Materiales y métodos Página | 89  Acceso a estadísticas. Para poder acceder a las estadística, el usuario debe estar registrados y que los valores que incluya en el formulario de login sean correctos. Figura 140 - PHP - Parte V  Conexión con la base de datos. Figura 141 - PHP - Parte VI  Recibir campos del formulario y almacenar las variables. Figura 142 - PHP - Parte VII Anexo-Código Web Página | 96 ediciones, etc. <br><br> Para ello, se debe realizar un estudio de las fuentes adecuadas de información de las que obtener los datos, como es la web oficial de la UEFA, y un estudio para poder recopilar dichos datos. <br><br> A partir de los datos recopilados, el objetivo del trabajo es diseñar e implementar una base de datos que contenga toda la información recopilada y generar estadísticas a partir de las cuales poder obtener conclusiones. Estos estudios podrán ser a nivel de consultas sobre la base de datos diseñada, estudios descriptivos, estudios predictivos, estudios de algoritmos de clasificación, etc., con el objetivo de ver la evolución de las selecciones a lo largo del tiempo, poder comparar unas selecciones con otras, conocer qué posición se adecua más a las características de un jugador, etc. <br><br> Además, ha de llevarse a cabo la elaboración de una encuesta sobre la calidad de las Eurocopas, con el objetivo de conocer qué Edición de las cuatro últimas disputadas tuvo un mayor impacto en la población.<br><br> Por último, se debe desarrollar un sitio web como éste en el que publicar información relacionada con los estudios estadísticos realizados.</p> </div> </section> <section id="blog"> <h3> ¿Con qué hemos trabajado?</h3> <br> <div class="contenedor"> <article> <img src="img/blog2_opt.png" > <h4> SPSS Statistics y Modeler</h4> </article> <article> <img src="img/excelLogo_opt.jpg" > <h4> Microsoft Excel</h4> </article> <article> <img src="img/RStudio-Ball_opt.png" > <h4>Rstudio</h4> </article> <article> <img src="img/WampServer-logo_opt.png" > <h4>WampServer</h4> </article> </div> Anexo-Código Web Página | 97 </section> <section id="info"> <h3> <div class="contenedor">Mi agradecimiento a mi tutor, Luis Valencia, por su total dedicación que ha hecho posible que mi andadura por este trabajo fin de grado sea mucho más amena. </div></h3> <div class="contenedor"> <div class="info-pet"> <img src="img/luis_foto3.JPG"> <h4>Luis Valencia</h4> </div> <div class="info-pet"> <img src="img/logoUs_opt.gif"> <h4>Universidad de Sevilla</h4> </div> <div class="info-pet"> <img src="img/captCV_opt.jpg"> <h4>Ramón Relinque</h4> </div> </div> </section> </main> <footer> <div class="contenedor"> <p class="copy">Mi TFG ©2017</p> <div class="sociales"> <a class="icon-facebook-squared" href="https://es-es.facebook.com/UniversidaddeSevillaoficial"></a> <a class="icon-twitter-squared" href="https://twitter.com/unisevilla?lang=es"></a> </div> </div> Anexo-Código Web Página | 98 </footer> </body> </html> estilos.css @import url(http://fonts.googleapis.com/css?family=Open+Sans); @import url(menu.css); @import url(banner.css); @import url(blog.css); @import url(info.css); * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Open Sans', sans-serif; } header { width: 100%; height: 50px; background: #333; color: #fff; position: fixed; top: 0; left: 0; z-index: 100; } Anexo-Código Web Página | 99 .contenedor { width: 98%; margin: auto; } h1 { float: left; } header .contenedor { display: table; } section { width: 100%; margin-bottom: 25px; } #bienvenidos { text-align: center; } footer .contenedor { display: flex; flex-wrap: wrap; justify-content: center; padding-bottom: 25px; } .copy { Anexo-Código Web Página | 100 font-size: 20px; } .sociales { width: 100%; text-align: center; font-size: 28px; } .sociales a { color: #333; text-decoration: none; } @media (min-width:1024px) { .contenedor { width: 1000px; } } header .menu__link { display: block; padding: 15px; background: #00CCFF; text-decoration: none; color: #fff; } header .menu__link:hover { background: white; Anexo-Código Web Página | 101 color: #00CCFF; } header .menu__linkk { display: block; padding: 15px; background: #99CCFF; text-decoration: none; color: #fff; } header .menu__linkk:hover { background: white; color: #99CCFF; } menu.css #menu-bar { display: none; } header label { float: right; font-size: 28px; margin: 6px 0; cursor: pointer; } .menu { position: absolute; Anexo-Código Web Página | 102 top: 50px; left: 0; width: 100%; height: 100vh; background: rgba(51,51,51,0.9); transition: all 0.5s; transform: translateX(-100%); } .menu a { display: block; color: #fff; height: 50px; text-decoration: none; padding: 15px; border-bottom: 1px solid rgba(255,255,255,0.3); } .menu a:hover { background: rgba(255,255,255,0.3); } #menu-bar:checked ~ .menu { transform: translateX(0%); } @media (min-width:1024px) { .menu { position: static; width: auto; height: auto; Anexo-Código Web Página | 103 transform: translateX(0%); float: right; display: flex; } .menu a { border: none; } header label { display: none; } } banner.css #banner { margin-top: 50px; position: relative; } #banner img { width: 100%; height:100%; } #banner .contenedor { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); color: #fff; Anexo-Código Web Página | 104 } #banner h2 { font-size: 28px; } #banner a { display: block; width: 100px; color: #fff; text-decoration: none; padding: 7px; margin-top: 10px; border: 3px solid #fff; } #banner a:hover { background: rgba(51,51,51,0.5); } @media (min-width: 480px) { #banner h2 { font-size: 40px; } #banner a { margin-top: 25px; } } @media (min-width: 0px) { Anexo-Código Web Página | 105 #banner { height: 300px; overflow: hidden; } #banner img { height: auto; margin-top: auto; } } @media (min-width: 768px) { #banner { height: 300px; overflow: hidden; } #banner img { height: auto; margin-top: -100px; } } @media (min-width:1024px) { #banner img { margin-top: -200px; } Anexo-Código Web Página | 112 } input[type="button"]:active { transform: scale(0.95); } input[type="submit"] { border: 0; opacity: 0.8; cursor: pointer; border-radius: 20px; margin-bottom: 0; } input[type="submit"]:hover { opacity: 1; } input[type="submit"]:active { transform: scale(0.95); } @media (max-width: 768px){ form{ width: 75%; } } Anexo-Código Web Página | 113 @media (max-width: 480px){ form{ width: 95%; } } header .menu__link { display: block; padding: 15px; background: #00CCFF; text-decoration: none; color: #fff; } header .menu__link:hover { background: white; color: #00CCFF; } validad.php <?php $conexion = mysqli_connect("localhost", "root", "", "bdprueba1tfg"); //if (!$conexion) { // echo 'Error al conectar a la base de datos'; //} //else { // echo 'Conectado a la base de datos'; //} //recibir los datos y almacenar en variables Anexo-Código Web Página | 114 $usuario=$_POST['usuario']; $clave=$_POST['clave']; $consulta = "SELECT * FROM usuarios WHERE usuario='$usuario' and clave='$clave'"; $resultado=mysqli_query($conexion,$consulta); $filas=mysqli_num_rows($resultado); if ($filas>0){ echo '<script> alert("Login correcto. Acceso a estadisticas"); window.location.replace("http://localhost/pruebapagtfg/paginaestadisticas2.html"); </script>'; exit; } else { echo '<script> alert("Error en la autentificacion. Compruebe sus datos o registre su cuenta"); window.history.go(-1); </script>'; exit; } mysqli_free_result($resultado); mysqli_close($conexion); Anexo-Código Web Página | 115 Página para registrar tu cuenta (registro2.html) <! DOCTYPE html > <html lang="es"> <head> <title> Mi TFG</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximun-scale=1, minimun-scale=1"> <link rel="stylesheet" href="css/fontello.css"> <link rel="stylesheet" href="css/estilosmenunuevoregistro.css"> </head> <body> <header> <div class="contenedor"> <h1 class="icon-soccer-ball"> Mi TFG</h1> <input type="checkbox" id="menu-bar"> <label class="icon-menu" for="menu-bar"></label> <nav class="menu"> <a href="pagina1.html">Inicio</a> <a href="login2.html">Estadísticas</a> <a href="conclusionestfg.html">Conclusiones</a> <a class="menu__link select" href="registro2.html">Regístrate</a> <a href ="contacto.html">Contacto</a> </nav> </div> </header> <form action="registrar.php" method="post"> <h2 class="form_titulo"> Crea una cuenta</h2> Anexo-Código Web Página | 116 <div class="contenedor-inputs"> <input type="text" name="nombre" placeholder="Nombre" class="input-48" required> <input type="text" name="apellidos" placeholder="Apellidos" class="input-48"> <input type="email" name="correo" placeholder="Correo" class="input-100" required> <input type="text" name="usuario" placeholder="Usuario" class="input-48" required> <input type="password" name="clave" placeholder="Contraseña" class="input-48" required> <input type="text" name="telefono" placeholder="Teléfono" class="input-100"> <input type="submit" value="Registrar" class="btn-enviar"> <p class="form__link"> ¿Ya tienes una cuenta? <a href="login2.html"> Haz clic aquí</a></p> </div> </form> </body> </html> estilosmenunuevoregistro.css @import url(http://fonts.googleapis.com/css?family=Open+Sans); @import url(menunuevo.css); * { margin: 0; box-sizing: border-box; } body{ margin: 0; font-family: 'Open Sans', sans-serif; background-image: url(06-wallpaper-hd-estadio-de-futbol-01_opt.jpg); Anexo-Código Web Página | 117 } header { width: 100%; height: 50px; background: #333; color: #fff; position: fixed; top: 0; left: 0; z-index: 100; } .contenedor { width: 98%; margin: auto; } h1 { float: left; } header .contenedor { display: table; } @media (min-width:1024px) { .contenedor { width: 1000px; } } Anexo-Código Web Página | 118 h2 { text-align: center; } form { margin: auto; width: 50%; max-width: 500px; background: white; border-radius: 7px; margin-top: 100px; } .form_titulo{ background: deepskyblue; color: #fff; padding: 20px; text-align: center; font-weight: 100; font-size: 30px; border-top-left-radius: 7px; border-bottom-right-radius: 7px; border-bottom: 5px solid crimson; } .contenedor-inputs{ padding: 10px 30px; display: flex; Anexo-Código Web Página | 119 flex-wrap: wrap; justify-content: space-between; } input{ margin-bottom: 15px; padding: 15px; font-size: 16px; border-radius: 3px; border: 1px solid darkgray; } .input-48{ width: 48%; } .input-100 { width: 100%; } .btn-enviar { background: crimson; color: #fff; margin: auto; padding: 10px 40px; cursor: pointer; font-size: 18px; } .btn-enviar:active{ transform: scale(1.04); } .form__link{ Anexo-Código Web Página | 120 width: 100%; margin: 0; text-align: center; font-size: 14px; } header .menu__link { display: block; padding: 15px; background: #00CCFF; text-decoration: none; color: #fff; } header .menu__link:hover { background: white; color: #00CCFF; } @media (max-width: 480px){ form{ width: 100%; } } registrar.php <?php include 'cn.php'; //recibir los datos y almacenar en variables $nombre = $_POST ["nombre"]; $apellidos = $_POST ["apellidos"]; Anexo-Código Web Página | 121 $correo = $_POST ["correo"]; $usuario = $_POST ["usuario"]; $clave = $_POST ["clave"]; $telefono = $_POST ["telefono"]; //consulta para insertar $insertar = "INSERT INTO usuarios(nombre, apellidos, correo, usuario, clave, telefono) VALUES ('$nombre','$apellidos', '$correo', '$usuario', '$clave','$telefono')"; $verificar_usuario = mysqli_query($conexion, "SELECT * FROM usuarios WHERE usuario = '$usuario'"); if (mysqli_num_rows($verificar_usuario) > 0){ echo '<script> alert("El usuario ya esta registrado"); window.history.go(-1); </script>'; exit; } $verificar_correo = mysqli_query($conexion, "SELECT * FROM usuarios WHERE correo = '$correo'"); if (mysqli_num_rows($verificar_correo) > 0){ echo '<script> alert("El correo ya esta registrado"); window.history.go(-1); </script>'; exit; } //ejecutar consulta $resultado = mysqli_query($conexion, $insertar); if (!$resultado) { echo 'Error al registrarse'; } else { Anexo-Código Web Página | 128 #boton:hover { cursor: pointer; } #boton:active{ transform: scale(1.04); } @media (max-width:480px) { form{ width: 100%; } } .main { width: 90%; max-width: 1000px; margin: 20px auto; } .main .contacto { width: 60.5%; margin-right: 5.5%; float: left; } aside { width: 30%; float: left; Anexo-Código Web Página | 129 } img { margin-top: 50px; } contacto.php <?php $nombre=$_POST['Nombre']; $correo=$_POST['correo']; $telefono=$_POST['telefono']; $mensaje=$_POST['mensaje']; $to = 'rr[email protected]m'; $subject = 'Contacto TFG'; $message = 'El usuario ' . $nombre . ' con correo: ' . $correo .' y telefono: ' . $telefono . "\n" . 'quiere comunicarle el siguiente mensaje: '. $mensaje; $headers = 'From: [email protected]' . "\r\n" . 'MIME-Version: 1.0' . "\r\n" . 'Content-type: text/html; charset=utf-8'; if(mail($to, $subject, $message, $headers)){ echo '<script> alert("Su mensaje ha sido enviado"); window.location.replace("http://localhost/pruebapagtfg/contacto.html"); </script>'; exit; } Anexo-Código Web Página | 130 else { echo '<script> alert("Error al enviar el mensaje"); window.history.go(-1); </script>'; exit; } ?> Anexo-Código Web Página | 131 Página de conclusiones (conclusionestfg.html) <! DOCTYPE html > <html lang="es"> <head> <title> Mi TFG</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximun-scale=1, minimun-scale=1"> <link rel="stylesheet" href="css/fontello.css"> <link rel="stylesheet" href="css/estilos.css"> </head> <body> <header> <div class="contenedor"> <h1 class="icon-soccer-ball"> Mi TFG</h1> <input type="checkbox" id="menu-bar"> <label class="icon-menu" for="menu-bar"></label> <nav class="menu"> <a href="pagina1.html">Inicio</a> <a href="login2.html">Estadísticas</a> <a class="menu__link select" href="conclusionestfg.html">Conclusiones</a> <a href="registro2.html">Regístrate</a> <a href ="contacto.html">Contacto</a> </nav> </div> </header> <main> <section id="banner"> <img src="img/baloneuro.jpg"> <div class="contenedor"> Anexo-Código Web Página | 132 <h2>Conclusiones sobre el Trabajo Fin de Grado</h2> <p> Análisis y divulgación web de estudios estadísticos sobre </p> <p> competiciones futbolísticas a nivel de de selecciones</p> <a href="pagina1.html">Ir a Inicio</a> </div> </section> <section id="bienvenidos"> <h2> CONCLUSIONES SOBRE MI TFG</h2> <div class="contenedor"> <br> <p> Durante el presente trabajo se han desarrollado y adquirido una serie de técnicas orientadas a la gestión del dato, su posterior tratamiento y a la publicación en la red de los resultados obtenidos<br><br> Se ha diseñado una base de datos en la que almacenar la información referente a las Eurocopas disputadas. En un principio, se han adquirido conocimientos sobre la organización y estructuración de los datos en Excel. <br><br> A partir de los datos recopilados, se ha diseñado e implementado una base de datos que contenga la información recopilada. <br><br> Se han generado estadísticas descriptivas, como por ejemplo, cuántos ataques necesita cada selección para anotar un gol, comparacíon de las 4 últimas eurocopas en función a los goles anotados, en qué Eurocopa predomina el juego limpio, y un largo etc. Además, se ha desarrollado un estudio estadístico mediante encuesta para conocer qué Eurocopa gustó más a la población de Sevilla, siendo la Eurocopa 2012 la ganadora. <br><br> Se han realizado otros estudios con SPSS Modeler, una herramienta de análisis predictivo, de clasificación, etc. Se ha podido ver que predecir qué posición alcanzará una selección en un futuro es muy complicado, ya que depende de ciertos factores que no son previsibles, como qué jugadores podrán estar en la próxima Eurocopa, a qué rival se enfrentará una selección en una determinada fase, etc. Otros estudios demuestran como ciertos jugadores que juegan en una posición determinada, presentan unas estadísticas muy similares a los jugadores que juegan en una posición diferente, como es el caso de Jordi Alba con la selección española, un defensa con estadísticas de centrocampista. En la actualidad, existen difentes aplicaciones y juegos que consisten en formar un equipo y conseguir el mayor número de puntos según las actuaciones de tus jugadores, por lo que si un usuario posee en su equipo a Jordi Alba, obtendrá más puntos que otro usuario que no lo tenga, por ejemplo. <br><br> Por último, se ha desarrollado este sitio web en el que publicar información relacionada con los estudios estadísticos realizados. <br><br> Cómo estudios futuros se podría plantear mejorar la Base de Datos, de forma que contenga más información y poder extraer conclusiones a gran escala, así como mejorar su diseño. Además, mejoras en el sitio web, como podría ser la seguridad del mismo. Con respecto a los estudios estadísticos, hacer un estudio más detalladod e cada veríable sería una buena idea de cara a futuros estudios. En el apartado Estadísticas, se pueden ver algunas de las estadísticas que se han obtenido a nivel de jugadores, partidos, selecciones y ediciones.</p> </div> </section> <section id="blog"> <h3> ¿Con qué hemos trabajado?</h3> Anexo-Código Web Página | 133 <br> <div class="contenedor"> <article> <img src="img/blog2_opt.png" > <h4> SPSS Statistics y Modeler</h4> </article> <article> <img src="img/excelLogo_opt.jpg" > <h4> Microsoft Excel</h4> </article> <article> <img src="img/RStudio-Ball_opt.png" > <h4>Rstudio</h4> </article> <article> <img src="img/WampServer-logo_opt.png" > <h4>WampServer</h4> </article> </div> </section> <section id="info"> <h3> <div class="contenedor">Mi agradecimiento a mi tutor, Luis Valencia, por su total dedicación que ha hecho posible que mi andadura por este trabajo fin de grado sea mucho más amena. </div></h3> <div class="contenedor"> <div class="info-pet"> <img src="img/luis_foto3.JPG"> <h4>Luis Valencia</h4> </div> Anexo-Código Web Página | 134 <div class="info-pet"> <img src="img/logoUs_opt.gif"> <h4>Universidad de Sevilla</h4> </div> <div class="info-pet"> <img src="img/captCV_opt.jpg"> <h4>Ramón Relinque</h4> </div> </div> </section> </main> <footer> <div class="contenedor"> <p class="copy">Mi TFG ©2017</p> <div class="sociales"> <a class="icon-facebook-squared" href="https://es-es.facebook.com/UniversidaddeSevillaoficial"></a> <a class="icon-twitter-squared" href="https://twitter.com/unisevilla?lang=es"></a> </div> </div> </footer> </body> </html> Anexo-Código Web Página | 135 Página principal de estadísticas (paginaestadisticas2.html) <! DOCTYPE html > <html lang="es"> <head> <title> Mi TFG</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximun-scale=1, minimun-scale=1"> <link rel="stylesheet" href="css/fontello.css"> <link rel="stylesheet" href="css/estilos2.css"> <link rel="stylesheet" href="css/estilomenuestadisticas2.css"> </head> <body> <header> <div class="contenedor"> <h1 class="icon-soccer-ball"> Mi TFG</h1> <input type="checkbox" id="menu-bar"> <label class="icon-menu" for="menu-bar"></label> <nav class="menu"> <a href="pagina1.html">Inicio</a> <a class="menu__link select" href="login2.html">Estadísticas</a> <a href="">Conclusiones</a> <a href="registro2.html">Regístrate</a> <a href ="contacto.html">Contacto</a> </nav> </div> </header> Anexo-Código Web Página | 136 <div class="banner"> <img src="img/banner1.jpg" alt="" class="banner__img"> <div class="contenedor"> <h2 class="banner__titulo">¿Qué estadísticas hemos realizado?</h2> <p class="banner__txt">Estadísticas a todos los niveles</p> </div> </div> <main class="main"> <div class="contenedor"> <section class="info"> <article class="info__columna"> <img src="img/excelLogo_opt.jpg" alt="" class="info__img"> <h2 class="info_titulo">Microsoft Excel</h2> <p class="info_txt">Uso de Microsoft Excel para recopilación de datos, estudio de los mismos, realización de gráficos dinámicos, estadísticas a nivel de jugadores, partidos, etc.</p> </article> <article class="info__columna"> <img src="img/RStudio-Ball_opt.png" alt="" class="info__img"> <h2 class="info_titulo">Rstudio</h2> <p class="info_txt">Uso del software libre para análisis de datos. Selección de muestra aleatoria para diseños de encuestas, estudios estadísticos a nivel de selecciones, partidos, etc.</p> </article> <article class="info__columna"> <img src="img/blog2_opt_opt.png" alt="" class="info__img"> Anexo-Código Web Página | 137 <h2 class="info_titulo">IBM SPSS</h2> <p class="info_txt">Uso de SPSS Statistics y SPSS Modeler para general modelos estadísticos de predicción. Estudio de posicines de jugadores, rondas alcanzadas por las selecciones, etc.</p> </article> </section> <section class="cursos"> <h2 class="section__titulo">Estadísticas a nivel de:</h2> <div class="cursos__columna"> <a href="EstadJugad.html"><img src="img/iker_opt.jpg" alt="" class="cursos__img"></a> <div class="cursos__descripcion"> <h3 class="cursos__titulo">Jugadores</h3> <p class="cursos_txt"> <br>-Máximos anotadores <br><br> -Máximos asistentes <br><br> -Jugadores con menos tarjetas recibidas<br><br> -Jugadores con más tarjetas recibidas <br><br>-Etc. </p> </div> </div> <div class="cursos__columna"> <a href="EstadEdicionSeleccion.html"><img src="img/francia.jpg" alt="" class="cursos__img"></a> <div class="cursos__descripcion"> <h3 class="cursos__titulo">Selecciones</h3> <p class="cursos_txt"><br>-Evolución de selecciones a lo largo del tiempo <br><br>-Qué posición alcanzará tu selección favorita <br><br>-Qué selección posee una mayor capacidad anotadora <br><br>-Etc. </p> </div> </div> Anexo-Código Web Página | 144 margin: 5px 0; } .cursos__img { width: 100%; } /*Estilos del footer*/ .footer { background: #333; color: #fff; padding: 28px; text-align: center; } .footer .social [class^="icon-"] { color: #333; text-decoration: none; font-size: 28px; padding: 8px; border-radius: 20%; background: white; } .footer .copy { Anexo-Código Web Página | 145 padding: 20px; } /*Estilos responsive*/ @media(min-width:480px) { .banner__titulo { font-size: 30px; margin: 7px 0; } .banner__txt { display: block; font-size: 20px; margin: 9px 0; } .info, .cursos { display: flex; justify-content: space-between; margin-top: -90px; } .info__columna { width: 32%; } .info_titulo { font-size: 30px; margin: 5px 0; } Anexo-Código Web Página | 146 .cursos { flex-wrap: wrap; margin-top: 0; } .section__titulo { width: 100%; } .cursos__columna { width: 49%; } .cursos__img{ width: 100%; height: 35%; } .footer .social [class^="icon-"] { margin: 0 10px; } } @media(min-width:768px) { .banner__titulo { font-size: 45px; } .cursos__titulo { font-size: 40px; } Anexo-Código Web Página | 147 .cursos__img{ width: 100%; height: 50%; } } @media(min-width:1024px) { .contenedor { width: 1000px; } .banner__titulo { font-size: 60px; } .banner__txt { font-size: 26px; } .info { margin-top: -115px; } .info__columna { padding: 30px; } Anexo-Código Web Página | 148 .section__titulo { font-size: 50px; margin: 30px 0; } .info__img{ margin: auto; } .info_titulo { font-size: 40px; text-align: center; } .cursos__descripcion { padding: 40px; } .cursos__img{ width: 100%; height: 60%; } .cursos__titulo { font-size: 50px; margin: auto; } Anexo-Código Web Página | 149 .cursos_txt { font-size: 16px; } } @media(min-width:1280px) { .contenedor { width: 1200px; } .banner .contenedor { top: 32%; } .banner__titulo { color: white; } .banner__txt { font-weight: bold; } .info { margin-top: -255px; } .cursos__img{ width: 100%; Anexo-Código Web Página | 150 height: 60%; } } header .menu__link { display: block; padding: 15px; background: #00CCFF; text-decoration: none; color: #fff; } header .menu__link:hover { background: white; color: #00CCFF; } header .menu__linkk { display: block; padding: 15px; background: #99CCFF; text-decoration: none; color: #fff; } header .menu__linkk:hover { background: white; color: #99CCFF; } Anexo-Código Web Página | 151 Página estadísticas jugadores (EstadJugad.html) <! DOCTYPE html > <html lang="es"> <head> <title> Mi TFG</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximun-scale=1, minimun-scale=1"> <link rel="stylesheet" href="css/fontello.css"> <link rel="stylesheet" href="css/EstadJugad.css"> <link rel="stylesheet" href="css/estilomenuestadisticasjugadores.css"> <link rel="stylesheet" href="css/estilosGaleriaJugadoresModeler.css"> </head> <body> <header> <div class="contenedor"> <h1 class="icon-soccer-ball"> Mi TFG</h1> <input type="checkbox" id="menu-bar"> <label class="icon-menu" for="menu-bar"></label> <nav class="menu"> <a href="pagina1.html">Inicio</a> <a class="menu__link select" href="paginaestadisticas2.html">Estadísticas</a> <a class="menu__linkk select" href="EstadJugad.html">Jugadores</a> <a href="EstadPartidos.html">Partidos</a> <a href ="EstadEdicionSeleccion.html">Selecciones y Ediciones</a> </nav> </div> </header> <main class="main"> Anexo-Código Web Página | 152 <section id="banner"> <img src="img/iker_opt.jpg"> <div class="contenedor"> <h2>ESTADISTICAS A NIVEL DE JUGADORES. 2004-2016</h2> </div> </section> <div class="contenedor"> <section id="bienvenidos"> <h2> ALGUNAS ESTADÍSTICAS REALIZADAS SOBRE JUGADORES.</h2> <div class="contenedor"> <p> Se han elaborado estadísticas sencillas a nivel de jugadores cómo máximos anotadores en cada edición y en el total de las 4 ediciones estudiadas, máximos asistentes, jugadores con un mayor número de tarjetas amarillas y rojas, aquellos jugadores que cometen más faltas por partido, etc. Además, con la ayuda del Software de análisis predictivo SPSS Modeler, se ha elaborado un modelo predictivo para conocer qué posición le corresponde a cada jugador en función de sus estadísticas de juego, esto podría cambiar un sistema táctico de un entrenador en caso de tener en cuenta las estadísticas de juego observadas. Cabe destacar la dificultad en la recopilación de los datos para su posterior estudio, ya que la información,en la mayoría de las veces, aparecía de una forma no estructurada. </p> </div> </section> </div> <div class="contenedor"> <section class="cursos"> <h2 class="section__titulo">Aquí vemos algunas de ellas:</h2> Anexo-Código Web Página | 153 <div class="cursos__columna"> <a href="tablasEstadisticasJugadores.html"><img src="img/Captura1.JPG" alt="" class="cursos__img"></a> <div class="cursos__descripcion"> </div> </div> <div class="cursos__columna"> <a href="tablasEstadisticasJugadores.html"><img src="img/Captura2.JPG" alt="" class="cursos__img"></a> <div class="cursos__descripcion"> </div> </div> </section> <h2 class="section__titulo">Uso de SPSS Modeler para predecir posiciones de los jugadores según estadísticas de juego y elaborar una nueva formación de alineación basada en estadísticas.</h2> <section class="info"> <article class="info__columna"> <img src="img/Captura5.JPG" alt="" class="info__img"> <h2 class="info_titulo">Preparación de datos y de la ruta.</h2>