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.