Entender las plantilas

Esto es una imagen básica de una plantilla mínima.

Imagina que a una hoja en blanco, (body), le pegas una cartulina amarilla, (contenedor general).

Luego, encima de esa cartulina, pegas trocitos de papel de colores, verde clarito para la cabecera, (header), rojo para la zona de las entradas, (main), azul para la columna lateral, (sidebar) y verde oscuro abajo para el pie del blog (footer).

Pero como el blog no puedes hacerlo pegando papelitos, se han de escribir unos códigos para que los navegadores, cuando quieres ver uno de ellos, sepan qué han de mostrarte.

Lo primero que leen es el código HTML y te van mostrando lo que ven, en el orden exacto en que está escrito, de tal forma que si el código correspondiente a la cabecera estuviera al final del código, la cabecera se vería allí, en lugar de arriba de todo.

En éste código HTML a cada zona se le asigna un nombre propio, la id y si va a contener cosas se le añade la palabra contenedor.

Estos códigos empiezan siempre con esta "frase" <div id='el nombre asignado'> y acaban con esta: </div> (usaré la palabra "frase" para que entiendas que hablo de cada línea o conjunto de códigos que va entre < y >

Si dentro de un contenedor va a haber algo, se le añade una frase, que identifique una sección, entre las anteriores.

Así, bajo la frase que identifica al contenedor de la sidebar, <div id='sidebar-wrapper'> está la que identifica la sección, <b: section class='sidebar' id='sidebar' preferred='yes' />

Fíjate que en este caso se repite la palabra sidebar.

Esta frase viene a decir que es una sección, de la clase sidebar, que se llama sidebar y que se podrán añadir elementos.

Además, al no llevar div delante, mientras no haya nada en la sidebar, se cierra la frase al final con esa barra inclinada.

¿Porqué se pone dos veces la palabra sidebar?

Porqué puedes tener muchas columnas de estas en el mismo blog y si a todas les asignas el mismo nombre de sección, todas tendrán las mismas características específicas, como el tipo de letra que mostrarán, en el mismo color, etc.

Pero si quieres poner una segunda columna, a la frase que has escribir para que los navegadores sepan que han de mostrarla, le has de poner una id diferente, pues cada zona del blog ha de tener su propia identidad.

Si, además, añades un gadget a esa sidebar y miras el código, verás tres cosas:

1ª.- La frase anterior ha variado ligeramente. Se ha borrado esa barra inclinada.

2ª.- Ha aparecido una nueva frase, bajo esa de b seccion sidebar, que pone: <b widget seguido de su id, de un locked='false' que indica que no está anclado en su lugar sinó que se permite que se mueva de sitio arrastrando el gadget, del título, si se lo has puesto y del tipo de gadget que has añadido, todo ello en una misma frase, con un espacio entre cada dato, (tal='pascual'), y la barra inclinada que cierra la frase.

3ª.- Bajo esta frase ha aparecido un </b:section> que cierra el código de la sección.

Esta última frase aparece al añadir un gadget, porqué dicha sección incluye algo, por lo tanto la frase inicial ya no puede cerrarse sola, pues ha de englobar lo que haya incluido.

Para que todos los navegadores sepan exactamente qué han de mostrarte, esos códigos HTML se refuerzan con datos de estilo, de que color es cada cosa, que fuente usas para escribir, cuanto mide cada zona, en que posición exacta está en el plano y unos cuantos datos más que se los explicamos a través del CSS.

En el código, el CSS lo encontramos encima del HTML.

Allí cada grupo de órdenes que corresponden a una misma cosa, ya sea un contenedor, un elemento, o la fecha de las entradas, se escriben entre esas llaves: { }

Primero se escribe a que zona, objeto o "cosa" pertenecerán estas órdenes.

Si corresponden a un contenedor, se escriben empezando por la almohadilla # si es una sección se escriben empezando por un punto .

Y entre las dos llaves, le puedes decir si quieres que tenga fondo, o borde, el margen que ha de tener respecto al resto del blog, la distancia del contenido al margen exterior del continente, etc.

Por otro lado, blogger permite que cambies los colores, las fuentes y las medidas de las fuentes, de muchos sitios del blog, a través de su herramienta Fuentes y Colores.

Estos cambios podemos hacerlos, sin tocar el código del blog, gracias a las Variables.

Pero éste es un tema muy complejo, que trataré en otra entrada.

Notas finales de esta entrada:

1.-Cuando abres un blog y seleccionas una plantilla, blogger ya te da algunos gadgets colocados previamente. Si quisieras ver la frase que te colocado como muestra, de la sidebar, tendrías que quitar todos los gadgets, de lo contrario ya la verás con algunos b:widget colocados.

2.- Como digo al principio, este tema lo he tratado basándome en la plantilla mínima. En otros modelos de plantillas de blogger, pueden variar ligeramente, así, por ejemplo, la dots no tiene zona de cabecera, en esta plantilla la cabecera es un simple gadget añadido en la sidebar.

Otras subdividen el contenedor principal en varias zonas para poder añadir las imágenes que se ven en el fondo de la zona útil, como la scribe, que lo divide en 3 partes. Otras, como la snapshot o las que tienen un número, subdividen la cabecera en varias partes para poder montar los dibujos que hay en ellas, pero la base es parecida en todas.

EDITADO: 15 de enero de 2010.

Si mis explicaciones no te han dejado demasiado claro este tema, te recomiendo que le eches un vistazo a las 3 entradas del blog de Pizcos que ha titulado: Imagina que tu plantilla es la casa que vas a construir.

En ellas explica de una forma muy divertida, pero también muy clara, la base de una plantilla.

Si pinchas en el enlace irás a la primera de las tres.

Las otras dos, por si no encuentras el enlace allí son éstas: 2ª parte y 3ª parte.