jueves, 21 de abril de 2011

Vagabundia

Vagabundia


Resumen de entradas con paginación usando JSON

Posted: 20 Apr 2011 08:33 PM PDT

Si bien es cierto que los feeds dan muchas posibilidades para leer los datos de nuestro blog usando JSON de manera relativamente simple, esto tiene dos limitaciones importantes, una objetiva y otra subjetiva. La primera es que no podemos leer TODO ya que siempre nos toparemos con que hay un máximo de 500 items; la segunda es que aún así, cargar cantidades importantes es impráctico porque el tiempo de ejecución se multiplica de manera significativa e incluso, hará que aparezcan ventanas de alerta en los navegadores si ese tiempo supera el tiempo máximo establecido por cada uno de ellos y se nos solicitará autorización para continuar o cancelar.

La combinación de ambas limitaciones es el motivo fundamental por la cual debemos usar valores pequeños; leer sólo una cantidad de entradas y mostrar eso pero claro, uno siempre quiere más; entonces se hace imprescindible que tengamos alguna clase de paginación o navegación que nos permita ir mostrando pedacitos de información e irlas cargando a medida que el usuario las solicita.

Acá es cuando podemos hacer uso del parámetro start-index que es el que nos permite solicitar datos a partir de determinada entrada; por ejemplo, esto cargaría las últimas 10 entradas:
http://miblog.blogspot.com/feeds/posts/default?start-index=1&max-results=10&orderby=published&alt=json-in-script&callback=mifuncion
y esto las siguientes diez:
http://miblog.blogspot.com/feeds/posts/default?start-index=11&max-results=10&orderby=published&alt=json-in-script&callback=mifuncion
y así, sucesivamente:
http://miblog.blogspot.com/feeds/posts/default?start-index=21&max-results=10&orderby=published&alt=json-in-script&callback=mifuncion http://miblog.blogspot.com/feeds/posts/default?start-index=31&max-results=10&orderby=published&alt=json-in-script&callback=mifuncion
Podría, entonces, combinarse eso con alguno de los tantos scripts que hay pero sería engorroso y además, terminaríamos llenando la memoria con tanta cosa que en algún momento colapsaría el navegador o se haría imposible de usar.

Muchos podrían decir que, sin embargo, hay decenas de sitios donde parece que esto de la paginaciòn funciona ya que podemos navegar por la información sin salir de la página, vemos alguna clase de imagen de carga y avanzamos o retrocedemos pero, ese tipo de sitios suele usar PHP o Ajax, dos cosas que en Blogger nos están vedadas así que hay que buscar una solución alternativa y una de ellas es utilizar la idea de cargar scripts de manera dinámica de tal forma que si eso lo combinamos con lo inverso y podemos remover el script, solucionaríamos el problema y podríamos cargar los datos, usarlos y deshacernos de ellos.

Entonces, vamos a tratar de usar eso para mostrar TODAS las entradas del blog en una misma página sin colapsarla, agregándole la posibilidad de navegar por ellas.


Paginar: he ahí el dilema y, como esto va a ser una mezcolanza de cosas, para poder hacer una buena paginación, lo que debemos hacer es usar algo que ya exista; en este caso, uno de los tantos scripts de PHP que hay pero traducido a JavaScript.

¿Cómo paginamos algo? Necesitamos tres datos: saber la cantidad total de entradas, determinar la cantidad de entradas por página que se mostrarán y saber en qué página estamos; lo primero es un dato que tiene el mismo feed así que podemos leerlo ya que hay muchos gadgets que muestran la cantidad de entradas publicadas:
postporpagina = 50; // es un dato que definimos nosotros cantidadposts = parseInt(json.feed.openSearch$totalResults.$t); // leemos la cantidad de entradas publicadas cantidadpaginas = parseInt(cantidadposts / postporpagina) + 1; // y calculamos la cantidad total de páginas
El script completo se puede ver en este archivo de texto pero, de todas maneras, acá van las explicaciones: Ver/Ocultar [+]
// estos son los datos que debemos establecer var postporpagina = 60; // la cantidad de entradas a mostrar por página var urlsitio = "http://miblog.blogspot.com"; // la url de nuestro blog var minpaginas = 5; // la cantidad mínima de páginas a mostrar var maxpaginas = 10; // la cantidad máxima de páginas a mostrar var imgxdefecto = "http://xxxxxxxxxxx"; // la dirección de la imagen por defecto a ser utilizada  var firsttime = 0; // lo usamos para detectar la primera vez que se ejecuta var paginaactual = 1; // contendrá el número de página donde estemos var cantidadpaginas = 0; // contendrá el número total de páginas var cantidadposts = 0; // contendrá el número total de entradas  // la función que interpreta los feeds y que siempre es más o menos la misma function showpageposts(json) {   var entry, posttitle, posturl, postimg;   var salida = "";    // la primera vez que se ejecuta la función, leemos la cantidad de entradas que hay y calculamos la cantidad de páginas   if(cantidadpaginas==0) {     cantidadposts = parseInt(json.feed.openSearch$totalResults.$t);     cantidadpaginas = parseInt(cantidadposts / postporpagina) + 1;   }    // leemos los datos que luego mostraremos   for (var i = 0; i < postporpagina; i++) {     if (i == json.feed.entry.length) { break; } // si no hay más, salimos     entry = json.feed.entry[i];      // el título de las entradas     posttitle = entry.title.$t;      // buscamos la url de las entradas     for (var k = 0; k < entry.link.length; k++) {       if (entry.link[k].rel == 'alternate') {         posturl = entry.link[k].href;         break;       }     }      // buscamos la imagen de las entradas o usamos la que establecimos por defecto     if ("media$thumbnail" in entry) {       postimg = entry.media$thumbnail.url;     } else {       postimg = imgxdefecto;     }      // armamos el código HTML de salida de manera similar a lo que se veía en una <a href="http://vagabundia.blogspot.com/2010/12/usar-json-para-mostrar-las-entradas-del.html" target="_blank">entrada anterior</a>     salida += "<div class='paginaposts'>";     salida += "<a href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>";     salida += "<h6><a href='" + posturl + "' target='_blank'>" + posttitle + "</a></h6>";     salida += "</div>";   }      // listo, ahora lo mostramos   document.getElementById("resultados").innerHTML = salida;    // y ejecutamos la función para paginar   paginacion(); }  // esta es la función que muestra la paginación function paginacion() {   contadorP = 0;   salida = "";    // dependiendo de donde estamos, ponemos un enlace para retroceder o no   if(paginaactual>1) {     salida += "<a class='antesdespues' href='javascript:incluirscript(" + parseInt(paginaactual-1) + ")'>anterior</a>";   } else {     salida += "<span class='deshabilitado'>anterior</span>";   }    // se calcula y se muestran los números de las primeras páginas, una sepación y las últimas páginas   if (cantidadpaginas<(maxpaginas+1)) {     for (contadorP = 1; contadorP <= cantidadpaginas; contadorP++){       if (contadorP==paginaactual) {         salida += "<span class='actual'>" + contadorP + "</span>";       } else {         salida += "<a href='javascript:incluirscript(" + contadorP + ")'>" + contadorP + "</a>";       }     }   } else if(cantidadpaginas>(maxpaginas-1)) {     if(paginaactual<minpaginas) {       for (contadorP=1; contadorP<(maxpaginas-2); contadorP++){        if (contadorP == paginaactual) {          salida += "<span class='actual'>" + contadorP + "</span>";        } else {          salida += "<a href='javascript:incluirscript(" + contadorP + ")'>" + contadorP + "</a>";        }      }      salida += " ... ";      salida += "<a href='javascript:incluirscript(" + parseInt(cantidadpaginas-1) + ")'>" + parseInt(cantidadpaginas-1) + "</a>";      salida += "<a href='javascript:incluirscript(" + cantidadpaginas + ")'>" + cantidadpaginas + "</a>";     } else if(cantidadpaginas-(minpaginas-1)>paginaactual&&paginaactual>(minpaginas-1)) {       salida += "<a href='javascript:incluirscript(1)'>1</a>";       salida += "<a href='javascript:incluirscript(2)'>2</a>";       salida += " ... ";       for (contadorP=paginaactual-2; contadorP<=paginaactual+2; contadorP++) {         if (contadorP==paginaactual) {           salida += "<span class='actual'>" + contadorP + "</span>";         } else {           salida += "<a href='javascript:incluirscript(" + contadorP + ")'>" + contadorP + "</a>";         }       }       salida += " ... ";       salida += "<a href='javascript:incluirscript(" + parseInt(cantidadpaginas-1) + ")'>" + parseInt(cantidadpaginas-1) + "</a>";       salida += "<a href='javascript:incluirscript(" + cantidadpaginas + ")'>" + cantidadpaginas + "</a>";     } else {       salida += "<a href='javascript:incluirscript(1)'>1</a>";       salida += "<a href='javascript:incluirscript(2)'>2</a>";       salida += " ... ";       for (contadorP=cantidadpaginas-(minpaginas+1); contadorP<=cantidadpaginas; contadorP++) {         if (contadorP==paginaactual) {           salida += "<span class='actual'>" + contadorP + "</span>";         } else {           salida += "<a href='javascript:incluirscript(" + contadorP + ")'>" + contadorP + "</a>";         }       }     }   }    // dependiendo de donde estamos, ponemos un enlace para avanzar o no   if (paginaactual<contadorP-1) {     salida += "<a class='antesdespues' href='javascript:incluirscript(" + parseInt(paginaactual+1) + ")'>siguiente</a>";   } else {     salida += "<span class='deshabilitado'>siguiente</span>";   }    // mostramos el resultado   document.getElementById("paginacion").innerHTML = salida;    // y eventualmente, podemos mostrar la cantidad total   var iniciopagina = (paginaactual * postporpagina) - (postporpagina - 1);   var finalpagina = paginaactual * postporpagina;   var totales = "Total de entradas publicadas: " + cantidadposts + " - Mostrando entradas " + iniciopagina + " a " + finalpagina;   document.getElementById("totales").innerHTML = totales; }  // esta es la función que escribe y ejecuta el script de manera dinámica function incluirscript(pagina) {    // salvo que sea la primera vez, antes, borramos el script   if(firsttime==1) {removerscript();}    // borramos todo y mostramos algún mensaje de carga   document.getElementById("resultados").innerHTML = "<div id='loadingscript'>cargando ...</div>";   document.getElementById("paginacion").innerHTML = "";   document.getElementById("totales").innerHTML = "";    // calculamos el valor a colocar en start-index   var iniciopagina = (pagina * postporpagina) - (postporpagina - 1);    // y armamos la url del feed   var archivo = urlsitio + "/feeds/posts/default?start-index=" + iniciopagina;   archivo += "&max-results=" + postporpagina;   archivo += "&orderby=published&alt=json-in-script&callback=showpageposts";    // cargamos y ejecutamos el script de manera dinámica   var nuevo = document.createElement('script');   nuevo.setAttribute('type', 'text/javascript');   nuevo.setAttribute('src', archivo);   nuevo.setAttribute('id', 'TEMPORAL');   document.getElementsByTagName('head')[0].appendChild(nuevo);    // establecemos los nuevos datos   firsttime = 1;   paginaactual = pagina; }  // esta es la función que elimina un script previamente agregado utilizando su ID function removerscript() {   var el = document.getElementById("TEMPORAL");   var padre = el.parentNode;   padre.removeChild(el); }  // ejecutamos la función por primera vez cuando se termina de cargar nuestro sitio onload=function() { incluirscript(1); }

Como todo script, lo colocamos entre etiquetas <script type='text/javascript'> </script> aunque imagino que lo ideal sería usar una página estática y, en ese caso si colocamos el script en la plantilla deberíamos condicionarlo o bien alojarlo en algún servidor externo como DropBox o similar.

Faltaría darle alguna clase de estilo y allí, las posibildiades son muchas; en este ejemplo, usé algo así: Ver/Ocultar [+]
<style>   #resultados { /* es el rectángulo del DIV donde se mostrarán */ }   #loadingscript { /* es el texto de "cargando" */ }    /* estas son las reglas de estilo para las entradas */   .paginaposts { /* cada rectángulo */     border: 1px solid #555;     float: left;     height: 35px;     margin: 1px;     padding: 5px;     width: 197px;   }   .paginaposts a { /* los enlaces */     color: #DDD;     display: block;     font-size: 11px;     text-decoration: none;   }   .paginaposts img { /* la imagen miniatura */     float: left;     height: 36px;     width: 36px;   }   .paginaposts h6 { /* el título de las entradas */     float: right;     height: 45px;     margin: 0;     width: 145px;   }   .paginaposts:hover { /* un efecto hover */     background-image: -moz-linear-gradient(100% 100% 90deg, #338, #33F);     background-image: -webkit-gradient(linear, left bottom, left top, from(#338), to(#33F));     filter:progid: DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#FF3333FF', EndColorStr='#FF333388');     border: 1px solid #33F;   }    /* estas son las reglas de estilo para la paginación inferior */   #paginacion { /* el rectángulo contenedor */     color: #BBB;     font-family: Lucida Grande;     font-size: 24px;     font-weight: bold;     height: 35px;     line-height: 28px;     padding: 20px 0;     text-align: center;   }   #paginacion span, #paginacion a { /* cada número, texto o enlace */     border: 1px solid #444;     color: #BBB;     display: inline-block;     font-family: Lucida Grande;     font-size: 24px;     font-weight: bold;     margin: 0 2px;     padding: 0 5px;     -moz-border-radius: 2px;     -webkit-border-radius: 2px;     border-radius: 2px;   }   #paginacion span.actual { /* resaltamos la página actual */     color: #FFF;     padding: 0 5px;     -moz-box-shadow: 0 0 30px #DDD inset;     -webkit-box-shadow: 0 0 30px #DDD inset;     box-shadow: 0 0 30px #DDD inset;   }   #paginacion a:hover { /* efecto hover sobre los enlaces */     color: #FFF;     -moz-box-shadow: 0 0 20px #666 inset;     -webkit-box-shadow: 0 0 20px #666 inset;     box-shadow: 0 0 20px #666 inset;   }   #paginacion .antesdespues { border: none; }   #paginacion .antesdespues:hover {     -moz-box-shadow: none;     -webkit-box-shadow: none;     box-shadow: none;   }   #paginacion span.deshabilitado { /* los enlaces deshabilitados */     border: none;     color: #666;   }    /* la salida de la cantidad total */   #totales {text-align:center;} </style>

Entonces, ya tenemos todo así que en este demo online lo que he creado es una página estática y allí he puesto lo siguiente:
<style> /* la reglas de estilo </style>  <!-- cargo el script --> <script src="URL_miscript.js"></script>  <!-- los divs contenedores -->  <!-- aquí se mostrarán los posts --> <div id="resultados"> </div>  <!-- elimino flotaciones --> <div style="clear:both;"> </div>  <!-- aquí se mostrará la paginación --> <div id="paginacion"> </div>  <!-- aquí se mostrará el texto con los totales  --> <div id="totales"> </div>

No hay comentarios:

Publicar un comentario

Correo Vaishnava

Archivo del blog