Para empezar con la página web lo principal es encontrar una plantilla de acorde al estilo de página que se va a realizar y que su código sea bien utilizable. Tras estar mirando varias tiras de plantillas, decidí que el modelo más óptimo era el de https://shapebootstrap.net/
Una vez decidida la plantilla, he cambiado los menús del encabezado a gusto con mi página.
Día 2
Hoy he empezado realizando el logo para mi página que sustituiría al de la esquina superior izquierda de la portada. Para ello he cogido el escudo de La Mancha de google y con pixlr lo he modificado para que cubriera las mismas dimensiones y el mismo estilo que el ya presente en la plantilla inicial.
Un detalle a la hora de realizar este logo es que lo he tenido que guardar en png porque al insertar la imagen sin fondo en la plantilla me seguía apareciendo el fondo blanco, por lo que he tenido que guardarlo en esta extensión para que no apareciera. No obstante, la capacidad de la foto sigue siendo minúscula y ese cambio no es importante.
Con el contenido de la cabecera completada, he abierto un fichero css para esta página principal donde he cambiado el color de la cabecera para que se adaptase a la paleta de colores que completará la web, aun así el acabado no ha sido de mi agrado y lo modificaré en el futuro.
Día 3
Para el día de hoy ya dispongo de fotos del equipo y del partido de ese fin de semana, por lo que he podido hacer pruebas con algunas para insertarlas el espacio reservado para esas imágenes centrales.
Una vez seleccionadas las fotos que se van a emplear, he reducido las dimensiones y la calidad de cada una teniendo como referencia las que ya se utilizaban en la plantilla: que ocupasen la capacidad de unos 400 KB.
Con ello, cambie el texto que las acompañaba. Solo he cambiado las dos primeras imágenes y la tercera la dejaré para posteriormente cuando disponga de más fotos.
Además, he utilizado los iconos de twitter y de facebook con sus correspondientes efectos, poniendo en ellos un hipervínculo a las redes sociales respectivas del club en sus diferentes servicios.
Día 4
Los iconos de twitter y de facebook, con sus respectivos textos modificados, no me parecía muy vistoso para el espacio que ocupan, asi que he decidido añadirle el patrocinador del club con su respectivo hipervínculo. En un principio, su logo era azul y rojo, así que he tenido que cambiar los colores a tonos verdes/blancos para que concordase con la página.
Posteriormente, en el css he cambiado los colores de los hipervínculos para que no me aparecieran en naranja al clickarlos y los he puesto en negro para que encajaran con el color que toman los iconos al pasar el ratón sobre ellos. El color azul del hipervínculo queda aceptable así que he decidido no cambiarlo, al igual que el fondo de la sección.
Día 5
Hoy he retomado el color de fondo del encabezado para que quedara mas bonito. Tras documentarme, he conseguido ponerle un degradado lineal con dos tonos diferentes de verde que le da un toque mucho más moderno.
Junto a esto, he delimitado el resto de zonas de la página principal de modo que el combinado de colores fuera de tonos oscuros a claros y, al llegar al blanco, volviera de manera inversa a los iniciales, lo cual me parecía una buena combinación de colores.
Día 6
He utilizado el formulario de contacto que está en la página de contacto de la plantilla, que ya tenía una combinación de colores adecuada al interactuar sobre el mismo (tonos azulados que tambíén se encuentran en el escudo, como se habló en la paleta de colores), modificando los campos de los mismos y cambiando la localización del mapa para que fuera la correcta del campo de fútbol del club.
Al rellenar los campos obligatorios, al enviar te redirecciona a una página de agradecimiento por el contacto que cuenta con un hipervínculo que vuelve a la página principal.
Día 7
He modificado la penúltima sección y he creado las fotos de la zona de crónicas para que pueda ser útil en un futuro. Además he retocado la colocación de textos y el logo de fratelsa para que encajase perfectamente en todas las resoluciones.
Finalmente, he modificado el nombre de los archivos para que fuesen legibles, y he subido la página resultante a hostinger.
RESULTADOS
No comments:
Post a Comment