Destripando la planilla (4)

Durante varios días me dediqué a destripar la plantilla de Blogger Beta para divertirme y, de paso, tratar de entenderla. El resultado lo resumí en tres partes:

Destripando la planilla (1ª parte)
Destripando la planilla (2ª parte)
Destripando la planilla (3ª parte)

La base de la plantilla es "Blogger Theme Beckett : Source: Typepad : Modified by: www.VirtuPlus.com", requiere de varias imágenes, dos hojas de estilo y además, contiene una serie de modificaciones personales.

Lo primero que se debe tener en cuenta es que la sintaxis del código es extremadamente estricto, no se admiten etiquetas que no tengan su correspondiente cierre.

Por ejemplo:
<img ......>
<br>
son inaceptables y debe utilizarse:
<img ...... />
<br />

Las plantillas admiten la edición incluso dentro de las widgets y el código modificado manualmente es respetado cuando se editan los elementos en la solapa Template (Layouts) Elements, sin embargo, si se inserta un nuevo elemento, este no contendrá las modificaciones.

Para evitar escribir el código una y otra vez, es conveniente utilizar las definiciones de estilo de la plantilla y preservar, hasta donde sea posible los nombres de los atributos CLASS e ID.

Hay que recordar que b:section y b:widget serán reemplazados por una etiqueta <DIV>

<b:section class='sidebar' id='sidebar' preferred='yes'>
será convertido en:
<div class='sidebar section' id='sidebar'>
y
<b:widget id='HTML1' locked='false' title='' type='HTML'>
será convertido en:
<div class='widget HTML' id='HTML1'>

El mayor problema se presenta cuando se quiere establecer el estilo de algunas widgets que contienen atributos CLASS o ID genéricos, por ejemplo:

id='main'
class='title'
class='widget-content'

son definiciones comunes. Esto hace imposible identificar una en particular a menos que se utilice el identificador del widget que, como es creado en forma dinámica, puede llevar a confusiones y problemas. Supongamos que se tiene una declaración así:

.Image1 {border: 2px solid #FFFFFF;}

si insertamos un elemento PICTURE a la plantilla, se generará este código:

<b:widget id='Image1' locked='false' title='Primera' type='Image'/>

y el resultado será una imagen con un marco blanco, pero si insertamos un segundo elemento PICTURE, se generará este código:

<b:widget id='Image2' locked='false' title='Segunda' type='Image'/>

y la imagen no tendrá borde. Así, a medida que agregamos y quitamos elementos del mismo tipo, las ID de estos irán cambiando por lo que será imposible tener una referencia a cada uno de ellos.

Sin embargo, algunas widgets son únicas (no pueden agregarse más), por lo tanto, los atributos ID pueden usarse para declarar estilos sin inconvenientes. Estos elementos únicos son: HEADER, PROFILE, POSTS (BLOG), ARCHIVES y LABELS.

Por otro lado, el elemento PICTURE no parece ser muy interesante ya que carece de flexibilidad, y los elementos LIST y TEXT son redundantes y por lo tanto, inútiles.

Los elementos LINKLIST pueden ser personalizados mediante definiciones de estilo:

.sidebar cualquier_etiqueta {.......}

aunque todas tendrán el mismo formato.

Por último, creo que el elemento HTML/JAVASCRIPT es el más flexible ya que permite ingresar cualquier código, tanto HTML como JavaScript. Su mayor dificultad es la limitadísima capacidad del editor.

Por supuesto, es más que recomendable que se GUARDE la plantilla ANTES de hacer cualquier modificación. Blogger Beta permite bajarla a la PC en formato XML y, si es necesario, volverla a cargar. Además, siempre es posible descartar el uso de las nuevas plantillas y volver a usar los modelos viejos.