Hola que tal? Bienvenidos a barruntos.net. Este blog simplemente es una recopilación de problemas o situaciones anómalas que van sucediendo en el día a día mío y de mi entorno. Soluciones para informática a bajo nivel. Puedes seguir nuestro facebook o twitter para obtener todas las novedades.

lunes, 28 de enero de 2019

Cómo tener una página estática de inicio en Blogger, y que funcione en móviles

No creo que sea necesario decir que Blogger es un servicio gratuito de Google para publicar y mantener un blog. Una de sus características es que ofrece la posibilidad de tener páginas estáticas, que no forman parte de ningún post. Ahí se puede poner, por ejemplo, una página de introducción al blog, una sobre el autor... en fin, lo que uno quiera. En ocasiones, surge la necesidad de que una de esas páginas sea la home page, es decir, la página de inicio. La que se muestra cuando uno entra sin especificar nada (sólo con el nombre de dominio). Blogger usa una home page consistente en el listado de los últimos posts, sin muchas opciones para cambiar ese comportamiento.




Buscando por la red, uno puede encontrar fácilmente cómo hacer que una de esas páginas estáticas sea la home page del blog. El método más popular (por su sencillez de concepto) es utilizar las opciones de redirección que ofrece Blogger. Básicamente consiste en «hacer trampa», y decirle a Blogger que redireccione «/» a la página deseada, y luego añadir un enlace para ir a la lista de entradas. No voy a explicar aquí cómo se hace, ya que se pueden encontrar fácilmente muchas páginas al respecto (por ejemplo Creating a Blogger Static Home Page, que creo que es la que lo mejor explica).

Pero este sistema tiene un serio problema: hace imposible acceder al blog desde determinados dispositivos móviles. Resulta que cuando el servidor de Blogger detecta que se está accediendo desde un dispositivo móvil, hace una redirección a la misma página, pero añadiendo como parámetro en la query string, m=1. Este parámetro es utilizado por el motor de plantillas, de forma que se puede decidir mostrar cosas diferentes dependiendo de si el usuario está accediendo con un ordenador o con un móvil. Esto parece una buena idea, pero tal y como está implementado, colisiona con la redirección que configuremos nosotros en el blog. El resultado es que cuando el usuario accede desde un dispositivo móvil (o al menos, desde algunos de ellos), Blogger le redirecciona a otra URL. Pero esa URL a su vez le redirecciona a la anterior, que a su vez vuelve a redireccionar a la siguiente... y así caemos en un bucle infinito. Afortunadamente, la mayoría de los navegadores son capaces de detectarlo, y en vez de ralentizarnos el terminal con una ejecución que no se acaba nunca, muestran un mensaje de error al usuario.

En los tiempos que corren, uno no puede permitir que su web no se vea bien en un móvil. No digamos ya, que no se vea en absoluto. Me topé con este problema al hacer la web promocional de la novela «El viaje del Argos: Las memorias de Klatuu», ya que quería que el blog fuera algo secundario, y la home page fuera una página fija con la presentación del libro. Así que tras darle unas vueltas a la cabeza y experimentar un poco, implementé una solución con JavaScript.

La solución más básica consiste simplemente en redireccionar mediante JavaScript a la página deseada, sólo cuando se está cargando la home que ofrece Blogger, es decir, cuando se accede a «/»:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
  <script>
    window.location="<data:blog.homepageUrl/>p/inicio.html"
  </script>
</b:if>

En este caso, la página a la que queremos redirigir es /p/inicio.html, y el bloque JavaScript sólo se envía al navegador, si la URL solicitada es la de la home (la de Blogger, no la nuestra). Hay que decir que el lenguaje que usa el motor de plantillas de Blogger, no está bien y completamente documentado en ningún sitio, y hay que recurrir a una mezcla de autoaprendizaje, búsqueda por la red, y ensayo y error (un buen punto de inicio es la ayuda de Blogger).

Fijaos que con este fragmento, redirigimos a nuestra página estática cada vez que alguien va a «/». Como en algún momento querremos mostrar la lista de entradas, necesitamos hacer algo más. Una solución es la que se ofrece habitualmente junto con la de la redirección de Blogger, que es poner un enlace a «/index.html», a «/search», o «trampas» similares. Pero como son características no documentadas, yo he preferido otra vía. Fijáos que la redirección sólo es necesaria cuando alguien entra desde otro sitio. Una vez el usuario está navegando dentro de nuestro blog, ya no es necesaria. Y eso podemos saberlo con la cabecera HTTP referer, que es accesible desde JavaScript:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
  <script>
    if (!(document.referrer && 
          document.referrer.indexOf("<data:blog.homepageUrl/>") >= 0)) {
      window.location="p/inicio.html"
    }
  </script>
</b:if>

Así, sólo se realiza la redirección cuando no aparece el dominio de nuestro blog en la cabecera referer (la etiqueta <data:blog.homepageUrl/> devuelve la home por defecto de Blogger, esto es, nuestro dominio seguido de «/»).

Todavía queda un detalle. Cuando estamos preparando una entrada en Blogger, y le damos al botón de vista previa, no se manda ninguna cabecera referer, y por algún detalle de implementación que desconozco, el motor de plantillas considera que se está accediendo a «/», por lo que en vez de ver la vista previa de nuestra entrada, veremos la página estática que hemos definido como punto de entrada. Para evitarlo, hay que añadir una condición adicional al if JavaScript, para que descarte que la página sea una vista previa:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
  <script>
    if(!(document.referrer && 
          document.referrer.indexOf("<data:blog.homepageUrl/>") >= 0) &&
          !(document.URL && document.URL.indexOf("post-preview")>= 0)) {
      window.location="p/inicio.html"
    }
  </script>
</b:if>

Finalmente, quiero recordaros que la plantilla de Blogger es un XML, por lo que para evitar problemas, debéis usar en el bloque JavaScript, las entidades XML correspondientes a los caracteres «&», «>», «<» y «"» (salvo en las etiquetas que queramos que el motor de plantillas evalue):

<b:if cond='data:blog.url == data:blog.homepageUrl'>
  <script>
    if(!(document.referrer &amp;&amp; 
          document.referrer.indexOf(&quot;<data:blog.homepageUrl/>&quot;) &gt;= 0) &amp;&amp;
          !(document.URL &amp;&amp; document.URL.indexOf(&quot;post-preview&quot;)&gt;= 0)) {
      window.location=&quot;p/inicio.html&quot;
    }
  </script>
</b:if>

Queda algo más críptico, pero leyendo con calma se entiende.

Si tenéis curiosidad por verlo en funcionamiento, podéis pasaros por la página que os he mencionado y navegar mientras observáis la bara de direcciones.

Related Posts Plugin for WordPress, Blogger...