06 febrero 2016

Nuevo diseño en mi página web

Además del blog, tengo también una página web para mostrar lo que hago y para modernizarla le he aplicado un nuevo diseño y ahora además la web es... ¡¡Responsive!!


Enlace: www.xilili.eu

En esta entrada voy a explicar un poco como he estado trabajando el nuevo diseño (pero más a nivel visual que de código, porque entonces tendría que hacer como un tutorial y la entrada sería mucho más larga).

Solo decir  a nivel de código que he empleado el lenguaje HTML5, CSS, algunas funciones Java y el código necesario para conseguir el Responsive Design.



La primera imagen que aparece es del inicio. Y aquí os dejo una pequeña comparación del antes y el después, del anterior diseño y el actual:



Ahora he agregado al inicio la cabecera que tengo también en el blog y una sección "últimas publicaciones en mi blog". Además, tanto el nuevo diseño como el contenido están mucho más vinculados al blog. 

La página antigua no era Responsive, la actual se adapta a otras pantallas. por ejemplo, así se ve la sección portafolio primero en la pantalla del ordenador y después en la del móvil. El menú cambia y los elementos que aparecían uno al lado del otro, aparecen debajo del otro. Así es el menú sin desplegar y desplegado:

Como también habréis visto, le he aplicado prácticamente los colores que usé para el blog (en los enlaces, en el menú, etc...) ya que me gustan bastante.


Además, en la sección portafolio, he integrado galerías de imágenes, así se vería un ejemplo de una ilustración:



Y luego, en el apartado escritura, he añadido los relatos por fechas y he abierto un enlace en cada uno de ellos con la opción de comentarlo en el blog (para seguir vinculando ambas páginas).


¡Ah! Una cosa que he aprendido hacer y me ha gustado mucho es el empleo de iconos, como se ven en ambas versiones del menú y en otras secciones de la web:



Y bueno, este es un pequeño resumen del trabajo que he realizado en mi web, pero para verlo mejor sin duda es mejor visitarla. Os invito a echarle un vistazo y ya me contáis:



Espero que os haya gustado la transformación y bueno, aunque no me haya metido en temas de código si alguien quiere intercambiar alguna información o hacerme alguna consulta, ayudaré hasta donde alcancen mis conocimientos (ya que todavía me queda mucho por practicar).

A tod@s: gracias por estar ahí siempre :)

13 comentarios :

  1. ¡Guau! Te ha quedado genial y, sin duda, muchísimo mejor diseño que el anterior. Coincido con que es bueno "vincularlo" al blog, sobre todo si lo mantienes actualizado y la gente suele conocerte por lo que publicas aquí. ¡La guardo en favoritos ya! *-*

    ResponderEliminar
  2. Muy chula. Me gusta como te ha quedado. Un beso y felzi finde.

    ResponderEliminar
  3. Holaaa!! Me encanta la web y la armonía que has creado entre ambos diseños, precioso! :D

    ResponderEliminar
  4. Hola!
    No sabia que tenias pagina web ¡WOW! que genialidad.
    De verdad que gran trabajo haz hecho, te ha quedado precioso el nuevo diseño y que bien que hayas mantenido la temática de tu blog con la página, así mantienes la conexión entre ambos sitios.
    Además puedo imaginar el tiempo que haz invertido y la dedicación para lograr semejante resultado tan maravilloso.
    Besos

    ResponderEliminar
  5. Uy te ha quedado genial, te mando un beso y te deseo un buen fin de semana

    ResponderEliminar
  6. ¡Hola! No conocía tu página pero se ve preciosa <3 Ahora me pasaré a pegarle una mirada :D

    Bye!

    ResponderEliminar
  7. ¡Hola! Ya sabes que a mí con estas cosas se me hacen los ojos chiribitas. Me gusta que hayas seguido la línea anteriormente marcada, sin crear bruscos contrastes has mejorado mucho el diseño. Se percibe de lejos que te lo has currado sin dejarte guiar de estrambóticos sensacionalismos o énfasis de los que suelen abundar en las promociones de trabajos personales. Mantener la interconexión blog-web me parece un gran acierto, tus fieles seguidores habríamos echado de menos ese vínculo. Decirte que sigas en la brecha es una obviedad. Porque tú de luchadora y constante no pasas, en la brecha vas a seguir. Te felicito; te felicito muy sinceramente, M.A. A ver si se me pega algo…
    Mari Carmen C.

    ResponderEliminar
  8. ¡¡Pero qué bonita te ha quedado!! Tiene que llevar un trabajo inmenso detrás. A mi me encantaría cambiar la imagen de mi blog, pero con lo que me costó poner la que tengo, como para meterme en más líos. Sé que es mucho investigar y al final salen unos resultados tan fantásticos como el tuyo, pero supongo que le habrás dedicado mucho tiempo porque el resultado es magnífico. ¡¡Felicidades!! Besitos.

    ResponderEliminar
  9. Flipo colega :D
    ¡Te ha quedado genial! ♥ Me has dejado a la altura del betún XDDDD es broma jajaja
    No de verdad, yo que sé lo que cuesta esto (ahora nos han mandado hacer la página de una tienda y verás xD) me parece genial cómo te ha quedado :D
    ¡No había visto una foto tuya! ¡Eres muy guapa! ♥
    Me encanta esa faceta tuya de tocar tantos temas y que se te den tan bien. Me recuerdas un poco a mí solo que yo no soy tan buena XD
    Lo de los iconos es muy divertido. Nosotros los hacemos con la font awesome pero ya veo que tú has usado otra.
    Ahora te queda dar el salto a aplicarlo al blog :P

    ResponderEliminar
  10. A mi me gusta mucho más el nuevo diseño :D los colores son mucho más suaves y la web se ve más sencilla de visitar y navegar por ella. Además, el hecho de que sea responsive te ayudará mucho, ya que mucha gente navega desde los móviles o tablets :3

    ResponderEliminar
  11. No tenía ni idea de que tenias página web, me he pasado y es genial, no se como la tendrías antes pero me gusta como la tienes ahora, es muy fácil de navegar por ella.
    Saludos!!

    ResponderEliminar
  12. ¡Hola! Muchas gracias por todos vuestros comentarios, me han alegrado mucho después de todo el esfuerzo y tiempo invertido en la web :)

    ResponderEliminar