18.9.14

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.

Actualización: La web oficial de mi novela se encuentra ahora alojada de Github, pero he mantenido la versión de Blogger para que podáis seguir viendo esta técnica.

10 comentarios:

  1. Hola!
    He encontrado una pega a tu solución, al menos en mi móvil. Si le das a Novedades, que es la página principal, te reenvía a "El libro". Así que en la versión móvil no se puede entrar en "Novedades". Si le das solución te lo agradecería, porque yo de programar ni idea, y si estoy buscando una solución a esto...
    Gracias!

    ResponderEliminar
    Respuestas
    1. ¿Qué móvil y navegador usas? A mí sí me funciona (Sony Xperia + Crome)

      Eliminar
    2. Pues justo me he cambiado de móvil y sí que funciona con Huawei P8 lite y crome. Tenía antes uno de marca Vodafone (no sé el modelo) y lo hice con el navegador que venía en el móvil (no era Crome). Tendré que volverlo a mirar para ver exactamente cómo era el fallo, probar con Chorme y decirte, porque igual me colé.
      Comentarte, que se me olvidó en su momento, que de todas las soluciones que he leído por ahí, me parece la mejor, y mira que se ha escrito al respecto! Se nota que no la has cogido de por ahí y que te la has currado. Gracias!!!

      Eliminar
    3. Posiblemente el problema era que ese navegador en concreto (o esa versión de ese navegador) no envía nunca la cabecera HTTP "referer", que es lo que hace que el JavaScript distinga entre el "aterrizaje" en la página, o el navegar dentro de ella. Si no se envía la cabecera, siempre se producirá la redirección.

      Eliminar
    4. Yo acabo de entrar con con el Safari de mi iPhone 6 y no he tenido ningún problema, espero saber aplicarlo al blog en el que trabajo ando verde en estos temas pero me gusta tu solución por tener en cuenta los dispositivos móviles ya que hoy en día son fundamentales. Gracias por el post!

      Eliminar
  2. Al principio dudé de donde meter este codigo, pero probé en Body y funcionó a la primera. Mil gracias!

    ResponderEliminar
  3. En que parte de la plantilla se tendría que pegar el Código ?

    ResponderEliminar
    Respuestas
    1. En cualquier sitio dentro del "head". Yo, en el blog de Las memorias de Klatuu, lo tengo justo bajo la línea "<head>", que está casi al principio.

      Eliminar
  4. Excelente! ya lo probé y si funciona, gracias!. Observando la plantilla que tienes del Libro (Memorias de Klatuu), me parece muy chévere..., pregunto; la adpataste y modificaste de una de las plantillas básicas de blogger?.... Por qué no te lanzas con un post explicando como la adaptaste?

    ResponderEliminar
    Respuestas
    1. La plantilla la hice de cero. Primero me hice un diseño con HTML y CSS puro y duro, y luego le fuí añadiendo los artefactos de Blogger para convertirlo en una plantilla de Blogger.

      Eliminar