The end

Con esta entrada se pone punto y final a la creación de la web Insert Coin News. Han sido muchas horas de trabajo las necesarias para llegar hasta aquí, pero el resultado y la satisfacción personal lo merecen. A continuación vamos a resumir todos los pasos del proceso y las correspondientes entradas en las que se detalla todo lo llevado a cabo:

• El primer paso fue elegir la temática de la web y la estructura que iba a seguir. Para ello se analizaron otras páginas del sector con la intención de coger ideas. Todo ello quedó plasmado en la entrada New Game.
• A continuación, en Fotomontajes con Pixlr, pusimos en práctica lo visto en clase para realizar un sencillo fotomontaje utilizando este conocido programa de retoque fotográfico online.
• Despues llegó uno de los momentos clave del proyecto, la Primera versión de la web. En ella se esbozaba el diseño que iba a tener la entrega final y se ponían en práctica los conocimientos adquiridos de HTML, CSS y Javascript básico.
• Lo siguiente fue analizar un poco el diseño, y en concreto las Paletas de colores con la herramienta online Kuler.
• A partir de este momento, se acabó la primera entrega y se empezó a trabajar en la entrega final. En la entrada Next Stage se detallaban las novedades que se estaban incluyendo en la web, como una galería implementada en Javascript o la realización de una versión móvil de la web con JQuery Mobile.
•  Uno de los añadidos más importantes de la web fue el Foro. Constituyó una de las tareas más complejas que se han realizado, al involucrar el manejo de BBDD en la nube, Javascript avanzado (Ajax) y el uso del formato JSON.
• Por último (pero no menos importante), se realizaron unos Retoques de última hora con los que pulir el diseño y dar solución a algunos de los fallos de la primera entrega.

Así resumido parece poco pero, como ya hemos dicho, han sido muchos ratos de trabajo los que han permitido que la web se encuentre en su estado actual. Las siguientes líneas las voy a dedicar a recoger las fuentes de información y recursos de los que me he servido para la creación de la web:

• Recursos y material didáctico disponible en el moodle de la asignatura (TEWC).
• Para la plantilla: OS Templates
• Para la tipografía: Font Squirrel
• Para hacer el foro: Tweetegy
• Para la BBDD: MongoLab
• Para depurar el código, una herramienta esencial: Firebug
• Para escribir y editar el código: Notepad ++
• Para validar la web: W3C Validator
• Para aprender más: Code Academy y Coursera

Y esto es todo. Para concluir, sólo me queda decir que ha sido una experiencia muy enriquecedora y divertida y que seguro, me ayudará mucho en mi futuro profesional. Espero que os haya parecido interesante y que hayáis aprendido tanto como yo. No dejéis de visitar Insert Coin News.

¡Hasta pronto!

Retoques de última hora

Tras las importantes novedades que incluían las dos entradas anteriores, ahora es momento de pulir algunos detalles del diseño de cara a la entrega final. Veámoslos uno por uno:

• Un detalle que no me acababa de convencer y que dificultaba la navegación era que al pasar el ratón por los enlaces no se producía ningún efecto en el texto que permitiese distinguirlos claramente. Modificando la propiedad 'hover' de CSS, cuando ahora pasamos el ratón por algún enlace, el texto cambia de color y además se subraya.

Así se muestra el enlace al pasar el ratón

• En aquellos enlaces que redirigen a páginas externas, se ha modificado el valor del atributo html 'target' a '_blank' con lo que al clicar en ellos, se abren en una nueva pestaña o ventana.
• La barra de navegación ha visto alargada su longitud para que ésta se iguale a la del slideshow y la del div de contenido, aumentando así la uniformidad de la web.
• Para homogeneizar los contenidos, la tipografía empleada en la web es la misma para todo el texto, salvo la utilizada en la creación del logo.
• Siguiendo los razonamientos que hicimos en la entrada anterior Paletas de colores, me he dado cuenta que el color blanco predominaba demasiado y por ello, los títulos de las noticias que aparecen en el slideshow y en el div de contenidos son ahora de color naranja y además, se les ha añadido una sombra (atributo css 'text-shadow'). Los bordes que rodean las imágenes y las líneas que separan el texto también han cambiado su color. Por último, y para dotar a la web de una identidad reconocible, al lado de cada título se ha colocado un icono similar al del logo de la web.

Aquí apreciamos todos los cambios

Todos estos pequeños cambios contribuyen a perfeccionar el trabajo realizado y a dotar al diseño de la web de más solidez. En breve subiré una entrada con la que poner punto y final al proyecto y que servirá de resumen de todo lo que se ha llevado a cabo en él.

Edito: Tras realizar varias comprobaciones, me he dado cuenta de que el hecho de haber utilizado varios css, hace que al conmutar los estilos algunas propiedades presentes en esos otros css importados no varíen. No es que el código del conmutador sea incorrecto ni que no realice su función adecuadamente, sino que debería haber combinado esos css en uno sólo para que al cambiar el estilo, cambiase todo. Aún habiendo detectado el fallo y siendo sencillo de solucionar, resulta algo trabajoso y la falta de tiempo debido a los exámenes lo hace imposible. Sin embargo, en próximas revisiones de la web (más allá de esta asignatura), se solucionará el problema.