Lenguaje 'Blogger'. Más expresiones para la colección. | Oloblogger Para montar una web en cualquiera de sus modalidades (blogs, por ejemplo) hay que echar mano de algú...

26 de junio de 2015

Lenguaje 'Blogger'. Más expresiones para la colección.

Para montar una web en cualquiera de sus modalidades (blogs, por ejemplo) hay que echar mano de algún lenguaje de programación que nos permita estructurar su contenido y mostrarlo de una determinada manera cuando el usuario accede a sus páginas. Entre los los más socorridos están HTML, Javascript y PHP, así como CSS para la presentación o formato.

Blogger no es una excepción y usa los dos primeros... o bueno, quizás sí que es una excepción porque su HTML es algo peculiar.

A los que estáis familiarizados con las tripas de las plantillas os sonarán cosas como b:include, b:loop, b:if y otros similares, que en realidad son expresiones que no pertenecen a ningún lenguaje común, sino al que sólo habla Blogger y que es un dialecto propio derivado de HTML.

Hace tiempo pensaba que era un fastidio esto de que no fuera un lenguaje estándar, pero lo cierto es que con el tiempo me he dado cuenta de que sus aportaciones idiomáticas, bien entendidas, sirven para hacer una serie de cosas que de otra manera serían más complicadas y en algunos casos imposible.


Básicamente, las instrucciones propias del lenguaje Blogger se distinguen por llevar los prefijos b:, data: y expr:. Las primeras sirven para crear rutinas (b:include), bucles (b:loop) o condiciones (b:if), las data: sirven para manejar variables y las últimas (expr:) nos permiten combinar datos usando los oportunos operadores.


Explicado brevemente este asunto a modo de introducción justificativa, la novedad de hoy (de ayer para ser exactos) es que se han incorporado al universo Google algunas expresiones nuevas especialmente prácticas.


b:switch


Ahora podréis usar una utilidad común en otros lenguajes como b:switch, que es una especie de condición múltiple dónde en función del valor que tome una variable, se ejecutará un código u otro. Esto será útil cuando tengamos muchos casos distintos para derivar el flujo de programación y así evitar un montón de anidamientos que por ejemplo sí tendríamos que hacer con b:if.

<b:switch var='data:blog.pageType'>
 <b:case value="index" />
   <h2><data:post.title></h2>
 <b:case value="archive" />
   <h3><data:post.title></h3>
 <b:case value="static_page" />
   <h1><data:post.title></h1>
 <b:case value="item" />
   <h1><data:post.title></h1>
 <b:default />
   <h3><data:post.title></h3>
</b:switch>
En este ejemplo b:switch analiza el valor de data:blog.pageType para ver en qué tipo de página nos encontramos y según el resultado, nos insertará el título del post con un encabezamiento H de mayor o menor importancia.


b:eval

En combinación con expr: nos permite evaluar expresiones más complejas que incluyan algo más que una simple variable data:.

<b:eval expr="data:post.labels[0].url" />
El anterior código daría como salida la dirección de la primera etiqueta del post.

<b:eval expr='data:post.allowComments ? "Comenta" : "Comentarios inhabilitados" />
Este otro nos mostraría el mensaje "Comenta" si los comentarios están habilitados y "Comentarios inhabilitados" en caso contrario.


b:with

Sirve para definir variables propias -temporales- para incluir contenido complejo. Esas variables podremos reutilizarlas para evitar largas expresiones inline. Su contenido sólo estará disponible dentro del b:with, o sea, hasta que se cierre esa etiqueta.

<b:with var='nombrevariable' value='"background-image: url(\"" + data:sourceUrl "\");" + " width: " + data:width + "px; " '>
   <div id="header-inner" expr:style=’data:nombrevariable’>
     <h1>Mi blog</h1>
   </div>
</b:with>
Guardamos en nombrevariable una línea CSS que a su vez es fruto de concatenar un par de variables data: y luego la utilizamos para dar estilo a la caja con id header-inner.

Parece lo contrario, pero no paran estos de Blogger ;)

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

8 comentarios :

  1. Justo cuando comenzaba a sentir que a Blogger lo estaban dejando morir en el olvido.

    ResponderEliminar
    Respuestas
    1. Yo nunca he tenido esa sensación Erwin, pero sí que otros han intentado que la tuviera ;)

      Eliminar
  2. Yo diría que es más una variante de XML, como el propio html, mezclado con éste último en las plantillas. Por eso, las partes escritas en blogger desaparecen una vez se genera el código fuente en el navegador, quedando sólo el html y el Javascript que pueda haber.

    Como dice Erwin Andrés, parecía que tenían Blogger abandonado, pero no, es más bien todo lo contrario.

    ResponderEliminar
    Respuestas
    1. No tengo ni idea Jose XD
      Pero seguramente es lo que dices ;)

      Y sobre lo último sigo pensando lo mismo: Blogger no tiene interés comercial para nadie salvo para Google, así que para el resto del mundo son un grano en el culo... o algo así

      Eliminar
  3. ¡Qué sorpresa!. Precisamente leía su informe oficial...Ya le hacia falta una actualización a ese blog.

    ResponderEliminar
  4. Hola oloman, (disculpa que me salga del tema) amigo te escribo para ver si me puedes ayudar con un ploblema en mi blog.

    Pasa que quiero ponerles unas dimenciones diferentes a unas imagenes para varios dispositivos, una para pc, una para movil y otra para tables.
    haora bien, el problema es que la imagenes son sprites css, y se me hace dificil.


    no se si con sprites se pueda hacer esto.
    espero y me puedas ayudar, espero tu respuesta amigo, y gracias de ante mano, saludos.

    ResponderEliminar
    Respuestas
    1. Hola Kervin. Si los sprites los usas como fondo (background), ahora mismo no se me ocurre ninguna solución.

      Eliminar
  5. Querido switch te echaba de menos. Ya era hora. Tanto If y ame daba dolores de cabeza

    ResponderEliminar