Devitácora

Hace poco me encontré en la situación de que las secciones (b:section) que solo deseaba mostrar en determimadas páginas del blog, no aparecían en la página de Diseño de Blogger, complicándome la tarea de agregar nuevos elementos (widgets). Para aclarar el asunto, consideremos lo siguiente:

<b:if cond='data:blog.canonicalUrl == data:blog.canonicalHomepageUrl + "/p/example.html"'>
  <b:section id='section-1' showaddelement='yes' />
</b:if>

Si llevamos ese código a nuestra plantilla de prueba y disponemos de una página con nombre example, veremos que la nueva sección no aparecerá cuando estemos en modo Diseño; no es que no se haya creado, simplemente que solo la veremos en la página que indicamos. Al principio no daba con una solución práctica, lo que me llevó, en un intento desesperado, a revolver el código de las nuevas plantillas en busca de una ayuda divina, puesto que si hay nuevos temas, hay una nueva familia de etiquetas; fue ahí en donde la etiqueta informativa data:view.isLayoutMode hizo su aparición, la cual devolverá true (verdadero) cuando se esté editando el blog en la página de los elementos:

<b:if cond='data:view.isLayoutMode or data:blog.canonicalUrl == data:blog.canonicalHomepageUrl + "/p/example.html"'>
  <b:section id='section-1' showaddelement='yes' />
</b:if>

Los iconos SVG están desplazando a los iconos tradicionales (imágenes en mapa de bits: PNG, GIF, etc.) en los proyectos web, ya que son livianos, pueden adoptar cualquier tamaño sin distorsionarse, no es necesario alojarlos, entre otros aspectos; sin embargo, cuando decidimos embarcarnos en el bote de la modernidad, nos topamos con algo desconocido que ni se puede subir a este servicio. ¿Cómo emplearlos y no morir embrollados en el intento? Basta con solo descargarlo, abrir el documento en un editor de texto (como el Bloc de notas de Windows) y llevarnos el código que contiene, el cual, en su forma básica, vendría siendo similar al siguiente:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 112.196 112.196" width="32" height="32">
  <circle style="fill:#3B5998;" cx="56.098" cy="56.098" r="56.098" />
  <path style="fill:#FFFFFF;" d="M70.201,58.294h-10.01v36.672H45.025V58.294h-7.213V45.406h7.213v-8.34c0-5.964,2.833-15.303,15.301-15.303L71.56,21.81v12.51h-8.151c-1.337,0-3.217,0.668-3.217,3.513v7.585h11.334L70.201,58.294z" />
</svg>

Si nos llevamos el código anterior a nuestra plantilla, como resultado veremos un bonito icono de Facebook de 32×32 píxeles. El tamaño del icono se define con los ya familiares atributos width, para el ancho, y height, para el alto. Usualmente, esos dos valores están ausentes en los SVG que descargamos, por lo que veremos el icono en su tamaño original si nos olvidamos de ese detalle. Con esto dicho, ya puedes hacer uso de ellos.