jueves, 28 de abril de 2011

Vagabundia

Vagabundia


Navegando entradas de una etiqueta usando JSON

Posted: 27 Apr 2011 09:23 PM PDT

Sigamos mezclando cosas.

A partir de la navegación por entradas usando JSON, otra posibilidad es hacer algo similar con las etiquetas pero, usando algún otro dato que también nos dan los feeds y el resultado, será algo parecido a esta entrada pero, agregándole la posibilidad de avanzar y retroceder en la lista sin necesidad de salir de la página, cargándolas de manera dinámica.

Esta vez, en lugar de contar las entradas y paginarlas, vamos a usar el dato de página anterior y página siguiente que puede ser leido en el feed ya que las páginas son enlaces que tienen un atributo rel específico pero, hay varios enlaces generales así que las buscamos de esta manera:
var urlanterior = ""; var urlsiguiente = "";  for (var k = 0; k < json.feed.link.length; k++) {   if (json.feed.link[k].rel == 'previous') {     // si existe, guardamos la dirección a la página anterior     urlanterior = json.feed.link[k].href;   }   if (json.feed.link[k].rel == 'next') {     // si existe, guardamos la dirección a la página siguiente     urlsiguiente = json.feed.link[k].href;   } }
El problema con esas direcciones es que son raras; no sé por que. Por ejemplo, dicen esto:

http://www.blogger.com/feeds/33571139/posts/default/-/iconos/-/iconos?alt=json-in-script&start-index=6&max-results=5&orderby=published

así que usaremos JavaScript para modificarla un poco eliminando una parte y que se adapte al formato que uno conoce.

Entonces, como en todos los casos anteriores, primero el JavaScript que ponemos antes de </head>:
<script type='text/javascript'> //<![CDATA[ ... aquí ponemos el contenido del script //]]> </script>
o bien cargamos desde un archivo externo:
<script type='text/javascript' src='URL_archivo.js' />
El script puede ser descargado desde este archivo de texto y allí, cada uno deberá hacer algunos pequeños cambios para agregar los datos personales:

// estos son los datos que deben definirse var entradasporpagina = 5; // establecer la cantidad de entradas a mostrar var urlsitio = "http://miblog.blogspot.com"; // cambiar por el nombre del sitio var imgxdefecto = "http://xxxxxxxxxxx"; // establecer la dirección de la imagen por defecto a ser utilizada var cualetiqueta = "nombreetiqueta"; // definir la etiqueta a mostrar  var flagfirst = 0; var cantidadposts = 0; var urlanterior, urlsiguiente;  // esta es la función genérica que elimina las etiqueas y crea el resumen function eliminartags(cual,longitud){   var resumen = cual.split("<");   for(var i=0;i<resumen.length;i++){     if(resumen[i].indexOf(">")!=-1){       resumen[i] = resumen[i].substring(resumen[i].indexOf(">")+1,resumen[i].length);     }   }   resumen =  resumen.join("");   resumen = resumen.substring(0,longitud-1);   return resumen; }  // esta es la misma función de siempres con algunas variantes function showpageetiquetas(json) {   var entry, posttitle, posturl, postimg, postcontent;   var salida = "";    // vamos a buscar las direcciones para navegar la lista   for (var k = 0; k < json.feed.link.length; k++) {     if (json.feed.link[k].rel == 'previous') {       // esta es la página anterior       urlanterior = json.feed.link[k].href;     }     if (json.feed.link[k].rel == 'next') {       // esta es la página siguiente       urlsiguiente = json.feed.link[k].href;     }   }    // leemos tantas entradas como definimos   for (var i = 0; i < entradasporpagina; i++) {      // si no hay más, terminamos el bucle     if (i == json.feed.entry.length) { break; }      entry = json.feed.entry[i];      // este es título de cada entrada     posttitle = entry.title.$t;      // buscamos la URL de la entrada     for (var k = 0; k < entry.link.length; k++) {       if (entry.link[k].rel == 'alternate') {         // la guardamos         posturl = entry.link[k].href;         break;       }     }      // buscamos el contendio de la entrada y lo guardamos     if ("content" in entry) {       postcontent = entry.content.$t;     } else if ("summary" in entry) {       postcontent = entry.summary.$t;     } else {       postcontent = "";     }      // buscamos la imagen o usamos una imagen por defecto     if ("media$thumbnail" in entry) {       postimg = entry.media$thumbnail.url;     } else {       postimg = imgxdefecto;     }      // terminada la lectura, vamos creando el código HTML     salida += "<div class='paginaetiquetas'>";     salida += "<a href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>";     salida += "<h6><a href='" + posturl + "' target='_blank'>" + posttitle + "</a></h6>";     salida += "<p>" + eliminartags(postcontent,100) + " ...</p>";     salida += "</div>";   }    // terminamos el bucle y escribimos el resultado que son las entradas encontradas   document.getElementById("misetiquetas").innerHTML = salida;    // vamos a crear la parte inferior con la navegación   salida = "";    // si hay una página anterior, ponemos el elnace y sino, sólo un texto   if(urlanterior) {     salida += "<a href='javascript:navpaginaetiquetas(-1);' class='anterior'>anterior</a>";   } else {     salida += "<span class='deshabilitado anterior'>anterior</span>";   }    // si hay una página siguiente, ponemos el elnace y sino, sólo un texto   if(urlsiguiente) {     salida += "<a href='javascript:navpaginaetiquetas(1);' class='siguiente'>siguiente</a>";   } else {     salida += "<span class='deshabilitado siguiente'>siguiente</span>";   }     // le agregamos un enlace a la primera página   salida += "<a href='javascript:navpaginaetiquetas(0);' class='inicio'>inicio</a>";    // escribimos el código   document.getElementById("navegadionetiquetas").innerHTML = salida; }  // esta es la funcion que creará la dirección del feed que vamos a leer function navpaginaetiquetas(direccion){   var p, parametros;   if(direccion==-1) {     // página anterior     p = urlanterior.indexOf("?");     parametros = urlanterior.substring(p);   } else if (direccion==1) {     // página siguiente     p = urlsiguiente.indexOf("?");     parametros = urlsiguiente.substring(p);   } else {     // página inicial     parametros = "?start-index=1&max-results=" + entradasporpagina + "&orderby=published&alt=json-in-script"   }   parametros += "&callback=showpageetiquetas";      incluirscript(parametros); }  // esta es la funcion que carga el script de manera dinámica function incluirscript(parametros) {   // si no es la primera vez, borramos el script anterior   if(flagfirst==1) {removerscript();}   // borramos todo y ponemos un texto o una imagen de carga   document.getElementById("misetiquetas").innerHTML = "<div id='loadingscript'></div>";   document.getElementById("navegadionetiquetas").innerHTML = "";   // este es el archivo con los feeds   var archivofeeds = urlsitio + "/feeds/posts/default/-/" + cualetiqueta + parametros;   // lo cargamos y ejecutamos   var nuevo = document.createElement('script');   nuevo.setAttribute('type', 'text/javascript');   nuevo.setAttribute('src', archivofeeds);   nuevo.setAttribute('id', 'OTROTEMPORAL');   document.getElementsByTagName('head')[0].appendChild(nuevo);   flagfirst = 1; }  // esta es la función que remueve el script cargado previamente function removerscript() {   var el = document.getElementById("OTROTEMPORAL");   var padre = el.parentNode;   padre.removeChild(el); }  // cuando se cargue nuestro sitio, iniciamos las funciones onload=function() { navpaginaetiquetas(0); }

Un poco de CSS para darle forma. Lo ponemos debajo de lo anterior:
<style>   #misetiquetas { /* el contenedor */       margin: 0 auto;       width: 314px;   }   #loadingscript { /* el texto o imagen de carga */ }   .paginaetiquetas { /* cada una de las entradas */     border: 2px solid #101921;     height: 72px;     margin: 5px 0;     padding: 5px;     width: 300px;   }   .paginaetiquetas img { /* la miniatura */     float: left;     height: 72px;     padding-right: 5px;     width: 72px;   }   .paginaetiquetas h6, .paginaetiquetas h6 a { /* los títulos de las entradas */     font-size: 11px;     font-weight: normal;     margin: 0;   }   .paginaetiquetas p { /* los resúmenes */     font-size: 11px;     margin: 5px 0;   }   #navegadionetiquetas { /* el contenedor con los enlaces para navegar */     border: 1px solid #404951;     color: #BBB;     font-size: 18px;     text-align: center;     margin:0 auto;     width:314px;   }   #navegadionetiquetas a { /* los enlaces para navegar */     color: #BBB;     display:block;     font-size: 18px;     padding: 5px 10px;   }   #navegadionetiquetas span { /* los textos deshabilitados */      color: #666;     padding: 5px 10px;}   }   /* las posiciones de los enlaces para navegar */   #navegadionetiquetas .siguiente {float: right;}   #navegadionetiquetas .anterior {float: left;}   #navegadionetiquetas .inicio {text-align: center;} </style>
Bien; sólo nos falta ponerlo en algún elemento HTML, en un post o en la plantilla misma:
<div id="misetiquetas"></div> <div id="navegadionetiquetas"></div>
Y eso es todo.

No hay comentarios:

Publicar un comentario

Correo Vaishnava

Archivo del blog