La navegación en Blogger

Algunas aclaraciones a dudas que me han consultado por mail respecto de Mostrar los títulos en la barra de navegación.

¿Qué diferencia un blog de una página web "normal"? Muchas cosas pero, una de las que parece confundir más a la hora de modificarlo es la manera en que podemos navegar en él.

Cuando hacemos click en cualquiera de los enlaces internos de un blog, el navegador nos muestra una página y si utilizamos el menú Ver Código Fuente, veremos una serie de instrucciones HTML pero, si observamos con cuidado, notaremos que se parece algo al código de nuestra plantilla y, tal vez, reconozcamos un par de líneas pero, nada más, el resto ¿de dónde sale?

Eso que vemos y que termina siendo lo que los navegadores muestran es una mezcla de cosas: los datos de nuestra configuración + los datos de los elementos que hayamos agregado + los posts + los comentarios + la plantilla. Cada una de esas partes son independientes entre si y sólo se juntan cuando se genera la página. Eso es lo que se llama: una página dinámica.

Las páginas dinámicas son páginas HTML creadas a partir de lenguajes de programación ejecutados por un servidor web, en este caso, Blogger. Este código HTML se modifica o se adapta a las diferentes solicitudes de los usuarios y el resultado mostrará diferentes contenidos. Traducido al castellano, cuando hacemos click en los archivos del blog, Blogger crea una página, cuando hacemos click en las etiquetas crea otra, cuando hacemos click en la página principal otra, etc, etc, etc.

Un sitio web "normal" es un conjunto de páginas estáticas, cada una es un archivo que debemos modificar manualmente para enlazarlo con otros. Un blog es un conjunto de páginas dinámicas que se modifican cada vez que un usuario realiza alguna acción.

Cuando navegamos en un blog de Blogger hay cuatro posibilidades diferentes:

• estamos en la página principal
• estamos en una página individual (un post)
• estamos en una página de archivos (posts de cierta fecha)
• estamos en una página de etiquetas (posts relacionados)

Al final de cada una de ellas, por defecto, aparecen unos enlaces que nos permiten la navegación: ir hacia adelante, ir hacia atrás o ir al inicio ¿Adelante o atrás de que? pués en el orden cronológico porque un blog es básicamente eso, una serie de posts ordenados cronológicamente.

Cuando hacemos click en esos enlaces, Blogger nos mostrará otra página con las mismas características que la primera es decir, si estamos en un página individual nos mostrará otra página individual, si estamos en una página de etiquetas nos mostrará otra página de etiquetas.

El código standard de esa sección en el siguiente:

<b:includable id='nextprev'>

<div class='blog-pager' id='blog-pager'>

 si hay una página siguiente
 <b:if cond='data:newerPageUrl'>
   <span id='blog-pager-newer-link'>
     enlace a la página siguiente
     <a class='blog-pager-newer-link'
           expr:href='data:newerPageUrl'
           expr:title='data:newerPageTitle'>
       <data:newerPageTitle/>
     </a>
   </span>
 </b:if>

 si hay una página anterior
 <b:if cond='data:olderPageUrl'>
   <span id='blog-pager-older-link'>
     enlace a la página anterior
     <a class='blog-pager-older-link'
           expr:href='data:olderPageUrl'
           expr:title='data:olderPageTitle'>
       <data:olderPageTitle/>
     </a>
   </span>
 </b:if>

 y el enlace a la página principal
 <b:if cond='data:blog.homepageUrl != data:blog.url'>
   <a class='home-link' expr:href='data:blog.homepageUrl'>
     <data:homeMsg/>
   </a>
 <b:else/>
   <b:if cond='data:newerPageUrl'>
      <a class='home-link' expr:href='data:blog.homepageUrl'>
        <data:homeMsg/>
     </a>
   </b:if>
 </b:if>

</div>
<div class='clear'/>
</b:includable>

donde:

<data:newerPageUrl/> es la dirección hacia adelante
<data:newerPageTitle/> es el texto "Entradas más recientes" y que muchas veces cambiamos por una imagen
<data:olderPageUrl/> es la dirección hacia atrás
<data:olderPageTitle/> es el texto "Entradas antiguas" o una imagen
<data:blog.homepageUrl/> es la dirección del la página principal
<data:homeMsg/> es el texto "Página principal" o una imagen

También hay una serie de propiedades por defecto que colocan un enlace a la derecha, otro a la izquierda y otro en el centro:

#blog-pager-newer-link {float: left;}
#blog-pager-older-link {float: right;}
#blog-pager {text-align: center;}

Tanto data:newerPageUrl como data:olderPageUrl son direcciones URL que calcula Blogger y cuyo formato varía de acuerdo al tipo de navegación que estemos haciendo.

En la página principal será algo así:
http://nombreBlog.blogspot.com/search?updated-max=fechaThora&max-results=cantidad

En una página individual:
http://nombreBlog.blogspot.com/año/mes/tituloPost.html

En una página de categorías:
http://nombreBlog.blogspot.com/search/label/etiqueta?updated-max=fechaThora&max-results=cantidad

En una página de archivos:
http://nombreBlog.blogspot.com/fecha_archive.html

A los efectos prácticos, podemos decir que hay sólo dos modelos de páginas, las de post individuales y todas las otras. Esto es así ya que sólo hay una forma de indicarle a Blogger en que tipo de páginas mostrar ciertas cosas, utilizando los llamados códigos condicionales:

<b:if cond='data:blog.pageType == "item"'>
 esto sólo se ejecuta en una página individual
</b:if>

<b:if cond='data:blog.pageType != "item"'>
 esto se ejecuta cuando NO es una página individual
</b:if>

Son instrucciones como esas las que hacen que las páginas generadas sean diferentes y, en realidad, casi no hay restricciones al respecto y podrían utilizarse más ampliamente. Por ejemplo, podría haber headers diferentes o mostrar u ocultar la sidebar completa.