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.
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.
- 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.
No hay comentarios:
Publicar un comentario