En esta entrada os voy a redactar el cuaderno de bitácora que he ido desarrollando a medida que avanzaba el proyecto de la web estática. El desarrollo de la web estática me llevó exactamente dos semanas, del domingo 22 de marzo al domingo 5 de abril de 2020, y veréis como poco a poco voy aprendiendo, avanzando, probando y mejorando de mis errores.
Antes de empezar me gustaría dar las gracias a mi profesor de la asignatura, que ha sido de gran ayuda para el desarrollo de la web, tanto por su rápida resolución de dudas y problemas que me iban surgiendo como por sus consejos sobre el estilo de la página. Muchísimas gracias.
BITÁCORA DE TRABAJO
22 de marzo. Me he decido a empezar el proyecto y creo que lo mejor que puedo hacer es dedicar todo el tiempo que haga falta en encontrar una buena plantilla que se adecúe al tipo de página que quiero desarrollar y que tenga un código medianamente simple que pueda entender. De momento voy a ir mirando en las páginas que nos ha recomendado nuestro profesor para ver cómo son los esqueletos de estas plantillas.
23 de marzo. Muchas de las plantillas que observé ayer tienen un esqueleto muy concreto y códigos muy extensos que no creo que aporten mucho al proyecto que quiero realizar yo. Voy a seguir mirando plantillas porque creo que escoger una buena plantilla va a ser vital para la posterior realización de la web.
24 de marzo. He ido recopilando las plantillas que más me han gustado por su esqueleto, por su sencillez de código y por su esquema de colores. Un detalle fundamental que he ido buscando en las plantillas es que tuviesen un buscador, puesto que mi web, como ya expliqué en la anterior entrada de este blog, va a tratarse de un comparador de tarjetas gráficas y necesitamos un buscador para seleccionar las tarjetas gráficas a comparar. A continuación os voy a enseñar algunas de ellas:
He ido guardando muchas más pero creo que en todo caso utilizaré una de estas dos. La primera de ellas es mucho más completa en cuanto a que tiene varias secciones de la página desarrolladas y tiene un esquema de colores más definido. La segunda es mucho más simple puesto que se trata únicamente de lo que se puede observar de la captura, una portada en la que hay una foto de fondo y un buscador doble con un botón de buscar. Todavía no se cuál elegiré pero tiene pinta de que va a ser una de estas.
25 de marzo. He decidido utilizar la segunda plantilla porque creo que va a ser mejor desarollar sobre una plantilla más simple que intentar cambiar el código de la primera, puesto que utiliza muchas animaciones, archivos .scss y webfonts que no creo que utilice y quitarlos de la plantilla creo que va a quitarme demasiado tiempo en comparación con desarrollar sobre una plantilla más sencilla. Además, el css de la segunda plantilla incorpora algunas correcciones para que estilo se perciba igual en todos los navegadores, cosa que probablemente deje en el código puesto que es algo que me interesa.
La plantilla en cuestión la podéis encontrar en el siguiente enlace: https://colorlib.com/etc/searchf/colorlib-search-1/
De momento no llevo avanzado mucho para todos los días que he dedicado a ello, pero creo que va a ser una gran ventaja haber seleccionado esta plantilla y ya entender cómo esta estructurada. Creo que en los próximos días avanzaré mucho más rápido debido a esto.
26 de marzo. He empezado por cambiar la foto del background, reposicionar el título en el centro y cambiarlo al título de mi web y he cambiado el buscador para que los dos inputs tengan el mismo tamaño. He cambiado el CSS de los inputs para que sean redondeados, lo cual creo que le da un toque más moderno y también he cambiado el estilo del botón de buscar para que sea redondeado, puesto que el botón cuadrado y los inputs redondos quedaba bastante mal. En vez de dejar el contenido del botón con la palabra 'Search', he decidido cambiarlo por la típica lupa de buscar. Para ello he importado la librería CSS 'Font Awesome' la cual consta de un montón de iconos que puedes incorpoar a tu página web y de entre los cuales se encuentra la lupa. En cuanto al estilo del título, he importado la fuente Wendy-One que creo que le da un toque animado y relajado. Por último, he añadido un navegador con Bootstrap 4, el cual lo he dejado con fondo claro y he centrado las distintas secciones. A continuación os dejo una foto del resultado hasta ahora:
27 de marzo. He decido hacer una sección más arriba de la que tengo ahora mismo que será la portada de la página web. Creo que me gusta más que el buscador sea una subsección más de la página y que no se encuentre en la portada. En la portada he puesto el título que tenía antes en el buscador y he puesto un botón que llevará al buscador. En la sección del buscador he cambiado el título a 'Comparator'. He decidido que el idioma de la página sea el inglés ya que así creo que la web tendrá más alcance. En cuanto al estilo de las secciones he añadido sombra a los bordes lo cual le da un efecto de desvanecimiento y he añadido un separador que añade unos pixeles de altura entre las dos secciones, para que no estén pegadas las dos. También he puesto un borde al texto de todo el body para que resalte más sobre el fondo.
28 de marzo. Hoy he hecho la sección de las noticias. He utilizado un carousel de Bootstrap para que la web tenga un toque más dinámico. En cada slide del carousel he puesto el titular de la noticia, un botón que te lleva a la noticia y la foto principal de la artículo. También le he puesto un título, importando la fuente Andika También he hecho la sección de About en la que he introducido una card de Bootstrap con mi nombre y mi una foto mía. Ahora la única sección que me faltaría por hacer es la tabla que, cuando implementemos PHP en la página web, será el resultado del formulario de comparación de las tarjetas gráficas.
29 de marzo. He terminado la tabla de comparación de las tarjetas gráficas. La he desarrollado con Bootstrap y en principio le he puesto un estilo de colores sencillo, blanco y gris, para que no desentone con el esquema cromático que la página tiene de momento. Aprovechando que tengo la librería 'Font Awesome' importada en el proyecto, he puesto los iconos 'check' y 'remove' en una fila de la tabla, lo que hace que quede bastante visual la tabla. Le he dado funcionalidad a los botones y he metido una función jQuery que hace que los links hagan scroll, lo que aporta aún más dinamismo a la página estática. En el proceso de implementar esta función he tenido que arreglar un bug con los botones de 'next' y 'previous' del carousel puesto que no quiero que estos links hagan scroll. También he añadido un plug-in jQuery para cambiar la apariencia de la barra de scroll y ponerla de un color más acorde a la temática de la página. Un problema que he tenido al implementar el plug-in es que tenía en el CSS la sentencia 'scroll-behavior: smooth;' la cual hacía que la barra de scroll se comportara erróneamente. Eliminando esta sentencia he resuelto el problema. Así es cómo me ha quedado la barra de scroll con este plug-in:
29 de marzo. He terminado la tabla de comparación de las tarjetas gráficas. La he desarrollado con Bootstrap y en principio le he puesto un estilo de colores sencillo, blanco y gris, para que no desentone con el esquema cromático que la página tiene de momento. Aprovechando que tengo la librería 'Font Awesome' importada en el proyecto, he puesto los iconos 'check' y 'remove' en una fila de la tabla, lo que hace que quede bastante visual la tabla. Le he dado funcionalidad a los botones y he metido una función jQuery que hace que los links hagan scroll, lo que aporta aún más dinamismo a la página estática. En el proceso de implementar esta función he tenido que arreglar un bug con los botones de 'next' y 'previous' del carousel puesto que no quiero que estos links hagan scroll. También he añadido un plug-in jQuery para cambiar la apariencia de la barra de scroll y ponerla de un color más acorde a la temática de la página. Un problema que he tenido al implementar el plug-in es que tenía en el CSS la sentencia 'scroll-behavior: smooth;' la cual hacía que la barra de scroll se comportara erróneamente. Eliminando esta sentencia he resuelto el problema. Así es cómo me ha quedado la barra de scroll con este plug-in:
Llegados a este punto, me he puesto en contacto con mi profesor, poniéndole al corriente con lo que llevo desarrollado de proyecto para que me recomiende puntos en los que mejorar. Para que el profesor pueda ver el resultado de mi proyecto, lo he subido a https://es.000webhost.com , que es un hosting público en el que puedes alojar tus páginas web.
30 de marzo. Tras analizar la retroalimentación que el profesor me ha dado, he empezado a implementarla en la página: primero he empezado por cambiar toda la configuración de fuentes que tenía. Me he desecho de todas las fuentes que tenía importadas en el CSS y he decido poner una misma en toda la página, para darle más uniformidad al cuerpo. La fuente que he elegido es Josefin Sans. Es una fuente sobria y elegante que hace que la web quede bastante más profesional. Después he cambiado todo el esquema cromático de la página a blanco y azules, siguiendo la recomendación de mi profesor. Para conseguir un efecto más profesional, he sustituido las imágenes que tenía como background en la portada y en la sección 'Comparator' por backgrounds que, aunque quizás sean menos descriptivos de la finalidad de la página, le aportan mucha más elegancia. A continuación os voy a dejar el resultado de los cambios que he implentado hoy:
31 de marzo. Hoy he seguido haciendo cambios de estilo en la página web. He cambiado el estilo de la tabla para que concuerde con el nuevo estilo de la página, apoyándome en la referencias que me dió mi profesor. Este es el resultado del cambio de estilo de la tabla:
30 de marzo. Tras analizar la retroalimentación que el profesor me ha dado, he empezado a implementarla en la página: primero he empezado por cambiar toda la configuración de fuentes que tenía. Me he desecho de todas las fuentes que tenía importadas en el CSS y he decido poner una misma en toda la página, para darle más uniformidad al cuerpo. La fuente que he elegido es Josefin Sans. Es una fuente sobria y elegante que hace que la web quede bastante más profesional. Después he cambiado todo el esquema cromático de la página a blanco y azules, siguiendo la recomendación de mi profesor. Para conseguir un efecto más profesional, he sustituido las imágenes que tenía como background en la portada y en la sección 'Comparator' por backgrounds que, aunque quizás sean menos descriptivos de la finalidad de la página, le aportan mucha más elegancia. A continuación os voy a dejar el resultado de los cambios que he implentado hoy:
31 de marzo. Hoy he seguido haciendo cambios de estilo en la página web. He cambiado el estilo de la tabla para que concuerde con el nuevo estilo de la página, apoyándome en la referencias que me dió mi profesor. Este es el resultado del cambio de estilo de la tabla:
También he añadido un logo a la izquierda en la barra de navegación. La imagen del logo la he tenido que modificar para que tuviese los colores de la página. Esto lo he hecho con la siguiente herramienta online: https://onlinepngtools.com/change-png-color . Al introducir este cambio en la barra de navegación, para que el menú que ya teníamos antes siga quedando centrado he tenido que añadir un div a modo de separador a la derecha de la barra de navegación con el mismo ancho que el que ocupa el logo. De esta forma el menú queda centrado. Este es el resultado:
Además, he cambiado las fotos del carousel para que sean más descriptivas de la noticia y tengan los tonos de la página web. Así es como queda el carousel ahora:
1 de abril. Ayer contacté con mi profesor para consultarle los cambios que había hecho y preguntándole por más retroalimentación. Siguiendo sus apuntes, he cambiado el background de la portada a una imagen que proporciona a la página web elegancia y estilo. La imagen en cuestión es la siguiente:
Como la página web tiene colores azules, he decido transformar la imagen con CSS para que mezcle los colores de la imagen con un background azul. Esto se puede conseguir con CSS poniendo como background la imagen, como color de background, en este caso, el tono de azul deseado y establecer un 'background-blend-mode: luminosity'. De esta forma he conseguido el suguiente efecto en el fondo de la portada:
Además de esto, he decido mover la sección 'About' del final del index.html a una nueva subsección, creando un fichero about.html y trasladándola ahí. Al realizar esto, he tenido que cambiar los href de los links puesto que no encontraban los anchor establecidos anteriormente debido a que hemos cambiado de fichero html. A parte de esto, he añadido una función con jQuery en el index.html para que la slide del carousel que aparece primera sea aleatoria, lo que consigue añadir aún más dinamismo a la página y restarle monotonía.
2 de abril. Hoy he estado todo el día intentando resolver un bug que surgía cuando queríamos ir del about-html a la sección de las noticias en el index.html. El bug consiste en que a veces el link no va al anchor que se supone que tiene que ir y se queda a medias entre la tabla y la sección de las noticias. No he conseguido arreglarlo asi que le he preguntado al profesor a ver si me puede dar alguna indicación de qué es lo que esta pasando.
3 de abril. Tras mucho tiempo buscando por internet he encontrado la solución. Se trataba de un bug únicamente en Firefox, ya que en Chrome funcionaba correctamente, y consistía en que al pinchar el link, el href si que dirigía siempre correctamente al anchor correspondiente pero lo que pasaba es que, al no haber especificado una altura de las imágenes del carousel, el link se dirigía al anchor que tenía asignado y después cargaba las imágenes del carousel, por lo que al cargar la página, en la vista aparecía el anchor al que se supone que iba el link desplazado la altura de las imágenes del carousel. Esto lo he arreglado estableciendo una altura predefinida en el CSS de las imágenes del carousel. De esta forma cuando se carga la página, el motor ya sabe que tiene que dejar esa altura guardada para el carousel y así el link va siempre al anchor que está establecido en el href.
4 de abril. El día de hoy lo he dedicado a solucionar un bug visual que llevababa arrastrando la página de hace unos días. El bug consistía en que los elementos de la portada se ordenasen en linea y no en columna únicamente en Firefox, y lo he resuelto ajustando la dirección de flex del div de la portada en columna con la sentencia 'flex-direction: column'. Esto Chrome lo hacía automáticamente pero se ve que Firefox no. Además de esto también he aumentado la letra del párrafo de la portada y de las slides del carousel puesto que no se podía leer con claridad. Realizando esto y poniendolo en negrita con 'font-weight: bold' ha hecho que se pueda leer los textos mucho mejor.
5 de abril. Ya la web esta terminada. He limpiado el código de trozos que no servían para nada y he juntado otros que hacían lo mismo en la misma declaración. Así, en el fichero style.css que es el principal fichero que aplica estilo a la página, he conseguido quitar 500 líneas de código, haciendo éste mucho más legible y compacto. He cambiado el nombre de algunas clases e ids de divs para que estén más ordenados y he reorganizado el sangrado del código correctamente. Con esto, la parte del proyecto de la web estática quedaría finalizada. A continuación os cuelgo algunas capturas que he hecho de las vistas de la web:
2 de abril. Hoy he estado todo el día intentando resolver un bug que surgía cuando queríamos ir del about-html a la sección de las noticias en el index.html. El bug consiste en que a veces el link no va al anchor que se supone que tiene que ir y se queda a medias entre la tabla y la sección de las noticias. No he conseguido arreglarlo asi que le he preguntado al profesor a ver si me puede dar alguna indicación de qué es lo que esta pasando.
3 de abril. Tras mucho tiempo buscando por internet he encontrado la solución. Se trataba de un bug únicamente en Firefox, ya que en Chrome funcionaba correctamente, y consistía en que al pinchar el link, el href si que dirigía siempre correctamente al anchor correspondiente pero lo que pasaba es que, al no haber especificado una altura de las imágenes del carousel, el link se dirigía al anchor que tenía asignado y después cargaba las imágenes del carousel, por lo que al cargar la página, en la vista aparecía el anchor al que se supone que iba el link desplazado la altura de las imágenes del carousel. Esto lo he arreglado estableciendo una altura predefinida en el CSS de las imágenes del carousel. De esta forma cuando se carga la página, el motor ya sabe que tiene que dejar esa altura guardada para el carousel y así el link va siempre al anchor que está establecido en el href.
4 de abril. El día de hoy lo he dedicado a solucionar un bug visual que llevababa arrastrando la página de hace unos días. El bug consistía en que los elementos de la portada se ordenasen en linea y no en columna únicamente en Firefox, y lo he resuelto ajustando la dirección de flex del div de la portada en columna con la sentencia 'flex-direction: column'. Esto Chrome lo hacía automáticamente pero se ve que Firefox no. Además de esto también he aumentado la letra del párrafo de la portada y de las slides del carousel puesto que no se podía leer con claridad. Realizando esto y poniendolo en negrita con 'font-weight: bold' ha hecho que se pueda leer los textos mucho mejor.
5 de abril. Ya la web esta terminada. He limpiado el código de trozos que no servían para nada y he juntado otros que hacían lo mismo en la misma declaración. Así, en el fichero style.css que es el principal fichero que aplica estilo a la página, he conseguido quitar 500 líneas de código, haciendo éste mucho más legible y compacto. He cambiado el nombre de algunas clases e ids de divs para que estén más ordenados y he reorganizado el sangrado del código correctamente. Con esto, la parte del proyecto de la web estática quedaría finalizada. A continuación os cuelgo algunas capturas que he hecho de las vistas de la web:
Con esto acabamos esta entrega del proyecto de la web estática. En el siguiente enlace os dejo el resultado de estas dos semanas de proyecto: https://tewcgpucompare.000webhostapp.com/
Lo que próximamente implementaremos en nuestro proyecto será la parte de PHP, para añadir funcionalidad en el buscador y que realmente se comparen las tarjetas gráficas que nosotros seleccionemos en el comparador.
Lo que próximamente implementaremos en nuestro proyecto será la parte de PHP, para añadir funcionalidad en el buscador y que realmente se comparen las tarjetas gráficas que nosotros seleccionemos en el comparador.
