viernes, 16 de enero de 2015

Un blog con apariencia de web * DIY




Ya sabéis que en Hampton SC nos gusta el handmade,
el low cost, los retos creativos, los proyectos personalizados,
los pequeños/grandes emprendedores...

Esta misma filosofía DIY es compartida por quienes formamos
Estoy Contigo En..., el proyecto que pusimos en marcha hace
no mucho y al que hemos estado dando forma
para presentarlo como se merece.

Conseguir una imagen corporativa mediante un logotipo y una web
propios nos ha tenido ocupadas estas últimas semanas ya que
decidimos intervenir en todo el proceso creativo.

Al no ser diseñadoras gráficas ni tener conocimientos de
programación web suficientes, decidimos crear nuestra página
a partir del instrumento que mejor manejamos: Blogger.

Y como dentro de nuestra filosofía es igualmente importante
compartir, facilitando así la labor de otros creadores, os cuento
cómo lo hicimos.

Las plantillas con vistas dinámicas para blogs de Blogger
ofrecen un aspecto muy parecido a las webs por lo que decidimos
partir de ellas e ir eliminando aquellos elementos que son
necesarios en un blog pero que no tienen sentido en una
página web: fecha de publicación, atribución, símbolos-enlaces
para compartir los post en redes sociales...

La mayor dificultad para cambiar el aspecto de las plantillas con
vistas dinámicas radica en que los cambios no se realizan a través
de la edición html, como en las plantillas tradicionales de Blogger,
sino mediante códigos CSS sobre los que no hay tanta información
en tutoriales y foros de ayuda.

Pero a fuerza de buscar, investigar e interpretar..., de probar
una y otra vez, conseguimos eliminar todos aquellos elementos
que nos eran innecesarios.

Lo primero que hicimos fue elegir la vista que más se
adaptaba al aspecto web que queríamos obtener, la vista
Classic, eliminando después la opción de visualización de
los otros tipos de vistas dinámicas.
Para ello añadimos en el apartado Avanzado del diseñador de
plantillas de Blogger, el código CSS siguiente:
#views{ display: none !important; }

Queríamos eliminar también el cajón de búsqueda sobre la
barra de pestañas y en este caso el código CSS a introducir es:
#search { display: none !important; }

La barra de gadgets de la derecha tampoco es necesaria y
podemos hacerla desaparecer añadiendo otro código CSS:
#gadget-dock {display:none !important; }

Para eliminar el símbolo de fecha de publicación de post,
el código CSS que pondremos es:
.ribbon, .date {display:none !important;}

Los datos de publicación y autoría de las entradas
desaparecen al añadir el CSS:
.publish-info {display:none !important;}

Los iconos de distribución de los post en las redes sociales
los eliminamos con el código CSS:
.share-controls,  .delay {display:none !important;}

Finalmente los datos de "diseño de blog con la tecnología
Blogger" del final de la página desaparecerán al añadir:
#attribution-container { display: none !important; }

El aspecto final que presentará la ventana de códigos CSS
personalizado del diseñador de plantillas de Blogger será
el que aparece en la imagen siguiente.




Una vez conseguido el aspecto básico de una web, iremos
eligiendo en el Diseñador de plantillas de Blogger el color y/o
la imagen de fondo, ajustaremos el ancho, el tipo de letra y
su color...

Y después empezaremos a introducir contenido.

Tan sólo será necesario crear una entrada o post, sin ponerle
título, que quedará como la página de INICIO y en la que
introduciremos la información e imágenes
básicas de nuestro proyecto.

Un slideshow al comienzo de la misma nos permitirá presentar
el logo de nuestro proyecto seguido de fotografías que ilustren
el tema o contenido de nuestra web.

Debido a las características de las plantillas de vistas dinámicas
me resultó imposible incrustar un slideshow y finalmente opté
por hacer un gift que si bien no permite introducir flechas para
hacer avanzar o retroceder la presentación de  imágenes,
tiene el mismo aspecto y cometido.


Crearemos posteriormente tantas páginas como necesitemos y
programaremos su nombre y posición en la barra de pestañas
como se hace en un blog normal.

Para dar acceso a las páginas más importantes desde la página
de inicio, creé en PowerPoint unas pequeñas imágenes con
los principales servicios que ofrecemos, siguiendo la estética y
composición de nuestro logo, también diseñado en PowerPoint,
guardando las imágenes en formato .jpg




Enlazando cada imagen con su página correspondiente (añadimos la url
de la página al enlace de la imagen), podremos acceder a las páginas
tanto desde la barra de pestañas como desde la página principal.

Finalmente añadí los iconos de las redes sociales y los enlacé a las
páginas correspondientes que previamente habíamos creado en
Facebook, Twitter y Google+.
(Agradeceremos infinitamente los likes, los retuits y los +)
;-)


Y, ahora sí, podéis ver resultado final de nuestra flamante página web.

Os presentamos:





Es viernes y no quiero perderme el encuentro de Colorín Colorado,
por lo que participo con este DIY en sus Findes Frugales.

Debo reconocer que si bien el coste económico de esta creación es 0,
su coste en tiempo es del 150% y su coste neuronal de más del 200%

Pero la satisfacción de haberlo conseguido por uno mismo es impagable.
¿No os parece?






38 comentarios:

  1. Cuanto trabajo hay detrás de cada pagina que leemos en un instante,esta bien saberlo .GRACIAS por estos momentos.

    ResponderEliminar
  2. Menudo trabajazo, y dedicación, a mí todavía me cuesta con el simple blog. Enhorabuena, por todo lo que estáis consiguiendo. Un besazo

    ResponderEliminar
  3. Que buenisimo trabajo chicas!!! Ha quedado genial!!! Os deseo todo lo mejor en este proyecto tan interesante, tiene visos de exito seguro!!! Menudo equipo!!!
    Un beso enorme!
    Nika

    ResponderEliminar
  4. Enhorabuena por ese proyecto. Tiene una pinta estupenda.
    Un besazo enorme, super emprendedora.

    ResponderEliminar
  5. Muchísimas felicidades por esta nueva aventura. Todo mi apoyo a tu proyecto y os deseo grandes éxitos Un besazo!

    ResponderEliminar
  6. ¡¡Habeis invertido muchisimo esfuerzo en crear una pagina realmente maravillosa!! ¡¡Os deseo muchisimos exitos!!
    Besitos

    ResponderEliminar
  7. Enhorabuena, los diseños son muy creativos, un buen proyecto y muy interesante así cómo lo hacéis.

    ResponderEliminar
  8. Piola me voy a verlo como el rayo! Volveré
    Beso

    ResponderEliminar
  9. Me he perdido!!! No llego al blog en si mismo, así que todo esto casi me parece ciencia ficción, ehorabuena por el resultado porque es muy profesional!

    ResponderEliminar
  10. Enhorabuena, es un trabajo precioso el que habéis hecho y esto no ha hecho más que empezar. Mucho éxito a Estoy Contigo en...bs Sagra

    ResponderEliminar
  11. Precioso !!! Me ha gustado mucho el estilo que le habéis dado al blog, realmente bonito. La letra elegida, los dos colores y el pequeño adorno floral...........y detrás de eso hay mucho trabajo y esfuerzo, que tendrá su recompensa. Seguro que ya os está dando muchas satisfacciones.
    Os deseo muchos planes, eventos y mucho más..................que apuesto que tendréis.

    Mil besos !!!

    ResponderEliminar
  12. Gracias!!!! Es un aporte muy generoso. No te imaginas lo bien que me viene. Lo guardo en favoritos para leerlo más tarde con total tranquilidad y empezar a probar.

    ResponderEliminar
  13. Un trabajo engorroso pero muy satisfactorio al fin y al cabo!!
    Me encanta cómo os ha quedado la página, con mucha clase, muy dinámica y con un toque especial....me voy de nuevo a verla con más tranquilidad, pero os felicito desde YA!!!

    Besotess Piola, disfruta mucho el finde!

    ResponderEliminar
  14. Vaaaaaaya, enhorabuena por el nuevo proyecto, espero que te vaya genial.

    Respecto a la web-blog, yo hice lo mismo con mi blog del curro y, realmente, es un lío pero creo que valió la pena: http://www.eldestrabalenguas.es

    ResponderEliminar
  15. Desde luego el esfuerzo ha merecido la pena Piola!! Ha quedado genial!! Te deseo mucha suerte!! ;)
    Bsos
    Leo

    ResponderEliminar
  16. Sois....geniales...mucho ánimo y a triunfar!!!!!!!!!

    ResponderEliminar
  17. Enhorabuena... trabajo...ilusiones...trabajo...esfuerzo...
    Os felicito y os deso lo mejor para este proyecto!!!
    Lola

    ResponderEliminar
  18. Enhorabuena!!!! Sorprendente!!! Me ha encantado la nueva página y mucho exito para vuestro proyecto. Participo también en el finde, en el 26 te invito a un trocito de turrón, te apetece??? :) Bss. www.estrellasdeweb.blogspot.com

    ResponderEliminar
  19. felicidades por el nuevo proyecto!!! me quemé las neuronas tratando de entender!! cuando me decida a cambiarle algo a mi blog vendré aquí a seguir las instrucciones!
    besos! buen finde

    ResponderEliminar
  20. Piola gracias por las clases, pero creo que no me han servido de mucho, claro que tampoco estoy planeado hacer una web y algo parecido, me conformo con el blog.
    Entiendo que cuando no somos unas expertas en algo, el coste neuronal es mucho mayor y el tiempo empelado también, a cambio lo que nos queda es el trabajo bien hecho y el haberlo conseguido por nosotras mismas...
    Me gusta el resultado final...y espero que tengáis mucha suerte con este proyecto,
    Un abrazo y buen fin de semana

    ResponderEliminar
  21. Felicidades¡¡¡

    me encantas¡¡¡

    miles de besosss

    ResponderEliminar
  22. Hola Piloa:
    Leí con mucha atención ,ya que estoy tratando desde hace unos dias de cambiar la apariencia de mi blog haciendolo más liviano visualmente y creo que hay detalles que me pueden servir ,tomaré nota .Me Gusta mucho lo que han hecho con la página felicitaciones y gracias por compartir.Besos.

    ResponderEliminar
  23. Hola Piloa!

    Me ha gustado mucho tu artículo, es muy interesante ver métodos para aprovechar Blogger de otras formas más allá de los simples blogs. Gracias por la referencia a las plantillas dinámicas. Creo que son una herramienta muy útil.

    Guardo este artículo como futura referencia. :) Y por cierto, me gusta mucho el diseño que has dado a tu web de ejemplo. Es muy elegante. Un saludo!

    ResponderEliminar
    Respuestas
    1. Gracias por tus motivadoras palabras, Ricardo!
      Espero que el tiempo dedicado a investigar sobre el tema sea útil y práctico para muchos lectores.
      Saludos ^-^

      Eliminar
  24. que bueno Piola!! entiendo lo del coste neuronal y esas cosas... jaja! pero cuando sale bien, es doble satisfacción!! hay cosas de ese tipo que he preferido delegar, pero otras me gusta investigar y gracias a quienes comparten como vos, es mucho más fácil!!
    Mi web tambien esta basada en blogger (aunque no la hice yo!) pero si puedo agregar fotos y cumple perfecta su función!!
    Ya me voy a ver Estoy Contigo en...!!
    Buen fin de semana!

    ResponderEliminar
  25. Buen trabajo amiga, seguro que consigues tus sueños. Empiezas fuerte el año....
    Hasta mañana
    Belen

    ResponderEliminar
    Respuestas
    1. Sólo espero que sea un buen año para todas las mujeres valientes, ¡como tú!!!!!!!
      Besazos

      Eliminar
  26. Te felicito!!! tenés la neuronas que a mi me faltan Piola, gracias por compartirlo en los FF!!!!

    ResponderEliminar
  27. hola, os acabo de encontrar por casualidad , y lo primero que me ha llamado la atención han sido las fotos...Del paso a paso para hacer la página web, sin palabras...Vengo dándole vueltas hace tiempo a crear un para mí en vez del blog y este tutorial me vá a venir de perlas...Sigo con mi visita por vuestras preciosas páginas, con Diy, que es lo que más me gusta del mundo.
    Os invito a visitar mi blog, para que echeis un vistazo a mis cosicas .
    Os seguiré visitando sí o sí.
    Un beso!

    ResponderEliminar
  28. Eres un genio! Reconozco que compartir tu trabajo en este post ha sido un gesto noble de tu parte, además de darnos excelentes ideas para mejorar y revolucionar nuestros propios blogs; este medio que movido con pasión y creatividad se ha convertido en oportunidades para quienes han sabido manejarse en ellos. Sencillamente gracias por compartir.

    ResponderEliminar
  29. Información súper útil, gracias por compartir. Muchos éxitos con el nuevo proyecto!!!!

    ResponderEliminar
  30. Enhorabuena Piola !! un trabajo escelente que sin dudas te traera alguna que otra recompensa.
    Un besazo !!!

    ResponderEliminar
  31. Hola Piola querida. Realmente me hizo mucha gracia lo del desgaste neuronal! Es que todo eso del lenguage html es u verdadero lío para las que no somos muy entendidas

    ResponderEliminar
  32. Muchas gracias a todas!! Esperamos que os guste mucho nuestro nuevo proyecto !!

    ResponderEliminar
    Respuestas
    1. ¡Gustazo verte (leerte) por aquí, querida socia!!!!!
      Besazos

      Eliminar
  33. Enhorabuena por todo el trabajo!!La verdad es que todos estos consejos son muy útiles!Sobretodo para aquellos que no saben por donde empezar para hacer un blog bien hecho!Seguro que tanto trabajo dará sus frutos enseguida!Ha quedado estupendo!Es una gran manera de empezar el año!!Mucha suerte,y gracias por compartir!Un beso!

    ResponderEliminar
    Respuestas
    1. Gracias a vosotros por vuestras motivadoras palabras!!!!
      ^-^

      Eliminar

Cuéntanos...