Agregando un lector de feeds con SpringWidgets

El tema de los servidores que huyen o desaparecen causa un problema en todos los que están usando los archivos alojados en Google Pages. En realidad, es un problema extra ya que SIEMPRE existieron PROBLEMAS. Muchos sitios, tanto los que ofrecían plantillas como los que tenían algún script o widget que querían compartir generosamente; imaginaron que usar ese servicio era adecuado. El problema es que jamás funcionó correctamente y la cantidad de ancho de banda disponible se volvió algo casi imposible de resolver.

Se está volviendo usual que esos archivos sean inaccesibles ya sea por problemas de ancho de banda o porque se eliminaron.

Uno de los scripts más utilizados es el que nos permite mostrar los últimos comentarios. Para esto, Eulalia aporta una alternativa: crear un widget en SpringWidgets; un sitio que nos permite general un "lector RSS" personal.

El registro no es obligatorio y las opciones son varias, podemos utilizar FeedBurner, crearlos para videos, audio, etc. Si lo que que queremos es utilizarlo para mostrar los últimos comentarios, simplemente colocamos la dirección del feed de nuestro sitio:

http://NOMBREBLOG.blogspot.com/feeds/comments/default
Hacemos click en Submit y luego podemos personalizarlo estableciendo el ancho, el alto, algunos colores, la cantidad de texto a mostrar, etc. El resultado, será un script que agregamos a un elemento HTML.

Otra posibilidad para resolver el tema si queremos el truco original, es la que nos muestra El escaparate de Rosa en una entrada reciente. Allí, ella ha "rescatado" el script y lo pone a disposicón de los que quieran usarlo. Por favor, descárguenlo y alójenlo en sus propios servidores; se evitarán dolores de cabeza futuros.

1 Kuler es un generador y explorador de paletas de colores de Adobe Labs. En una pantalla que usa la tecnología de Flash podemos crear paletas a partir de colores individuales o buscar algunas de las existentes. Todas puedesn ser descargadas en el formato de ASE de Adobe para ser utilizadas con los productos de Adobe Creative Suite.

2 Color Hunter usa las imágenes de Flickr para generar paletas y también posee un buscador que admite etiquetas o colores escritos en formato hexadecimal. Como alternativa, nos permite subir una imagen desde nuestra PC y generar una paleta basada en los colores de esa imagen.

3 Color Palette Generator es una herramienta sencilla que nos permite ingresar la URL de una imagen y generar una paleta a partir de ella.

4 ColorJack es una de losgeneradores más poderosos y permite descargarla en varios formatos (HSV, RGB, HEX) e importarlas a Illustrator o Photoshop. Posee además, dos herramientas separadas: Color Sphere y Color Galaxy.

5 Daily Color Scheme es un sitio que muestra paletas de colores "diarios". Paletas que son utilizadas por otros sitios web. También pueden ser descagados para insertar den diferentes editores de imágenes.

6 GradColor es muy sencillo. Basta colocar dos colores y se genera una gradiente. Lo interesante del servicio es que le indicamos un ancho y un alto y el resultado es una imagen que podemos descargar y utilizar

REFERENCIAS:

Read Write Web

Dicen que no hay nada peor que un mono con navaja. Mentira. Hay algo mucho peor: un Dios irracional. Y Google, que ya es un Dios en la web, se está volviendo loco.

Hubo un día al que en Blogger Buzz llamaron el Spam Friday. El viernes en que un sinfin de blogs fueron marcados como spam; una de esas famosas "fallas del sistema" que terminan en disculpas y blablabla.

Ya pasaron diez días y al parecer o la falla no fue corregida o se trata de una nueva política de Blogger: "eres culpable mientras no demuestres tu inocencia".

Son innumerables las consultas que he recibido en estos días respecto a blogs marcados como spam. Sitios que ya lleva mucho tiempo online pero la epidemia abarca a otros, incluso BLOGS RECIEN CREADOS Y SIN CONTENIDO.

Los Grupos de Ayuda de Google están llenos de pedidos de desbloqueo; los usuarios llevan días y días suplicando que alguien se apiade de ellos. Los Guias de Google hacen lo que pueden pero el voluntarismo no es suficiente (más información).

Hay algo que funciona mal y es grave porque si la idea es eliminar el spam, los resultados obtenidos son patéticos y sólo un imbécil cree que repitiendo una acción equivocada una y otra vez, obtendrá un resultado diferente.

Blogger: ¿quieres reducir la cantidad de blogs spam?:

• Crea un mejor sistema de registro.
• No permitas abrir cuentas de GMail con tanta facilidad, revisa el sistema; hay decenas de sitios que muestran formas de crear cuentas de manera automática (más información).
• Solicita que los usuarios confirmen ser administradores de manera regular.

¿Muy complicado? Modifica los robots:

• Mira los comentarios del sitio.
• Analiza el feedback, los enlaces entrantes y los enlaces salientes.
• Descarta los blogs recien creados, los privados o los que no se indexan.
• Cámbiale las baterias, pueden estar sulfatadas.

¡Blogger/Google/Dios: déjate de joder!

Paginar es separar las entradas del blog en grupos de cierta cantidad de entradas y permitir navegar entre ellas.

En Blogger, la única posibilidad que tenemos es Avanzar (Newer Post) o Retroceder (Older Post); en otros servicios, también existe la posibilidad de crear esa paginación de tal manera que no sólo podemos avanzar o retroceder sino "dividir" nuestro blog de tal manera de poder "saltearnos" cosas y navegar más rápido:

En Blogger Accesories han creado un script que nos permite hacer esto con algunas limitaciones pero, funciona bien y, como parte del truco se basa en propiedades CSS, nos da la posibilidad de personalizarlo de muchas maneras.

Para empezar, vamos a la plantilla y sin expandir lo artilugios, buscamos lo siguiente:

<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>

Justo debajo, agregamos el script. Este es su contenido:

<script type='text/javascript'>
//<![CDATA[
// http://rias-techno-wizard.blogspot.com
function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.com/";
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var isPage = thisUrl.indexOf("/search?updated")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';

var pageCount=5;
var displayPageNum=5;
var upPageWord ='Anterior';
var downPageWord ='Siguiente';

var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';

for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp = post.published.$t.substr(0,10);
var title = post.title.$t;
if(isLablePage) {
if(title!='') {
if(post.category) {
for(var c=0, post_category; post_category = post.category[c]; c++) {
if(encodeURIComponent(post_category.term)==thisLable) {
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))) {
if(thisUrl.indexOf(timestamp)!=-1 ) {
thisNum = postNum;
}
postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
}
} //end if(post.category){
itemCount++;
}
} else {
if(title!='') {
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))) {
if(thisUrl.indexOf(timestamp)!=-1 ) {
thisNum = postNum;
}
if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
itemCount++;
}
}

for(var p =0;p< htmlMap.length;p++) {
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)) {
if(fFlag ==0 && p == thisNum-2) {
if(thisNum==2) {
if(isLablePage) {
upPageHtml = labelHtml + upPageWord +'</a></span>';
} else {
upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
}
} else {
upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}
fFlag++;
}
if(p==(thisNum-1)) {
html += '<span class="showpagePoint">'+thisNum+'</span>';
} else {
if(p==0) {
if(isLablePage) {
html = labelHtml+'1</a></span>';
} else {
html += '<span class="showpageNum"><a href="/">1</a></span>';
}
} else {
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +'</a></span>';
}
}
if(eFlag ==0 && p == thisNum) {
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
}//end for(var p =0;p< htmlMap.length;p++){

if(thisNum>1) {
if(!isLablePage) {
html = '<span class="showpage"></span>'+upPageHtml+' '+html +' ';
}
}

html = '<div class="showpageArea">'+html;
// html = '<div class="showpageArea"><span class="showpage"> Total '+(postNum-1)+': </span>'+html;

if(thisNum<(postNum-1)) {
html += downPageHtml;
}

if(postNum==1) postNum++;
html += '</div>';

if(isPage || isFirstPage || isLablePage) {
var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");
if(postNum <= 2) {
html ='';
}
for(var p =0;p< pageArea.length;p++) {
pageArea[p].innerHTML = html;
}
if(pageArea&&pageArea.length>0) {
html ='';
}
if(blogPager) {
blogPager.innerHTML = html;
}
}
}
//]]>
</script>
<script src='/feeds/posts/summary?alt=json-in-script&amp;callback=showpageCount&amp;max-results=99999' type='text/javascript'/>

En el código, hay una serie de valores que podemos modificar:

La cantidad de posts que se mostrarán por página (por defecto una sola):
var pageCount = n;

La cantidad de páginas listadas (por defecto dos)
var displayPageNum=n;

Los textos a mostrar:
var upPageWord ='Back'; // página anterior
var downPageWord ='Next'; // página siguiente

Para que todo estuviera terminado sólo nos faltaría agregar el estilo. Eso lo ponemos entre etiquetas <style> o bien antes de </b:skin>.

Este son las propiedades originales definidas por Blogger Acccesories:

.showpageArea {
background: transparent url(http://i263.photobucket.com/albums/ii150/mohamedrias/ShowPagenavbar.jpg) no-repeat left top;
color:#003366;
font-size: 11px; 
padding: 10px 15px 10px 30px;
text-align: left;
width: 470px;
}
.showpageArea a {
color: #0F0;
text-decoration: underline;
}
.showpageNum a {
border: 1px solid #FFF;
color:#0F0;
margin: 0 10px;
padding: 0 5px 0 8px;
text-decoration:none;
}
.showpageNum a:hover {
color: #FE8314;
background-color: #FFF;
border: 1px solid #0071A5;
}
.showpagePoint {
color: #FE8314;
margin: 0 8px 0 4px;
}
.showpage a {
color: #FFF;
padding: 0 2px 0 4px;
text-decoration: none;
}
.showpage a:hover {
color: #FE8314;
text-decoration: underline;
}
.showpageNum a:link,.showpage a:link {
color: #CC0000;
text-decoration: none;
}

Veamos que significa cada cosa así podemos personalizarlo:

.showpageArea {} es el rectángulo donde se va a mostrar la paginación y en el ejemplo, tiene una imagen de fondo. En mi caso, sólo definí un borde, eliminé el ancho y centré el contenido.

.showpageArea a {} son los enlaces en general (los números de las páginas y los textos Anterior y Siguiente). Podemos usar cualquier propiedad; yo, elegí ponerles una imagen y un borde.

.showpageArea a:hover {} no está en el ejemplo pero, como en mi caso, todos los rectangulitos será iguales se lo agrego para cambiar el efecto gráfico cuando colocamos el ratón encima de un enlace.

.showpageNum a {} y .showpageNum a:hover {} son los enlaces con los números de las páginas si es que queremos que se vean diferentes.

.showpage a {} y .showpage a:hover {} son los enlaces con los textos si es que queremos que se vean diferentes.

.showpagePoint {} es el texto que muestra el número de la página actual

Otra posibilidad si no se quiere poner el código a la plantilla, es agregar un elemento HTML y ubicarlo justo debajo del elemento Entradas del Blog. En ese caso, es allí donde colocamos el estilo y debajo, el script.

Es importante saber que la paginación no funciona en las páginas individuales (esto es lo normal incluso en otros sistemas) pero tampoco funciona si navegamos por etiquetas utilizando hacks y, esto último es una limitacion. De cualquier modo, me parece una solución interesante y pese a que los códigos son largos, es bastante simple de implementar y allá en el fondo, pueden verlo funcionando.

ACLARACIONES Y ACTUALIZACIONES:

Es importante recalcar que si implementamos el truco y hacemos click en Vista Previa no veremos nada ya que en este modo, los scripts no se ejecutan así que sólo podemos Guardar y ver el blog.

Un problema reportado por Fernando Alayo Orbegozo en un comentario nos alerta de una omisión en el script. Cuando nuestro sitio no está alojado en blogspot.com (cuando se tiene un dominio propio), deberemos modificar el código porque no funcionará en la página principal aunque sí lo hará en el resto.

Hay una línea que dice:

var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.com/";

Alli, se detecta la página principal de nuestro sitio pero, como verifica blogspot.com, un dominio propio será ignorado, deberemos cambiar esa línea por:

var isFirstPage = thisUrl=="miDominio";

Y cambiar miDominio por la dirección de la página principal, por ejemplo:

var isFirstPage = thisUrl=="http://www.dospuntosyaparte.com/";

En el blog de Pizcos, he visto una entrada reciente donde nos muestra una forma muy sencilla de mostrar la cantidad de entradas y la cantidad de comentarios totales.

Si lo queremos agregar a la sidebar, basta crear un elemento HTML y reemplazar NOMBREBLOG por el nuestro:

<script type="text/javascript">
 function showpostcount(json) {
   document.write(parseInt(json.feed.openSearch$totalResults.$t,10));
 }
</script>

<script src="http://NOMBREBLOG.blogspot.com/feeds/posts/default?alt=json-in-script&callback=showpostcount">
</script> entradas

<script src="http://NOMBREBLOG.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showpostcount">
</script> comentarios

entradas

comentarios

Para poder personalizarlo un poco, veamos como funciona.

Hay tres scripts, el primero, es una función que es la que lee los datos así que esa la dejamos tal como es. Las otras dos, "escriben" el número en nuestra página; por lo tanto, podemos darle estilo como a cualquier otro elemento HTML.

Algunos ejemplos:

<span style="propiedades"><script ... ></script> comentarios en este blog</span>

<span style="propiedades">CANTIDAD DE ENTRADAS</span>
<span style="propiedades"><script ... ></script></span>

Hay un problema repetido cuando mudamos ciertos scripts de Google Pages a otro servidor y habrá que resolverlos uno por uno. En este caso, hay algunas consultas repecto al uso de las tan conocidas Prototype y Scriptaculous.

Tanto MrPrado como Mar alojaron esos scripts en Skydrive sin problemas pero ... no funcionan.

Peor aún, llegan a producirse errores serios y en un momento el navegador colapsa.

El problema es Scriptaculous ya que por lo general, esta librería utiliza otras, asociadas y todas deben estar en el mismo directorio:

http://nuestroAlojamiento/scriptaculous.js?load=effects

Muchos servicios de alojamiento de archivos nos permiten la creación de carpetas pero, eso no significa que esas carpetas sean reales, algunas veces, son virtuales, sólo una forma de organizarnos. Skydrive funciona de ese modo así que, por lo visto, no es un lugar adecuado para alojar esos scripts; en todo caso, si alguien pudo hacer que funcionara, sería bueno que lo dijera.

Si necesitamos un servidor porque queremos alojar esos scripts, de lo que he probado hasta ahora, Yahoo Geocities es una opción sencilla y no parece tener problemas pero, no es la única posibilidad.

En lo personal, me he decidido por olvidarme de alojar esos scripts y utilizar las llamadas AJAX Libraries API de Google que no son otra cosa que esos mismos scripts pero que Google pone a disposición de cualquiera que necesite utilizarlas en sus páginas web (más información). Este método tiene algunas ventajas respecto a alojarlas nosotros mismos: Google se encarga de cachearlas, no hay restrciciones en el ancho de banda y, con ciertas limitaciones, los scripts se actualizan con cierta regularidad.

En el caso de estas librerias, lo único que hace falta para acceder a ellas es agregar a la plantilla el siguiente código:

<script src='http://www.google.com/jsapi'/><script>
  google.load(&quot;prototype&quot;, &quot;1.6.0.2&quot;);
  google.load(&quot;scriptaculous&quot;, &quot;1.8.1&quot;);
</script>

Como ya terminé con Google Pages me siento un poco extraño en medio de la tranquilidad así que decidí probar alguno de los otros servicios que podemos utilizar en su reeemplazo. Uno de los que despertó mi curiosidad es Yahoo! Geocities, vamos a ver cómo creamos una cuenta y si podemos utilizarla como repositorio para alojar nuestros archivos.

El servicio se publicita como un lugar que nos permite crear sitios web de manera sencilla y sin demasiadas restricciones. Disponen de varios planes y uno de ellos es gratuito así que allá vamos.

Si ya tenemos una ID de Yahoo, la ingresamos sino, la creamos en un par de pasos sencillos. Lo único que sugerirá es elegir una ID adecuada ya que será la que luego se usará como URL.

En la siguiente pantalla respondemos un par de preguntas y listo. Ya tenemos creado nuesto sitio y nos mostrarán el Panel de Control desde donde podremos manejarlo (más información).

Ahora, ya estamos listos para subir archivos. Vamos a MANAGE y allí nos darán dos posibilidades: Easy Upload y File Manager.

Con una cuenta gratuita, Yahoo Geocities nos ofrece 15MB de espacio disponible y 4.2MB de ancho de banda por hora. No parecen valores muy altos comparados con otros pero si lo usamos para cierto tipo de documentos, es más que suficiente.

Obvio, voy a usar Easy Upload y transferir archivos desde mi PC al directorio principal. Pueden subirse varios de manera simultánea mientras el total no supere los 5 megas.

La lista de archivos aceptados es realmente muy amplia; entre otros:

• archivos comprimidos (ARJ, GZ, TGZ, ZIP)
• multimedia (ASF, AU, AVI, MID. MOV, MP3, MPEG, MPG, PPS, PPT, QR, RM, WAV, WMA)
• imagenes (ANI, BMP, CUR, GIF, JPEG, JPG, PNG, TIF)
• applets de Java (CLASS, JAR)
• web(CSS, HTM, HTML, JS, XML)
• Macromedia (DCR, FLA, SMI, SMIL, SPL, SWF)
• documentos (DOC, PDF, RTF, TXT, XLS)
  

Una vez subidos, podemos ir a File Manager y allí, copiar las direcciones URL de cada uno para usarlos en cualquier otra página web incluyendo las plantillas de Blogger. Para esto, hacemos click con el botón derecho del ratón sobre View y copiamos el enlace:

Para que se den una idea, alojando los cinco scripts más pesados y sus respectivas copias, sólo estoy usando 0.3MB de los 15MB disponibles así que es una buena alternativa para alojar ese tipo de archivo que la mayoría de los servicios no acepta.