Esto es un borrador del intento de aprender como funciona esta historia de las plantillas de blogger.
PRELIMINARES.
En la parametrización de un blog, tenemos una serie de parámetros para configurar nuestro 'blog', pero el 'alma' del blog está sobretodo en la pestaña plantilla.
-Elementos de la página
Aqui podemos añadir lo que llaman 'elementos' a una especie de estructura básica de la página del blog: Cabecera,Nabvar,pie,columna derecha, columna izquierda, Entradas del blog....
Secciones Son las partes de la estructura de la página, cabecera, pie,cuerpo,columnas,navbar....
Elementos,widgets,artilugios: Son cosas que podemos añadir y quitar de las secciones. Estos elementos son por ejemplo: entradas al blog, imágenes, conjuntos de links, listas,adsense.......
Estos elementos son editables y tienen parámetros que podemos cambiar.
Esta herramienta, no es la mejor del mundo, pero sirve de mucha ayuda a los diseñadores y usuarios del blog.
Nota: Algunos elementos no nos permiten quitarlos como por ejemplo: el navbar, la cabecera y las entradas al blog. Y las secciones parece que no se pueden ni añadir ni quitar.
-Edición de HTML.
Con esta utilidad, podemos cambiar el contenido de fichero xml donde se guarda una información que blogger leerá para crear el contenido.
En este fichero, se combinan etiquetas html con etiquetas 'blogger' para crear el contenido de la página.
Hechando un vistazo a este fichero, vemos que es básicamente un html puro, con alguna cosa 'extraña'.
Vamos a ver un momento el body extraido de una plantilla.(No pinchar el cuadrito de expandir artilugios(widgets))
<body>
<div id='outer-wrapper'>
<b:section class='header' id='header' maxwidgets='1'>
<b:widget id='Header1' locked='true' title='aprendo-css (cabecera)' type='Header'/>
</b:section>
<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>
</b:section>
</div>
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Label1' locked='false' title='Capitulos' type='Label'/>
</b:section>
</div>
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>
</div>
</body>
Vemos una fuerte relación entre lo que vemos en "Elementos de la página" y lo que vemos aquí. Sin embargo, tiene por lo menos para mí muchos misterios que intentaré resolver.
Vamos a presuponer por sencillez, (luego miraremos como quitarnos las limitaciones que esto supone), que cada sección de la plantilla es una parte de "Elementos de la página" donde podemos añadir widgets(artilugios).
Si pinchamos Expandir Artilugios, en la plantilla, nos aparece mas mezcla de codigo html y código blogger.Vamos a intentar desentrañar los misterios.
---------------------------------------------------------------------------------------------
GENERALIDADES DE LA PLANTILLA.
Por plantilla, entenderemos el código xml que nos aparece en la opción Edición del HTML con la opción de expandir artilugios activada.
Esta plantilla, la lee bloguer para generar el html que nos permite ver el 'blog', y por lo tanto modificando esta plantilla podemos cambiar el aspecto de nuestro blog.
Nos vamos a dedicar casi exclusivamente al 'codigo blogger' del 'body' que aparece en la plantilla que es el que nos permite acceder a los datos del contenido del blog, luego, rodeandolo de html y los css, podemos confeccionar el aspecto que queremos que tenga el blog.
-------------------------------------------------------------
BODY y SECCIONES :
La información sobre las secciones y el código 'blogger' en general, se obtiene del link mas información en la herramienta 'edicion de html' de blogger.
Hasta ahora sabemos que el body de la plantilla, se compone de codigo html y secciones mezcladas:
body
.........................................
...........codigo html.............
........................................
...........secciones blogger.....
........................................
/body
El código html debería ser tan solo div y span.
Las secciones blogger son las que vamos a estudiar ahora.
----------------------------------------------------------------
SECCIONES
Ejempos:
ATRIBUTOS:
Un código
- id - (obligatorio) un nombre exclusivo, que consta únicamente de letras y números.
- class - (opcional) Este atributo tiene que ver con la herramienta 'elementos de página', los nombres que se deben de poner para que se asocien al formato de página son : "navbar", "header", "main", "sidebar" y "footer." Si cambias las plantillas más adelante, estos nombres ayudarán a Blogger a determinar la mejor forma de transferir el contenido(Herramienta de elementos de pagina). Sin embargo, se pueden utilizar otros nombres .
- maxwidgets - (opcional) el número máximo de artilugios que se pueden permitir en esta sección. Si no se especifica límite, significa que no existe.
- showaddelement - (opcional) puede ser "yes" o "no", donde "yes" es la opción predeterminada. Determina si la pestaña(herramienta) "Elementos de página" mostrará el vínculo "Añadir un elemento de página" en esta sección.
- growth - (opcional) puede ser "horizontal" o "vertical", donde "vertical" es la opción predeterminada. Establece si los artilugios(widgets) de esta sección se ordenan uno al lado de otro o uno encima del otro.
Al generar el html, blogger creara un div id='identidad' con la identidad que hemos dado a la sección.
------------------------------------------------------------------
WIDGETS(ARTILUGIOS).
La finalidad de los widgets, es básicamente darnos información de los datos de nuestro blog.
Cada widget, nos prooveera con la información para la que fue diseñado. Estos datos los veremos mas tarde.
Ejemplos:
<b:widget id="header" type="'HeaderView'" locked="yes">
</b:widget>
<b:widget id="myList" type="'ListView'" locked="no" title="My Favorite Things">
</b:widget>
Atributos:
Un artilugio consta de los siguientes atributos:
- id - (obligatorio) consta únicamente de letras y números, y cada uno de los ID de la plantilla deben ser exclusivos.En la herramienta 'elementos de página), El ID de un artilugio sólo se puede modificar eliminando el artilugio en cuestión y creando uno nuevo.
- type - (obligatorio) indica el tipo de artilugio, el cual debe ser uno de los tipos válidos de la lista que se especifica más abajo.
- locked - (opcional) puede ser "yes" o "no", donde "no" es la opción predeterminada. Un artilugio con este atributo no se puede mover ni suprimir de la pestaña "Elementos de página".
- title - (opcional) el título que se muestra del artilugio. Si no se especifica ninguno, se empleará un título predeterminado, como "List1".
- pageType - (opcional) puede ser "all", "archive", "main" o "item", donde "all" es la opción predeterminada. El artilugio se mostrará únicamente en las páginas del blog que se hayan establecido para ello. (Todos los artilugios se muestran en la pestaña "Elementos de página", independientemente de su atributo pageType). Esto, ya veremos lo que quiere decir.
Los tipos de artilugio que puedes especificar son:
- BlogArchive
- Blog
- Feed
- Header
- HTML
- SingleImage
- LinkList
- List
- Logo
- BlogProfile
- Navbar
- VideoBar
- NewsBar
El formato de una sección es pues muy sencillo:
b:section......
b:widget...
/b:widget
...........
b:widget
/b:widget
/b:section
Contenido de la etiqueta b:widget :
......
--------------------------------------------------------------------------------
INCLUDABLES
Inclusiones
El contenido de un artilugio se encuentra en las secciones "includable" (es decir, con posibilidad de inclusión), que presentan el siguiente formato:
Ejemplo:
<b:includable id='main' var='thiswidget'> [inserta aquí el contenido]</b:includable>
Los atributos son los siguientes:
- id: (obligatorio) un número de identificación compuesto de letras y números.
- var: (opcional) un número de identificación compuesto de letras y números que sirve para hacer referencia a la información en esta sección (ya veremos que quiere decir esto).
Es obligatorio que un includable de un widget tenga id='main',
¿Que hace blogger con los includables?.
Simplemente inserta en el html el contenido de widget que tenga la id='main'.
¿Que pasa con los includables de un widget que tenga id!='main'?
Simplemente, en el includable con id='main' deberá haber una linea que haga referencia a este includable de esta manera:
b:include name='[aquí la id del includable]' />¿Que contenido tiene un includable?
Un includable puede contener html y los codigos blogger que vemos a continuación.
-----
------------------------------------------------------------------------------
INCLUDES.
Los atributos del código b:include son los siguientes:
- name: (obligatorio) un número de identificación compuesto de letras y números. Debe coincidir con el ID de un código
b:includableque exista en el mismo artilugio. - data: (opcional) una expresión o fragmento de información que permite pasar a la sección "includable", y que se convertirá en el valor del atributo
varde dicha sección.(ya veremos que quiere decir esto)
-------------------------------------
DATOS
La lista de datos de los widgets está aqui
Se haccede a ellos con este formato:
b:data.name
b:data.name1.name2
si name1 es un conjunto de datos, se accede a ellos con el "."
-----------------------------------------
mi primer codigo ensayado
<!--aquiiiiii mi codigo-->
<p>Mira las etiquetaaaaaaas</p>
<b:loop values="'data:post.labels'" var="'eti'">
<p> <data:eti.name></data:eti.name></p>
</b:loop>
<p>Fin de las etiqueeeeeeeetas</p>
