Creando URLs dinámicas en Blogger

Para quien tiene un blog en Blogger, las URLs generadas por el sistema son de poca importancia ya que no las controlamos más allá del título que tenga una entrada.

http://vagabundia.blogspot.com/2011/03/se-viene-un-nuevo-blogger.html

Aunque a veces,el resultado parece algo confuso porque ciertas búsquedas nos muestran una URL de este tipo:

http://vagabundia.blogspot.com/2011/03/se-viene-un-nuevo-blogger.html#uds-search-results

Cualquiera de ambas muestra lo mismo así que vaya uno a saber el uso interno que le da Blogger a eso sin embargo, pensando en que, al parecer, el sistema ignora esa parte se me ocurría que tal vez podría utilizarse eso para generar páginas estáticas dinámicas de alguna clase.

¿Que es una página dinámica? En realidad un blog es un conjunto de páginas dinámicas ya que no existe una archivo físico real de cada entrada de nuestro sitio sino que este se va armando con pedacitos de información guardada en una base de datos y el resultado final se muestra de alguna manera, tal como lo hemos decidido en eso que llamamos plantilla.

Entonces. más que páginas dinámicas debería decir URLs dinámicas que son esas en donde lo que se mostrará depende de ciertos datos enviados. Probablemente, sin darnos cuenta, accedemos a cientos de ese tipo de direcciones; por ejemplo:

http://www.youtube.com/watch?v=8wHG8U0fa1Q
http://www.google.com/?q=URL#sclient=psy&hl=es&q=URL&btnG=Buscar+con+Google

Lo dinámico es todo aquello que está después del signo ? y cada dato transferido tiene un nombre, un signo = y un valor cualquiera; lo más común es algo así:

http://misitio.com/mipagina.php?id=1234
http://misitio.com/mipagina.php?id=1234&cat=56

Eso es algo que se puede hacer con ciertos lenguajes avanzados como php, asp, cfm, etc que le indican al servidor que procesa los datos, que arme una página, siempre la misma, pero con contenido variable; si el id es 1234 me mostrará tal cosa y si es 7982 se mostrará otra.

Eso es un blog. Así funciona aunque no sea evidente para nosotros y la URL se "disfrace" un poco haciendola más "amigable".

La idea entonces es hacer lo mismo con el único lenguaje posible que acepta Blogger y que es JavaScript; de esa forma, como la cantidad de páginas estáticas está limitada a 10 como máximo, si lo que necesito es tener más y el contenido será más o menos "repetitivo", podría tener una única página, con un esquema modelo y usar "URLs dinámicas" para mostrar contenidos diferentes:

http://miblog.blogspot.com/p/mipaginadinamica.html
http://miblog.blogspot.com/p/mipaginadinamica.html?var=1
http://miblog.blogspot.com/p/mipaginadinamica.html?var=2
http://miblog.blogspot.com/p/mipaginadinamica.html?var=3

Veamos cómo se podría hacer esto y luego veremos para qué podría usarse ... cosa que aún estoy pensando ...

Necesito un script que coloco antes de </head> que esté condicionado para que sólo se ejecute en las páginas estáticas:

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<script>
//<![CDATA[

function crearpaginadinamica() {
  // leo la dirección URL de la página
  var dondeEstamos  = window.location.href.replace(/&/g, '&');
  // en esa dirección, busco ese valor que en este caso llamé var
  var buscarVAR=dondeEstamos.lastIndexOf('?var=');

  // si no existe, simplemente termino y Blogger mostrará la página estática normal
  if(buscarVAR==-1) { return; }

  // si existe, extraigo el dato enviado que es en este caso, es un número
  var num = 0;
  num  = parseInt(dondeEstamos.substring(buscarVAR+5));
  // sumo cinco porque ?var= tiene cinco caracteres y leo lo que está después del signo =

  // en mi ejemplo, voy a ocultar el contenido por defecto
  document.getElementById("contenidoxdefault").style.display="none";

  var salida = "";

  // como cualquiera podría escribir cualquier número no contemplado, verifico que yo haya creado un contenido y en este caso son siete variantes
  if(num<1||num>7) {

    // el número es erróneo ya que no está entre el 1 y el 7 así que muestro ese error
    salida += "<img src="http://ipsumimage.appspot.com/600x350?s=40&l=no%7Cexiste&b=000000&f=ffffff" />";
  
} else {
    
// todo está OK así que armo mi página y aquí es donde las variaciones son infinitas y dependerá de lo que quiera hacer
    // en este ejemplo, se muestra una imagen y se arma la página con ciertos colores

    // una lista de siete colores
    bgcolores=new Array("EA6464","9080AD","896F6B","A59654","8EA2AD","98AF5D","5DAF89");

    // muestro una imagen
    salida += "<img src="http://ipsumimage.appspot.com/600x350?s=200&l=%22%20+%20String%28num%29%20+%20%22&b=%22+%20bgcolores[num-1]%20+%20%22&f=ffffff" />";

    // cambio los colores de ciertas propiedades
    var colorbase = "#" + bgcolores[num-1];
    document.getElementById("titulo").style.color = colorbase;
    document.getElementById("pd"+String(num)).style.borderColor = colorbase;
    document.getElementById("pd"+String(num)).style.color = colorbase;
    document.getElementById("pd"+String(num)).style.boxShadow = "0 0 5px " + colorbase + " inset";
  }

  // por último, escribo el contenido y lo muestro
  document.getElementById("contenido").innerHTML = salida;
  document.getElementById("contenido").style.display="block";
}

//]]>
</script>
</b:if>

Aunque sólo es una demostración la página estática dice esto:

<div id="dinamica">

  <!-- EL TITULO -->
  <h5 id="titulo">ejemplo de página dinámica</h5>

  <!-- LO QUE SE VE POR DEFECTO -->
  <div id="contenidoxdefault" style="display:block;">
    <img src="http://ipsumimage.appspot.com/600x350?s=40&amp;l=pagina|normal&amp;b=000000&amp;f=ffffff">
  </div>

  <div id="contenido" style="display:none;">
    <!-- AQUI SE MOSTRARA EL CONTENIDO VARIABLE -->
  </div>

  <!-- LANAVEGACION INFERIOR -->
  <div id="nav">
    <h6>probar otra</h6>
    <ul>
      <li><a id="pd1" href='/p/dinamica.html?var=1' >1</a></li>
      <li><a id="pd2" href='/p/dinamica.html?var=2' >2</a></li>
      <li><a id="pd3" href='/p/dinamica.html?var=3' >3</a></li>
      <li><a id="pd4" href='/p/dinamica.html?var=4' >4</a></li>
      <li><a id="pd5" href='/p/dinamica.html?var=5' >5</a></li>
      <li><a id="pd6" href='/p/dinamica.html?var=6' >6</a></li>
      <li><a id="pd7" href='/p/dinamica.html?var=7' >7</a></li>
    </ul>
  </div>
</div>

<!-- Y EJECUTO LA FUNCION -->
<script>crearpaginadinamica();</script>

Y el resultado es esto que está agregado a un blog cualquiera.

Cualquier variante es posible de armar cambaindo eso que uno quiere mostrar; por ejemplo, si fueran videos de YouTube podría enviar como dato su ID que siempre es un texto de 11 caracteres:

<li><a href='/p/youtube.html?id=xFa2_PVMeDQ'> video 1 </a></li>
<li><a href='/p/youtube.html?id=Xjf1GP76KIo'> video 2 </a></li>

El script es similar, fundamentalmente, cambio eso que se mostrará:

function crearpaginadinamica() {
  var dondeEstamos  = window.location.href.replace(/&/g, '&');
  var buscarID=dondeEstamos.lastIndexOf('?id=');
  if(buscarID==-1) { return; }
  var ytid;
  ytid  = dondeEstamos.substring(buscarID+4);
  document.getElementById("contenidoxdefault").style.display="none";
  var salida = "";
  salida += "<div style='text-align: center;'>";
  salida += "<object width='600' height='380' type='application/x-shockwave-flash' data='http://www.youtube.com/v/" + ytid + "&hl=es&fs=1&rel=0&autoplay=1&showsearch=0&showinfo=0'>";
  salida += "<param name='movie' value='http://www.youtube.com/v/" + ytid + "&hl=es&fs=1&rel=0&autoplay=1&showsearch=0&showinfo=0' />";
  salida += "<param name='wmode' value='transparent'/><param name='allowfullscreen' value='true'/><param name='allowScriptAccess' value='always' /></object></div>";
  document.getElementById("contenido").innerHTML = salida;
  document.getElementById("contenido").style.display="block";
}

Que es lo que puede verse en este demo donde, incluso, pueden agregarse botones para compartir en cualquier red social ya que la direcciones URL generadas son reales y únicas por lo que pueden ser indexadas como cualquier otra.