El errático Feedburner

Este no es un buen lugar para preguntar por qué Feedburner muestra una cantidad de suscriptores distinta cada dia. En realidad si esa cifra cambia levemente no hay problema, es normal y no hay que preocuparse, suele diminuir los fines de semana y luego se normaliza; son variaciones porcentuales pequeñas. Las dudas surgen cuando esas variaciones son grandes y digo que este no es un buen lugar para reguntar porque sufro del mismo síndrome: desaparecen por cientos y reaparecen por cientos sin razón aparente; tanto que se ha transformado en un dato poco fiable.

El blog de FeedBurner hace meses que reconoce el error pero no da respuestas:

Los contadores de suscripción parecen reportar cantidades inferiores a las normales porque se contabilizan los datos de Google FeedFetcher. Ese error no afecta a las suscripciones en si mismas ya que los usuarios siguen recibiendolas de manera normal.

Actualmente, el número es calculado combinando los datos de Google Reader e iGoogle pero estamos cambiando el método utilizando las APIs de Google para que el resultado sea más fiable. Este post será actualizado cuando el cambio esté funcionando.

20 de mayo del 2010

¿Se puede hacer algo al respecto?

Que yo sepa, sólo esperar.

Sunday Morning es un script que permite agregar traducciones sencillas a treinta idiomas. Funciona en todas las versiones de Internet Explorer, Firefox, Safari y Chrome. El script podemos descargarlo desde acá y en la página del desarollador hay explicaciones y unos demos.

jQuery Tools es una colección de componentes compiladas en apenas 5KB. Posee funciones para crear pestañas, tooltips, agregar archivos de Flash, galerías y efectos diversos. El sitio está muy bien organizado y hay ejemplos diversos que podemos copiar y mucha documentación. Podemos descargarla completa o seleccionar las herramientas que queremos incluir.

MopSlider genera una ventana dentro de la cual es posible agregar cualquier contenido. En el ZIP de descarga hay demostraciones que también puden ser vistas online.

Algunas otras:

• CeeBox es otra ventana modal para mostrar imágenes, videos, iframes, flash, etc.
• prettyPhoto permite crear ventanas modales tanto para imágenes como para videos y archivos de Flash. La documentación no es amplia pero se entiende. en els itio disponen de otro script llamado prettyPopin que sirve para mostarr contendio simple o formularios.
• liScroll un script para generar textos con scroll de modo similar a como lo podemos hacer con la etiqueta MARQUEE.
• jQueryGlobe es un plugin muy simple para crear listas interactivas.
• TinySlider es un slideshow que permite agregar tanto imágenes como cualquier otro tipo de contenido.
• Notify Bar permite agregar barras informativas similares a las que se ven en Twitter cuando realizamos alguna acción.
• TinyTips agregar tootltips a cualquier elemento de nuestra página.

Esta es una galería relativamente sencilla donde sólo se usa CSS y funcionará bastante bien en los navegadores modernos, incluyendo IE8 aunque con ciertas diferencias ya que cada uno de ellos tiene sus propias características y aplica las nuevas propiedades como se le da la gana.

El HTML es mínimo, usamos una lista donde colocamos dos imágenes, una con la clase mini contiene la miniatura que es la visible por defecto y otra, con la clase pic contiene la imagen a mostrar:

<div id="galeria">
  <ul>
    <li><img src="URL_miniatura1" class="mini" /><img src="URL_imagen1" class="pic"/></li>
    <li><img src="URL_miniatura2" class="mini" /><img src="URL_imagen2" class="pic"/></li>
    <li><img src="URL_miniatura3" class="mini" /><img src="URL_imagen3" class="pic"/></li>
    .......
  </ul>
</div>

Y ahora, el CSS que va antes de </head> y que deberíamos modificar para adaptarlo a nuestras necesidades:

<style>
#galeria { /* este es el div que contiene la galería */
  background: #101921;
  border: 10px solid #505961;
  height: 300px;
  position: relative;
  width: 600px;
  margin: 30px auto;
  overflow: visible;
}
#galeria ul { /* la lista */
  margin: 0;
  padding: 0;
  text-align: center;
}
#galeria ul li { /* cada item de la lista */
  display: inline-table;
  list-style: none;
  padding: 10px;
  vertical-align: middle;
}
#galeria ul li .pic { /* la imagen normal */
  background-color: #000;
  border: 2px solid #000;
  left: 130px;
  padding: 10px;
  position: absolute;
  top: 15px;
  visibility:hidden;
  -moz-box-shadow: 0 0 20px #ABC inset;
  -webkit-box-shadow: 0 0 20px #ABC inset;
  box-shadow: 0 0 20px #ABC inset;
}
#galeria ul li .mini:hover { /* efecto sobre las miniaturas */
  cursor: pointer;
}
#galeria ul li:hover .pic { /* efecto sobre las imágenes */ 
  visibility: visible;
}
</style>

• 
• 
• 
• 
• 
• 

REFERENCIAS:admixweb.com

Hay muchas formas de insertar tweets en un sitio web y esta es una de las más simples: convertirlos en imágenes sin necesidad de software adicional:

Simplemente vamos a la página del tweet, por ejemplo:

http://twitter.com/annoyingorange/status/16235293148

cambiamos twitter.com por chen.vc:

http://chen.vc/annoyingorange/status/16235293148

y eso es todo; si recargamos, nos mostrará una imagen:

http://chen.vc/cache/16235293148.jpg

que podemos guardar y usar donde se nos ocurra.

REFERENCIAS:labnol.org

A mi me molesta el silencio de Blogger. Esa manera en que NO comunica los cambios más allá de una entradita mínima en un blog en inglés donde no hay informacion detallada, donde no se responden preguntas y donde siempre leemos que están muy excitados aunque no sepamos muy bien si eso es por un problema hormonal o hay razones valederas para decir ¡ohhhhhh qué bueno!!!

Hace poco sacaron sus nuevas plantillas y lo anunciaron con bombos y platillos. En teoría, era una mejora pero, confieso que huí apenas miré el código porque imaginé que esas plantillas estaban hechas pura y exclusivamente para ser usadas así, tal como vienen y que esa era la única explicación razonable para tal exceso de códigos retorcidos. No creo estar demasiado equivocado aunque es obvio que aún así, pueden ser modificadas o personalizadas pero muchas veces, eso sólo será posible a costa de bastante esfuerzo.

Es evidente que Blogger apunta a que usemos esas plantillas, ahora, apenas creamos un blog, las opciones para seleccionar muestran esas plantillas y ninguna otra:

Luego, si queremos utilizar algún modelo anterior, el enlace para acceder a esa opción está allá abajo, en la ventana de Diseño | Editar HTML, escondido, no vaya a ser que lo descubramos.

Moraleja, ahora Blogger tiene conviviendo tres sistemas de plantillas lo que hace que todo sea muy confuso para alguien que recién empieza.

Es obvio que como servicio, tiene el derecho de hacer y deshacer a su antojo, a agregar o quitar opciones, a promover sus productos e incluso, forzar su uso, es lo que hacen todas las empresas; ofrecen algo y ponen condiciones; los usuarios aceptamos o no aceptamos y no hay términos medios ni negociaciones posibles. Lo que no suena muy razonable es que esto no se haga de manera explícita o que no se informe debidamente de las características de cada producto. No les costaría nada tener algún siio con información detallada y, de esa manera, evitar malos entendidos. No sólo no les costaría nada sino que sería beneficioso porque Google, Blogger o cualquier empresa de este tipo se nutre de lo que los usuarios aportan gratuitamente.

Por supuesto, era inevitable que las nuevas plantillas trajeran problemas, que ciertas cosas no pudieran hacerse y que otras hubiera que modificarlas. Lo malo es que también han sumado confusiones y una de esas confusiones ha hecho que muchos pregunten por un mismo tema: "OHHHHHH en Internet Explorer se ven las curvas!!! ¿No era que en IE no existe esa posibilidad?"

Y la respuesta es siempre la misma: NO, en IE no hay propiedades CSS para hacer curvas (hasta que salga la versión 9) y SI, cuando se usan las plantillas nuevas se pueden usar curvas con CSS que se ven en todos los navegadores ¿Dónde está la trampa?

No es un tema de trampas, el tema se reduce a la existencia de un script que Blogger agrega sin decirnos nada y que, lamentablemente, no lo hace en todos los blogs pese a que, por lo visto, salvo excepciones, funciona perfectamente.

El código no se ve en las plantillas sino que es parte de la serie de etiquetas que se agregan junto con:

<b:include data='blog' name='all-head-content'/>

y que dice esto:

<!--[if IE]>
<script type="text/javascript" src="http://www.blogger.com/static/v1/jsbin/XXXXXXXXXX-ieretrofit.js"></script>
<![endif]-->

donde ese XXXXXXXXXX es un número que parece variar en función de algo que desconozco:

http://www.blogger.com/static/v1/jsbin/4291056590-ieretrofit.js
http://www.blogger.com/static/v1/jsbin/3858476896-ieretrofit.js
http://www.blogger.com/static/v1/jsbin/2567459709-ieretrofit.js

El script existe, puede descargarse y analizarse, es más puede agregarse en algunas plantillas y eventualmente funcionará. Me pregunto ¿por qué no lo han publicitado si es algo bueno?

Lo que hace es simular por lo menos dos propiedades de CSS3 que IE no dispone: border-radius: y box-shadow; para eso, inventan propiedades con un nombre especial, las llaman -goog-ms-border-radius y -goog-ms-box-shadow. Por ejemplo:

-moz-border-radius: 10px; /* Mozilla */
-webkit-border-radius: 10px; /* Crhome */
-goog-ms-border-radius:10px; /* el invento para IE */
border-radius: 10px; /* la propiedad según la w3org */

-moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; /* Mozilla */
-webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; /* Crhome */
-goog-ms-border-top-left-radius: 5px; -goog-ms-border-top-right-radius: 5px; /* el invento para IE */
border-top-left-radius: 5px; border-top-right-radius: 5px; /* la propiedad según la w3org */

-moz-box-shadow: 0 0 10px #FFFFFF; /* Mozilla */
-webkit-box-shadow: 0 0 10px #FFFFFF; /* Crhome */
-goog-ms-box-shadow: 0 0 10px #FFFFFF; /* el invento para IE */

¿Puede hacerse eso en una plantilla "normal"? Ahí las cosas se complican porque todo es cuestión de prueba y error.

¿Cuál es la diferencia entre una plantilla normal y una de las nuevas plantilas?: Las etiquetas del encabezado: DOCTYPE y HTML.

Lo que vemos normalmente dice esto:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

Y las nuevas dicen esto:

<!DOCTYPE html>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

EL DOCTYPE cambia para adecuarse al formato del HTML5 y en la etiqueta HTML se le agregan dos parámetros: b:version='2' y class='v2' que, obviamente, son los que llaman a este nuevo script.

Uno podría entonces suponer que bastaria agregar esos dos parámetros en nuestra plantilla común y es verdad pero eso no tiene consecuencias neutras ya que junto con el script, se incluirá una hoja de estilo.

Por defecto, Blogger nos agrega esta:

http://www.blogger.com/static/v1/widgets/XXXXXXXXXX-widget_css_bundle.css

y ahora, nos incluirá esta otra:

http://www.blogger.com/static/v1/widgets/XXXXXXXXXX-widget_css_2_bundle.css

que es "enorme" y que contiene definiciones genéricas que afectan los márgenes de muchos elementos del blog lo que puede desconfigurar nuestro diseño.

En resumen, cada cuál hará lo que le parezca conveniente y es posible experimentar con cualquiera de estas cosas e incluso usarlas, eso no es mayor problema. El tema, para mi, sigue siendo esta sensación de ser una nada cuando soy un usuario y como tal, creo que merezco alguna clase de consideración mínima. No es mucho lo que pido, sólo que me digan cuales son las reglas y que no me las estén cambiando a cada momento o lo que es peor, que las oculten y "andá a adivinar cuales son".

Este es un menú desplegable muy simple que usa algunas técnicas de CSS3 que lo hacen llamativo en algunos navegadores pero al que podemos modificar un poco para que funcione bien en cualquier navegador.

+Seleccione una opción del menú

• Suscripción Feeds RSS
• Vagabundia en Twitter
• Suscripción por E-Mail

El HTML no tiene muchos misterios; en un DIV con una clase a la que llamamos drop-menu, colocamos un SPAN que es lo que nos servirá para desplegar y contraer el menú que está en una lista ordenada:

<div class="drop-menu">
  <span class="plus">+</span>Seleccione una opción del menú
  <ul class="sub-menu">
    <li><a href="URL1"><img src="URL_imagen1"/>Texto enlace 1</a></li>
    <li><a href="URL2"><img src="URL_imagen2"/>Texto enlace 2</a></li>
    <li><a href="URL3"><img src="URL_imagen2"/>Texto enlace 3</a></li>
  </ul>
</div>

Como siempre, la clave está en el CSS y allí hay muchas variantes. Este sería el necesario para realizar el ejemplo:

.drop-menu {
  background-color: #242F3A;
  border: 1px solid #343F4A;
  cursor: pointer;
  display: block;
  font-family: Tahoma;
  font-size: 20px;
  height: 25px;
  letter-spacing: -1px;
  margin: 0 auto;
  max-height: 25px;
  padding: 10px;
  position: relative;
  text-align: left;
  width: 300px;
  z-index: 1000;
}
.plus {
  display: inline-block;
  font-family: Georgia;
  font-size: 22px;
  font-weight: bold;
  margin-right: 10px;
  -moz-transition: .3s ease-in-out;
  -o-transition: .3s ease-in-out;
  -webkit-transition: .3s ease-in-out;
}
.drop-menu:hover {}
.drop-menu:hover .sub-menu {
  display: inline-block;
}
.drop-menu:hover .plus {
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}
.sub-menu {
  background-color: #242F3A;
  background:image: -moz-linear-gradient(100% 100%  90deg, #000000, #242F3A);
  background-image: -webkit-gradient(linear, left bottom, left top, from(#000000), to(#242F3A));
  filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#FF242F3A', EndColorStr='#FF000000');
  border: 1px solid #343F4A;
  display: none;
  border-top: none;
  margin-left: -11px !important;
  margin-top: 5px;
  padding: 10px;
  width: 300px;
}
.sub-menu li {
  display: block;
  font-size: 20px;
  height: 22px;
  list-style-type: none;
  padding: 8px 0;
}
.sub-menu li img {
  margin-right: 10px;
  vertical-align: top;
}
.sub-menu li:hover {}
.sub-menu a {
  color: #DDD;
  font-size: 20px;
  font-family: Tahoma
}
.sub-menu a:hover {
  color: #ABC;
}

REFERENCIAS:webstuffshare.com

What the Hex? es para jugar un rato y practicar ... o aceptar el desafío de adivinar qué significan esos códigos hexadecimales con que definimos los colores.

Claro que #000000 es negro y #FFFFFF es blanco pero ¿qué color representa el #D70C6D? ¿Será algún tono de amarillo, de rojo, de violeta?

#d70c6d

•  
•  
•  
•  
•  

adivinen el color [?]

En la página del autor podemos intentarlo seleccionando la dificultad aunque no recomiendo usar el máximo a menos que tengamos tendencias masoquistas.