Cuaderno de bitácora (Entrega final)

En esta entrada del cuaderno de bitácora iré redactando todos los cambios que haga a la web, desde donde lo dejamos la última vez hasta que finalice el desarrollo de la página por completo. También probablemente haga un colofón al final del cuaderno de bitácora sobre la asignatura para la que he hecho la página y sobre el desarrollo de la página en sí.
Esta segunda parte de la web consiste en hacer realmente dinámica la web mediante PHP, entre otras herramientas, y también en corregir algunos aspectos de la entrega anterior para hacer que nuestra página sea más completa. Con esto en mente, empezamos la segunda y última parte de este cuaderno de bitácora.

 BITÁCORA DE TRABAJO II

21 de mayo. Lo primero que voy a hacer, antes de ponerme a desarrollar la parte dinámica de la web, creo que va a ser corregir la primera entrega con la retroalimentación que recibí de mi profesor. Me dijo que me recomendaba que pusiese un 'footer' puesto que quedaba raro el final de la página (y coincido con él, termina muy abruptamente). También me dijo que me recomendaba que los links a páginas externas se abriesen en una pestaña aparte, así, quién desee volver a la web después de haber pinchado en un link, sólo tendrá que cambiar de pestaña. Esto último creo que tiene fácil solución, así que me pongo manos a la obra.
 
22 de mayo. Ayer conseguí hacer lo de los links que mencioné anteriormente. También, basándome en una plantilla, realicé el siguiente 'footer' que en principio pondré en todas las páginas.

Creo que queda muy bien y se alinea perfectamente con la temática y los colores característicos de la página web. Ahora creo que lo siguiente que voy a hacer, una vez más posponiendo la parte dinámica de la página, va a ser crear una sección nueva de contacto, tal y como hemos visto en clase. En esta sección intentaré utilizar las herramientas que hemos visto en la última parte de la asignatura para validar los campos del formulario de contacto. Pero esta última parte probablemente la haga más adelante, ahora únicamente me voy a centrar en la parte estética de esta nueva sección.

23 de mayo. Entre ayer y parte de hoy por la mañana he conseguido terminar esta nueva sección. Así es como ha quedado de momento.

Siguiendo con la temática de la página, he hecho las cajitas del formulario redondas e interactivas cuando ponemos el ratón encima. De momento he puesto 4 entradas (nombre, email, asunto y mensaje) y creo que la única entrada que tiene sentido validar va a ser la del email. Ahora me pondré a darle funcionalidad a este formulario de contacto.

24 de mayo. Ya tengo hecha correctamente la fiuncionalidad del formulario. De lo que trata este formulario es de que un usuario de la página pueda contactar conmigo y para ello rellene su nombre, su email (para que pueda responderle), el asunto y el mensaje que me quiere hacer llegar. Cuando le da al botón de submit he hecho que llame a un fichero php, que se encarga de recoger los datos introducidos en el formulario y de enviarme un correo a mi email personal con los datos introducidos. Lo he probado en el hosting, puesto que en local no tengo instalado ningún servicio que actúe de servidor de correo, y funciona a la perfección. Lo siguiente que voy a hacer creo que va a ser validar el campo del email, para que no te deje enviar el mensaje con una dirección de correo no válida.


25 de mayo. Entre ayer y hoy he conseguido validar el campo del email. Como la validación de Bootstrap no me funcionaba como yo quería, he decidido validarlo con una petición ajax a un fichero php que llama a una función que actúa como filtro. Si el email introducido no tiene la estructura de una dirección de email, el email no pasa el filtro y aparece un mensaje de error (para esto último he tenido que cambiar un poco el html de la sección de contacto). Cada vez que el foco del cursor sale de la cajita de email, se envía una petición de este tipo que valida el email introducido. Este es un ejemplo de lo que pasa cuando introduces una dirección inválida de correo.

El string en rojo es el mensaje de error el cual indica al usuario que debe introducir una dirección correcta de correo. Si aun así el usuario le da al botón de submit, el correo no se enviará y saltará un mesaje de error, que te invitará a volver atrás para completar correctamente el formulario.
Teniendo ya esta parte hecha lo que creo que voy a empezar a hacer es la parte de la tabla del comparador. Creo que lo que voy a hacer es una base de datos con todos los datos de la gráficas que se pueden seleccionar en el comparador y llamar con una sentencia SQL a la base de datos, aunque esto último no sé muy bien todavía cómo lo voy a hacer.

26 de mayo. Ayer me descargué AMPPS, en el cual viene phpMyAdmin, que es la herramienta que utilizaré como base de datos. Estuve rellenando la base de datos con los datos de todas las gráficas que voy a incluir en la página y, aunque fue un poco tedioso, conseguí terminarlo. Ahora lo que tengo que hacer es conectar la base de datos con el IDE en el que estoy desarrollando la página y programar las interacciones de la web con la base de datos. Creo que esto lo voy a hacer también con ajax, puesto que me interesa que no se recargue la página cada vez que le damos al botón de comparar gráficas.

27 de mayo. Ayer estuve intentando hacer que la petición ajax devolviese bien los valores de las tarjetas gráficas, pero no lo conseguí. Todavía no sé si es puedo hacerlo con una sola petición o tengo que hacer una para cada valor que quiera extraer de la base de datos. Voy a seguir trabajando en esto a ver si consigo sacarlo.


28 de mayo. Tras mucha investigación y muchas pruebas fallidas, he conseguido que el buscador funcione correctamente. Lo que hecho es que, en vez de enviar únicamente los datos en la petición ajax, he enviado la tabla directamente y he hecho que la sustituya por la que ya hay en la página, sustituyendo el contenido interno html del 'div' que contiene la tabla. Así, en vez de realizar una petición por cada dato que queremos cambiar de la tabla, solo realizamos una petición, lo cual creo que se va a notar en el tiempo de respuesta de la página. Esto es sin duda lo que más tiempo me ha llevado hacer de esta segunda entrega, pero también creo que era la más importante y la principal función de la página. Con esto hecho, estoy muy contento y muy satisfecho del resultado de la página y de toda la funcionalidad que he conseguido implementar en ella. Ahora únicamente queda agrupar el código en plantillas, para concentrar el código y no tener trozos de código repetidos, y subir el resultado al host que ya utilizamos en la entrega anterior.

29 de mayo. Ya he agrupado el código en plantillas y he subido al host el resultado. He tenido que cambiar los datos del fichero que se conecta a la base de datos con nuevos datos de usuario, contraseña y nombre, puesto que he tenido que crear una nueva base de datos en el servicio de hosting (copiando la que ya tenía en local). Con esto ya terminado, doy por finalizado el desarrollo de la página web. El resultado lo podeis ver en el siguiente enlace: https://tewcgpucompare.000webhostapp.com/

REFLEXIÓN FINAL

Para concluir, como ya había adelantado anteriormente, me gustaría dedicar un espacio a una pequeña conclusión sobre todo el trabajo que he realizado y que me ha llevado al resultado final de la web.

Tengo que decir que me ha sorprendido todo lo que he aprendido sobre desarrollo y herramientas web en esta asignatura, puesto que realmente he interiorizado muchos conceptos y me ha servido para aprender todos los diferentes pedacitos que componen una web. Sinceramente, antes de empezar la asignatura no me hubiese imaginado en ningún momento que fuese a ser éste el resultado final y que me fuese a gustar tanto pelearme con la web para crear exactamente lo que yo tenía en mente. En general, la asignatura me ha parecido super útil y muy interesante, y la recomendaría encarecidamente a todos los alumnos que les interese el mundo del desarrollo web.

Por último, y no menos importante, me gustaría volver a dar las gracias al profesor de la asignatura por su gran ayuda en todas las fases del desarrollo de la página web y por su gran interés en el aprendizaje de sus alumnos. Gracias y nos vemos pronto.

Cuaderno de bitácora

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:

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:

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:

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.

Mi futura web para TEWC

Esta entrada va a tratar sobre mi nueva web que voy a crear para la asignatura Tecnologías Web Cliente. Ésta va a ser fundamentalmente un comparador de tarjetas gráficas que servirá a compradores indecisos de decidirse sobre cuál comprar atendiendo a su rendimiento, consumo y otras especificaciones.

 He decidido hacer este tipo de web porque hace un año, más o menos, estaba escogiendo los componentes del ordenador que me iba a montar y me ayudaron mucho a decantarme este tipo de sitios web.

El objetivo de esta web va a ser ayudar a potenciales compradores (que será nuestro público objetivo) a analizar el mercado actual de las tarjetas gráficas y así poder ayudarles a decidir cuál comprar y si acaso les interesa comprar alguna tarjeta gráfica en ese momento.

Algunas páginas web de la misma temática en las que me basaré serán https://www.gpucheck.com/es-eur/gpu-benchmark-comparison o http://gpuboss.com/compare-gpus

GPUCHECK

GPUBOSS

Estas webs suelen seguir siempre una estructura definida: suelen tener menús o buscadores donde seleccionar las tarjetas gráficas que queremos comparar y suelen tener un histórico sobre cuáles son las tarjetas gráficas más comparadas. Para seleccionar la tarjeta gráfica que quieres comparar no sólo se utiliza el modelo de la misma sino también su marca o la resolución que quieres llegar a conseguir con esa gráfica. También, los criterios con los que se comparan las gráficas suelen ser más o menos los mismos: precio, año de salida, máxima temperatura, máximo ruido del ventilador, potencia recomendada, rendimiento... Normalmente se da una lista demasiado extensa sobre muchísimos criterios de comparación y puede llegar a suponer demasiada información y de poco valor en muchos casos. Por eso, en mi web haré una selección de los criterios de comparación que considero más importantes.

Una cosa que me llama mucho la atención es que casi todas estas webs dan una nota total a cada gráfica que puede ser de interés como resumen si el cliente de la web no sabe interpretar los valores de las especificaciones de las gráficas.

Mi web tendrá un buscador o menú donde seleccionar las gráficas a comparar (como suelen tener todas estas webs) pero tendrá una lista mucho más concentrada de criterios de comparación, atendiendo como mucho a 10 criterios diferentes, y también tendrá una lista más reducida de gráficas que puedes comparar. Estarán disponibles las gráficas más comparadas y más populares en ese momento. Iré actualizando las lista cada poco tiempo dependiendo de los cambios en el mercado de las gráficas.

Por último, me gustaría hacer un pequeño adelanto de la estructura que tendrá la web a priori. Se compondrá de varias secciones: un buscador o menú (que será la página principal), una vista en la que se comparen dos gráficas seleccionadas en el buscador y una sección de reviews individuales de cada gráfica disponible en el comparador. De esta forma es cómo, en principio, estructuraré mi futura página web.