JMiur [E]

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.

27 comentarios:

Felipe  

Leeré el post con mas calma, usando una palabra de hace un par de días, ofusca a la primera por tan asombroso y magistral resultado. :D

Lo clave en este punto es saber sintaxis y cosicas varias de Javascript para generar el contenido que se quiera, y tener paciencia de santo para ir modificando el script a las necesidades personales.

Si tuviera un sombero me lo quitaría.
¡Felicitaciones por tan excelente post!

Responder
JMiur  

La verad, me resultó más curioso que útil porque, es verdad, si aquell oque se quiere hacer necesita códigos complejos, las cosas se complcian pero, si son simples: imágenes, videos, enlaces, ahí ya es bastante más fácil.

Responder
Felipe  

De acuerdo, aunque no creas, teniendo en cuenta que Javascript es el medio por excelencia para lograr cosas cheveres en Blogger se podran sacar buenas aplicaciones.
Lo que me causa curiosidad es la URL y su indexación, es decir, ¿con el tiempo es posible que aparezcan resultados de búsquedas en motores de búsqueda que apunten a URL dinámicas?
¿Se indexaría también el contenido creado para cada una de esas URL's?

Disculpa si la pregunta es tonta, pero me has dejado 'picado' e intrigado con todo esto. :D

Responder
Daniel Paredes  

Me parece una publicación excelente. La estudiaré, porque para mis pocos conocimientos, algunos puntos me resultan complejos, pero me atrevo a decir que has abierto un camino muy interesante, JMiur.
¡Mil gracias!

Responder
Lui'S Y  

Que BUENO, pero que BUENO..
Que arte..

Como dices bastante curioso Y ÚTIL.!!
Para hacer una galería de vídeos pienso que estaría ESTUPENDO por ejemplo..
aunque hay varias incógnitas, lo que menciona Felipe de la indexión entre varias mas que habrían que exprimir..

Congratulations y gracias,
por este aporte de lujo JMiur.
Lo otro es que debiste hacer 2 versiones esta y otra "para tontos" jeje porque los que no tenemos muuucha experiencia en esto, se nos complica la cosa >.<
Pero bueno, a probar y APRENDER se ha dicho!!

Responder
Karla  

JMiur, Felicidades por tu nuevo proyecto: "La Beatlemanía", a mi mamá le gusta mucho ese grupo, así que se le voy a recomendar :).

Saludos!

Responder
sølrαc  

Alucinante, nunca se me había ocurrido esto !!!

Responder
JMiur  

Felipe:
Las dudas están perfectas así que, en lugar de aclararlas, te doy mi opinión.

Google indexa las páginas dinámicas del mismo modo que hace con las estáticas; de hecho, un blog es una página dinámica. Aunque una página, no tenga una URL amigable, se indexa igual; el caso más familiar son los videos de YouTube.

Lo que no se indexará es el contenido si este es generado con JavaScript; no por ser páginas dinámicas sino porque los buscadores sólo leen textos y no leen JavaScript. Las páginas dinámicas "de verdad" por llamarlas de alguna manera, no son creadas con JavaScript sino con algún lenguaje que se ejecuta en el servidor (PHP, ASP, etc). En el caso de Blogger, todo eso es imposible y por lo tanto, se indexará la URL pero no su contenido.

Daniel Paredes:
Es interesante, no sé hasta donde pero, siempre me parece mejor saber que algo existe a no saberlo ¿Quién sabe cuándo uno puede aplicarlo? :D

Lui'S Y:
Sí. Yo pensé en eso mismo, en galerías de videos o cosas similares que sean simples y, para seguir con lo de la indexación, páginas cuyo contenido sea irrelevante ya que la URL se indexará pero su contenido no; mejor dicho, sólo se indexará el contenido escrito directamente con HTML.

Intenté que fuera simple pero, como es raro y un poco abstracto, se hace difícil :D

Gracias, Karla :D

¿Cómo esta Don sølrαc? ¿Es algo raro, verdad? Ojalá alguien le saque provecho.

Responder
Felipe  

Gracias por la aclaración JMiur, de todas maneras no deja de ser una alternativa muy interesante para explorar.

Se me ocurre que digamos para el caso de textos sencillos, digamos que para armar algo como un FAQ, se podría poner todas las preguntas en el contenido HTML de la entrada y segun la variable de la URL jugar con las propiedades de display para mostrar solo cierto contenido, y así se indexaría, aunque tampoco es practico, solo sería para quemar neuronas un rato. :D

Así entre ideas raras (muy raras) que se me ocurren ahora, también uno podría simular algo como un página de perfil de usuario si se hace login con un plugin de Facebok, de allí capturar el ID del usuario y crear con JS un enlace a una página estática dinámica que le mostrara su foto de perfil, su nombre, un plugin de recomendaciones personalizadas e incluso una ventana para que envie invitaciones a sus amigos a que se hagan fan de una página, algo así bien loco; o también hacer algo similar pidiendo un @ de Twitter.

Mientras tanto, iré por un cafecito. :D

Responder
JMiur  

Lo de las FAQ podrías ser, claro; lo mismo para galerías de algo, donde se ponen los títulos o miniaturas en la page y el objeto a mostrar en esas urls dinamicas. No sé, podría ser cualquier tipo de listado de algo que dirija a ampliaciones de esa lista.

Es para pensar.

Mientras tanto: para mi, con dos de azúcar, please :D

Responder
Ikanus  

Excelente Jmiur, ya sé que podría ser imposible ¿pero puedo usar dos variables en la URL dinámica? Es decir una variable para mostrar un vídeo y otra para el título de la página...
Gracias, me sirvió para crear una página para visualizar fotos.

Responder
JMiur  

Ikanus:
Sí. Pueden haber múltiples parámetros que luego deberán ser interpretados. Normalmente, se utiliza el carácter & para adosarlos:

http://miblog.blogspot.com/p/mipaginadinamica.html?var=1&otra=algo&mas=nada

Hitler Cárdenas Vela  

Amigo Jmiur podrias hacer un ejemplo o agregar a tu blog de ejemplo que pusiste, de lo que dice ikanus.. eres muy bueno .. si lo hicieras estaría totalmente agradecido

Responder
XOX  

Hola, necesito un poco de ayuda en este post, es que no me queda claro donde debo colocar los contenidos para cada una de las var, es decir en que parte del código va el contenido que se ve al hacer clic en 2, y al hacer clic en 3, y en 4, etc.?

Probé colocar varias div dentro de la id=contenido cada cual con su id=pd1, id=pd2, id=pd3, etc. pero no me funcionó, seguro que algo estoy haciendo mal.

Agradecería me puedas ayudar.

Responder
JMiur  

El contenido de las páginas se crean con JavaScript en función de esos datos que se trasfieren en la URL, por eso, la limitación.

Puede ser cualquier dato pero, si lo que se quiere es que el contenido sea sustancialmente distinto y no algo repetitivo, las cosas se complican mucho porque el HTML se arma dentro de la función misma.

Si ves el ejemplo del video es el más explicativo; allí se crear el HTML donde solo varia el ID del video; si quisiera poner un video en un tipo de página, un texto en otro y una imagen en un tercero, debería triplicar esa parte, escribir tres HTMLs distintos y ver de que manera muestro uno u otro.

Los DIVs de la página son siempre los mismos, sólo son el contenedor de eso que escribirá el script.

No sé si he aclarado algo o lo hice más confuso

Responder
Raúl  

Y ¿cómo sería para ver si la dirección URL termina en #uds-search-results? No soy muy bueno en esto, si pudiera ayudarme se lo agradecería mucho.

Responder
JMiur  

En términos generales, podrías probar con algo así:

var dondeEstamos = window.location.href;
var buscar = dondeEstamos.lastIndexOf("#uds-search-results");
if(buscar==-1) {
......... la URL NO contiene ese texto
} else {
......... la URL SI contiene ese texto
}

Responder
Más Paginas  

Buenas noches, se podrá hacer algo asi parecido a esto, pero con iframes? osea colocar, cierta pagina: web.blogspot.com/p/XXXXX=www.google.com.pe
y en un segmento de la pagina salga el iframe de al web puesta en la url?

Espero su respuesta, saludos.

JMiur  

Puedes colocar cualquier dirección url y lo que mostrará dependerá del script que crees; en el ejemplo es una etiqueta OBJECT pero podría ser una etiqueta IFRAME aunque, en ese caso, no sé que sentido tendría.

Responder
Bonzu Pipinpadaloxicopolis III  

Hola JMiur, no me funcionó el código del script que tienes aquí publicado, en realidad usé el del código fuente de tu ejemplo online, por cierto creo que el b:if está sin cerrar.

JMiur  

Es verdad, faltaba la etiqueta de cierrre; ya está agregada. De lo otro, no tengo idea, se supone que es una copia exacta pero, vaya uno a saber :D

Responder
Claro Real Plaza  

Buenas tardes, por favor podría hacer algo parecido a lo de youtube pero con iframes? He buscado por mucho tiempo algo como esto y realmente no sé donde encontrarlo, no sé mucho de html ni de java. Espero su ayuda. Saludos.

JMiur  

Depederá de lo que quieras hacer; si los datos son siempre similares, debe crearse un script que los use y arme la salida.

Responder
JOSER SANCHEZ VIELMA  

Hola, he podido observar tu blog y me ha generado una duda, yo estoy abriendo un nuevo blog, el cual quisiera incluirle algunas paginas (NOTICIAS, Entrevistas, Análisis/Opinión, etc), ahora bien, yo quisiera que una vez incluida la pagina NOTICIAS (por ejemplo), yo pueda agregar allí mismo una serie de noticias creadas o tomadas de otras paginas, pero no consigo como hacer eso, ya que no me lo permite; es decir, ingresar información a cada pagina, que el lector pueda buscar al ingresar a cada opción que se de en el menú que creé... mi blog es http://venevolutiva.blogspot.com/ agradezco de antemano tú ayuda. Saludos

JMiur  

Las páginas son estáticas, es decir, son únicas. En Blogger no puedes hacer algo así ya que se trata de un sistema de blogs. Lo máximo que podrías conseguir es añadir etiquetas en las entradas y colocar en ese menú, las direcciones a esas paginas de etiquetas pero, el home, mostrá siempre todas las entradas.

Responder
Association Sifon  

Hola,

podría utilizarse esta opción dejando fijos los materiales como videos, fotos, etc. y cambiar el texto?

Es decir, para poder tener una versión en español y otra en otro idioma?

Un abrazo

Daniel

JMiur  

Es imposible responder eso ya que lo que muestra la entrada es una técnica genérica y como el contenido es algo que debe ser agregado de manera manual, qué y como mostrarlo termina siendo infinito.

En principio, no lo veo posible salvo que ambas versiones (español y otro idioma) se encuentren en el mismo post y puedas permutar su visibilidad en función de algún parámetro.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR