{ Bienvenido } Soy Beatriz y te doy la bienvenida a mi espacio, El Diván Azul, un lugar en el que compartir lo que sé contigo, para que podamos crecer juntos. Si quieres aprender conmigo, date una vuelta por la sección tutoriales y para ver parte de mi trabajo, visita la galería. Gracias por dedicarme parte de tu tiempo.

rss en Twitter rss rss rss
Mostrando entradas con la etiqueta DFBA. Mostrar todas las entradas
Mostrando entradas con la etiqueta DFBA. Mostrar todas las entradas

16 de enero de 2015

dfba - el diseñador de plantillas 3



Hace más de un año que publiqué el último tutorial sobre DFBA. No iba a seguir esta serie porque excepto la primera entrada  en la que hablaba sobre consejos para mejorar tu blog, las otras prácticamente no tienen visitas en comparación con otros tutoriales que tengo en el blog. 

Sin embargo, no me gusta nada dejar las cosas a medias, así que voy a acabar esta serie. Sé que es una tontería porque estos tutoriales de blogger me llevan horas: hay que planificarlos, escribirlos, hacer las capturas de pantalla y editarlas... pero qué le vamos a hacer. Es que cada vez que pienso que está a la mitad me da urticaria y me salen ronchas por el cuerpo

Y una vez dicho esto, voy a seguir por donde me quedé, explicando la pestaña  avanzado del diseñador de plantillas.




DISEÑO BLOGGER: EL DISEÑADOR DE PLANTILLAS 3

NOTA: una de las ventajas de diseñar el blog en el editor de plantillas es que se van viendo todos los cambios que se hacen en el mismo momento de hacerlos. No te olvides de darle a botón APLICAR AL BLOG cuando hayas terminado y haz una copia de seguridad siempre que vayas a hacer algún cambio importante por si metes la pata. 

Título de entrada

Como su propio nombre indica, es el lugar donde se elije la configuración que se le va a dar al título que van a tener nuestras entradas. En este caso, blogger solo deja elegir el tipo de letra (entre los que trae por defecto) el tamaño y si quieres que sea cursiva (I)  o negrita (B). 

El Divan Azul: diseñador-plantilla-titulo- tutorial- blogger

El título de la entrada es una de las cosas que se puede cambiar con relativa facilidad y se puede poner otro tipo de fuentes (como las de google fonts) o personalizar el color. Se hace metiéndote en la plantilla .html, pero es bastante fácil. 

Cabecera de fecha

En esta sección le puedes dar formato a fecha de la entrada, aunque solo te deja elegir el color de texto y el color de fondo. La paleta de color es la misma que se usa en el texto de página y en los fondos (es la paleta de color que SIEMPRE vas a encontrar en el diseñador de plantillas) por lo que puedes personalizar también el color poniéndole el código de color que quieras usar.

En la plantilla simple, la cabecera de fecha se considera un gadget así que, como verás más adelante, el tipo de letra que le quieres aplicar se puede elegir allí.



El Divan Azul: diseño-plantilla-fecha-blogger

La fecha es otra cosa que se puede cambiar con relativa facilidad en blogger. Por ejemplo, con un poco de .css la podemos poner a la derecha.

Pie de página de la entrada

Aquí se puede configurar algunos aspectos del pie de página de la entrada, es decir, el lugar donde aparecen los botones sociales, las etiquetas, si hay comentarios... Las secciones que aparecen en el pie de página de entrada se configuran en Diseño, en el escritorio del blog, el botón que está justo encima de Plantilla; cuando explique la pestaña diseño, lo veremos. 



Gadgets

En este submenú, se pueden elegir las características que le vas a poner a tus gadgets (los apartados que aparecen en la barra lateral, datos personales, entradas más populares...). Al igual que el pie de entrada, los diferentes gadgets se localizan en Diseño (escritorio blogger) y es ahí donde se eligen los que se quieren poner, se los ordena... también lo explicaré más adelante.

Como la fecha de entrada se considera un gadget, se verá modificada por el tipo de letra que se elija aquí. 

El Divan Azul: diseñador-plantilla-gadget- tutorial- blogger

Imágenes

En este submenú se configura el aspecto de las imágenes o fotografías que subes al blog. Por defecto, en esta plantilla aparecen con un marco blanco y una especie de sombra, aunque en los parámetros hayas puesto transparente. Aquí se puede elegir el color del fondo de la fotografía, el color del borde la imagen y también el color de la leyenda (un texto que se escribe sobre la foto).


Es relativamente sencillo quitarle a la imagen ese marco blanco y esa sombra con un poco de css. 

Acentos

Los acentos son los separadores del blog, es decir ,la línea que separa la columna de la entrada y la de los gadgets y las líneas que rodean a las pestañas. Si no quieres que se vean ninguna de ellas, puedes elegir la opción transparente y desaparecen, pero también se pueden personalizar con algún color. En el caso de esta plantilla se ha optado por poner transparente el contorno de las etiquetas y por darle color a la línea del separador de columnas.


Mobile Button Color

Solo nos permite cambiar el color y no se puede hacer nada más desde el editor de plantilla.

Añadir CSS

En este submenú se le puede dar estilo y personalidad a la plantilla de blogger, sin necesidad de meterte de lleno en el editor .html. Es supercómodo y fácil porque, entre otras cosas, te permite ver en vivo y en directo los cambios que le haces a la plantilla. Para que veas como funciona, voy a centrar la cabecera del blog con un código super sencillo.
El código .css es el siguiente:
.header .widget {
text-align:center;}
.header img {margin:0 auto;}

Es muy importante que cuando lo metas en el editor le des a ENTER justo después de la última llave, porque si no lo aplica.



Borrar cambios 

Justo debajo de cada uno de los submenús (menos en añadir CSS), hay una opción que se llama borrar cambios avanzados y está en azul. Lo que hace es que borra los cambios que hayas hecho y te pone por defecto los de la plantilla original.



Hay un montón de códigos .css que se utilizan para que la plantilla quede mucho más personal y diferente a las de blogger. Si quieres que hable un poco más sobre esto, déjame un comentario en la entrada y te explico mejor qué es el .css y te doy un montón códigos para que pongas tu plantilla a tu gusto.

OTRAS ENTRADAS DE DFBA:
5. DFBA - el diseñador de plantillas 1
6. DFBA - el diseñador de plantillas 2

Si te ha gustado la entrada, compártela en las redes sociales; así me ayudas a llegar a más gente.
Los botones está justo debajo 

8 de noviembre de 2013

dfba - el diseñador de plantillas 2



En el tutorial anterior empecé a hablar sobre el diseñador de plantillas y te explique casi todas las funciones que tiene, menos una, la más importante y con la que le vas a empezar a dar tu toque personal: AVANZADO.


PESTAÑA AVANZADO DEL DISEÑADOR DE PLANTILLAS DE BLOGGER

En la pestaña avanzado es donde le vas a dar formato al texto de la página, fondos, enlaces, título del blog, descripción del blog, texto de la pestaña, fondo de las pestañas, título de entrada, cabecera de fecha, pie de página de la entrada, gadgets, imágenes, acentos, color del botón del móvil y CSS (esto último nos va a venir genial para darle un aspecto personal a nuestro blog sin meternos en el código html). Vamos que se pueden hacer muchísimas cosas

Recuerda que ya tienes que tener elegida tu paleta de color. Si no sabes muy bien cómo combinar los colores, te recomiendo que te leas estas dos entradas donde hablo sobre la teoría de color:

Texto de la página

En esta pestaña se elige el tipo de letra que tiene la página, el color que va a tener, el tamaño, si las quieres en negrita o en cursiva.

Cómo configurar el texto de página en blogger
En el caso de Cooking time, la letra elegida es la Arial, tamaño 13px y gris medio (#666666).

El tipo de letra que elijas debe ser legible y de un tamaño medio (entre 12px-16px, según el tipo de letra).  Si la letra es ilegible, es decir, si cuesta trabajo leerla y es demasiado pequeña, lo normal es que aunque tengas un contenido espectacular, tus lectores acaben cansados de tener que esforzarse en leer lo que pones y que se vayan a otro lado. Es mejor dejar los tipos de letras más bonitos y rebuscados para los títulos de las entradas. Por ejemplo, si te fijas en mi título de entrada, la letra es una preciosidad (se llama Alex Brush por si la quieres buscar y descargar), pero ¿te imaginas leer toda la entrada con esa letra? Yo creo que acabaría pegándome un tiro (y eso que es de mis tipografías favoritas). 

Con respecto a la cursiva y a la negrita no te recomiendo que la uses aquí, sino que la uses dentro del editor de entradas para resaltar el texto importante y que sea más atractiva (como yo en esta entrada, por ejemplo, al resaltar con negrita las partes que creo que son más importantes). 

Por último, cuando elijas el color, usa el negro o una gama de gris que no sea muy clarita ya que los colores claros hacen que el ojo se canse más. Además, un blog con la letra en rojo o en azul, por ejemplo, resulta demasiado chillón e invasivo. Es mejor que dejemos este tipo de colores para la cabecera del blog, el título de la entrada, o la cabecera de las pestañas porque le dará un toque de color y de personalidad al blog sin que se vuelva ilegible y chillón.

Si te fijas en la imagen superior, en la zona del color, hay una paleta desplegada con una cantidad de colores limitado. Pues bien, no te limites a usar esos colores, sino que puedes usar el que quieras. Justo debajo de color de texto hay una cajita de información donde puedes escribir el código del color que quieres usar (en mi caso #666666, que se corresponde con un gris medio). En este enlace hay una tabla con muchos colores diferentes y su correspondiente código html que te van a venir genial si no manejas photoshop. 

Fondos

Los fondos se dividen en 3 partes:

  • Fondo exterior: lo tengo puesto en transparente porque en el caso del blog que estoy diseñando, el fondo lo he puesto anteriormente y es una imagen de cuadritos azules. Si no tienes una imagen subida porque no te gusta, porque quieres darle un aire más sencillo... aquí puedes personalizar el color del fondo exterior. Recuerda que queda mucho más bonito si el color está dentro de tu paleta de color.
  • Fondo principal: es la parte donde van las entradas y la columna lateral. En este caso he elegido que sea de color blanco porque es lo que más le pega al blog. En general, que los colores blancos o cremas muy suaves son los que quedan mejor como fondo ya que ayudan a la lectura del texto. Otro tipo de colores lo que hacen es que te resulte más difícil leer y que la vista se canse antes al tener que esforzarse más. Un fondo negro también podría ser una opción, si lo combinamos con una letra blanca.
  • Fondo de la cabecera: siempre lo tengo en transparente porque no me gusta que se vea de diferente color al fondo principal. Además, si le pones una cabecera de imagen, queda mucho mejor. 

Enlaces

En la parte de enlaces lo que se puede elegir el el color del enlace, el color del enlace visitado y el color del enlace cuando se pasa el ratón sobre él. La paleta de color es la misma que se usa en el texto de página y en los fondos (es la paleta de color que SIEMPRE vas a encontrar en el diseñador de plantillas) por lo que puedes personalizar también el color poniéndole el código de color que quieras usar (por ejemplo #b0cecf, que es un azul claro).

Como configurar los enlaces del blog en blogger


Título del blog

Aquí es donde se elige el color y la letra para el título del blog. Es igual que en la pestaña de texto de página. Normalmente en lugar de título de blog, lo que se usa es una imagen como cabecera, pero si no quieres poner una imagen, aquí es donde vas a configurar el aspecto que tiene el título. Aquí puedes ser más creativo que en el texto de la página y te recomiendo que uses una letra más bonita o personal ya que así le darás un toque más propio al blog. 

Como configurar el título del blog en blogger

Ahora mismo en el blog de ejemplo no hay cabecera puesta, por lo que lo he configurado para que se vea más bonita: he escogido una letra con más personalidad y el color es el mismo que el de los enlaces y el fondo. Pero cuando acabe con el proceso, no se verá porque en su lugar habrá una imagen.

Descripción del blog

Aquí solo se puede elegir el color de la descripción (es lo que sale debajo del título, donde dice "blog sobre cocina fácil y resultona con recetas apetecibles y fáciles de hacer").  Por regla general esta descripción desaparece al poner una imagen como título, aunque eso lo explicaré cuando hable de la cabecera del blog).

Texto de la pestaña

Lo primero que tienes que saber es que si tu blog no está configurado para que tengas pestañas, aunque cambies esta parte en el diseñador de plantilla, en el blog no se verá.  i quieres configurar el blog para que se vea tienes que hacer lo siguiente:
  • menú PÁGINAS,
  • pestaña mostrar como PÁGINAS PRINCIPALES 
  • y luego GUARDAR CONFIGURACIÓN.
DFBA - cómo poner las pestañas en la parte superior en tu blog de blogger
NOTA: Antes de salirte del diseñador debes darle a GUARDAR CAMBIOS porque si no todo lo que hayas hecho no habrá servido de nada. Te recomiendo que si quieres que se vean las pestañas como páginas principales lo hagas ANTES de meterte en el diseñador de plantillas.




Este menú es lo mismo que el de texto, es decir, que puedes elegir el color de la letra, el tamaño y el tipo de fuente. Aquí puedes ser más creativo y usar un tipo de letra más ornamental, aunque te recomiendo que sea legible y que vaya con la letra que has elegido para tu blog. 

Fondo de la pestaña

En fondo de la pestañas eliges el color que quieras que las pestañas tengan de fondo y si quieres que el color sea distinto cuando lo tengas seleccionado. Por regla general siempre lo pongo en TRANSPARENT (transparente) porque me gusta más así, pero esto es algo complemente personal y subjetivo. Tienes que analizar si piensas que a tu blog le queda bien el fondo, si te gusta que cuando esté seleccionado sea diferente... 





La semana que viene terminaré de explicar la pestaña avanzados del diseñador de plantillas porque si no esta entrada sería interminable.
Me gustaría saber si sabes lo que es una paleta de color y cómo elegirla y si has usado el diseñador de plantillas para darle otro aire a tu blog.

18 de octubre de 2013

dfba - el diseñador de plantillas 1


A estas alturas, ya sabrás cuáles son los colores que has elegido para tu blog, tendrás pensado una cabecera que combine con los colores del blog, si vas a poner un menú de pestañas o no (si no es así, lee el primer capítulo de DFBD). Se supone que ya sabes cuáles son las partes de un blog y cómo se llaman, qué estructura es la que más que te conviene y cómo hay que hacer una copia de seguridad antes de meterte a toquetear la plantilla. 

Pues bien, hoy vamos a aprender a usar el diseñador de plantillas, una herramienta de blogger super útil para darle un estilo personal al blog.


DISEÑADOR DE PLANTILLAS

Este es el aspecto actual de nuestro blog, con la plantilla simple y sin haber hecho ningún cambio. Se trata de una plantilla muy simple y sosa, que no tiene nada de personalidad, que es muy sosa:

Capítulo 5: Diseñador de plantillas. Más info www.eldivanazul.com


Pero con unos  cambios básicos en el editor de plantillas, sin meternos en nada de código ni de css y sin poner una cabecera de imagen, se puede llegar a esto, una plantilla con un estilo más definido gracias a la paleta de color que se ha escogido, al fondo y a la personalización de la letra y los enlaces. Este cambio se puede hacer muy rápido si ya sabes lo que quieres conseguir.

Capítulo 5: Diseñador de plantillas. Más info www.eldivanazul.com

El diseñador de plantilla se encuentra dentro de la PLANTILLA en el escritorio del blog, en la parte inferior izquierda (en ese lugar se encuentra también el botón para crear copias de seguridad de la plantilla y que ya expliqué en el capítulo anterior y la edición de la plantilla en html). Para entrar en él, solo hay que pulsa en PERSONALIZAR.

Capítulo 5: Diseñador de plantillas. Más info www.eldivanazul.com


Una vez que pinchas en personalizar, se abre el EDITOR DE PLANTILLAS, el lugar donde vas ha empezar a darle forma propia a tu blog. 

Capítulo 5: Diseñador de plantillas. Más info www.eldivanazul.com

En la parte superior izquierda se encuentran los menus y justo al lado se van desplegando :
  • Plantilla: aquí puedes elegir la plantilla que quieras: simple, vitas dinámicas, etéreo... Es lo primero que debes hacer ya que si haces algún cambio y luego elijes la plantilla, todos los cambios se le borrarán. 
  • Fondo: aquí puedes escoger el fondo que quieras de entre los que trae blogger por defecto o subir uno nuevo.
  • Ajustar ancho: una de las primeras cosas (de hecho la segunda) que debes hacer ya que afectará a todo el diseño de tu blog. Si cambias el ancho después de haber hecho el diseño, es muy posible que se vaya todo a la porra y tengas que reorganizarlo. Te recomiendo un ancho de entre 800-1000 pixeles, más delante te explico el por qué.
  • Diseño: aquí es donde podrás elegir la estructura del blog, es decir, si quieres que tenga una, dos o tres columnas, el pie de página... Esto es lo segundo que debes hacer ya que condicionará todo el diseño del blog. 
  • AVANZADO: aquí es donde están todas las configuraciones que se pueden cambiar a la plantilla: tipo de letra, enlaces, fecha, comentarios....es lo último que debes tocar en el diseñador de plantillas.

1. PLANTILLA

Te recomiendo que uses siempre la plantilla sencilla (o simple) de blogger ya que es la más fácil de cambiar. Además, todos los tutoriales de DFBA están aplicados a esta plantilla y la mayoría de los que hay en la red también.

2. DISEÑO

Como el blog sobre el que estoy trabajando es un blog de cocina, he decidido que tenga una estructura de dos columnas, con la barra lateral a la derecha y el pie de pagina dividido en dos. Se trata de un diseño clásico de blog, pero creo que para un blog de cocina va muy bien. 

Capítulo 5: Diseñador de plantillas. Más info www.eldivanazul.com


3. ANCHO

Lo siguiente que he hecho ha sido escoger el ancho del blog y de la columna lateral. Para el ancho del blog he escogido una medida de 1000 pixeles y para la columna lateral 275 pixeles

Capítulo 5: Diseñador de plantillas. Más info www.eldivanazul.com

Esto es algo muy importante, ya que va a determinar el ancho del blog y de la columna lateral (sidebar en inglés) si la tienes. Te recomiendo que el ancho total esté en torno a los 1000 px y que la columna ocupe entre 250 y 350 px . Por supuesto que es algo optativo, pero hay varios estudios que demuestran que actualmente es la configuración más acertada ya que la mayoría de las pantallas tienen una resolución de 1024 px. (Puedes leer más información aquí).


4. FONDO

En fondo es donde se elige el fondo que quieres para tu blog; puede ser un fondo predeterminado o subir tu propia imagen. Si subes tu propia imagen, debes tener en cuenta varias cosas:
  • Mejor que sea un patrón (como unos cuadros, unas  rayas...)  o un fondo liso para que no se vena cortes y se quede feo.
  • Súbelo en .png porque tendrá mejor calidad. 
  • La imagen debe tener mínimo 1800x1600 si quieres que sea un fondo completo
  • No puede pesar más de 300k.
Capítulo 5: Diseñador de plantillas. Más info www.eldivanazul.com

Yo voy a subir mi propia imagen, que es el fondo de cuadritos azules en el que me he basado para hacer el diseño de cooking time.

Capítulo 5: Diseñador de plantillas. Más info www.eldivanazul.com


En la siguiente entrada te hablaré del menú avanzado que es donde se hace el resto de los cambios que le voy a hacer al blog antes de meterme a hablar un poco de CSS y html para darle el aspecto personal y que termine siendo así:

Capítulo 5 DFBA. Más info www.eldivanazul.com



¿Sabías lo que era el diseñador de plantilla? ¿Lo has usado alguna vez? ¿Sabes lo que es el CSS y para qué se usa?



4 de octubre de 2013

dfba - La importancia de hacer copias de seguridad



Antes de meterme de lleno en el diseño de un blog, creo que hay algo muy importante que debes saber hacer y es a crear una copia de seguridad del contenido de tu blog y a crear una copia de seguridad de tu plantilla


CREAR UNA COPIA DE SEGURIDAD DEL CONTENIDO

Imagínate que un día vas a meterte en blogger, se ha caído el servidor y, cuando vuelve a funcionar, te ha desaparecido alguna (o todas las entradas); si tienes una copia de seguridad del contenido de tu blog NO PASA NADA, porque vuelves a subirlo y tan contenta, pero ¿qué pasaría si no la tienes? ¿y si no puedes recuperar el contenido del blog? ¿Te imaginas teniendo que volver a reescribir todos tus artículos? Yo lo pienso y empiezan a caerme gotas de sudor helado por la espalda... (de hecho en cuanto acabe de escribir esto me voy a hacer una copia de seguridad del contenido, pero vamos rauda y veloz). 

¿Y cómo se hace la copia de seguridad del contenido del blog?
Para hacer la copia de seguridad de contenido, solo tienes que hacer lo siguiente:

  1. Te vas a CONFIGURACIÓN.
  2. Pinchas en OTROS (es el último que aparece).
  3. Le das a EXPORTAR BLOG.
  4. Te sale un mensaje donde explica para qué es útil exportar el blog y le das a DESCARGAR BLOG
  5. Ya tienes tu contenido guardado; normalmente es un archivo con el nombre blog, una fecha (mes-día-año) y la extensión .xml (ejemplo blog-09-26-2013.xml)

Capítulo 4 DFBA: copias de seguridad




Capítulo 4 DFBA: copias de seguridad


Te recomiendo que hagas una copia de seguridad una vez a la semana si escribes varias entradas al blog o una vez cada quince días. Tengo que decir que para esto soy bastante caótica y yo suelo hacerlo un poco al tun tún, pero como mínimo hago una al mes (verás tú como un día me lleve un susto).


CREAR UNA COPIA DE SEGURIDAD DE LA PLANTILLA

Si me sigues desde hace tiempo, sabes que mi blog ha pasado ya por un montón de cambios de plantilla. Como soy una fuguillas en alguna ocasión se me ha olvidado guardar una copia de seguridad y la he liado parda, pero parda de verdad... y he visto como un día de trabajo se iba a la porra por hacer las cosas sin cabeza. Es que me acuerdo y me dan hasta ganas de pegarme, vaya.

Moraleja: siempre que vayas a hacer un cambio en la plantilla del blog, por pequeño que sea, guarda una copia de seguridad.

¿Y cómo se hace una copia de seguridad de la plantilla del blog?

Para hacer la copia de seguridad de la plantilla, tienes que hacer lo siguiente:

  1. Te vas a PLANTILLA.
  2. En la parte superior derecha le das a CREAR/ESTABLECER COPIA DE SEGURIDAD.
  3. Te sale una ventanita y le das a DESCARGAR PLANTILLA COMPLETA.
  4. Ya tienes tu plantilla guardada. Tendrás un archivo que se llamará template seguido de un montón de números y la extensión .xml (por ejemplo template-3587890610838117825.xml).


Capítulo 4 DFBA: copias de seguridad


Capítulo 4 DFBA: copias de seguridad


Si lo que quieres es subir una plantilla que tengas guardada, el paso uno y dos son iguales, y en el paso tres lo que tienes que hacer es pinchar en seleccionar archivo y subir el archivo de la plantilla que te has descargado (por ejemplo template-3587890610838117825.xml).

¿Alguna vez te ha desaparecido el contenido del blog? ¿Has metido la pata en con la plantilla y has perdido horas de trabajo? Me gustaría que me contases si has tenido algún problemilla de estos.

OTRAS ENTRADAS DE DFBA:

1 DFBA - consejos para mejorar tu blog
2 DFBA - la estructura de tu blog
3 DFBA - tipos de estructura

20 de septiembre de 2013

dfba - Tipos de esctructura



En la entrada de la semana pasada expliqué la estructura básica de un blog y de qué partes estaba formado para que cuando vayas a modificarlo (sobre todo si te vas a meter en código .html y en css y todas esas cosas que suenan fatal y dan más miedo que el coco) sepas un poco qué estas haciendo y donde se ubica cada cosa. 

Hoy te voy a hablar de algo mucho más sencillo y fácil de entender: cómo estructurar tu blog según el tipo de tema que trates. Por supuesto esto es orientativo y tú  tienes la última palabra ya que tu blog es tuyo y puedes hacer con él lo que te venga en gana (he dicho ☺). 


TIPOS DE ESTRUCTURA 

Si has trasteado alguna vez por el diseñador de plantillas, habrás visto que hay diferentes maneras de estructurar un blog: con una barra lateral a la derecha y un pie de página, o con barra a la derecha y a la izquierda y el pie de página dividido en dos... hay muchas posibilidades, por lo que yo solo te voy a explicar algunas. Si quieres ver más maneras de configurar un blog, pincha aquí


DOS COLUMNAS CON BARRA LATERAL A LA DERECHA
Esta es la estructura típica de un blog en Blogger, la que te sale por defecto cuando escoges una de sus plantillas. Esta manera de estructurar el blog es útil para casi cualquier tema, ya que le da prioridad a las entradas del blog (al estar ubicadas a la izquierda de la imagen), dejando en un segundo plano los gadgets, pero sin que queden ocultos. 

Si tienes un blog de recetas de cocina, scrapbook, estilo de vida, manualidades... este tipo de estructura te viene genial, porque vas a resaltar lo que publiques, pero la información importante (como los botones de las redes sociales, la información sobre ti...), también estará muy a la vista. Puedes ver un ejemplo de este tipo de plantilla pinchando aquí.

Capítulo 3 DFBA: tipos de estructura - columna derecha


DOS COLUMNAS CON BARRA LATERAL A LA IZQUIERDA
La estructura es muy similar a la anterior, solo que la barra lateral o sidebar se coloca a la izquierda. Este tipo de estructura es muy útil para blogs en donde lo más importante son los elementos que se pongan en la barra lateral. Por ejemplo, sería un blog muy útil para una empresa o una asociación, donde una de las cosas más importantes es que los datos de contacto estén en la zona más visible. Puedes ver un ejemplo de este tipo de blog pinchando aquí.

Capítulo 3 DFBA: tipos de estructura - columna izquierda


UNA SOLA COLUMNA
Esta estructura es para blogs donde la imagen es lo más importante, por lo que suele usarse mucho en blogs de fotografía. Como ejemplo de este tipo de blog, puedes ver el de mi compi Anita Vela. También es la estructura que sigue mi blog aunque en mi caso el footer o pie de página está dividido en 3 partes para poder poner los gadgets que quería y la cabecera está dividida en dos partes, por lo que no es exactamente este diseño. 

Capítulo 3 DFBA: tipos de estructura - una columna


OTROS TIPOS DE ESTRUCTURA

Combinando la manera de poner las barras laterales y los pie de página en el diseñador de plantillas, se puede hacer hasta 28 combinaciones diferentes de estructura. Por ejemplo, si necesitas poner muchos gadgets (porque tienes publicidad en el blog u otro motivo) puedes elegir la opción de poner la barra lateral a la izquierda y a la derecha, como el blog de PPStudio, o poner 3 barras laterales a la derecha, 3 barras laterales a la izquierda...  

Capítulo 3 DFBA: tipos de estructura - varias columnas


Como se puede ver en el ejemplo de arriba, la estructura de este blog sería de tres columnas a la izquierda (para gadgets), una columna central para las entradas, y una columna de la derecha (para gadgets también). Personalmente, creo que este tipo de estructuras no son útiles y lo que hacen es enmarañar el blog, quitándole importancia al contenido.

Si tienes muchos gadgets, te animo a que hagas una revisión y a que quites los que realmente no son importantes y no dicen nada del blog ni de ti. Si aún así sigues teniendo muchos y no sabes cómo organizarlos, no te preocupes porque voy a hablar de esto en breve, aunque mientras puedes optar por alguna de estas opciones:

  • Usa el pie de página para colocar algún gadget, como yo aquí.
  • Utiliza la opción de la columna a la derecha y a la izquierda, como el blog de PPStudio
  • Pon la información referente a ti y al blog, la info de contacto o las redes sociales en una página, como hace Delipapel.

Y tú, ¿qué estructura prefieres para tu blog? ¿Cambiarías la estructura que tienes por otra para darle más relieve a la información importante o prefieres dejarla como está? ¿Te gusta poner muchos gadgets o prefieres tener los justos?


13 de septiembre de 2013

dfba - La estructura de tu blog


Por fin es viernes (yo estoy de vacaciones en Islantilla, Huelva, así que estoy feliz de la muerte) y vengo con una nueva entrada de DFBA. Esta vez, te voy a hablar de cómo se estructura un blog y las partes principales que tiene.


LA ESTRUCTURA DE UN BLOG

A la hora de hacer un blog, una de las primeras cosas que debemos saber es qué estructura tiene, cuáles son las partes que forman el blog y qué nombre tienen. Esto es así por varios motivos:
  1. Porque según el tipo de blog que quieras tener así deberás elegir la estructura (no es lo mismo un blog de fotografía que uno de cocina o un blog tipo web). 
  2. Porque si quieres ir más allá de lo que Blogger te ofrece, tendrás que saber dónde trabajas y cómo se llaman esas partes para poder modificarlas

Capítulo 2 DFBA: infografía de la estructura de un blog


Cuerpo (body): el body es el lugar en el que se coloca la imagen del fondo del blog, esa parte que se ve encima de la cabecera, a los lados de la entrada y debajo del footer (en mi caso es de color gris claro). Además, en el body es donde están los demás elementos del blog: la cabecera, el pie, la barra lateral...

Cabecera (header): el header es el lugar en el que se coloca el título del blog y está en la parte superior. La cabecera pueden ser palabras o una imagen, dependiendo de lo que quieras y se puede quitar con css si no quieres que aparezca. La cabecera se divide en:
  • Header-outer: es la parte de la cabecera que más se puede personalizar, donde se cambia el ancho, el largo... es como el marco de una foto. 
  • Header-inner: es la cabecera en sí; en el caso de que no tengas imagen, sería el título que hayas escrito para el blog, si tienes una imagen sería la imagen que hayas subido. 
Main-outer: es la parte que contiene (aloja) la barra lateral y las entradas del blog. 

Main-inner: es la parte que aloja las entradas del blog y todo lo que las forma, es decir:
  • El título (post-title): es el título que le pones a lo que escribes en la entrada.
  • La entrada (post-body): la parte escrita, donde pueden ir imágenes, vídeos... el cuerpo de la entradas. 
  • El pie de entrada (post-footer): sería la parte de los comentarios, los botones de redes sociales, las etiquetas...
Barra lateral (sidebar): la barra lateral es el lugar en el que se colocan los gadgets, como el archivo o los seguidores, y que puede adoptar diferentes estilos y formas; puede ir a la derecha, a la izquierda a ambos lados o no existir (por ejemplo, en este blog no hay barra lateral). Según el tipo de blog que quieras, deberás elegir una estructura de barra lateral.

Gadgets: los gadgets normalmente van ubicados en la barra lateral, pero también se pueden poner en otros sitios como en el pie de página, debajo de la cabecera (las pestañas es un gadget que se suele colocar ahí) e, incluso, en la cabecera. Por ejemplo, este blog tiene los gadgets en la cabecera (la bienvenida y la suscripción al blog), debajo de la cabecera (las pestañas) y en el pie de página o footer (el archivo del blog, las etiquetas...).

Pie de página (footer): en este lugar se suele ubicar los créditos de las plantillas y también algunos gadgets. Puede estar dividido en varias partes (en mi caso el pie del blog está dividido en tres partes).

partes importantes de un blog

Cuerpo o body - va el fondo del blog
Cabecera o header - va el logo o el título del blog
Entrada o post  - lo que se escribe en el blog
Barra laetral o sidebar - para colocar información y gadgets
Pie de página o footer - para los créditos o más gadgtes

En la siguiente entrada explicaré las diferentes maneras de estructurar un blog según sea la temática del mismo. Si no has leído la primera entrada de DFBA puedes hacerlo en el enlace que hay justo debajo:

NOTA: En las plantillas antiguas se usaba la expresión wrapper (en lugar de inner o outer) para designar los contenedores de las partes del blog. Ten en cuenta que la designación de algunos elementos puede cambiar según la plantilla que tengas y que estos nombres son los de la plantilla sencilla. Por eso, quédate principalmente con los nombres que están justo encima: body, header, post, sidebar y footer ya que estos no cambian. 

6 de septiembre de 2013

dfba - Consejos para mejorar tu blog



Con esta entrada empiezo una mini guía que he titulado DFBA- DISEÑO FÁCIL PARA BLOGUERAS EN APUROS, con la que voy a ir compartiendo algunas ideas, consejos y mini tutoriales para que tu blog de blogger luzca bonito, cuidado y personal. Y es que después de haber estado horas peleándome con el código, me he dado cuenta de que se pueden hacer cosas muy lindas sin querer matar al señor que inventó el .html

CONSEJOS PARA MEJORAR TU BLOG

Es cierto que lo más importante de un blog es su contenido, pero el ser humano es un animal visual, las cosas bonitas entran por los ojos. Si algo no te atrae visualmente, al final lo aparcas. Por ese motivo y porque el blog es tu casa virtual, tu tarjeta de presentación, hay que cuidar el aspecto que tiene.

¿Y qué es lo que puedo hacer para mejorar el aspecto de mi blog?

Quizás debería empezar explicando otras cosas, como las partes que tiene un blog o el escritorio de blogger, pero creo que si pones en práctica estos consejos que te doy (y que he ido aprendiendo a base de cambiar mi plantilla, leer a blogueros que se dedican a diseño y por sentido común), podrás empezar a mejorar tu blog ya.

1. Mantén un diseño limpio y cuidado, donde lo importante sea el contenido. Esto que parece obvio, no lo es tanto. Y es que cuando empiezas con tu blog y escoges una plantilla, empiezas a poner gadgets y fondos con imágenes como si te fuese la vida en ello. Esto hace que la plantilla no se vea clara, que el fondo distraiga al lector…

2. Usa un fondo neutro, a ser posible liso o con dibujos geométricos que no sean excesivamente grandes. Si es demasiado llamativo (porque los colores son muy fuertes o la imagen capta demasiado la atención) la vista se irá hacia él y molestará al lector. Recuerda siempre que menos es más

3. Elige muy bien la paleta de colores del blog. No uses más de 3 colores diferentes y combínalos entre sí. Si tienes una cabecera, usa tonos que sean lo más parecido posible a esta. Así, crearás unidad y se verá el diseño mucho más limpio.

4. Cuida la cabecera del blog ya que es lo primero que un lector nuevo ve cuando entra. La cabecera es tu marca personal, tu carta de presentación y dice mucho de ti y de tu contenido. Una cabecera bonita y cuidada, ni demasiado grande ni demasiado recargada para que no se coma el blog ayudará a que el lector identifique lo que se va a encontrar.

5. El menú de pestañas es muy importante porque ayuda al lector a navegar por el blog y a que la información este ordenada y a la vista. Puede estar justo debajo de la cabecera o en la sidebar (columna lateral del blog), pero siempre tiene que estar visible. Si pones el menú justo debajo de la cabecera, pon sólo lo realmente necesario y que quede en una sola línea. No hay nada que de más sensación de desorden y dejadez que un blog con 3 líneas de menú… cuando veo uno así, directamente lo cierro y paso a otra cosa o, si realmente me gusta su contenido, lo visito lo menos posible. En el caso de que tengas mucha información que mostrar, opta por poner el menú en la barra lateral o por usar las etiquetas

6. La columna lateral puede llegar a ser un elemento muy útil en el blog ya que en ella podemos poner información extra.  Usa los gadgets justos, sin agobiar el diseño y que el blog sea interminable. ¿Has visto esos blogs que tienen gadgets de pececitos, o del tiempo en Tokio? ¿Realmente tus lectores necesitan saber eso? Yo creo que no. Pon siempre en primer lugar los más importantes para el blog, como los botones de las redes sociales o el buscador. Para mí, los imprescindibles son:
  • Botones de redes sociales
  • Buscador
  • Etiquetas
  • Suscríbete
  • Seguidores
  • Entradas más populares
    7. El footer o pie del blog también es útil para poner información, sobre todo si en el blog solo tenemos una columna (como es mi caso). La idea es la misma que en la columna lateral. 

    8. Las entradas es lo que más debes cuidar porque es el contenido del blog y por lo que recibes tus visitas. La fuente de texto (la letra), debe ser lo más clara posible, con un tamaño adecuado que facilite su lectura: deja las fuentes “raras” como las que parecen que están escritas a mano, para el título de la entrada o la cabecera de tu blog. Además, hay que cuidar la ortografía y la puntuación.
    Como fotógrafa que soy, pienso que una imagen vale más que mil palabras (sobre todo si tu blog es de fotografía, cocina o manualidades) y que cualquier persona puede hacer fotos decentes, incluso con un móvil. Es solo cuestión de cuidar un poco la estética de la foto y la luz. Si quieres aprender, tengo un e-book genial que explica de manera súper sencilla cómo mejorar tus fotos de producto, incluso con una cámara compacta. 

    Fíjate en la diferencia que hay entre estas 2 plantillas. En la primera hay muchos colores, la letra de las entradas no es legible, la cabecera es tan grande que se come todo lo demás, el menú de pestañas está doble, los gadgets no están ordenados... para mi es una pipirrana que no hay por donde cogerla:

    diseño caótico
    Añadir leyenda

    Y ahora fíjate en la segunda imagen que te traigo. En esta la gama de colores es la misma y es que hay solo 3 colores principales: blanco y dos gamas de azul agua  (están basados en la cabecera del blog y en el fondo, que es de cuadros, imitando a un mantel de los de antes ya que se trata de un blog de cocina). La letra del texto de la entrada está en gris oscuro y con una letra sencilla (es la fuente verdana) que permite su lectura, los gadgets están ordenados... 

    diseño claro y bien organizado

    Esta plantilla es muy fácil de realizar y se puede conseguir sin tocar apenas el código .html. Y esta plantilla es la que te voy a enseñar a hacer con esta mini guía, aunque tú podrás hacer la que quieras .

    Y esto es todo por ahora; en siguientes entradas iré explicando cómo es la estructura de un blog, el diseñador de plantillas (super importante si quieres que tu blog sea bonito), herramientas útiles y gratis para el diseño y mantenimiento de un blog, cómo usar css para personalizar el blog... y alguna cosa más.