Si entramos a Blogger desde
Blogger in draft y hacemos
click en
Diseño, veremos que se ha agregado una pestaña llamada
Diseñador de Plantillas. Esta nueva opción nos abre un editor visual donde podemos seleccionar algunas de las plantillas agregadas al servicio ... oh sí, luego de tres años, Blogger ha agregado nuevas plantillas.
Hay cuatro modelos básicos (Simple, Picture Window, Aweasome Inc y Watermark y cada uno de ellos tiene sus propias variantes lo que hace un total de quince alternativas.
Dependiendo del modelo, desde la misma ventana, podemos cambiar los fondos, subiendo una imagen o seleccionando colores de modo individual o general.
A la izquierda, el enlace Diseño permite cambiar la distribución de los distintos elementos seleccionando algunos de los esquemas predefinidos o de modo tradicional, arrastrádolos en la parte inferior. Allí, no pueden agregarse, eliminarse o editarse los elementos, para eso, deberemos ir a Elementos de la página
.
El modo
Avanzado funciona de manera similar a lo que ahora podemos hacer desde
Fuentes y Coleres; cambiar las fuentes de los textos, los colores, los enlaces, etc pero, han agregado varias opciones extras que no existían, tales como definir los efectos
hover para los enlaces, propeidades específicas para
gadgets e imágenes e incluso, hay un sector especial que permite
agregar definiciones de CSS directamente desde allí. Esos cambios, luego aparecerán en el código de la plantilla.
En todos los casos, podemos ir mirando los cambios con la Vista Previa aunque determinados gadgtes no se mostrarán de manera exacta. Una vez que hayamos terminado, hacemos click en el botón Aplicar al Blog para guardar los cambios.
Blogger sugiere que los diseñadores de plantillas difundan sus diseños via Twitter utilizando el hashtag #newbloggertemplate y prometen agregar más modelos en los próximos días. También advierten que a estas nuevas opciones no podrá accederse desde Internet Explorer 6.
Por lo que he visto, los cambios no sólo son estéticos; hay cambios en el código mismo de las plantillas y ahí es donde debemos tener cuidado.
El primero que se ve es un cambio en el DOCTYPE; hasta ahora, las plantillas tenían esta etiqueta:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
y ahora, tienen esta otra:
<!DOCTYPE html PUBLIC "null" "null">
Las plantillas, eran
estrictas, requerían que se utilzara cierta sintaxis; por ejemplo, debíamos evitar el uso de ciertos caracteres como
< > & y reemplazarlos por sus equivalentes
< > & lo que hacía bastante engorroso escribir ciertas cosas, sobre todo, si había comillas. Al dejar de ser definidas como estrictas, esas reglas ya no valen y podríamos escribir algo así, sin que se muestre un error:
<script>
var cualquiera = "<p>HOLA</p>";
</script>
Pero, ese cambio también tiene consecuencias extras en la parte gráfica; ciertos márgenes y paddings establecidos por defecto ya no se aplicarán así que, si bien podemos cambiar el DOCTYPE de nuestro blog y la etiqueta HTML que define las nuevas funcionalidades en una plantilla "normal", habrá que hacerlo con prudencia y verificar si no son necesarios otras modificaciones. Sugiero que eso se haga siempre en un blog de pruebas para evitar dolores de cabeza o suicidios virtuales.
Dentro de <b:skin> tambien veremos cambios. Primero que nada, una etiqueta que parece un contenedor que agrupa las definiciones de estilo seleccionadas en el nuevo editor:
<Group description="Links" selector=".main-outer">
.......
</Group>
Por supuesto, al haber nuevas posibilidades, se agregan nuevos nombres de variables que podemos utilzar o no: $body.font, $widget.title.font, etc.
Luego, aparece una nueva etiqueta <b:template-skin> </b:template-skin> que aparenta agrupar las definiciones de estilo que controlan los anchos de los conenedores principales. Por ejemplo:
<b:variable default='930px' name='content.width' type='length'/>
body { min-width: $(content.width); }¿Por qué separado del resto? No lo sé.
El header de los blogs es igual que antes pero, ahora, está dentro de otra etiqueta especial: <header> </header>
Más etiquetas raras que habrá que investigar: aside, macro ... debe haber más pero ya me perdí.
, basta entrar el sitio y subir la imagen desde nuestra PC; luego, elegimos entre los diferentes marcos disponible y vamos viendo el resultado de manera muy rápida.
