Proyecto del curso (III): Entrega Final

En esta última (por ahora) versión del proyecto, hemos introducido algunos cambios poco significativos en la presentación del código, como es que:

• En la página de Home, hemos cambiado la disposición de elementos de la barra de navegación.
• He añadido la barra de navegación a otras páginas, como por ejemplo para crear una liga nueva o unirse a una liga ya existente.

El principal cambio de esta parte del proyecto ha sido la adaptación de todo el código a php, creando cada una de las páginas necesarias para que funcione de manera correcta la aplicación que posteriormente se describirá. Todo esto se debe a que ahora las consultas acerca de Usuarios, Equipos, Jugadores y Ligas, se realizará en una BBDD, que en mi caso funcionaba a nivel local con usuario: root y contraseña: *********. Para conseguir activar la BBDD a nivel local, he realizado los siguientes pasos:

1. Descarga de Wampp
2. Iniciar todos los servicios y abrir la ruta http://localhost/phpmyadmin/index.php 
3. Entrar con usuario: root y contraseña: (vacía) para crear el usuario.
4. Cambiar la contraseña por la que uno desee. Es conveniente acordarse de la contraseña introducida puesto que posteriormente se usará para conectarse la BBDD.
5. Creamos nuestra BBDD llamandola como nosotros queramos (en mi caso la he llamado "interligatewc") y dentro de ella, creamos las tablas que necesitemos (en mi caso, las que mencioné anteriormente, Usuarios, Equipos, Jugadores y Ligas).
6. En php añadimos un nuevo DataSource donde pondremos la siguiente configuración:
1. Host: Localhost
2. Database: interligatewc
3. User: root
4. Password: (Contraseña introducida anteriormente)
7. Añadimos la conexión

Y de esta forma ya podremos trabajar con la BBDD en local.

Para adaptar la web y convertirla en dinámica, hemos usado sentencias de php en todos los ficheros, distinguiendo principalmente entre ficheros de generación de código, es decir, los ficheros que generan el código HTML que nosotros veremos posteriormente y ficheros de acceso y consulta a la BBDD, donde vamos a comprobar que los campos introducidos en los formularios son correctos o que son únicos en la BBDD.

¿Que cambios hemos hecho en cada fichero? Pues bien, los detallo a continuación:

• Contectar.php, restringido.php, procesaLogin.php son ficheros que cogí directamente de moodle y los introduje en mi aplicación, con la salvedad de que en el fichero procesaLogin.php, he introducido algunos cambios a la hora de conectarse con la BBDD, comprobar si la contraseña es correcta y redirigir a la página correspondiente.
• Ficheros de conexión: En estos ficheros principalmente se crea una conexión con la BBDD, se comprueban los campos corresponientes, se crea una sesión en caso de que los campos fueran correctos si no existiera ya previamente y se redirige a la página destino. Esta página destino será de generación de código o para comprobar otros parámetros. Estos ficheros son por ejemplo insertNewLeague.php, joinLeague.php, joinTeam.php, Logout.php, ...
• Ficheros de generación de código: Primero comprueban si ya existe la sesión y en caso de que exista, extraen el nombre de usuario a partir del cual se pueden extraer otros datos como el equipo al que pertenece o la liga en la que está inscrito. Estos ficheros son por ejemplo crearEquipo.php, createLeague.php, home.php, myTeam.php, ...

De todos eso ficheros, los que eran obligatorios en la entrega son:

• Formulario: Lo cumplimento con varios de los ficheros, aunque el más completo es register.php, que se encarga de insertar un usuario y meterlo en la BBDD. Otros de los ficheros que  realizan esta función son por ejemplo crearEquipo.php o searchLeague.php.
• Listar: Lo cumplimento con un par de ficheros también, como son home.php (en caso de que el usuario que se registre este en una liga) o pinchando en la barra de navegación, en "Mi Equipo", te devuelve una vista en la que aparece una tabla con los distintos jugadores de tu equipo.

Además de esto, se han creado algunos ficheros que he utilizado como plantillas, que se encuentran en la carpeta de templates, como pueden ser:

• header.php
• nav.php, entre otros...

Otras cosas que cabe la pena mencionar son aquellas que por falta de tiempo no he podido realizar o que habría que mejorar, como pueden ser las siguientes:

• Logout.php no funciona totalmente bien, puesto que cuando sales de la aplicación, se te redirige a una página en blanco y es necesario darle al botón atrás del navegador para que vuelva a index.php.
• Algunos estilos de la aplicación.
• La posibilidad de subir documentos a la aplicación, como pueden ser los escudos de los equipos, ya que aunque realmente este el campo para subirlos, estos no se instertan en la BBDD.
• Ampliar la tabla de equipos en la BBDD con el objetivo de guardar los puntos, partidos, goleadores, etc...

A continuación voy a describir el flujo de navegación de la aplicación:

1. En primera estancia, puedes loggearte en la aplicación si ya tienes cuenta, o registrarte dándo al botón de Crear una cuenta.
1. En caso de loggearte: accedes a home.php donde se muestra la clasificación de tu liga y puedes realizar cualquiera de las acciones de la barra de navegacion: ver tu equipo, crear una liga o unirse a una en caso de no tener aun.
2. En caso de crearte una cuenta, tienes que rellenar el formulario de registro, donde te pediran tus datos y los guardara en la BBDD y te dará la opción de crear un equipo, unirte a uno o saltar ese paso (En caso de saltar este paso, posteriormente no se podrá unirse ni crear uno, ya que no está aún implementado)
2. Una vez te hayas registrado, podrás entrar a la aplicación haciendo Login.
3. Si damos al botón de "Mi equipo", veremos una página que nos presentará la tabla correspondiente a nuestros jugadores de equipo.
4. Si damos al botón de crear una nueva liga, nos llevará a un formulario donde rellenaremos algunos campos para crear una liga y meterá al equipo en el que estemos en dicha liga, por lo tanto solo conviene hacerlo cuando no estemos aún en ninguna liga.
5. Si damos al botón de unirse a una liga, nos llevará a un formulario donde podremos buscar por el nombre dicha liga y podremos unirnos a ella, añadiendo asi nuestro equipo a la liga correspondiente y mostrando en la tabla de clasificación los equipos que están en ella.

Plantilla elegida (II)

De nuevo, en vista a lo comentado en clase respecto a mi aplicación web original, me vi en la necesidad de remodelar la idea y el concepto de página que quería diseñar. En este caso, como ya comenté anteriormente, va a basarse en una aplicación que represente clasificaciones de distintas ligas.

En este caso, no he encontrado ninguna plantilla que se adapte por completo a la idea de diseño que me surgió, por lo que he utilizado diversas fuentes para realizar y diseñar las distintas vistas que ahora comentaré.

1.- Página inicial, "index.html" :

Su contenido es una solicitud de registro, basada en el siguiente template ( https://colorlib.com/wp/template/login-form-v3/ ). Los cambios realizados en esta plantilla han sido:

• Adaptar la plantilla al diseño de mi aplicación web.
• Añadir un favicon previamente creado y poner un título al html.
• Modificar la imagen de registro, tamaño y posición.
• Cambiar el texto que aparece en cada campo.
• Añadir un enlace para crear una cuenta, en caso de que aún no se tenga.
• Cambiar el color de fondo, yendo de azul oscuro a azul claro, al igual que el favicon de la página.
• Añadir un estilo diferente al botón de "login", dándole un acabado en tonos azules (similares a los de la página) y añadiendo un borde en color oro claro.
• Añadir restricciones de tamaño, para que sea adaptable al tamaño de la propia página.

2.- Página principal, "home.html" :

Su contenido se puede dividir en dos partes, una primera que consiste en una cabecera de navegación fija y una segunda donde se refleja el contenido principal de la página.

2.1.- Cabecera: Para la cabecera he utilizado la propia plantilla de bootstrap (bs4-template-starter) ya que de por sí contaba con las dos secciones de cabecera y contenido.

• Eliminar los objetos presentes en la cabecera.
• Añadir los siguientes objetos:
• Logo de la aplicación web.
• Menú con las distintas vistas de la página
• Sección de información de usuario, con foto, dos apartados de texto y un botón de cerrar sesión.
• Ajustar el tamaño del logo, para que sea visible, pero no ocupe demasiado.
• Capacitar al menú para comprimirse o expandirse en función del tamaño de la página. En caso de que se comprima, lo hará en un botón, cuya función será listar las distintas opciones que había previamente.
• Dar estilo a la sección con la información de usuario. Alinear toda la sección a la derecha. Colocar la foto a la izquierda de la sección y después pegar el botón y el texto a la derecha de la foto. Dar estilo al botón, con background, border y la propiedad active, además de añadir la imagen de "logout".
• Añadir funcionalidad al botón de "cerrar sesión", para que aparezca un pop-up, confirmando si se desea realmente salir.
• Añadir restricciones de tamaño, para que sea adaptable al propio tamaño de la página.

2.2.- Contenido: Por ahora se basa en la clasificación de una liga, mostrando el tipo de formato que se va a representar en dicho contenido. Puesto que dicho contenido va a estar basado en tablas, he tomado como idea la disposición del siguiente template (https://demos.creative-tim.com/light-bootstrap-dashboard-pro/examples/tables/regular.html#). He modificado:

• El color de la cabecera de la tabla, cambiándolo por el azul característico de mi página.
• Añadir los bordes a la primera fila de la tabla.
• Modificar las columnas de tal forma que representen datos como nombre de los equipos, el escudo (donde he adjuntado algunas imágenes) u otros datos.
• Añadir colores en función de los puestos.
• Añadir restricciones de tamaño y estilo con respecto al contenedor, dejando margenes y padding en todas las direcciones de la tabla.

3.- Página de registro "register.html" y de crear equipo "crearEquipo.html" :

Básicamente representa un formulario, donde una persona que se quiera registrar, tiene que incluir sus datos como el nombre, apellido, contraseña, etc. Para dar fomato a esta página, no he utilizado ninguna plantilla.

• Crear un formulario con los campos mostrados en la página.
• Añadir estilos a cada grupo de datos.
• Añadir estilo al formulario por completo, asignando margin y padding en todas las direcciones.
• Dos botones al final del formulario para continuar con el registro o para comenzar de nuevo.

PLANIFICACIÓN DE LA WEB (II)

1.- En vista a lo comentado en clase, cuando presenté el trabajo que llevaba, decidí cambiar la temática de la aplicación web, consistiendo ahora en una aplicación que lleve exclusivamente la clasificación de diferentes ligas para diferentes equipos, además de poder visualizar otras tablas como los goleadores de la competición, los partidos pendientes, o quizá en un futuro, hasta organizar partidos.
Esta aplicación web responde a la necesidad de realizar competiciones en las que la clasificación se realice mediante un sistema de puntos, como puede ser cualquier liga futbolística, de baloncesto o de cualquier otro deporte.

2.- Por tanto, el principal objetivo de la aplicación, es poder organizar y controlar la clasificación de uno o varios equipos online.

3.- Esta idea ha surgido debido mi afición por las competiciones de cualquier tipo, pero para poder realizar una web que sea útil y eficiente, primero he de analizar otras web de este mismo ámbito.
Dentro de este tipo de webs, he encontrado las siguientes: 

• https://www.mismarcadores.com/ : Aplicación web por excelencia en el apartado de clasificaciones de ligas, en cualquier tipo de deporte.

• https://www.siguetuliga.com/ : La temática es la misma, aunque en este caso, cubre la clasificación de casi cualquier liga de España.

4.- En ambos casos se ve como se representan los distintos equipos de la liga en una misma tabla, con otros datos como los partidos jugados, puntos o incluso resultados de los distintos partidos. Se ven otras características comunes como margenes a los lados, padding en las tablas o distintas secciones flotantes a un lado u otro del contenido principal.

Plantilla elegida

En este post, voy a explicar que plantilla he elegido y porque he elegido esta plantilla para diseñar mi aplicación Web.

https://colorlib.com/wp/template/login-form-v3/

https://github.com/falconmasters/popup-animado

https://demos.creative-tim.com/light-bootstrap-dashboard-pro/examples/tables/regular.html#



Bien, para empezar, he escogido la plantilla "Bootstrap 4 Admin Dashboard Template", la cuál he encontrado en el siguiente enlace.

Entre todas las que he estado viendo, he considerado que está es la que más se ajusta al diseño que yo quería plantear desde un principio, sobre todo por la colocación que tienen los elementos y cómo están repartidos por toda la pantalla, por lo que creo que me ahorrará una gran cantidad de tiempo para versiones posteriores en las que implemente código de la propia aplicación.

Otra que quizá también me llamase la atención, de nuevo, por su similitud con respecto a mi idea de la aplicación, es "Bubbly - Admin Template", que se puede encontrar en el siguiente enlace.
Quizá, por su relación con la anterior en el menú de la izquierda, donde te aparecen todas las opciones disponibles.

¿Que cambios he hecho?

1. Adaptar la plantilla básica a mi gusto:
1. Modificar el menú de la parte izquierda, poniendo las distintas opciones que se plantean.
1. Cambiar nombres
2. Cambiar iconos
3. Cambiar enlaces
2. Crear página de salida para el botón "Salir", con enlace de vuelta. Por ahora sin funcionalidades.
3. Modificar la cabecera de la página principal.
1. Eliminar foto
2. Cambiar opciones del menú desplegable
4. Crear página para editar el perfil. Por ahora sin funcionalidades.
5. Cambiar y adaptar la disposición general de la pantalla principal, para que muestre como va a ser la página de la aplicación. Destacando:
1. División en dos columnas de 8 - 4 respectivamente
2. En la primera columna, representamos los torneos activos y los finalizados
3. En la segunda columna, he añadido un calendario, para poder organizar torneos o eventos futuros y una sección de avisos y notificaciones

¡AHÍ ESTUVE YO!

Cómo has hecho la foto resultante en que sales en la escuela con el personaje famoso. Cuenta los problemas y los trucos:

Lo primero que he hecho ha sido buscar las 3 fotos que he usado y editar cada una de ellas para adecuarlas para la foto final.
-La foto de la escuela, la he recortado un poco porque era quizá demasiado grande.
-La foto de IronMan, la he editado para quitar todo el fondo y quedarme sólo con la figura.
-La foto mía, al igual que la anterior, la he editado para eliminar todo el fondo. En este caso ha sido más complicado que en el anterior (en el que me bastó con usar la varita), ya que ahora, a parte de usar la herramienta de la varita para eliminar los colores más característicos, tuve que hacer uso del lazo, para recortar mi figura de manera correcta, sin eliminar partes de mi cuerpo.

Muestra las fotos por separado antes de juntarlas. Si les has quitado el fondo, con fondo, luego sin fondo, etc. Es decir, el proceso:

Si metes algún efecto posterior, cómo lo has hecho:

En mi caso no he introducido ningún efecto extra, lo único que he hecho hasido añadir un cuadro de texto que contenga mi nombre.

Paleta de colores

1. La paleta de colores que he elegido se basa en:

1.1-Izquierda:
RGB: 153 94 54
HEX: 995E36
1.2-Centro-Izquieda:
RGB: 130 78 45
HEX: 824E2D
1.3-Central:
RGB: 153 84 46
HEX: 99542E
1.4-Centro-Derecha:
RGB: 130 74 45
HEX: 824A2D
1.5-Derecha:
RGB: 97 54 35
HEX: 613623


2. Comenta qué alternativas tienes (monocromo, etc.), cuál seleccionas y por qué.  ¿Por qué has seleccionado estos colores, al margen de la gama?

Existen distintas alternativas como monocromo, análogos, tríada, complementarios, complementarios compuestos, tonos o personalizazdos.

En mi caso he elegido una gama de colores personalizados, aunque se podrian considerar monocromos, ya que he escogido el marrón como fondo plano, simulando un tablero.
Esto nos permitirá resaltar mejor los resultados mostrados en la pantalla.

3. FOTOS
3.1. Fondo:

3.2. Logo:

Esto son algunas ideas de como va a ir la página web, aunque no son decisiones definitivas, ya que iré probando la combinación de distintos estilos para ver cuál es el que más favorece a la idea propuesta.

PLANIFICACIÓN DE LA WEB

1.- La web que voy a desarrollar consiste en una web para realizar sorteos, torneos o clasificaciones de manera aleatoria o no, de tal forma que las personas que decidan usarla, tengan la capacidad de poder elegir como quieren realizar los sorteos.
Además, la web dispondrá de una BBDD donde se guardarán y almacenaran los usuarios que se registren (aunque no será obligatorio registrarse para acceder y usarla).
He decidido realizar esta página web porque en numerosas ocasiones, sobre todo cuando quedas con amigos, surge la duda de quien ganaría en alguna cosa o a quién le toca hacer una tarea. Con esta página web, conseguiremos diluir y resolver ese tipo de situaciones de una manera rápida y eficaz.

2.- El principal objetivo es que los usuarios que usen la pagina web, puedan realizar torneos amistosos, clasificaciones con sus correspondientes resultados, sorteos puntuales o incluso elecciones de manera aleatoria.
Esta página, no tendrá un publico objetivo concreto, puesto que puede ser usada por cualquier persona, desde niños hasta personas adultas.

3.- Esta idea ha surgido debido mi afición por las competiciones de cualquier tipo, pero para poder realizar una web que sea útil y eficiente, primero he de analizar otras web de este mismo ámbito.
Dentro de este tipo de webs, he encontrado las siguientes:

• https://www.sortea2.com/ : Como propósito general, es similar al que me gustaría realizar a mi, aunque en mi caso, me gustaría que fuera más claro e intuitivo.
  
• https://echaloasuerte.com/ : Esta podría ser otra web de la misma índole e igualmente muy completa, por lo que seguramente la tendré en cuenta para realizar la mía, principalmente a la hora de realizar el diseño y las funcionalidades. 
  

4.- Secciones:

• Encabezado
• Barra de navegación
• Contenido de la página, donde contiene en su interior distintas secciones, como por ejemplo, <div>...</div> donde te dice lo que puedes hacer en la página o con publicidad...