Proyecto Web II

Template:

Para comenzar con mi página web me pasé buscando por Internet muchos templates diferentes y encontré éste que se podia adecuar a mi estilo de página web, eso sí cambiando bastantes cosas.

Bolt

Captura de pantalla 2016-03-12 a las 14.09.13.png

Paleta:

Ajusté mi paleta de colores a mis gustos, es decir, escogí los colores rojo oscuro, gris y blanco. Podéis visitar mi antigua entrada para saber más. Os la dejo aquí:

https://throughthemarket.wordpress.com/2016/03/23/paleta-de-colores/

Inicios:

Tras escoger la paleta comencé con la remodelación del navbar. Le añadí una imagen .png con el nombre de la página web y añadí dos botones más en la parte derecha: Market, Currency y Login. Les di un diseño más minimalista para no sobrecargar la página con excesivos colores y quedó así:

Captura de pantalla 2016-03-12 a las 14.14.07.png

Luego modifiqué el footer. Cambié el color que venia por defecto y le introduje mi paleta de colores, y por último el nombre del autor.

Captura de pantalla 2016-03-12 a las 14.26.31.png

El cuerpo de la página web aún no está creado por lo que mis próximos post se basarán en ello.

Avances:

Una vez empezada la página y aclarado conmigo mismo cómo iba a ser la página web, eliminé todo lo que había en la página, es decir, parte del body, que tenía los skills, alguna imagen, y algún que otro texto, dejándola asi lo más simple posible.

También añadí algún que otro texto en las columnas, para darle más realeza a esta página estática, ya que todavía no sé nada a cerca de PHP.
Se pedía incluir un formulario, asi cogí el que previamente hice en un ejercicio de clase y lo simplifiqué bastante ya que no era necesario conocer tantas cosas a cerca del cliente y le añadí un par de campos a rellenar y por último, le apliqué una capa de CSS, quedando asi (izquierda nuevo-derecha viejo):

Captura de pantalla 2016-03-23 a las 13.57.02.png

Problemas:

Tuve ciertos problemas con el navbar, la imagen no se me reajustaba cuando cambiaba de dispositivo, por lo que estuve buscando cómo arreglarlo y no pude encontrar solución. Por lo tanto, cambié el navbar a otro que encontré, no cambiaba nada, solo el tipo de letra y en vez de una imagen, añadí texto, que ocupaba menos y lo hacía más elegante. Modifiqué las páginas que iba a tener, eliminé Currency y añadí Sign up.

Volví a hacer ciertas modificaciones en el navbar, que era prácticamente como el anterior, solo que ahora no puse una foto como nombre de la página si no que puse el título en letra como se puede ver a continuación, quedando asi más compacto (header y footer del mismo estilo):

Captura de pantalla 2016-03-26 a las 10.19.55.png

Finalizando primera parte:

Una vez realizados todos los cambios anteriores y comprobando que todo funcionaba correctamente, añadí un widget de Twitter para ver los tweets recientes de un Twitter oficial a cerca del mundo de las finanzas. Asi también completaba los requisitos de añadir jQuery.

Captura de pantalla 2016-03-26 a las 10.25.23.png

Pequeñas mejoras:

Tras analizar a fondo mi página web, me di cuenta que no era como me esperaba, por lo que eliminé la columna de la izquierda cediéndosela a la parte central, asi pues, la tabla del centro quedaría más grande.

Lo primero que hice fue insertar un Favicon:

Captura de pantalla 2016-04-02 a las 13.29.23.png

También añadí mediante JavaScript un reloj en la parte central superior para poder ver la hora en todo momento. Me resulto bastante fácil ya que buscando en Internet y con pocos cambios logré colocarlo para su correcta visualización.

Captura de pantalla 2016-04-02 a las 13.19.18.png

A su vez e integrando la parte restante, el jQuery Plugin, añadí una botonera en la parte lateral debajo del widget de Twitter (que también edité cambiando el usuario, es decir, FinancialTimes por Bloomberg).

Aspecto inicial:

Captura de pantalla 2016-04-02 a las 13.17.38.png

Aspecto final:

Captura de pantalla 2016-04-02 a las 13.16.48.png

Captura de pantalla 2016-04-02 a las 13.19.18.png

Captura de pantalla 2016-04-02 a las 13.19.32.png

(Puesto que no entra en toda la pantalla he divido la página en dos, lo que se ve desde el inicio, y el footer que se ve con un pequeño scroll)

Rediseño final

He estado meditando acerca de mi página web y he decido introducir unas gráficas de Google Charts, con ciertos mercados. También he cambiado el color principal a un color menos agresivo para la vista, un toque anaranjado y rediseñado un poco los botones de compartir y la fecha actual que previamente estaban. El favicon ha sido rediseñado y cambiado por otro.Captura de pantalla 2016-04-08 a las 10.22.56.png

Captura de pantalla 2016-04-08 a las 10.47.17.png

A su vez, he añadido una página de inicio que aun le quedan unos retoques en cuanto a versión final.

Captura de pantalla 2016-04-07 a las 22.41.08.png

¡Esto es todo por ahora!

http://www.throughthemarket.gq

¡Nos vemos pronto!

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s