Cuidado con las mejoras de Blogger

Blogger ha agreado una alternativa que podemos ver cuando cambiamos de plantilla.

Hasta ahora, cuando cargábamos una desde nuestra PC, si la nueva no tenía los mismos elementos agregados que la original, estos, desaparecían. Se nos advertía que se eliminarían y sólo había dos opciones, aceptar o cancelar el cambio.

Ahora, al hacer lo mismo, aparece una advertencia donde se enumeran los elementos que no existen y nos dan tres opciones: mantenerlos, eliminarlos o cancelar el cambio.

En principio, esto nos ahorraría el trabajo de hacer un backup de todo eso antes de cambiar la plantilla pero, por lo que he probado, no es tan así ya que ciertos gadgets y elementos no son mantenidos y desaparecen irremediablemente; así que, mejor no se fien demasiado y tomen precauciones.

Usar las librerías de Google es siempre una buena alternativa, no sólo en Blogger donde alojar cosas es "complicadamente imposible", sino en muchos otros sitios ya que son cargadas y guardadas en la caché del navegador y por lo tanto, están allí disponibles, aún antes de entrar en nuestra propia página si es que, por ejemplo, hemos visitado otro sitio que también las utiliza.

Las Google AJAX Library API no son las únicas que existen, Yahoo tiene las suyas llamadas Yahoo YUI CDN que son bastante confusas, y Microsoft ha comenzado a implementar las suyas a las que llama Microsoft AJAX CDN y que por ahora no son muchas.

En el caso de las de Google que son las que utilizo y a las que siempre hago referencia, es conveniente revisar la página en inglés regularmente ya que es la que se mantiene actualizada. Por ejemplo, en estos días, ha aparecido la nueva versión de jQuery y ya esta disponible así que convendría que quien la utilice, vaya cambiando el enlace de su plantilla.

Hay dos formas de cargarlas, utilizando el cargador que ofrece Google o agregándolas de manera directa. En el primer caso, colocamos un script genérico y luego la lista de librerías a cargar:

<script src='http://www.google.com/jsapi'></script>
<script>
  google.load(&quot;jquery", &quot;1.4.0&quot;);
</script>

Tengan en cuenta que ese script llamado jsapi sólo debe ser cargado una vez así que si se usan diversas cosas como mapas o buscadores personalizados, sería bueno organizarlos. Cargarla varias veces no provocara problemas pero, será un desperdicio de tiempo.

Si no quiere usarse el cargador, simplemente escribimos la etiqueta de modo normal colocando la URL correspondiente:

<script src='http://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js'></script>

Sólo hay que tener en cuenta que, si una librería depende de otra, hay que colocarlas en orden, por ejemplo, esto cargará jQuery y su librería de efectos:

<script src='http://www.google.com/jsapi'></script>
<script>
  google.load(&quot;jquery", &quot;1.4.0&quot;);
  google.load(&quot;jqueryui", &quot;1.7.2&quot;);
</script>

Por lo general, están alojadas varias versiones de la misma librería y muchas de ellas en dos modos, una mínima y una completa, cada uno elegirá la que más le conviene.

Las versiones más recientes son:

• jQuery 1.4.0
• jQuery UI 1.7.2
• Prototype 1.6.1.0
• script.aculo.us 1.8.3
• MooTools 1.2.4
• Dojo 1.4.0
• SWFObject 2.2
• YUI 2.8.0r4

A estas, le han agregado dos más.

Ext Core 3.1.0 que es una librería bastante liviana y Chrome Frame 1.0.2 que es una librería pensada para agregarle funciones avanzadas de HTML5 a Internet Explorer en sus versiones 6, 7 y 8.

En un comentario, AleMauri hacia una pregunta interesante:

... si se subscriben muchos lectores, ¿no estás perdiendo visitas a tu blog? Pregunto, ya que verán tus posts en el reader que usen y no tendrán la necesidad de entrar al blog. Los feeds están diseñados para comodidad del lector pero, al perder estas supuestas visitas ¿no es un poco negativo para el blogger? Ya sé que al subscribirse significa que has ganado un lector y que teóricamente siempre leerá tus entradas, pero ¿no es mejor que entren al blog?

Es una pregunta razonable. Uno mira las estadísticas de Feedburner o cualquier otro servicio y veremos una cierta cantidad de personas registradas, lectores activos, lectores inactivos, incluso, gente que seguramente hizo click y se ha suscripto sin tener idea de lo que hacía. Habrá de todo. Al mismo tiempo, si vemos las estadísiticas de visitas, es posible que los valores difieran en poco o en mucho y no tenemos demasiadas formas de saber si para tener una idea global, deberíamos sumarlas o son independientes.

¿Acaso quitar esa posibilidad hará que tengamos más visitas? Mi respuesta personal es NO, en absoluto.

El tema básico de una web es la red en si misma y una red se teje con eslabones y todos ellos son importantes y no hay ninguno despreciable. Sea una red social, un servicio externo, los feeds o cualquier otra cosa, todo suma, poco o mucho pero eso poco importa. El total es la suma de todas esas pequeñas partes.

Todo lo que coloquemos en nuestro sitio que dificulte la navegación hará que los visitantes disminuyan rápidamente; cuantas más opciones tengamos, mejor será. De alguna manera, es la misma idea que suelen tener muchos respecto de los enlaces. Un error egoista es no enlazar, creyendo que si uno coloca un enlace a otro sitio, quien lee, hará click y se irá, dejándonos con el amargo sabor de ser ignorados.

Es posible que así sea pero también provocará dos cosas, primero, la información que compartimos será más amplia y eso será agradecido y segundo, ese enlace que colocamos es de ida y vuelta ya que quien enlace será enlazado, no por obligación sino porque de esa manera, la red se va ampliando y alguien irá desde acá hasta alguna parte pero también vendrá desde esa otras partes. Los enlaces y los feeds enriquecen a los blogs y no es en vano que sea uno de los datos sustantivos para evaluar su influencia.

En la misma entrada, Gem@ agrega otro comentario:

Lo que dice AleMauri es comprensible. Yo entiendo que los lectores son esas personas que puntualmente nos leen y precisamente por eso lo hacen desde el feed porque quizás de otra forma no tendría tiempo de hacerlo. Las visitas pueden ser visitas que vienen buscando algo, que nos siguen porque le gusta la temática o simplemente porque caen de casualidad siguiendo un enlace. Yo veo a las visitas como si entraran a nuestra exposición, miran, buscan, comentan ... pero desde el feed, es como si lo vieran todo desde un escaparate. Si les interesa, entrarán y podrán ver todo más detalladamente. Es el precio de la comodidad.

Es verdad, es el precio y lo cierto es que cada vez usamos más y más los lectores de feeds y eso, no es ni malo ni bueno, sólo inevitable.

En todo caso, la respuesta es lo de menos, lo importante es cuál es la pregunta a formular: ¿para qué quiero tener un blog? Y ahí ya no hay nada que agregar y cada cuál tendrá una opinión diferente y todos tendrán razón, incluso quienes, simplemente, no tengan la menor idea de para qué tienen un blog y siga allí funcionando, como una parte de nosotros mismos.

Cuando cargamos una página web, en la barra de estado solemos ver el proceso de carga, es decir, los archivos externos que se van insertando. En algunos de ellos, al terminar la carga se nos mostrará la palabra Listo pero, en Internet Explorer, es usual que también veamos un ícono de advertencia que nos indica un error en alguno de los scripts.

Que otros navegadores no muestren eso no significa que no haya errores así que, de alguna manera tiene su utilidad aunque, para un usuario normal es algo irrelevante y para quien tiene un blog, suele ser molesto o "poco estético". Si hacemos doble click sobre ese ícono, veremos una ventana que pretende explicarnos el error:

Su uso es dudoso. Para un usuario que navega, es un dato que no le interesa ya que nada puede hacer y para un administrador de un sitio, la información que brinda es bastante escasa. Sin las herrameintas adecuadas, buscar el error es casi imposible y con las herramientas adecuadas es bastante engorroso. Incluso, algunos de esos errores son imposibles de solucionar ya que son generados por scripts sobre los que no tenemos control o no podemos modificar.

Bien, para quien no quiera que eso se muestre, podemos agregar un par de líneas antes de </head> y ocultar eso:

<script type='text/javascript'>
  function noMostrarErrores(){ return true }
  window.onerror=noMostrarErrores;
</script>

Obviamente, esto nos impedirá "ver" que esos errores existen e incluso, algunos de ellos podrán filtrarse pero, digamos que es una forma de esconder la mayoría de ellos bajo la alfombra. Una forma poco sutil pero efectiva.

Los efectos elementales para mostrar y ocultar elementos con JQuery son bastante similares a los que se aplican con Scriptaculous.

Hay ocho funciones que los controlan:

show() y hide() muestran y ocultan un elemento de manera simple
fadeIn() y fadeOut() lo muestran u ocultan con un efecto de fade
slideDown() y slideUp() lo muestran u ocultan con un efecto deslizante
toggle() permuta el estado de un elemento, si está oculto lo muestra y viceversa
slideToggle() hace lo mismo pero con un efecto deslizante

Para utilizarlos, debemos indicar dos cosas, el elemento sobre el cual se va a aplicar el efecto y el enlace que ejecutará la función. Ambos deberían ser identificados con un ID único. Por ejemplo:

<div id="nombreContenido"> ....... el contenido ....... </div>
<a href="javascript:void(0);" id="nombreEnlaceMostrar"> MOSTRAR </a>
<a href="javascript:void(0);" id="nombreEnlaceOcultar"> OCULTAR </a>

La función sería algo así:

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
  $("#nombreEnlaceMostrar").click(function () { $("#nombreContenido").show(); });
  $("#nombreEnlaceOcultar").click(function () { $("#nombreContenido").hide(); });
});
//]]>
</script>

Con el mismo tipo de sintaxis, podríamos utilizar los otros efectos:

$("#nombreEnlaceMostrar").click(function () { $("#nombreContenido").fadeIn(); });
$("#nombreEnlaceOcultar").click(function () { $("#nombreContenido").fadeOut(); });

$("#nombreEnlaceMostrar").click(function () { $("#nombreContenido").slideDown(); });
$("#nombreEnlaceOcultar").click(function () { $("#nombreContenido").slideUp(); });

Y en el caso de toggle sólo requerimos una instrucción:

$("#nombreEnlace").click(function () { $("#nombreContenido").toggle(); });

o bien:

$("#nombreEnlace").click(function () { $("#nombreContenido").slideToggle(); });

La palabra !important es algo que podemos agregar al final de una propiedad CSS y que realza cierto valor para, de esta forma, obligar a que se ignore una declaración y forzar un cambio.

Un ejemplo:

<a style="color: red !important;" href="javascript:void(0);">UN ENLACE ROJO</a>

Generalmente, los gadgets que agregamos incluyen ciertas propiedades sobre las cuales no tenemos control alguno así que podemos intentar sobrescribirlas usando esta palabra clave ya que nada impide usarla de manera inversa, es decir, declarando una propiedad ANTES que la otra. Explicación confusa pero veamos un ejemplo para probarlo de manera dramática.

La clase .post-body es la que por defecto, controla las propiedades de la entradas del blog. Podemos definirle una fuente de texto:

.post-body {
  font-family: Arial;
}

Si vamos al editor de entradas y allí escribimos algo, podemos formatearlo, cambiándole la fuente. El resultado será algo así:

<span style="font-family:courier new;">Integer vitae quam lectus! Donec sodales</span>

De ese modo, esa parte tendrá una fuente diferente a la definida por defecto. Primero decimos que es Arial y luego decimos que es Courier así que para el navegador, vale esta última porque SIEMPRE, las definiciones de estilo agregadas directamente a una etiqueta, tienen prioridad a las agregadas en la hoja de estilo. Pero ¿qué pasa si cambiamos la definición inicial y ponemos?:

.post-body span {
  font-family: Arial !important;
}

Pués entonces, sea lo que sea que pongamos en el editor, la fuente se mostrará en Arial y el navegador usará siempre esa fuente, aunque luego le digamos lo contrario.

Otro ejemplo:

a {color: red;}
a {color: blue;}

los enlace serán azules pero así:

a {color: red !important;}
a {color: blue;}

los enlace serán rojos.

Si bien la definiciones CSS se ejecutan de manera secuencial y la última sobrescribe a la anterior, hay una excepción y es cuando se encuentra una propiedad con la palabra !important. En ese caso, todas las demás declaraciones son ignoradas y lo único que podemos hacer para cambiar esto es agregarle esa palabra extra así que en el post de ejemplo, deberíamos escribir:

<span style="font-family:courier new !important;">Integer vitae quam lectus! Donec sodales</span>

Es por eso que debemos ser prudentes con el uso de esta palabra y sólo aplicarla cuando es absolutamente necesario ya que sino, nos veremos en problemas a la hora de corregir algo.