Internet: Una historia de amores y odios

JMiur [E]

CSSload: Gráficos de carga con CSS

Muchos feeds y un solo script para mostrarlos (2)

Tengo muchas direcciones de feeds y ahora, lo que quiero hacer es mostrarlos pero sin tener que escribir códigos especiales para cada uno de ellos y además quiero que se vean en un mismo lugar así que me aprovecho de jQuery y modifico un poco el script que se mostraba en esta entrada.

Allí, agregaré un par de funciones extras, una, llamada FEED_eliminartags() para que los contenidos puedan ser "recortados" y verlos como sumarios y otra para detectar la primera imagen que tengan FEED_primerimagen(); ambas cosas, son similares a cualquier otra función que interprete json que es el formato en que leeremos los feeds.

Agrego las funciones antes de </head>

<script type='text/javascript'>
//<![CDATA[
function FEED_primerimagen(cual) {
  var t = "", s, a, b, c, d;
  s = cual;
  a = s.indexOf("<img");b = s.indexOf("src=\"",a);c = s.indexOf("\"",b+5);d = s.substr(b+5,c-b-5);
  if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) {t = d;}
  return t;
}

function FEED_eliminartags(cual,longitud){
  var r = cual.split("<");
  for(var i=0;i<r.length;i++){
    if(r[i].indexOf(">")!=-1){
      r[i] = r[i].substring(r[i].indexOf(">")+1,r[i].length);
    }
  }
  r = r.join("");
  var sss = "", p;
  var r2 = r.split(" ");
  for(var i=0;i<r2.length;i++){
    p = sss + r2[i] + " "
    if(p.length>=longitud) {break;}
    sss = p;
  }
  sss = $.trim(sss);
  if(sss) {sss += " …" }
  return sss
}

(function ($) {
  $.fn.FeedEk = function (lasopciones) {
    var opciones = {url: '', clase: '', cantidad: 3, lenres: 120};
    if (lasopciones) {$.extend(opciones, lasopciones)}
    var elID = $(this).attr('id');
    if (opciones.url == null || opciones.url == '') {
      $('#' + elID).empty();
      return
    }
    $.ajax({
      url: 'http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=' + opciones.cantidad + '&output=json&q=' + encodeURIComponent(opciones.url) + '&callback=?',
      dataType: 'json',
      success: function (data) {
        $('#' + elID).empty();
        $.each(data.responseData.feed.entries, function (i, entry) {
           var laimagen = FEED_primerimagen(entry.content);
           var contenido = FEED_eliminartags(entry.content,opciones.lenres);
           var salida = "<div class='ItemFeed "+opciones.clase+"'>";
           salida += "<div class='ItemTitle'><a href='" + entry.link + "' target='_blank' >" + entry.title + "</a></div>";
           salida += "<div class='ItemContent'>";
           if(laimagen){
             salida += "<img src='"+ laimagen +"' />";
           }
           if(contenido){
             salida += "<p>" + contenido + "</p>";
          }
          salida += "</div>";
          salida += "</div>";
          $('#' + elID).append(salida);
        })
      }
    })
  }
})(jQuery);
//]]>
</script>

Y en un elemento HTML, entrada, página estática o donde quiera que se muestren, el HTML que no es otra cosa que un DIV vacío y una serie de enlaces:

<div id="divRss"></div>

<div id="fenlaces">
  <a href="#" rel="1" class="ftwitter"> Twitter usuario </a>
  <a href="#" rel="2" class="ftwitter"> Twitter favoritos </a>
  <a href="#" rel="3" class="ftwitter"> Twitter menciones </a>
  <a href="#" rel="4" class="fyoutube"> YouTube usuario </a>
  <!-- coloco todos los enlaces que quiera -->
  <a href="#" rel="14" class="fstumble"> StumbleUpon blog </a>
</div>

Ahora, faltaría definir una lista de direcciones urls con los distintos feeds; uso un array o cualquier otro sistema:

<script type="text/javascript">
  var lista_feeds=new Array();
  lista_feeds[0] = "";
  lista_feeds[1] = "https://twitter.com/statuses/user_timeline/usuario.rss";
  lista_feeds[2] = "https://api.twitter.com/1/favorites/usuario.rss";
  lista_feeds[3] = "http://search.twitter.com/search.rss?q=to:@usuario";
  lista_feeds[4] = "https://gdata.youtube.com/feeds/api/users/usuario/uploads";
  // ....... sigo agregando las direcciones que quiera usar
  lista_feeds[14] = "http://www.stumbleupon.com/rss/stumbler/nombre/likes";

  // y el evento de jQuery apra detectar el click en esos enlaces
  $('#fenlaces a').live('click', function(e) {
    e.preventDefault(); // evito qe se ejecuta el href del enlace
    var url = lista_feeds[$(this).attr('rel')]; // leo el número de orden de la lista (1, 2, 3, 4, etc)
    var clase = $(this).attr('class'); // leo la clase de ese enlace
    // y ejecuto la función para leer los feeds
    // donde cantidad es el número de entradas a leer y lenres es la longitud máxima
    $('#divRss').FeedEk({url:url, clase:clase, cantidad: 3, lenres:200 });
  });

  // y por defecto, muestro el primero de la lista
  $(document).ready(function() {
    $('#fenlaces a').first().click();
  });
</script>

Por último, como siempre, el CSS que es lo que termina de personalizar las cosas:

<style>
  #divRss { /* el contenedor */
    background-color: #EEE;
    border: 1px solid #000;
    margin: 0 auto;
    outline: 3px solid #ABC;
    padding: 10px;
    width: 350px;
  }
  #divRss .ItemFeed { /* cada entrada */
    border-bottom: 1px dotted #000;
    color: #666;
    padding: 5px 0;
  }
  #divRss .ItemFeed:last-child {border: none;}
  /* y los detalles (título, contenido e imagen)
  #divRss .ItemTitle { }
  #divRss .ItemTitle a { }
  #divRss .ItemContent { }
  #divRss .ItemContent p { }
  #divRss .ItemContent img {height: auto;   width: 100%;}
</style>

Como los datos que nos muestran esos feeds pueden ser variables, la clase que se envia a la función, permite que los mostremos con alguna diferencia; por ejemplo:

#divRss .ItemFeed.ftwitter { }
#divRss .ItemFeed.fyoutube { }
#divRss .ItemFeed.fyoutube .ItemTitle { }
#divRss .ItemFeed.fstumble img { }

Muchos feeds y un solo script para mostrarlos (1)

Hace ya unos cuantos días, en labnol.org publicaban un artículo donde enumeraba una larga serie de direcciones de feeds a los que podía accederse o leer su contenido; feeds de distintos servicios que, como casi todos ellos, son públicos y por lo tanto, podemos mostrarlos.

Para hacer eso, como los feeds suelen tener formatos diferentes, un método efectivo es usar la idea que se mostraba en esta entrada que no es otra cosa que un pequeño script que utiliza jQuery para enviar esa dirección de feeds a un API de Google que nos devuelve siempre un formato único; de tal modo, podremos emplearlo sin tener que tener en cuenta esas diferencias o andar averiguando en que etiquetas están los distintos datos.

Es cierto que el API no es muy flexible pero, lo que nos devuelve es más que suficiente para armar un gadget que nos permita mostrar una lista de feeds de distinto tipo en en el mismo espacio.

Empezamos con algunas de las direcciones de la lista de feeds:

las últimas actualizaciones de Twitter:
https://twitter.com/statuses/user_timeline/usuario.rss

los favoritos de Twitter:
https://api.twitter.com/1/favorites/usuario.rss

las menciones de Twitter:
http://search.twitter.com/search.rss?q=to:@usuario

cualquier búsqueda o hashtags) de Twitter:
http://search.twitter.com/search.rss?q=palabra

los últimos videos subidos a YouTube:
https://gdata.youtube.com/feeds/api/users/usuario/uploads

videos de YouTube con cierta etiqueta:
https://gdata.youtube.com/feeds/api/videos/-/etiqueta

cualquier búsqueda en YouTube:
https://gdata.youtube.com/feeds/api/videos?q=palabra&orderby=relevance

lo mismo pero ordenadas por fecha:
https://gdata.youtube.com/feeds/api/videos?q=palabra&orderby=published

lo mismo pero ordenadas según visitas:
https://gdata.youtube.com/feeds/api/videos?q=palabra&orderby=viewCount

últimas actualizaciones de una página de Facebook:
https://www.facebook.com/feeds/page.php?format=atom10&id=ID_pagina

imágenes subidas a Pinterest:
http://pinterest.com/usuario/feed.rss

imágenes subidas a Flickr:
http://api.flickr.com/services/feeds/photos_public.gne?id=ID_usuario

imágenes de Flickr con cierta etiqueta:
http://api.flickr.com/services/feeds/photos_public.gne?tags=etiqueta

imágenes de Instagram con cierta etiqueta:
http://instagr.am/tags/etiqueta/feed/recent.rss

cualquier búsqueda de Picasa:
http://photos.googleapis.com/data/feed/base/all?alt=rss&kind=photo&q=palabra

últimas entradas en Tumblr:
http://nombre.tumblr.com/rss

últimas entradas en WordPress.com:
http://nombre.wordpress.com/feed/

últimas actualizaciones en StumbleUpon:
http://www.stumbleupon.com/rss/stumbler/usuario/likes

En todos los casos, lo que debe hacerse es cambiar el dato en amarillo por el que corresponda, ya sea nuestro nombre de usuario, ID, etiqueta o palabra a buscar.

Y lo que faltaría es ver cómo se podrían usar ...

Instant WordPress: Una instalación portable

Y la nueva interfaz llegó para quedarse :-(

Los desarrolladores de Blogger se parecen a los hijos de esos amigos que son muy simpáticos cuando se los mira en fotografías pero, cuando los invitamos a cenar, se transforman en vendavales incontrolables y nos pasamos la noche atajando jarrones justo antes que se estrellen contra el piso, interponiéndonos entre esas tiernas manitos llenas de chocolate y la pared recién pintada o tratando de explicar por qué el gato no tiene ganas de jugar a la peluquería y sería mejor que dejaran esas tijeras y buscaran entretenerse con algo menos afilado. Adorables criaturitas.

Pues así es, uno cree que ellos (hablo de los desarrolladores de Blogger y no de los niñitos) SABEN, PIENSAN ... pero, a veces, da la impresión que no y para mi gusto, la nueva interfaz que nos han enchufado a la fuerza es una demostración más de ese presentimiento.

Es verdad que apenas la empezaron a mostrar y sugerir una y otra vez que la usáramos, probé y huí rápidamente así que ahora que es un cambio forzoso, mi subjetividad es nula y la miro con aprehensión aunque sea inevitable pero me pregunto ¿por qué se empeñan en cambiar lo que funciona en lugar de arreglar lo que no funciona?

Habrá a quien le guste, a mi no. Me parece incómoda, lo que antes estaba a la mano, ahora hay que buscarlo en distintos menús, está pensada para una resolución de pantalla específica ya que si uno tiene un monitor ancho, hay espacios enormes que no tienen uso pero ciertos botones se posicionan en los extremos y uno debe tomar un taxi para ir de uno a otro cosa que, evidentemente, nos permite ejercitar el antebrazo pero que es muy poco funcional. Por el contrario, en monitores con resoluciones bajas, ciertos botones desaparecen y si redimensionamos la ventana pasa lo mismo y debemos recargar la página para que vuelvan a su lugar.

Esta bien, lo sé, son detalles ... consecuencias de la modernidad pero ¿no podrían haberlo verificado? No es tan difícil, es algo casi elemental.

Lo más lindo es el cartelito de "Cargando" que se ve cada dos por tres; muy simpático. Uno va a hacerse un café, vuelve y allí sigue; amarillito y pequeñito ¿Recargamos la página con el botón del navegador? Bueno, a veces anda, a veces no porque muchas de las páginas internas se deben cerrar con un botón interno. UFA.

Suspiro. Veamos que hay. Uno no es un conservador por antonomasia así que siempre se está dispuesto a darle una oportunidad a lo nuevo pero ... ¿por qué sale siempre esta ventanita si no he hecho cambio alguno?

Y ¿en que quedamos? ¿se permiten 148 o 150 caracteres?

Mejor reviso las entradas por las dudas y ahí veo que todas tienen marcada esta opción, algo que jamás he usado:

y si quiero cambiar algo me dice:

¿Qué significa Omitir advertencia? Si hay un error hay un error y listo, hay que resolverlo y a otra cosa. Omito y todo sigue igual pero sin cartelito. Maravilloso. El error ha sido barrido bajo la alfombra. Total, si no lo veo: no existe.

Me olvido de las entradas. Veamos la plantilla, editar HTML ... y no, no han sacado el mensaje de advertencia, se abre una y otra vez porque, seguramente, ¿esperan que uno se resigne y no lo use más?

Eso es lo que presiento ¿Llegará el dia en que ya no habrá manera de editar las plantillas manualmente y habrá que usar siempre el nuevo editor? Me lo pregunto porque han desaparecido las plantillas tradicionales aunque ahí abajo, insólitamente, hay un enlace a las viejísimas, esas previas al Blogger Beta y con las que los que estamos acá desde hace años, alguna vez tuvimos que lidiar.

Quiere decir que ahora tenemos cuatro posibilidades: usamos las Vistas Dinámicas, usamos las engorrosas plantillas de nuevo estilo, usamos las clásicas que hace añares que nadie toca o tenemos que importar alguna descargada desde algún sitio y rogar que funcione y que siga funcionando.

OK, OK, ya no me quejo más