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 que 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,
el 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 aparició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 realizado con 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 enlacé a las
páginas correspondientes que previamente habíamos creado en
Google+, Facebook y Twitter.
Y, ahora sí, podéis ver resultado final de nuestra flamante página web.
Os presentamos:
Estoy Contigo En...
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?
Fuente: este post proviene de hampton sc, donde puedes consultar el contenido original.
¿Vulnera este post tus derechos? Pincha aquí.
Creado:
