BLOGGER: ¿Cómo se interpreta una plantilla en la vista de diseño?

¡Hola de nuevo internauta!,

       En la entrada de hoy explicaremos cómo entiende Blogger una plantilla y su representación en la vista diseño y equivalencia en HTML. Veremos para que son las section, los widgets y algunos conceptos básicos.

¡Así que sin más, al meollo del asunto!.

1. Blogger habla Blogger

Pues muchas gracias por el título, muy sugerente, ¿y con esto quieres decir...?. Bueno, bueno, ahora vamos a eso.

Quiero empezar con en este punto porque cuando vamos a desarrollar o modificar una plantilla de Blogger nos podemos encontrar conque hay código que no tiene nada que ver con el HTML de toda la vida. A modo resumen, decir que Blogger usa unas etiquetas especiales para designar ciertas partes de las plantillas, y que posteriormente las "traduce" a HTML para que pueda visualizarse en el navegador correspondiente. En esta entrada veremos las etiquetas básicas para desarrollar una plantilla y en las futuras entradas iremos viendo las restantes.

2. Interpretación de una plantilla

En la entrada anterior vimos lo que es una plantilla y su funcionalidad. Así que nos centraremos en cómo se interpreta una plantilla y para ello lo mejor es que lo veamos con un ejemplo.

Click sobre la imagen para ampliar

Aunque no se vea bien en la imagen (pinchar en ella para ampliarla) vemos lo siguiente:

• La etiqueta <b:skin> es la que usa Blogger para indicar el código CSS. También puede referenciarse un archivo externo mediante la etiqueta <link>.
• Blogger crea una etiqueta <div> general para envolver al resto de la estructura del blog. En el ejemplo de la imagen equivale a main-wrapper.
• Dentro de cada elemento div "wrapper" Blogger usa la estructura <b:section> para crear secciones. Estos elementos section se usan para contener a los widgets. Obviamente este tipo de estructura no tiene porque usarse dentro de un div, puede usarse de manera independiente. Aunque en el ejemplo dado dichas section están dentro de elementos div, no tiene porque ser así, pero es una buena práctica para tenerlo todo agrupado y aplicar código CSS que sólo queramos que afecten a esa parte del blog.
• Dentro de cada elemento section existe un elemento <b:widget> que permite añadir la funcionalidad a la plantilla como puede ser ver los post (entradas) o un menú de etiquetas. Este tipo de elemento sólo puede declararse dentro de una estructura section.

¿Pero qué es una etiqueta div?, para los profanos en esto del HTML una etiqueta o elemento div es aquel que se usa para contener otros elementos HTML cómo imágenes, texto u otros elementos div. Hay que tener en cuenta que antes se usaba para dividir toda la estructura de la página web pero con el HTML5 sólo se usan cuando otras estructuras semánticas de HTML5 no son apropiadas como, por ejemplo, <section>

Aviso a navegantes: He intentado usar las estructuras semánticas HTML5 en Blogger y al visualizar la estructura de la plantilla en la vista de diseño, no me aparece nada. Obviamente el navegador sí que lo muestra correctamente. No sé si ha alguien más le ha pasado.

A continuación explicaremos lo que es un elemento <b:section> y <b:widget>.

3. Etiquetas <b:/section> y <b:widget>

¿Pero que son realmente los <b:section> y <b:widget> y cuál es su cometido?. Cómo indicamos en el primer punto de esta entrada, Blogger habla Blogger, y por eso usa su propia semántica para crear las plantillas.

Etiqueta section

Esta etiqueta delimita las áreas de la página cómo puede ser la barra lateral, el pié de página o el cuerpo donde aparecen las entradas (o posts). Cada plantilla ya nos viene con sus section creadas pero también podemos añadirlas a mano con el código correspondiente. Su estructura es la siguiente:

<b:section id='header'  class='header' maxwidgets='1' showaddelement='no'>
</b:section>

Una etiqueta section puede tener los siguientes atributos:

• id: (obligatorio) Es un nombre para identificar a la etiqueta, ha de ser único y puede contener letras y números. Tiene que ser un nombre descriptivo como por ejemplo,  header para cabecera.
• class: (opcional) Si usas este atributo y no tienes experiencia te recomiendo que uses los que ofrece Blogger para ayudarle a interpretar el estilo que quieres darle. Le indica a Blogger que estilo de la clase CSS indicada aplicar. Blogger tiene los siguientes: 


• navbar: Para la barra de navegación de Blogger (la que tiene su logotipo).
• header: Para aquellas secciones donde quieras aplicar el estilo de la cabecera del blog.
• main: Es el estilo que da Blogger a la sección de los post por lo que te recomiendo que lo uses sólo para ello.
• sidebar: Para aquellas secciones donde se quiera a plicar el estilo de barra lateral.
• footer: Blogger lo uso para la sección del pié del blog por lo que te recominedo que lo uses sólo para ello.


• maxwidgets: (opcional) Número de widgets máximos permitidos en la sección. Si no indicamos nada el número no tendrá límite.
• showaddelement: Indica si la opción "Añadir un Gadget" de la página aparecerá o no en la sección. Sus valores pueden ser 'yes'(predeterminado) o 'no'.
• growth: (opcional) Indica como se ordenan los widgets entre si. Sus valores pueden ser 'vertical' (predeterminada) u 'horizontal'.

Una sección sólo puede contener widgets pero nunca otra etiqueta section o código.

Etiqueta widget

Un widget es un pequeño programa que dota de cierta funcionalidad a la etiqueta <b:section> para proveer información visual, como un calendario o un "menú" de etiquetas, con el que puede interactuar el usuario de nuestro blog. Para usar un widget desde Blogger podemos:

1. Añadirlo desde la vista diseño desde la opción "Añadir Widget".









2. Llamarlo desde el código cuya estructura es:

<b:widget id='Header1' locked='true' title='De Manzanas e Ideas (cabecera)' type='Header' >
</b:widget>

• id: (obligatorio) Es el nombre que se usa para identificar al widget, ha de ser único y contener números y letras, pero no cualquier combinación, su nombre tiene que ser igual al tipo de widget seguido de un número. Fijémonos en la estructura anterior, el valor type es Header y por ello el id es Header1.
• type: (obligatorio) Es el tipo de widget que vamos a usar. En Blogger existen varios tipos válidos de los que destacamos:


• BlogArchive: Aparece como "Archivos del blog" y ofrece ordenados por fechas las distintas entradas del Blog.
• Blog: Aparece como "Entradas del blog" y se encarga de mostrar en la página las distintas entradas publicadas.
• Feed: Permite añadir un Feed o suscripción al Blog mediante RSS o Atom.
• Header: Aparece como "Configurara cabecera" y se encarga, como es obvio, de la cabecera del blog.
• HTML: Aparece como "HTML/Text" y permite añadir código HTML de terceros o propio en el Blog.
• SingleImage: Aparece como "Imagen" y permite añadir una imagen al Blog.
• LinkList: Aparece como "Lista de enlaces" y permite mostrar enlaces que tu quieras compartir, como por ejemplo, algún sitio web que te guste.
• Logo: Aparece como "Logotipo" y añade el logo de Blogger a tu Blog.
• NavBar: Es el famoso Navicon de Blogger. Aunque no se puede eliminar mediante plantilla sí que puede hacerse a mano pero esto siempre da algún problema de incompatibilidad con otras cosas, así que lo mejor es ocultarlo mediante CSS si no quieres que se muestre en tu blog.
• VideoBar: Aparece como "Barra de vídeo" y permite enlazar con vídeos de YouTube.


• locked: (opcional) Permite eliminar o mover el widget de la section correspondiente. Su valor puede ser 'yes' o 'no' (predeterminado).
• title: (opcional) El título que mostrará el widget al ser añadido en la plantilla. Si no tiene valor se mostrará el valor del id del widget.
• pagetype: (opcional) Indica el tipo de página donde se mostrará el widget. Como tipo de página debemos entender  Posee los siguientes valores:


• all (predeterminado): En cualquier tipo de página.
• archive: En aquellas donde se listan las entradas.
• main: En la parte principal del post.
• item: En una entrada individual.


• mobile: (opcional) Indica si el widget se mostrará en Google para móviles. Es el servicio que ofrece Google para enviar mensajes al Blog mediante el móvil.

Algunos widgets/gadgets

Aviso a navegantes: Los valores descritos en type son los que nos ofrece Blogger, o dicho de otra manera, "los oficiales", lo cual no quiere decir que sean los únicos que existan ya que hay muchos widgets de terceros por Internet. También has

Blogger por defecto nos añadirá el código que le da funcionalidad al widget para ello tenemos que guardar los cambios y cambiar de vista en el menú principal. Al volver veremos los elementos <b:includables> cuya funcionalidad veremos en la siguiente entrada. Un widget siempre ha de contener un elemento includable con un id con valor main.

Cuando Blogger crea la estructura para que la interprete el navegador tanto los elementos <b:section> como <b:widget> los modifica a elementos div con un id (nombre identificador) igual al id de dicho elemento section o widget.

Y hasta aquí la entrada de hoy!. Espero que os haya gustado y aclarado algo más sobre las plantillas. En las próximas entradas ya destriparemos las plantillas más a fondo y veremos el código que usa Blogger para "programarlas".

¡Gracias por leerme!.