La etiqueta PRE

Hace unos días, luego de los cambios realizados por Blogger y que aún nos vuelven locos, ocurrió un problema que viene repitiéndose desde hace mucho. Si bien parece haberse "arreglado", no deja de ser interesante hablar del tema por si vuelve a repetirse el problema.

Hay una etiqueta HTML que algunos solemos usar, sobre todo a la hora de mostrar códigos: <pre> </pre> (PREformated) que nos permite formatear cualquier texto que se encuentre dentro de ella.

El HTML tiene una particularidad, los espacios en blanco adicionales se eliminan sistemáticamente es decir, si escribimos:

<p>Hola          Adiós</p>

Lo que veremos será:

Hola Adiós

Toda esa separación adicional será ignorada y si queremos separar una palabra de la otra, tenemos que recurrir a caracteres especiales como &nbsp; (on-breaking space o no-break space) que es el llamado hard space o fixed space (espacio fijo).

<p>Hola&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Adios</p>

Se verá:

Hola          Adios

También podemos usar otra variante, escribiendo &#160; y si queremos reproducirlo con el teclado, es sencillo ya que en la mayoría de los procesadores de texto basta oprimir Ctrl+Mayús+Espacio o Ctrl+Espacio.

Si no queremos usar esos caracteres podemos recurrir al CSS y escribir:

<p>Hola <span style="margin-left:valor">Adios</span></p>

Sea como sea, el resultado es un código confuso y da demasiado trabajo. Entonces, podemos recurrir a la etiqueta PRE. Cuando el navegador encuentre esa etiqueta sabrá que deberá dejar los espacios en blanco intactos, mostrar el texto con una fuente de ancho fijo y deshabilitar los saltos de línea.

Es decir, si escribimos:

<pre>
este texto
       se mostrará
              así
                     tal y como lo escribimos.
</pre>

Por defecto, veremos esto:

este texto
       se mostrará
              así
                     tal y como lo escribimos.

No sólo podemos usar espacio, también podemos usar TABs horizontales (&#09;) para crear tablas sencillas:

ABCDEF		ABCDEF		ABCDEF
ABCDEF		ABCDEF		ABCDEF
ABCDEF		ABCDEF		ABCDEF

La etiqueta PRE puede tener varios atributos opcionales class, id, style, title y uno especial llamado width con el que podemos definir la cantidad máxima de caracteres de cada línea.

Como con cualquier otra etiqueta, podemos definir sus propiedades con CSS y modificar las que tiene por defecto. De esta manera, es posible establecer el tipo de fuente, su tamaño, márgenes, color, etc. El problema con Blogger fue que la distancia entre líneas dentro de esa etiqueta cambió abruptamente agregando una línea adicional, así que si normalmente veíamos esto:

una linea
       otra linea
       otra linea
última línea

Pasamos a ver esto:

una linea

       otra linea

       otra linea

última línea

En este caso no había solución posible pero, en muchos otros, cuando lo que vemos es una gran separación entre dos líneas de texto sin que hayamos dejado esos espacios, lo que debemos verificar es una propiedad CSS llamada line-height que controla la "altura" de las líneas.

Por defecto esta propiedad o no está definida o tiene como valor "normal". Podemos cambiarla usando valores expresados como puntos (pt), pixeles (px) o proporcionales (em). Por ejemplo:

line-height: normal;
line-height: 15px;
line-height: 1.5em;

Cuanto más grande sea ese valor, mayor será la distancia entre dos líneas.

Click para ver el video.

Una animación de Jeremy Clapin con música de Nicolas Martin.

REFERENCIAS:

muiye.com

Ha habido algunos problemas en ciertas plantillas que parecen haber copiado y pegado los códigos para agregar el formulario de comentarios incrustado debajo de los posts; no tienen errores de sintaxis, Blogger los acepta pero, aún así no funciona y lo que siguen viendo debajo de los comentarios es un enlace que suele decir Publicar un comentario en la entrada pero no aparece el formulario de envío.

Si se fijan, ese enlace apunta a:

http://nombreBlog.blogspot.com/XXXX/XX/tituloPost.html#comment-form

Por lo que he visto después de varias consultas, esto, se debe a que el segundo código está mal ubicado ya que la explicación decía busquen:

<p class='comment-footer'>
  <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
    <data:postCommentMsg/>
  </a>
</p>

y lo reemplazan por el contenido de este archivo de texto

El problema es que no todas las plantillas poseen la misma estructura y que el dato importante a buscar es este:

<a expr:href='data:post.addCommentUrl'
  expr:onclick='data:post.addCommentOnclick'>

Si buscan sólo esa línea, es probable que encuentren dos iguales pero ubicadas en sectores diferentes. Una se encuentra en:

<b:includable id='backlinks' var='post'>

la otra en:

<b:includable id='comments' var='post'>

La primera es para los backlinks y la segunda para los comentarios; el que debemos cambiar es el segundo y no siempre está entre las etiquetas <p class='comment-footer'> y </p>, puede estar entre etiquetas <div class='comment-footer'> y </div> o etiquetas <hx class='comment-footer'> y </hx>; puede tener otro nombre de clase, realmente, pueden haber muchas variantes y es difícl enumerarlas todas.

Si ya hicieron los cambios y ven el enlace al que me refiero y no ven el formulario incrustado, lo más probable es que ese segundo código esté en en sector de backlinks y no en el sector de comments. Así que, lo que debe hacerse es cambiarlo de lugar, restaurar el que cambiaron y buscar el otro que es el que debe cambiar.

En resumen, ese segundo código es el que MUESTRA el formulario y ese DEBE estar dentro de <b:includable id='comments' var='post'>

Seguimos jugando un poco con la nueva posibilidad de agregar el formulario de comentarios en el mismo post y no en la espantosa ventana blanca de Blogger. Espantosa pero ... bueno, a veces parece que la extrañamos

En realidad, no es que la extrañemos o que estemos buscando siempre la quinta pata al gato sino que sabemos que esta es una función en fase de desarrollo y por lo tanto es incompleta, por ejemplo, no tiene la posibilidad de seguir los comentarios via mail. Además, ya tenemos experiencia con estas novedades y sabemos que de tanto en tanto, algo fallará y en ese caso ¿qué haremos?

De entrada, pensé en eso y dejé el enlace "normal" por si alguien quería usarlo pero, en un comentario, Gem@ me avisaba que no furulaba Además, un poco más adelante, Fernando agregaba otro comentario: "No quisiera dejar a un lado el pobre sistema de comentarios con Lightwindow, o el sistema completo" y ambos tenían razón.

Lo que ocurre es que, cuando ponemos la opción de insertar el formulario, la URL "normal" cambia y <data:post.addcommenturl> apunta siempre al formulario del post y no a la vieja página blanca aunque, como esta sigue existiendo, sólo es cuestión de ver como la podemos enlazar. Fernando es quien terminó de resolver el problema y entonces, podemos aplicar la opción en la plantilla.

En mi caso aparece como Agregar un comentario al viejo estilo ... debajo del formulario. Haciendo click allí nos lleva a la ventana tradicional de comentarios de Blogger. De esta manera, un visitante podrá usar el formulario incrustado o el anterior indistintamente. Lo que debemos hacer es buscar esto:

<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
  <data:postCommentMsg/>
</a>

Donde <data:postCommentMsg/> es el texto por defecto, el que nosotros hayamos creado o una imagen personal. Lo reemplazamos por esto (todo en una sola línea):

<a expr:href='&quot;http://www.blogger.com/comment.g
    ?blogID=XXXXXXX&amp;postID=&quot; + data:post.id'>
  El texto o imagen que queremos usar
</a>

Allí, el único dato que debemos verificar es cuál es el ID de nuestro blog. Eso es sencillo de establecer, si estamos editando la plantilla, miramos la barra de direcciones del navegador y veremos algo así:

http://www.blogger.com/html?blogID=123456789&tpl=true

ese número es el ID del blog y puede tener una cantidad variable de dígitos.

Ahora bien, lo que faltaría es ver si podemos lograr que funcione LightWindow en los comentarios. En mi caso, es algo que me resulta muy útil así que quisiera mantenerla activa y como ya sabemos la URL que debemos poner, sólo hay que modificar una línea del script.

En lugar de:

var viejoEnlace = &quot;<data:post.addCommentUrl/>&quot;;

ponemos (todo en una sola línea):

var enlaceComentario = "http://www.blogger.com/comment.g
  ?blogID=XXXXX&amp;postID=<data:post.id/>&quot;;

Con el mismo criterio anterior, reemplazando XXXXX por el número del ID de nuestro blog.

Hecho esto: ¡Tenemos comentarios para todos los gustos!
y "de todos los colores y sabores..."

Hubo un tiempo en que Counter-Strike era solo un ... nada; es que, aunque no lo crean, hubo un tiempo en que las cosas eran reales y no virtuales, podían tocarse con los dedos.

Click para ver la galería de imágenes.

REFERENCIAS:

sun-sentinel.com

Click para ver los videos.

No ha sido un Anochecer de un día agitado sino un amanecer, atardecer y anochecer de una laaaaaaaaarga semana y como si fuera poco, la entrada que estaba haciendo para esta sección despareció entre los fragores de las novedades de Blogger.

Me gustaría decir que fue producto de algún bit torcido pero, la verdad, es que eliminé el borrador y no me di cuenta hasta que quise terminarlo. Bueno, a nadie le importan mis tonterías y supongo que a nadie le hubiera importado ese post porque hablaba de una película de esas que mejor olvidar: Sargent Pepper's Lonely Hearts Club Band, algo que calificaron como El peor musical de la historia de Hollywood y que se estrenó en 1978 con la producción de Robert Stigwood y la dirección musical de George Martin.

Allí, los protagonistas son todos personajes de canciones varias: Lucy, Mr.Mustrad, The Henderson, Mr.Kite, Strawberry, Maxwell y claro, Billy Shear y la banda completa. Está protagonizada por los Bee Gees y Peter Frampton (las estrellas pop de ese momento) y también "actuan" Steve Martin, George Burns (el único que habla, el resto canta todo el iempo), Earth Wind and Fire, Billy Preston, Alice Cooper y en un apoteótico final, decenas de invitados se unen para cantar.

La melange es realmente increíble: Peter Allen, George Benson, Keith Carradine, Donovan, José Feliciano, John Mayall, Robert Palmer, Wilson Pickett, The Pointer Sisters, Helen Reddy, Johnny Rivers, Sha-Na-Na, Connie Stevens, Tina Turner, Johnny Winter, Alan White, amigos de los Beatles, músicos de la época y todo el staff de la RSO Records, la compañia de música de Stigwood.

Algunas cosas quedaron y debo pedir disculpas por mostrarlas:

Click para ejecutar el video.

Ahora, ya no tengo tiempo de pensar algo nuevo y la verdad, tampoco tengo ganas. Tal vez, podría hacerme el gracioso y mostrar un video de los Beatnix, un grupo australiano que dice ser un tributo y que cantan Stairway to heaven compitiendo con la blasfemia de los hindues cantarines; tal vez, como contrapartida, podría mostrar una versión instrumental de Stairway to heaven con Jimmy Page, Jeff Beck y Eric Clapton tocando juntos como en la época de los Yardbirds o curiosear un poco por la red y encontrar un disco adjudicado a The Quarry-Men y grabado en Liverpool en abril de 1960 donde puede escucharse a John, Paul, George y Stuart Sutcliffe haciendo algunas de sus primeras escaramuzas con el grupo que en pocos meses sería formalmente llamado The Beatles:

<

Click para ejecutar el video.

Así que al final, me decidí por poner una película que gracias a Google Videos podemos ver y descargar completita:

 

Sin más trámite, vamos con el formulario de comentarios.

Para esto, lo primero que debemos hacer es habilitar la opción correspondiente ingresando a nuestro blog a través de Blogger Draft. Allí, en Configuración | Comentarios, podemos ver esto:

Marcamos entonces Entrada incrustada y guardamos.

De ahora en adelante, podemos seguir trabajando en Blogger Draft o en Blogger "normal", es indistinto.

Con cualquier plantilla nueva, el resultado será instantáneo; el problema surge con las plantillas que ya tenemos. En ese caso, necesitamos agregar los códigos correspondientes y, en principio, no hay que deshabilitar ningún otro hack realizado. Tal como mostraba en el ejemplo de mi blog de pruebas, el formulario está colocado y convive con el resto de las modificaciones que, por cierto, son muchas.

Vamos a Diseño de la plantilla | Edición HTML, y expandimos los artilugios. Hay dos códigos que debemos insertar; el primero lo podemos poner en cualquier parte justo antes de una instrucción </b:includable>. Par seguir el mismo esquema que usa Blogger, podríamos ubicarlo así:

.......
<:/b:includable>
[... aquí insertamos el código ...]
<:b:includable id='backlinkDeleteIcon' var='backlink'>
.......

En esa parte, lo que debemos insertar es lo siguiente:

<b:includable id='comment-form' var='post'>
  <div class='comment-form'>
    <a name='comment-form'/>
    <h3><data:postCommentMsg/></h3>
    <p><data:blogCommentMessage/></p>
    <iframe allowtransparency='true'
       expr:src='data:post.commentFormIframeSrc'
       frameborder='0' height='275'
       id='comment-editor' scrolling='auto' width='100%'/>
  </div>
</b:includable>

Lo he colocado en un archivo de texto que pueden descargar para evitar errores en la transcripción

Ahora la segunda parte; para eso debemos buscar algo así:

<p class='comment-footer'>
  <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
    <data:postCommentMsg/>
  </a>
</p>

Y lo reemplazamos por esto:

<p class='comment-footer'>
  <b:if cond='data:post.embedCommentForm'>
    <b:include data='post' name='comment-form'/>
  <b:else/>
    <b:if cond='data:post.allowComments'>
      <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
        <data:postCommentMsg/>
      </a>
    </b:if>
  </b:if>
</p>

Otra vez, para evitar problemas, hay un archivo de texto que contiene el código

Eso, sería todo. Si guardamos la plantilla debería funcionar sin problemas y adaptarse al color de fondo del blog.

• El formulario trabaja con cuentas de Google, OpenID, nombre/URL y anónimos; es decir, con los mismos modos que el formulario común. En el post del blog de pruebas hay un surtido de ellos.
• Si tenemos un mensaje personalizado en el formulario se verá igual y se integrará al nuevo modelo.
• Si utilizamos la verificación de palabras se mostrará en una pequeña caja de diálogo.
• Por el momento, el seguimiento via mail de los comentarios no está habilitado.

Si usamos una etiqueta clásica, dicen que la etiqueta que debemos usar es :
<$BlogItemCreate$>

Un detalle fundamental es que ese formulario no es un agregado común, es un <iframe> con todo lo que eso significa, un elemento externo a nuestra página que Blogger sigue controlando y al que no será sencillo personalizar.

Los botones son lo que son, el área de textos es lo que es; nada de esto es modificable aunque hay ciertos detalles que podemos mejorar. Estas son las clases CSS que son accesibles y los valores que estoy usando en este blog:

.comment-form {  /* este el rectángulo general */
  margin: 0 auto;   /* lo centro en el área de posts */
  width: 400px;  /* le doy un ancho para poder centrarlo */
}
.comment-form h3 { /* este es el título que por defecto es "Publicar un comentario" */
  [... propiedades del texto  ...]
}
.comment-form p { /* este es el mensaje personalizado */
  [... propiedades del texto  ...]
}
#comment-editor { /* es el IFRAME */
  height: 200px; /* le doy un alto menor */
  width: 400px; /* le doy un ancho menor, por defecto es el 100% */
}

Los enlaces a usar son los que están definidos o los podemos cambiar para que nos dirijan a diferentes posiciones del post. En la plantilla, este es un enlace al inicio de las entradas individuales:

<a expr:href='data:post.url'> ENLACE </a>

Este, es un enlace al formulario de comentarios:

<a expr:href='data:post.addCommentUrl'> ENLACE </a>

Este, es un enlace al inicio de los comentarios:

<a class='comment-link' expr:href='data:post.url + &quot;#comments&quot;'> ENLACE </a>

Por ahora, disfrutemos lo que hay y en un par de días reiniciaremos las quejas

ANTE ALGUNAS DUDAS:

• Solución a algunos problemas con los formularios de comentarios
• Haciendo que furulen los comentarios :-)

Implementar la nueva opción para califica posts es simple si ya disponemos del código en nuestra plantilla. Sólo hay que editar el elemento Blog y allí marcar la casilla correspondiente.

De esa manera, aparecerá debajo de cada post con el color de fondo que tengamos establecido.

¿Y cómo sabemos si tenemos el código? Hay que buscar esto:

<span class='star-ratings'>

que es el inicio. Si está, seguramente está el resto. Si no está, lo podemos agregar manualmente.

Tiene dos partes. Para la primera debemos buscar esto:

<b:includable id='main' var='top'>
.......
<b:include name='feedLinks'/>
[ ... aquí insertaremos el código ...]
</b:includable>

El código que debemos pegar es este:

<!-- RANKING -->
<b:if cond='data:top.showStars'>
<script src='http://www.google.com/jsapi' type='text/javascript'/>
<script type='text/javascript'>
  google.load("annotations", "1");
  function initialize() {
    google.annotations.setApplicationId(<data:top.blogspotReviews/>);
    google.annotations.createAll();
    google.annotations.fetch();
  }
  google.setOnLoadCallback(initialize);
</script>
</b:if>

Ahora, falta la segunda parte que colocaremos donde nos gustaría que apareciera. Por defecto, se ubica en alguno de estos bloques del footer de los posts. No es sencillo mostrar exactamente donde pero, supongamos que es donde está el autor o las etiquetas. Buscamos ese bloque y lo ponemos al final:

<p class='post-footer-line post-footer-line-1'>
 ......
[ ... aquí insertaremos el código ...]
</p>

El código a insertar es el siguiente:

<span class='star-ratings'>
<b:if cond='data:top.showStars'>
  <div expr:g:background-color='data:backgroundColor'
      expr:g:text-color='data:textColor'
      expr:g:url='data:post.absoluteUrl'
      g:height='42'
      g:type='RatingPanel'
      g:width='180'>
      </div>   
</b:if>
</span>

Este elemento nuevo tiene algunos problemas que cada uno evaluará. Para empezar es lento, demorará en cargarse. El segundo problema es que es difícil de personalizar aunque hay algunas cosas que podemos hacer:

g:width='180' es el ancho
g:height='42' es la altura
g:background-color='data:backgroundColor' es el color de fondo
g:text-color='data:textColor' es el color del texto.

También podemos la clase star-ratings que no tiene propiedades o bien colocarlas directamente.

En un ejemplo que puse en mi blog de pruebas, le puede de ancho 200 y de alto 32. Además, cambié:

<span class='star-ratings'>

por:

<span class='star-ratings'
style='display: block;
    background-color: #343F4A;
    margin: 30px 20px; padding: 10px;
    text-align: center;'>

La integración de las Herramientas para Webmaster de Google a Blogger es sencilla, sólo debemos ir al escritorio y allí, abajo de todo, hacer click en el enlace que nos guiará en el proceso.

Otro detalle que no deja de ser importante es la posibilidad de Exportar e Importar blogs. Ya cuando creamos uno nuevo nos aparece la opción correspondiente:

Pero también podemos hacerlo desde los blogs que tenemos. Tenemos que ir a Configuración y en la primera sola aparecerán las opciones:

Hacemos click en exportar para crear un backup y nos advierten que lo podemos hacer ya sea para mover el blog a otro servicio o para guardarlo en nuestra PC (más información). Eso es todo, se descargará una archivo XML que contendrá los posts y los comentarios y cuyo tamaño dependerá de lo que tengamos publicado.

Tal vez estoy empezando por lo más sencillo y dejo lo más complicado para más tarde aunque en un blog de pruebas pude poner todas las nuevas posibilidades de Blogger a partir de una plantilla mínima.

También Alejandro de SpamLoco ha estado jugando y ya ha puesto el nuevo modelo de comentarios en su blog

Aquí van algunas capturas de pantalla del nuevo editor y algo de lo que he visto que han incorporado:

El nuevo diseño del Editor de posts de Blogger
La nueva forma de previsualizar las entradas
La nueva ventana para establecer enlaces

Cuando se agrega una imagen, la ventana cambia significativamente y nos mostrará una miniatura. Un vez agregada, desde el editor, podemos arrastrarla para reubicarla, redimensionarla o eliminarla (en Firefox 3 hay que hacer doble click sobre la imagen).

En las Opciones aparece lo de siempre, la fecha y hora de la entrada, las distintas posibilidades para definir los comentarios de los posts individuales, etc.Se ha agregado la Configuración para editar HTML que antes estaba en las opciones generales del blog con lo que podemos establecer cómo trabajar cada entrada:

• Convertir saltos de línea a <br>
• Ignorar saltos de línea

Lo nuevo es la llamada Configuración de composición:

• Interpretar HTML escrito
• Mostrar HTML literalmente

Normalmente, si en Redactar escribimos:

<b>algo en negrita</b> lo que veremos será algo en negrita

marcando la primera opción, podemos escribir código y este será tomado como tal es decir, si escribimos:

<b>algo en negrita</b> lo que veremos será <b>algo en negrita</b>

así podemos combinar códigos y previsualización sin tener que permutar entre Redactar y Edición HTML.

Temporalmente, en ese editor, el modo Autosave está deshabilitado y algunas funciones no funcionan en ciertos navegadores pero recuerden que se trata de un editor en desarrollo.

No se si será la noticia del año pero ... anda cerca.

Blogger in Draft dice hace minutos en su actualización mensual (traduzco como puedo)

• Se ha introducido la Webmaster Tools Verification: una herramienta que se integra automáticamente a Google’s Webmaster Tools (más información)
• Se ha implementado un sistema de rankings para calificar posts (Star ratings 0/5) que se puede colocar debajo de cada post (más información)
• Se ha agregado la posibilidad de importar o exportar el contenido de los blogs esto es, hacer un backup de posts y comentarios (más información)


• Se ha cambiado el editor de posts para permitir insertar imágens con drag-and-drop, etc (más información)

Pero la frutilla del postre dice han agregado la posibilidad de Embedded comment form es decir, que "debido a la increibe demanda popular":

se podrá poner el formulario de comentarios dentro del mismo post

No, no pregunten nada más, hay que leer las instrucciones y ver cómo hacerlo pero, todas las opciones están disponibles entrando con nuestra cuenta en Blogger Draft.

Evidentemente, las próximas semanas serán agitadas

Si bien no creo en los estándares absolutos ni me preocupan cosas como la validación de las páginas o las reglas rígidas de la W3C, creo que debemos intentar que nuestro sitio se vea lo mejor posible sin importar el navegador o el sistema operativo que utilicen los visitantes. Claro, eso no siempre es posible pero, hay que intentarlo.

Es por eso que no me gusta utilizar códigos que sólo funcionen en ciertos navegadores, ni los de IE ni los de Firefox y lo cierto, es que ambos los tienen. Incomprensiblemente, algunos de ellos podrían ser aplicados genéricamente pero, la guerra es la guerra.

Pero, una cosa es lo que yo pienso y otra lo que piensan los demás así que, como hay muchas preguntas sobre ciertos códigos o propiedades que no son genéricas sino exclusivas, este sería el primero de una serie de post para explicar algunas de las más comunes.

En Internet Explorer las barras de desplazamiento pueden ser personalizadas utilizando CSS. Por defecto, tienen un estilo que es establecido por el tema que usemos pero podemos modificarlas tanto de manera general (para toda la página) o para determinado elemento (por ejemplo, un textarea).

Click para ver ejemplos (sólo Internet Explorer)

	scrollbar-3dlight-color: #FFEEDD; scrollbar-arrow-color: navy; scrollbar-base-color: #FFFFF0; scrollbar-darkshadow-color: #FF9966; scrollbar-face-color: gold; scrollbar-highlight-color: #FFFFFF; scrollbar-shadow-color: #000000;
	scrollbar-highlight-color: darkgray; scrollbar-arrow-color: #DAA520; scrollbar-base-color: gray; scrollbar-darkshadow-color: gray; scrollbar-track-color: gray;
	scrollbar-3dlight-color: #00FF00; scrollbar-arrow-color: #00FF00; scrollbar-darkshadow-color: #000000; scrollbar-face-color: #000000; scrollbar-highlight-color: #00FF00; scrollbar-shadow-color: #00CC00; scrollbar-track-color: #00CC00;
	scrollbar-3dlight-color: #F7F9FB; scrollbar-arrow-color: #70737B; scrollbar-darkshadow-color: #F7F9FB; scrollbar-highlight-color: #70737B; scrollbar-face-color: #F7F9FB; scrollbar-shadow-color: #70737B; scrollbar-track-color: #F7F9FB;
	scrollbar-3dlight-color: #101214; scrollbar-arrow-color: #000000; scrollbar-darkshadow-color: #101214; scrollbar-face-color: #7E898B; scrollbar-highlight-color: #C3C8C9; scrollbar-shadow-color: #7E898B; scrollbar-track-color: #101214;

Hay ocho propiedades que controlan las barras, cada una de ella define el color de una parte.

• scrollbar-3dlight-color y scrollbar-highlight-color son el ángulo superior izquierdo de los botones, generalmente los más claros
• scrollbar-darkshadow-color y scrollbar-shadow-color son el ángulo inferior derecho de los botones, generalmente los más oscuros
• scrollbar-arrow-color es el color de las flechas de desplazamiento
• scrollbar-base-color es el color general (las demás quedan al tono)
• scrollbar-face-color es el color de los botones
• scrollbar-track-color es el color de la base de deslizamiento
  

Las propiedades las podemos agregar a nuestra hoja de estilo o utiliza el atributo STYLE; del mismo modo que el resto de las propiedades CSS, podemos acceder a ellas usando JavaScript, en este caso, las variables asignadas a cada atributo son las siguientes:

scrollbar3dLightColor = scrollbar-3dlight-color
scrollbarHighLightColor = scrollbar-highlight-color
scrollbarDarkShadowColor = scrollbar-darkshadow-color
scrollbarShadowColor = scrollbar-shadow-color
scrollbarArrowColor = scrollbar-arrow-color
scrollbarBaseColor = scrollbar-base-color
scrollbarFaceColor = scrollbar-face-color
scrollbarTrackColor = scrollbar-track-color

Lograr una combinación de colores adecuada suele ser complejo pero, hay una forma sencilla de hacerlo, establecer sólo la propiedad scrollbar-base-color ya que funciona como "combinador" del resto de los atributos.

rojo amarillo verde azul

Este es un pequeño ejemplo donde se pueden experimentar las posibilidades que ofrecen estas propiedades. Seleccionando los colores para cada una de ellas, el botón MOSTRAR hará que se vea el ejemplo concreto en el textarea y se escribirá el código necesario a incluir en el estilo.

NOTA: Como sólo es una demostración, colocando un valor no admitido generará un error que habrá que ignorar y corregir.

SELECCIONE LOS ATRIBUTOS A MODIFICAR

3dlight			highlight
darkshadow			shadow
arrow			track
base			face

Color seleccionado

powered by NicoGeek

CODIGO GENERADO

Fotoflexer es uno de los mejores sitios donde podemos editar imágenes online ya sea que estén en nuestra PC o en Photobucket, MySpace, Facebook, Flickr, Picasa y otras redes sociales.

Es una de los servicios online más completos que he visto. La cantidad de opciones realmente asombra:

Una vez que terminamos la edición podemos guardar la imagen en sus servidores, agregarla alguna de las redes o descargarla. Para todo esto es necesario registrarse pero, vale la pena probarlo.

REFERENCIAS:

MicroZulo

Cuando hablaba de los problemas al cambiar la plantilla, un comentario de Eulalia me permite ampliar el tema y comentar una idea que ella propone y explica en un post reciente.

En términos generales, los problemas siempre surgen con los elementos (widgets) agregados ya que Blogger los maneja a su voluntad, numerándolos consecutivamente sin importar nuestros deseos. Por ejemplo, si tenemos:

<b:widget id='HTML2' locked='false' title='' type='HTML'/>

y lo cambiamos por:

<b:widget id='HTML100' locked='false' title='' type='HTML'/>

al guardar la plantilla, el atributo id='HTML100' cambiará otra vez.

Esto es lo que hace las cosas complicadas. Nuestra plantilla tiene una serie de elementos numerados que no coincidirán, salvo un milagro, con los elementos de la nueva plantilla ¿Podemos compatibilizarlas? ¿Podemos agregar a la plantilla nueva los elementos que deseamos conservar y así ahorrarnos problema? La respuesta es sí.

El método que explica Eulalia es correcto; en resumen, creamos un blog auxiliar de pruebas, subimos la plantilla nueva y vamos agregando los elementos que vamos a necesitar, verificando que IDs de cada uno de ellos coincida con la plantilla original.

Algo similar podemos hacer desde el mismo código HTML. Supongamos que la plantilla es sencilla, que sólo tenemos una sidebar que es la que debemos preservar.

Siempre, usamos un blog auxiliar y allí ponemos la plantilla nueva. Ahora, vamos a la Edición de HTML y NO expandimos los artilugios para reducir la cantidad de código. Buscamos la sección de la sidebar que es algo así:

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
  [aquí están los elementos o widgets]
</b:section>
</div>

Al no estar expandido el código, cada elemento se muestra en una sola línea, por ejemplo:

<b:widget id='CustomSearch1' locked='false' title='Buscar este blog' type='CustomSearch'/>
<b:widget id='HTML2' locked='false' title='BUSCADOR' type='HTML'/>
<b:widget id='HTML1' locked='false' title='TRADUCTOR' type='HTML'/>
<b:widget id='Feed1' locked='false' title='ULTIMOS POSTS' type='Feed'/>
<b:widget id='Label1' locked='false' title='ETIQUETAS' type='Label'/>
<b:widget id='BlogArchive1' locked='false' title='ARCHIVOS' type='BlogArchive'/>

Bastaría copiar esas líneas y pegarlas en la nueva plantilla, reemplazando las que ya tiene para que ambas sidebars quedarán igual.

¿Posibles problemas? Claro, esto es Blogger; por ejemplo, si los elementos son muchos, saldrá un mensaje de error y en ese caso, habrá que hacerlo en varias etapas.

Aunque es un método sencillo, puede ser engorroso porque en ciertas circunstancias el número de los IDs cambia al guardarse pero eso no afectará al contenido sino sólo al título, el TRADUCTOR contendrá al BUSCADOR y viceversa pero, eso se soluciona cambiando el texto.

La base de todo es saber que lo que hacemos en Elementos de la página, agregando, reordenando o eliminando elementos también lo podemos hacer directamente en el código, agregando, reordenando o eliminando líneas.

El perro ventilado.

La carnada menos pensada.

La tortuga guerrera.

Mucha, mucha, mucha gente.

Strix es un generador de imágenes donde podemos poner un fondo y un texto y el resultado será una mezla de ambos con un efecto tipo collage.

REFERENCIAS:

Gema Blog

El idioma español ha multiplicado su presencia en internet y ya es el tercer idioma más usado, superado sólo por el inglés y el chino

Según las última evaluaciones, el número de usuarios en todo el planeta ha crecido en 2007 hasta 1.400 millones registrando un crecimiento del 21% respecto al año anterior aunque, comparado con la difusión de los servicios de telefonía móvil, estas cifras parecen casi ridículas: en el mismo año se alcanzaron los 3.285 millones de clientes lo que significa un 20% de aumento en un solo año.

Si la aritmética no falla, la mitad de la población mundial usa teléfonos celulares.

No sé por qué, me acorde de Aldous Huxley y su Mundo Feliz: "una democracia que al mismo tiempo es una dictadura perfecta; una cárcel sin muros en la cual los prisioneros no sueñan con evadirse. Un sistema de esclavitud donde, gracias al sistema de consumo y al entretenimiento, los esclavos aman su servidumbre."

Tendré que volver a leerlo; de pronto, me he sentido uno de los "salvajes".

El tema del tiempo de carga de una página web no es un tema menor. En Blogger es aún peor porque hay una serie de "cosas" que se cargan sin que nosotros intervengamos y sus 45KB no son pocos. Si a eso le sumamos unos 30KB de Google Analytics, Feedburner y Technorati que son agregados habituales, ya estamos en un tercio del total del tiempo de carga mínimo. Seguimos sumando scripts de Json para comentarios o posts relacionados, estadísticas, etc, etc y fácilmente llegamos a 100KB. El tiempo que eso representa variará con cada conexión pero, es sustancial.

Una de las preocupaciones entonces es ¿agrego tal o cual script? si pongo Prototype, MooTools o cualquier otro de esos "monstruitos" ¿afectará la carga? Obviamente, la respuesta es sí. Cada cosa que agreguemos influye y la decisión de usarlas es muy subjetivo y hay para todos los gustos.

Supongamos entonces que las uso, que no quiero privarme de ellas y he evaluado que hay una buena relación costo/beneficio ¿puedo hacer algo para optimizarlas?

Por ejemplo, prototype.js (1.5.1.1), scriptaculous.js (1.7.1_beta2) y effects.js (1.7.1_beta2) que son las que yo uso, pesan un poco menos de 145KB; las versiones más modernas pesan 160KB o más así que si en alguna parte dicen: "Protoculous es un archivo de JavaScript que combina Prototype y Scriptaculous y los comprime para reducir su tamaño y por lo tanto, el tiempo de carga", voy a ver de que se trata porque suena interesante.

El ZIP que bajamos dice que incluye las versiones de prototype 1.5.1 y scriptaculous 1.7.1 beta 3. Lo abrimos y vemos que hay varios archivos, poca información ... y está en inglés:

• scriptaculous-1.7.1-beta2.js es una versión comprimida de scriptaculous y es bastante grande porque contiene todos los componentes, builder,controls,dragdrop,effects,slider y sound (77 KB)
• protoculous-1.0.0-shrinked.js es una versión comprimida de prototype + scriptaculous con todos sus componentes (143KB)
• protoculous-1.0.1.js es una versión mínima de 56 KB

La primera prueba que hice es usar protoculous-1.0.0-shrinked.js y reemplazar mis tres scripts: prototype.js + scriptaculous.js + effects.js. Evidentemente, en este caso, no hay una diferencia en cuanto a tamaños sino que estoy usando más o menos la misma cantidad de bytes para actualizar las librerías pero cargarlas completas y no de manera parcial. El resultado es bueno, Protoculous funciona bien y el hecho de tener sólo un archivo y no tres ya es una mejora porque hay que recordar que en estos casos, siempre es mejor tener un solo archivo "grande" a varios archivos pequeños.

Hasta aquí, podríamos decir que es una mejora pero no tan sustancial.

Leyendo un poco más, tratando de encontrar algo de información, veo que hablan de un sitio llamado Bananascript.com que se define como una herramienta online para comprimir scripts. Esto, dicen, lo hace eliminando comentarios, espacios innecesarios, etc pero además, lo comprime en modo "real", cambiando secuencias de bytes largos por secuencias más cortas.

¿Probamos?

Es sencillo, entramos en la página y subimos un archivo que debe tener extensión JS y más de 4KB. Hacemos click en el botón Compress y esperamos unos segundos. Cuando está listo, descargamos el nuevo archivo generado.

Primero, subí protoculous-1.0.0-shrinked.js. Los 143KB originales se redujeron a 64KB. La diferencia es importante así que subí el archivo para ver qué pasaba y, efectivamente, funciona sin problemas.

Lo único que aclara la página es que el charset del sitio debe ser iso-8859-1 ya que no se ha probado en otros modos pero, eso no es problema, no es necesario cambiar nuestro sitio, basta indicarlo en la llamada al script así que estos archivos comprimidos los cargamos así:

<script type="text/javascript" charset="ISO-8859-1" src="URL_archivoComprimido.js"></script>

Me entusiasme así que empecé a hacer pruebas. Por fin, me decidí a hacerlo en serio:

prototype.js + scriptaculous.js + effects.js (145KB) usando Protoculous fue comprimido a 63KB
lightwindow.js (65KB) fue comprimido a 16KB
VagaSidebar.js (10KB) fue comprimido a 4KB

En resumen, los 220KB originales quedaron reducidos a 82KB. Los alojé otra vez en mi servidor y allí estan desde hace varias horas. Parece que todo sigue en su lugar pero, cualquier problema, avisen

La forma en que Blogger maneja la fecha de los posts es bastante exótica, no sé si será porque le resulta fácil debido a la estructura de su base de datos o simplemente porque no se les ocurrió algo distinto y continúan haciendo lo mismo. En teoría, cada post tiene una fecha, de hecho, la vemos cuando abrimos una página individual pero, en la página principal, si hay varios posts publicados el mismo día, sólo vemos una.

En realidad, hay dos lugares donde definimos la forma de ver las fechas, en Diseño | Añadir y organizar elementos de la página, si editamos el elemento Entradas del blog, podemos establecer el formato de la fecha y eso es lo que se mostrará en el footer de los posts, por lo general, dentro de un bloque como este:

<div class='post-footer-line post-footer-line-1'>
  .......
  <span class='post-timestamp'>
    <b:if cond='data:top.showTimestamp'>
      <data:top.timestampLabel/>
      <b:if cond='data:post.url'>
        <a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'>
          <abbr class='published' expr:title='data:post.timestampISO8601'>
            <data:post.timestamp/>
          </abbr>
        </a>
      </b:if>
    </b:if>
  </span>
  .......
</div>

Esa zona es fácilmente configurable ya sea con las herramientas de edición o modificando el código HTML; pero la fecha también se establece en la Configuración | Formato, allí es donde definimos la forma en que se verá la fecha, encima de cada entrada:

Formato de cabecera de fecha 23-jun-2008 23 de junio de 2008 lunes 23 de junio de 2008 23/06/08 lunes, junio 23, 2008 6/23/2008 6.23.2008 20080623 2008/06/23 2008-06-23 23.6.08 lunes lunes, junio 23 junio 23, 2008 23 junio 2008 23 junio, 2008

Y es esa el área que se hace difícil de manejar. En una plantilla típica, ese dato se muestra así:

<b:includable id='main' var='top'>
  .......
  <b:loop values='data:posts' var='post'>
    <b:if cond='data:post.dateHeader'>
      <h2 class='date-header'>
        <data:post.dateHeader/>
      </h2>
    </b:if>
  .......
  <!-- este es el loop de los posts -->
  <b:include data='post' name='post'/>
  .......
</b:includable>

La variable <data:post.dateheader/> es la que posee el dato y se encuentra justo antes del bucle que muestra los posts así que, como está ubicada allí, la fecha se muestra siempre arriba de los títulos.

Hace unos días, Alfonsete me preguntaba si era posible mostrar la fecha debajo del título y, en realidad, cambiarla de lugar es sencillo. Primero, buscamos el código:

<h2 class="date-header"><data:post.dateheader/></h2>

y para evitar problemas en el caso de querer restaurarlo, no lo eliminamos sino que lo "comentamos" para que no se ejecute:

<!-- <h2 class='date-header'><data:post.dateHeader/></h2> -->

Ahora, debemos "moverlo" para ponerlo justo debajo de los títulos así que buscamos este tipo de código:

<b:includable id='post' var='post'>
  .......
  <b:if cond='data:post.title'>
    <h3 class='post-title'>
      .......
      <data:post.title/>
      .......
    </h3>
    <!-- y justo aquí pegamos el código de la fecha -->
    <b:if cond='data:post.dateHeader'>
      <h2 class='date-header'><data:post.dateHeader/></h2>
    </b:if>
    .......
</b:includable>

Simplemente pegamos el código resaltado, debajo del título.

Si queremos modificar cómo se ve, buscamos las definiciones CSS del elemento y modificamos las propiedades:

h2.date-header {
  .......
}

Ahora bien, uno podría suponer que haciendo esto, todas las entradas tendrán la fecha pero no es así, seguirá viéndose una sola vez. Es Blogger quien maneja esto y parece que no hay forma de cambiarlo a menos que usemos JavaScript.

Hace tiempo, luego de escribir sobre la forma de personalizar las fechas agregando calendarios, surgieron varias "quejas" respeto a que, esa limitación de Blogger hacía que los calendarios mostrados en los posts de igual fecha, quedaban vacíos o aparecía un texto que decía UNDEFINED. El problema, terminó por solucionarse modificando el script y podemos basarnos en eso para hacer lo mismo con la fecha cuando esta es un texto.

La idea es sencilla, vamos a usar esa limitación; ya que data:post.dateHeader es la fecha y, cuando el post tiene la misma fecha que otro anterior, data:post.dateHeader no contiene nada, lo que haremos es guardarlo cada vez que tiene un dato para que, si no lo tiene usar ese dato previamente guardado.

Otra vez buscamos el código sin importar dónde esté:

<b:if cond='data:post.dateHeader'>
  <h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>

Y lo reemplazaremos por esto:

<b:if cond='data:post.dateHeader'>
  <script>var ultimaFecha = '<data:post.dateHeader/>';</script>
  <h2 class='date-header'><data:post.dateHeader/></h2>
<b:else/>
  <h2 class='date-header'>
    <script>document.write(ultimaFecha);</script>
  </h2>
</b:if>

Allí, si se cumple la primera condición (b:if) significa que es el primer post así que tiene una fecha por lo tanto, la guardamos en una variable llamada ultimaFecha. Luego, se muestra normalmente.

Si no se cumple la primera condición (b:else) significa que no es el primer post de ese día y por lo tanto para Blogger no tiene fecha así que usamos JavaScript para escribir la que habíamos guardado previamente:

document.write(ultimaFecha);

De esta manera, en todos los posts se mostrará la fecha de publicación.

Lo empecé a leer hace unos días en BloggerBuster y no entendí mucho. Por suerte, La Bloguería lo comenta en otro artículo así que ahora las cosas están un poco más claras.

Se trata de un competencia sencilla: sugerir qué nueva función nos gustaría que se implementara en Blogger y presionar en masa en la Wishlist para ver si se implementa.

Alguna vez hice la mia y aún espero sentado. En todo aso, tal, vez, viniendo de un sito con cierto prestigio y sobre todo, anglosajón, el pedido/ruego sea más efectivo.

Como detalle extra, entre los participante se sorteará un pack que incluye:

• Una plantilla exclusiva para Blogger.
• Una revisión y adecuación completa del blog.
• Dominio propio, alojamiento básico y correo, durante 1 año, con GoDaddy.
• Una copia del libro Problogger.
• Un mes de publicidad en BloggerBuster
• Un set de MiniCards de Moo para ayudar a promover el blog.
  

Además, hay 5 premios consuelo que incluyen 500 créditos Entrecard y un mes de publicidad en BloggerBuster.

La inscripción cierra el próximo 4 de julio así que no hay mucho tiempo. Para participar basta tener un blog en Blogger; escribir un post (mínimo 100 palabras) explicando la función que nos gustaría; incluir un enlace a Blogger.com o a la Blogger Wishlist y confirmar la participación dejando un comentario con la dirección URL del post en esta entrada de BloggerBuster.

Como creo que Blogger es sordo, no sé si voy a participar ono. Mi lista ya la hice muchas veces y coincide más o menos con la de todos. Ellos la conocen, el problema es que no les importa

Bueno, en todo caso, para variar, me uno a la original sugerencia de La Bloguería:

Y mi petición es ésta: un dispensador automático de café. JMiur me hizo ver que ésta es una lacra importante, de la que que adolece no sólo Blogger sino todas las plataformas, gratuitas o no. Sería un avance revolucionario y aumentaría muchísimo el rendimiento y calidad de la blogosfera.

Así, propongo un Blogger Widget que funcionaría de la siguiente manera: lo añadimos directamente a nuestra sidebar, con un bonito botón personalizable, y al clicar en él, escogemos la opción: negro, con leche, largo, expresso. Se pone en marcha entonces un pequeño hardware de conexión USB (taza con logo de Blogger incluida). Este hardware te lo darían a cambio de poner un par de anuncios adsense, o de dejar visible la navbar :D o bien, se podrá adquirir en el Carrefour de la esquina por un precio simbólico, presentando tu OPEN ID. Aunque todos sabemos que los repuestos son caros, éstos quedarían bastante por debajo del precio de los cartuchos impresora, lo que es una gran noticia.



Ahora bien, alguien puede pensar, "pues qué tontería, si lo mismo me hace la parienta, y sin tener que agregar nada a la plantilla". Ya, pero falta resaltar la utilidad más importante de este widget: ¡la posibilidad de invitar a tus lectores a un café! ¡Con sólo apretar un botón! ¡JÁ! a que mola... Incluso se haría mucho más llevadero el traumático proceso de dejar un comentario, dilucidar la verificación de humanidad, lidiar con lo errores, sobrellevar pérdidas, etc.

Creo que con este widget, los usuarios de Wordpress se lo replantearían...

Pero, ya que pedimos, hagámoslo en serio ... siempre habrá tiempo para negociar.

La verdad es que desde siempre, forma y función van de la mano. Rapidez de carga, color, estética, diseño son, por suerte, valores subjetivos y en este mundo de las webs, hay de todo pero, como los navegadores interpretan los códigos de manera diferente, a veces se hace necesario establecer propiedades CSS diferenciadas para que los visitantes vea nuestro sitio tal y como deseamos y no como lo se le ocurre a otros.

Esto no siempre es posible a menos que hagamos caso de algunas opiniones extremas que nos dicen: "simplifiquen, simplifiquen, simplifiquen"; "letras negras sobre fondos blancos"; "el contenido lo es todo, no importa si es el diseño es aburrido".

No hay muchas alternativas para zanjar estas diferencias, a veces, agotados, no tenemos otro remedio que recurrir a los hacks o al uso de códigos condicionales aunque estos, como sólo son implementados por Internet Explorer sólo nos permiten establecer diferencias entre las distintas versiones de ese navegador y los otros:

<!--[if IE 5]>
  [esto sólo se ejecutará en IE versión 5]
<![endif]-->

<!--[if IE 5.5000]>
  [esto sólo se ejecutará en IE versión 5.5]
<![endif]-->

<!--[if IE 6]>
  [esto sólo se ejecutará en IE versión 6]
<![endif]-->

<!--[if IE 7]>
  [esto sólo se ejecutará en IE versión 7]
<![endif]-->

Y algunas más amplias pero siempre detectando Internet Explorer:

<!--[if lt IE 7]>
  [esto sólo se ejecutará en versiones inferiores a IE7]
<![endif]-->

Sólo hay dos posibilidades más, establecer códigos que se ejecuten sólo en Internet Explorer:

<!--[if IE]>
  [esto sólo se ejecutará en cualquier versión de Internet Explorer]
<![endif]>

Y establecer códigos que NO se ejecuten sólo en Internet Explorer pero si en cualquier otro navegador:

<!--[if !IE]>
  [esto sólo se ejecutará en cualquier navegador que NO sea Internet Explorer]
<![endif]>

¿Para qué sirve? Para corregir algunos detalles menores o para cargar una hoja de estilo distinta según sea el navegador del usuario. Lo más común es que sean las versiones inferiores a IE7 las que causen más problemas así que es usual encontrarse con cosas así:

<link rel="stylesheet" type="text/css" href="URL_estilo.css" />

<!--[if lt IE 7]>
  <link rel="stylesheet" type="text/css" href="URL_estiloIE.css" />
<![endif]-->

Donde se detecta las versiones inferiores de IE y, en esos casos, se carga una hoja de estilo especial que sobrescribe las propiedades CSS "normales".

Nadie sabe cuando comenzó todo aunque oficialmente, el cine nace en 1895 y el cine de animación bastante después.

Tal vez pueda resultar una curiosidad para muchos que uno de sus pioneros y el creador de muchas de las técnicas que luego se usarían en decenas de experimentos, fue un cinesta español llamado Segundo Víctor Aurelio Chomón y Ruiz. Él es quien entre 1905 y 1908 hace conocer una película llamada El hotel eléctrico donde, mediante trucos que presuponen el inicio de la animación, logra dotar a los objetos de vida propia.

Click para ver el video.

Chomón se muda de Barcelona a París contratado por los hermanos Pathé, la competencia de Georges Méliès, el otro gran cineasta de vanguardia de principios del siglo XX. Todo lo que ellos hacen es "lo primero" o uno de los primeros: Les Kiriki es de las primeras películas "a color"; pintadas con una técnica inventada por el mismo Chomón; Humorous phases of funny faces es un dibujo animado de James Stuart Blackton realizado en 1906.

Click para ejecutar el video.

Se dice que fue Emile Cohl, un caricaturista francés, fue quien creó el primer dibujo animado de la historia del cine. Cohl tomó un poco de todas esas técnicas del registro fotograma a fotograma e imaginó nuevas posibilidades. En 1908 realiza Fantasmagorie que inicia un nuevo campo en la animación, el uso de grafismos, desaparecen los escenarios reales y todo se transforma en fantasía. Ya no hay objetos que se animan y fotografían sino caracteres. Por eso se habla de él como el creador de los dibujos animados.

Click para ejecutar el video.

Claro, la historia no es muy exacta en nada, por ejemplo, Émile Reynaud es otro pionero del cine y mucho antes, en 1894:

Click para ver el video.

¿Qué es iterasi? ¿Alguien lo probó?

Las explicaciones dicen que se trata de un proyecto que pretende cambiar la forma de manejar los bookmarks (los marcadores o favoritos), guardando las páginas que nos interesan pero, al estilo de Wayback Machine, es decir preservando su contenido.

Con un simple click de un botón, guardamos una réplica completa (imágenes, CSS, JavaScript, etc) que podemos "visitar" sin importar si la página original ha cambiado o desaparecido.

Para usar el servicio debemos registrarnos y usar una extensión que es compatible con Firefox 2/3 e IE 7.

Las cuentas pueden ser privadas o públicas. En este último caso, cualquiera puede ingresar y ver lo que compartimos e incluso nos dan un código que podemos insertar en otra página web.

REFERENCIAS:

labnol.org

Instalar una plantilla en Blogger es bastante sencillo. Hacemos click en Diseño | Seleccionar plantilla nueva y allí elegimos uno de los modelos. Si no estamos seguros, con la Vista preliminar nos podemos dar una idea de lo que resultará. Lo único que nos advierten es que si lo hacemos, se descartarán los cambios que hayamos efectuado en Fuentes y colores aunque se conservarán los elementos de la página.

¿Es esto cierto?

En realidad, es una verdad a medias, si fuera tan simple como parece no habría tantos problemas como los que hay.

Pero veamos otra alternativa. Tenemos una plantilla descargada de algún sitio y queremos usarla. Entonces, vamos a Diseño | Edición HTML y cargamos el archivo XML desde nuestra PC aunque, muchas veces es un archivo de texto y no podemos así que copiamos el contenido y lo pegamos. Es cierto que dicen que eso no debe hacerse pero ... no hay otro remedio.

En realidad, el consejo de no hacerlo manualmente es razonable pero incompleto. Dicen que el problema son los elementos (widgets). Estos elementos sólo están en forma parcial en las plantillas, están los "contenedores" pero no los "contenidos"; los datos los tiene Blogger en su base de datos y por lo tanto, como son diferentes a los de la plantilla original, se crearán conflictos.

Si digo que es un consejo incompleto es porque el problema al cambiar una plantilla lo podemos tener igual, sea cual sea el método que usemos. La nueva plantilla tiene ciertos widgets que no necesariamente coinciden con la que estábamos usando y por lo tanto, al guardarla, Blogger nos advertirá que se eliminarán algunos; aquellos que no están en la nueva así que, el primer consejo es tomar debida nota de todo lo que tenemos y guardar los contenidos de cada elemento. Hacer una backup de la plantilla antes del cambio es imprescindible pero no suficiente:

DEBEMOS preservar los datos del contenido de los widgets o los podemos perder

Si la nueva plantilla carece de ciertos elementos Blogger nos pedirá que confirmemos su eliminación o cancelemos los cambios pero, aún si los confirmamos, es posible que aparezca un mensaje de error diciendo que no se puede completar la operación.

Este error no nos deja alternativas, deberemos cancelar y comenzar otra vez pero primero eliminaremos manualmente esos elementos para que el error no se repita. Blogger parece provocar ese error cuando hay muchos elementos a eliminar de manera simultánea (no le gusta trabajar).

Suele decirse que si subimos la plantilla XML Blogger hará los ajustes de manera automática pero, cualquiera que lo haya intentado sabe que eso es dudoso y cuanto más complejo sea nuestro blog, más problemas tendremos.

Hasta aquí, subimos el XML, aceptamos los cambios y todo parece normal pero, como somos cuidadosos, hacemos una Vista previa o Guardamos la plantilla ... ¿Qué hicimos mal?

Nada. Aquí el error es del mismo Blogger y vaya uno a saber por qué no lo corrige ya que existe desde siempre. Cada vez que ponemos una plantilla que posee elementos diferentes, aparecerá el error. Algunos tienen teorías sobre el tema, personalmente, no encuentro parámetros así que el asunto suele ser bastante aleatorio y hay que tener cuidado.

¿Cómo arreglamos esto? Si podemos desmarcar Expandir plantillas de artilugios, veremos esas repeticiones pero eso no siempre es posible porque el error lo impide. Entonces, podemos recurrir a la búsqueda del navegador y pacientemente, tratar de encontrar el problema:

<b:widget id='HTML1' locked='false' title='' type='HTML'/>
<b:widget id='HTML2' locked='false' title='' type='HTML'/>
<b:widget id='Label1' locked='false' title='' type='Label'/>
<b:widget id='BlogArchive1' locked='false' title='' type='BlogArchive'/>
<b:widget id='HTML3' locked='false' title='' type='HTML'/>
<b:widget id='HTML2' locked='false' title='' type='HTML'/>

Lo que nos está diciendo Blogger es que hay dos elementos con el mismo ID y eso es un error ya que deben ser únicos.

La solución es buscar esos elementos duplicados y cambiarles el nombre, rogando que no esté repetido, por ejemplo, en lugar de:

<b:widget id='HTML2' locked='false' title='' type='HTML'/>

ponemos:

<b:widget id='HTML20' locked='false' title='' type='HTML'/>

Ahora, Guardamos o usamos Vista previa. Si no hay errores, el tema está resuelto pero, es posible que aparezca otro mensaje similar así que seguiremos cambiando los IDs repetidos hasta que ya no quede ninguno.

Esto, no sólo es un error de numeración, también suele ocurrir que el elemento se repita, no sólo su número sino TODO el elemento. Uno de ellos es el que tiene contenido y el otro es una copia vacía ¿cuál es cuál? En general, el último que aparece es el erróneo y bastaría borrar la línea para quitarlo pero, si queremos ser prudentes, lo mejor es cambiarle el nombre como en el primer caso y luego, cuando hayamos podido guardar la plantilla, editarlo y verificar.

Por último, si ahora vemos la plantilla el elemento al que cambiamos el número seguramente habrá cambiado otra vez de número ya que Blogger usa siempre valores consecutivos así que, en el caso anterior, el id='HTML20' habrá pasado a llamarse id='HTML4' y, salvo que la plantilla haga referencia a esos elementos de manera absoluta en el CSS o en algún script, el cambio no nos debe preocupar en absoluto.

¿Listo? ¿Pudimos guardar la nueva plantilla sin errores? Perfecto, ahora, recién ahora comienza el juego

Tener un blog bajo un alojamiento gratuito tiene sus ventajas y desventajas, muchos comienzan con Blogger y luego realizan una migración a la plataforma Wordpress con servidor propio (de pago) para tener un control absoluto sobre el blog y algunas ventajas desde el punto de vista SEO.

SpamLoco

Eso lo leía hace meses, era el inicio de un artículo sobre un viejo dilema ¿Blogger o Wordpress? Un dilema que, de entrada es falso. Es cierto, que, a simple vista, parece ser razonable pero, si yo hubiera planteado la disyuntiva ¿una pinza o un martillo? todos se reirían y, en realidad, no hay mucha diferencia porque cuando se comparan cosas, debemos usar una misma unidad de medida sino, caemos en errores.

Blogger y WordPress.com SI son comparables.
Blogger y WordPress.org, NO son comparables.

¿Hay dos? Sí, hay dos y, como por lo general, la comparación siempre se basa en la WP.org y no en su prima "pobre" la WP.com, muchos análisis llegan a conclusiones equivocadas e inducen a errores.

¿De que hablo?

Blogger es una plataforma gratuita y WordPress.org no porque para usarla, necesitamos un dominio y un hosting propio. No es poca diferencia y no sólo hablo de dinero, implica un trabajo extra importante y un conocimiento técnico mayor; hay que manejar ese servidor. Partiendo de esa base, la comparación no sólo es odiosa sino inútil ya que el sólo hecho de que WordPress.org provea un servicio completo que debemos instalar, adaptar y modificar a nuestro gusto ya lo coloca en otro nivel. Visto así, Blogger tiene limitaciones y WordPress parecer no tenerlas aunque, seamos sinceros, son muy pocos los que sacan provecho de la tan mentada flexibilidad y la mayoría se limita a coleccionar plugins y a hablar maravillas de un sistema que difícilmente conocen en profundidad.

Pero, el tema no es ese. El tema es ¿Blogger o WordPress.com? ya que ambos son sistemas similares y por lo tanto podemos compararlos.

El sistema de blogs gratuitos de WordPress corre con una ventaja que no es poca, ha heredado la fama de su otra versión y suele confundirse una con otra como si fueran las mismas. La fama no es poca cosa y pesa lo suficiente como para que si leo un título como ¿Pasar de WordPress a Blogger? en un sitio tan prestigioso como Blog en Serio, no pueda resistirme a leerlo ya y dejar todo lo demás para otro momento.

Todo, se basa en un artículo de BlogMundi llamado: 5 razones para pasarse de Wordpress.com a Blogger.com; casi una herejía ¿Cómo es eso? ¿Por qué? ¿Es que el mundo se ha vuelto loco? ¿Ya no hay respeto por nada?

Veamos la lista reducida:

1. En WordPress.com NO se permite incluir publicidad, en Blogger SI.
2. En WordPress.com se permite elegir entre 67 plantillas predeterminadas pero NO se permite modificarla (pagando aparte, sólo se accede al CSS, al resto, jamás). Las plantillas de Blogger son 100% personalizables.
3. En WordPress.com NO es posible tener un dominio propio a menos que se pague.

Ellos, resumen todo en esta frase:

"No hay nada o casi nada que se pueda hacer con Wordpress.com y que no sea posible hacerlo con Blogger."

¿Mienten? No. Para nada, es más, a mi juicio, se quedan cortos:

• En WordPress.com la mayoría de las plantillas disponibles está en inglés y no pueden traducirse.
• El editor de WordPress es de lo peor; genera código "antigüo" y ni se les ocurra tratar de usar determinado tipo de etiquetas HTML (por ejemplo, iframes).
• El tipo de widgets predeterminados es escaso y poco configurable.
• Blogger tiene a Google atrás y mal que mal eso implica un respaldo innegable y se nota por la relevancia que da a "sus blogs" en los buscadores.
• Los blogs alojados en Blogger se posicionan rápidamente.
  

Algún comentario sigue confundiendo las cosas: "Hay que valorar que WordPress es Open Source y 100% personalizable". Falso y erróneo. Que sea Open Source por si mismo no lo transforma en "bueno" y además, están hablando del otro WordPress: ¡el otro WordPress! Ahhhhh, la fama, la fama, la fama.

Alguien dijo alguna vez: "si empezamos nuestro blog en Blogger y luego queremos pasarnos a Wordpress tendremos varias trabas y por lo general hacer una migración es bastante engorroso". Esto no es del todo cierto, depende de muchas cosas y tienen solución; podemos importar todo, podemos redirigir los visitantes y los feeds; no es tan complejo como parece. No es un motivo válido para elegir uno u otro.

Cada vez que alguien me consulta si le conviene o no migrar a WordPress.com, algo que suele ocurrir por oleadas cada vez que en Blogger hay algún colapso, mi respuesta es siempre la misma: ¡Hagan lo que quieran!

Bueno, en realidad, no es así; aunque piense eso suelo contestar con más o menos las mismas razones expuestas arriba. Si buscan algo más flexible que Blogger se van a equivocar y se van a frustrar ya que se encontrarán con un servicio con menos prestaciones y menos alternativas, un servicio cerrado, armado y listo para usarse pero rígido. Se usa como es y punto. Lo tomas o lo dejas. No es que eso sea malo, sólo distinto.

En todo caso, ante la duda, no hay inconvenientes en probarlo e incluso importar el blog completo a una cuenta de WordPress.com para experimentar. Bastaría marcar la opción de no indexarlo para evitar penalizaciones por contenido duplicado y luego ver si lo que nos ofrece nos satisface o no.

Yo también me niego a evangelizar, a hacer flamear banderas que no son mías y a defender negocios ajenos. Cualquier servicio es bueno si lo sabemos usar correctamente y todos son pésimos si pretendemos de ellos lo que no pueden darnos.

¿Los sitios gratuitos tienen problemas? Claro, estamos a merced de sus errores y de sus humores pero eso no es exclusivo; pregunten cuántos problemas han tenido los sitios alojados en servidores pagos. bolsanegra dejo de existir no unos días sino varios meses cuando el hosting decidió cerrar sus puertas y dio las hurras; zonafirefox tuvo que salir corriendo a cambiar de hosting porque donde estaba entró en cortocircuito nada más que porque el blog tenía éxito y visitas aun cuando no había superado el ancho de banda contratado. Hay que recordar siempre que el segundo nombre de cualquier servicio de hosting es Pilatos. Pagar no garantiza nada. Que sea gratuito tampoco.

Ciertamente, este es un blog de Blogger que se la pasa protestando y creo que tengo razones válidas para hacerlo pero ... sigo aquí y puedo jurar que no soy masoquista. Es cierto que hay cosas que simplemente no puedo o no quiero experimentar pero, también es cierto que uso WordPress con todos sus chiches y mi lista de quejas no es pequeña, sobre todo, después de instalar su tan adulada última versión.

Y bueno, soy un protestón pero hay ciertas ceremonias geeks que no comparto y sobre todo, creo que en la variedad está el gusto y que las elites nos hacen daño.

Hay por ahí una mala costumbre, un esnobismo como cualquier otro que habla de la "poca identidad" de los sitios que utilizan estos sistemas gratuitos: "dan una sensación aparente de poca seriedad ... no me molesta leer un blog en un servicio gratuito", dicen disculpándose.

No es la primera vez que escucho la palabra "seriedad". Lo leí en Blog en Serio (valga la paradoja y la doble referencia) donde se reflexionaba sobre las "ventajas de tener un dominio propio" y se intentaba desmistificar esa falsa verdad que pretende confundir plataformas gratuitas con precariedad o informalidad.

¿Qué será la seriedad? ¿Una cara larga, un gesto adusto, la voz engolada, traje, corbata, Beethoven sonando de fondo? ¿Habrá una seriedad geek? Los códigos secretos de esta nueva cofradía dicen: elogiaras las Macs, usarás Opera, hablarás siempre mal de Bill Gates, tendrás un IPod y WordPress Rules, yeah!

Lamentablemente, las cosas no son tan simples y disfrazarnos de serios no nos hará serios: "Generalmente, cuando se piensa en un blog que usa Blogger, se piensa en un diseño pobre, inaccesible y saturados de elementos que poco aportan al lector" ¿Prejuicios? Claro, es evidente. Curiosamente, el sitio en cuestión mostraba errores varios (graves) pese a que era una página blanca blanca blanca, inmaculadamente blanca.

Lo único que me queda es recordar que entre los millones y millones de sitios que existen en la web, nosotros, cada uno de nosotros, no es más que un destello en la oscuridad. Irrelevantes y únicos, ya sea que tengamos diez o diez mil lectores, ya sea que paguemos fortunas o no gastemos un centavo; sin importar que tengamos cartelitos titilando por todo el sitio o un texto plano en negro sobre blanco porque concuerdo 100% con la idea final del post:

"Y bueno, ya sea en instalación propia o utilizando alguna de las plataformas gratuitas a nuestro alcance, lo importante es divertirse … espero."

Ya terminó el Download Day y el número final es irrelevante. Los contadores siguen funcionando y en este momento superan los ocho millones de descargas.

Los que jugaron el juego pueden estar tranquilos ya que Firefox pasará a tener el Guinness World Record for the Most downloaded software in 24 hours. Si quieren su certificado, pueden ir a SpreadFirefox y solicitarlo.

Establecer un record Guinness no es algo sencillo; hay que ir a la web oficial, llenar unos formularios, obtener una clave, etc, etc. Hay que sortear las vallas burocráticas y tener paciencia ya que se reciben unas 60 mil peticiones anuales así que pueden llegar a tardar dos meses en responder ... claro, por el módico precio de 300 libras, se puede usar el servicio "Fast" y entonces, nos contestarán en sólo un par de días.

Cuando se lanzó Firefox 2 tuvo 1.6 millones de descargas, Firefox 3 la cuatriplica en número. Mozilla ha superado ampliamente sus expectativas y la insólita campaña publicitaria ha dado resultado. Terminado el juego, ahora resta evaluar si valió la pena o no. En lo personal, creo que los usuarios no se sentirán defraudados.

¿Donde están los códigos de los vínculos de retroceso en la plantilla? Por varios lados, siempre dentro del elemento Blog.

En la página principal los veremos por defecto con el texto Vínculos a esta entrada y es un enlace que sólo nos llevará a la página individual del post y se posicionará en el footer:

<span class='post-backlinks post-comment-link'>
  <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <b:if cond='data:post.showBacklinks'>
      <a class='comment-link' expr:href='data:post.url + &quot;#links&quot;'>
        <data:top.backlinkLabel/>
      </a>
    </b:if>
  </b:if>
</span>

el enlace generado es de este estilo:

http://nombre.blogspot.com/año/mes/titulo.html#links

donde #links es el nombre (anclaje) que tiene esa parte de la plantilla (¿qué es un anclaje?).

<data:top.backlinkLabel/> es el texto visible y puede ser reemplazado por cualquier otro o utilizar una imagen

Las propiedades CSS que la controlan, por lo general no están definidas y no suelen ser necesarias ya que se usan las mismas que para el resto de los enlaces del footer.

Más adelante, encontraremos el código que genera un ícono al lado de cada vínculo y con el cual podemos eliminarlo de manera similar al que vemos en los comentarios. Es algo así:

<b:includable id='backlinkDeleteIcon' var='backlink'>
  <span expr:class='&quot;item-control &quot; + data:backlink.adminClass'>
    <a expr:href='data:backlink.deleteUrl' expr:title='data:top.deleteBacklinkMsg'>
      <img src='http://www.blogger.com/img/icon_delete13.gif'/>
    </a>
  </span>
</b:includable>

A los efectos de la personalización de nuestro blog no es un área importante así que podemos pasarla por alto.

Lo que genera el bloque donde se mostrarán los vínculos de retroceso y que sólo se muestra en las paginas individuales tiene este código:

<div id='backlinks-container'>
  <div expr:id='data:widget.instanceId + &quot;_backlinks-container&quot;'>
    <b:if cond='data:post.showBacklinks'>
      <b:include data='post' name='backlinks'/>
    </b:if>
  </div>
</div>

Ahí, ya vemos que ese bloque tiene un ID (un nombre) que es con el que podremos controlarlo. Por defecto se llama backlinks-container y no suele estar incluido en las plantillas pero, no es problema, podemos agregarlo justo antes de </b:skin>. Por ejemplo, en mi caso le he puesto estas propiedades:

#backlinks-container {
  clear: both;
  background: none;
  padding-top: 20px;
}

En el código anterior no parece haber nada salvo el DIV y esto:

<b:include data='post' name='backlinks'/>

que es justamente el código que usa Blogger para indicar que ahí debe insertarse algo. Eso que inserta, lo podemos ver en el último código que es el más largo y donde encontraremos lo que falta para personalizar el área.

En una plantilla típica dice esto:

<b:includable id='backlinks' var='post'>
  <a name='links'/>
  <h4><data:post.backlinksLabel/></h4>
  <b:if cond='data:post.numBacklinks != 0'>
    <dl class='comments-block' id='comments-block'>
      <b:loop values='data:post.backlinks' var='backlink'>
        <div class='collapsed-backlink backlink-control'>
          <dt class='comment-title'> 
            <span class='backlink-toggle-zippy'>&#160;</span>
            <a expr:href='data:backlink.url' rel='nofollow'>
              <data:backlink.title/>
            </a>
            <b:include data='backlink' name='backlinkDeleteIcon'/>
          </dt>
          <dd class='comment-body collapseable'>
            <data:backlink.snippet/>
          </dd>
          <dd class='comment-footer collapseable'>
            <span class='comment-author'>
              <data:post.authorLabel/> <data:backlink.author/>
            </span>
            <span class='comment-timestamp'>
              <data:post.timestampLabel/> <data:backlink.timestamp/>
            </span>
          </dd>
        </div>
      </b:loop>
    </dl>
  </b:if>
  <p class='comment-footer'>
    <a class='comment-link' 
        expr:href='data:post.createLinkUrl'
        expr:id='data:widget.instanceId + &quot;_backlinks-create-link&quot;'
        target='_blank'>
      <data:post.createLinkLabel/>
    </a>
  </p>
</b:includable>

Ahhhhhh ... renuncio.

Es lo primero que uno piensa y es razonable hacerlo pero, vamos despacio porque no es necesario modificarlo demasiado sino tratar de entender qué hace cada cosa.

<a name='links'/> es el nombre del anclaje; sólo sirve para posicionarse allí.

<h4><data:post.backlinksLabel/></h4> es el título que nos muestra Blogger por defecto y que suele tener una fuente gigante donde leemos Vínculos a esta entrada. Por defecto, es igual que el título e los comentarios pero podemos darle propiedades especiales agregándolas al CSS de la plantilla:

#backlinks-container h4 {
  /* aquí ponemos las propiedades */
}

Lo que sigue es un bucle que realiza Blogger buscando en su base de datos los enlaces que existan y mostrándolos como una lista. La etiqueta DL crea la lista y las etiquetas DT son cada una de las líneas que tienen este orden:

un ícono que cambia cuando hacemos click para mostrar que está contraido o deplegado
<data:backlink.title/> es el título del post que es un enlace al blog donde se publicó
<data:post.authorLabel/> el nombre del autor del post
<data:backlink.author/> la dirección URL del perfil del autor
<data:post.timestampLabel/> <data:backlink.timestamp/> la fecha y hora de la publicación
<data:backlink.snippet/> es un resumen del texto del post que nos enlaza y está oculto

Todo eso no tiene propiedades diferenciadas, las plantillas suelen tener propiedades genéricas que hacen que se vea igual que el resto de los comentarios. Tampoco está previsto así que deberemos agregarle clases a cada cosas que queremos cambiar.

Le agregamos una clase al título:
<a class='backlinkTitulo' expr:href='data:backlink.url' rel='nofollow'>

cambiamos la clase CSS del autor <span class='comment-author'> por otra:
<span class='backlinkAutor'>

cambiamos la clase CSS de la fecha <span class='comment-timestamp'> por otra:
<span class='backlinkFecha'>

para personalizar el contenido <data:backlink.snippet/> habrá que utilizar la etiqueta SPAN:
<span class='backlinkContenido'><data:backlink.snippet/></span>

Ahora, ya podemos colocar las definiciones en la plantilla. Otra vez, este un ejemplo personal:

a.backlinkTitulo, a.backlinkTitulo:visited {   /* el enlace del título */
  color: #778899;
  font-weight: normal;
  text-decoration: none;
}
a.backlinkTitulo:hover { /* efecto rollover en el enlace */
  color: #CCCCCC;
}
span.backlinkAutor { /* el autor */
  color: #99AABB;
  font-family: Tahoma;
  font-size: 12px;
  padding: 10px 25px 0 0;
  text-align: right;
}
span.backlinkFecha { /* la fecha */
  color: #99AABB;
  font-size: 10px;
  text-align: right;
}
span.backlinkContenido { /* el contenido oculto */
  display: block;
  background-color: #1E252D;
  margin: 7px 7px 7px 20px;
  padding: 10px;
  text-align: justify;
  width: 90%;
}

Si, como en mi caso, no queremos mostrar alguno de los datos, simplemente lo eliminamos o, mejor aún, lo "comentamos" para no perderlo si es que alguna vez queremos restaurarlo. Por ejemplo:

<!-- <data:post.timestampLabel/> <data:backlink.timestamp/> -->

Como último paso para este bloque nos queda la posibilidad de personalizar los íconos que usa Blogger por defecto y para eso, igual que alguna vez lo hicimos con el elemento Archivos, no puede hacerse igual que con el resto de las propiedades porque Blogger agrega una hoja de estilo que sobrescribe la nuestra así que, debemos esperar que la inserte y recién luego cambiarla.

Lo hacemos colocando el estilo justo después de la etiqueta <body>. En lo personal, usé las mismas imágenes de los triangulitos, les cambié de color y las subí a un servidor:

<style type='text/css'>
  .backlink-toggle-zippy {
    background-image:url(URL_icotriangle_open.gif);
  }
  .expanded-backlink .backlink-toggle-zippy {
    background-image:url(URL_icoTriangle_ltr.gif);
  }
</style>

Ahora sí, sólo nos queda cambiar el enlace que por defecto dice Crear un vínculo. Eso es lo que se muestra en el final del código, lo que está entre <p class='comment-footer'> y </p>.

<data:post.createLinkLabel/> es el texto que se muestra

Como cualquier enlace, podemos cambiar el texto o utilizar una imagen.

Firefox 3 ya está listo y va por un record mundial dice Nico y hace rato que está mirando la pantalla con el ojo derecho y el reloj con el izquierdo, tenso, el dedo índice sobre el botón del mouse, listo para hacer click a la hora exacta.

Es probable que haya muchos otros en las mismas condiciones tratando de sumarse al Download Day o simplemente ansiosos de probar de que se trata el nuevo Firefox 3. Claro, también es posible que vayan a la página oficial de Mozilla y sólo se encuentren con una página en blanco y con servidores colapsados porque esto de batir records tiene su costo.

No desesperen y perseveren o sino, descarguen el instalador desde el FTP:

Windows: http://releases.mozilla.org/pub/mozilla.org/firefox/releases/3.0/win32/
Linux: http://releases.mozilla.org/pub/mozilla.org/firefox/releases/3.0/linux-i686/
Mac: http://releases.mozilla.org/pub/mozilla.org/firefox/releases/3.0/mac/

Sea como sea, la ansiedad no es buena consejera y convendría que fuéramos prudentes porque la descarga es sólo el primer paso, luego, llega la instalación y ahí es donde debemos tener cuidado y hacerlo de manera prolija. Lo razonable es realizar una instalación limpia.

¿Qué significa esto? Ya que en arturogoga.com lo explican bien, vamos a usar algunos de sus consejos.

Una instalación limpia significa, preservar nuestros dato, desinstalar la versión vieja y eliminar cualquier rastro de nuestra PC. Recién luego, proceder a la nueva instalación. Esto, nos evitará problemas sobre todo cuando se trata de versiones con cambios tan profundos como en este caso.

Empecemos entonces guardando los datos personales.

1. Guardar los Marcadores:

Esto lo podemos hacer de diferentes modos. Desde el menú Marcadores | Archivos | Exportar lo guardamos como bookmarks.html, luego, con el proceso inverso lo podemos Importar.

Si estábamos usando Google Browser Sync podríamos creer que no es necesario pero hay que tener en cuenta que el servicio será descontinuado por Google y que en Firefox 3 sólo funcionará hasta finales de este año. Tal vez, es el momento de aprovechar la situación y buscar una alternativa como Foxmarks o la Barra de Google. También hay un servicio de sincronización llamado Weave que Mozilla está desarrollando y en el que podemos registrando.

2. Guardar Contraseñas:

Si usamos Firefox para que las maneje, podemos valernos de Password Exporter y exportarlas en formato XML. Luego instalando la extensión las importamos otra vez.

3. Guardar datos de las extensiones:

Podemos hacer un backup completo usando FEBE pero esto sólo es aconsejable como "ayuda memoria", lo razonable es cargar las extensiones una por una directamente desde Mozilla AddOns ya que si bien la mayoría ya está disponible para la nueva versión, es posible que alguna sea incompatible.

De todas formas, si son extensiones imprescindibles van a tener que dejar que pase el ciclón porque en el momento en que estoy escribiendo esto los servidores están colapsados y es imposible acceder a la mayoría de ellos.

Si usamos Tab Mix Plus o MR Tech Local Install tenemos la opción de usarlas para exportar la configuración para una futura reinstalación.

4. El perfil del usuario:

En Windows, los datos se guardan en la carpeta:

C:\Documents and Settings\nombreUsuario\Datos de programa\Mozilla\Firefox\Profiles\

No es mala idea hacer una copia de esa carpeta y guardarla ya que allí se encuentra todo lo que usamos:

• los scripts de Greasemonkey están en la carpeta gm_scripts
• las notas de FoxNotes están en la carpeta FoxNotes
  

El resto de los datos de la extensiones se encuentran en:

C:\Documents and Settings\nombreUsuario\Datos de programa\Mozilla\Firefox\
Profiles\XXXXXXXX.default\extensions\

5. Todo lo demás:

Si usamos un lector de feeds como Sage, los exportamos como archivo OPML.
Si usamos ScribeFire y tenemos notas o borradores, lo mejor es copiarlas manualmente; lo mismo si usamos Stylish o cualquier otra extensión.

¿Para qué hacemos todo esto y nos tomamos tanto trabajo? Por que una vez que estamos listos, desinstalamos Firefox y BORRAMOS todas las carpetas:

C:\Archivos de programa\Mozilla Firefox\ C:\Documents and Settings\nombreUsuario\Configuración local\Datos de programa\Mozilla\ C:\Documents and Settings\nombreUsuario\Datos de programa\Mozilla\

Si disponemos de algo para una limpieza profunda como CCleaner, mejor. La idea es empezar desde cero ... todo lo bueno cuesta trabajo.

Blogger habla de vínculos de retroceso (backlinks) y esa traducción es espantosa y confusa. Dice:

"Los vínculos de retroceso le permiten realizar el seguimiento de otras páginas web que tienen vínculos hacia sus entradas. Por ejemplo, supongamos que Alicia escribe una entrada para un blog que a Roberto le parece interesante. Roberto va a su propio blog y escribe una entrada sobre la de Alicia, que enlaza con ésta. Y ahora la entrada de Alicia mostrará de forma automática que Roberto ha creado un vínculo a su blog y además ofrecerá un fragmento de su texto y un vínculo a esa entrada."

Se habilitan y deshabilitan desde Configuración | Comentarios:

Vínculos de retroceso Mostrar Ocultar
Los vínculos de retroceso te permiten realizar el seguimiento de otras páginas web que tienen vínculos hacia tus entradas. Más información
Nota: La selección de "Ocultar" no elimina los vínculos Atrás. Puede mostrarlos en cualquier momento volviendo a seleccionar "Mostrar".

Para un dinosaurio como yo que se inició en el mundo de las computadoras en tiempos en que las cosas se median por bits y no por gigas, no saber para que están ciertas cosas, es una tortura. La tecnología cambió y hoy ya no trato de saber que hace una DLL o si tal o cual archivo se utiliza de tal o cual forma. Llegué al Nirvana y ahora mi método se resume en pocas palabras: "ma'si, mientras funcione, no hay problema".

Sin embargo, al empezar el blog, algo de estos traumas aún persistían y me empeciné en eliminar cada código que no terminaba de comprender. Uno de esos era todo lo que se refería a los vínculos de retroceso.

Un día, alguien me preguntó ¿por que no tienes los backlinks habilitados? Obedientemente, los restauré pero siguieron allí sin que supiera muy bien para que servían. Confieso que aún no termino de comprenderlo mucho ya que, si bien ahora sé que hacen y cómo funcionan, siguen siendo un elemento bastante limitado.

Simplifiquemos un poco. Un backlink es una referencia a uno de nuestros posts; un enlace externo. Otros, hablan de trackbacks y entonces, mi neurona hace crack y se rehusa a seguir. Hay que obligarla a que busque en la red para encontrar explicaciones ¿Qué es un trackback? es un aviso que envía un sitio a otro, indicándole que allí hay una referencia, de esta manera, ambos posts quedan relacionados entre si. Parecen lo mismo pero no lo son ... ahora que todo está claro como el agua, se puede seguir adelante

No importa, de todas maneras, Blogger no soporta el uso de trackbacks, no recibe avisos de otros sitios, es sordo o se hace el sordo. Es cierto que podemos usar algún servicio externo como Holoscan pero no es sencillo; nos quedan Technorati, Google Blog Search y no mucho más. Es cierto, hay una herramienta online llamada Simpletracks que permite enviar trackbacks pero dependerá del sistema aceptarlos.

Seguimos entonces con los vínculos de retroceso.

Una vez habilitados, veremos un enlace debajo de los posts que, por defecto dirán algo así:

Haciendo click allí nos llevará al final de la entrada en cuestión donde, de existir, habrá una lista desplegable con los backlinks. Cada uno, será un título con un ícono delante que nos permite expandirlos y colapsarlos individualmente. El contenido es un resumen del post externo.

Muy bonito pero ¿funciona? Blogger dice que ... más o menos:

• Esta función está basada en el operador link: de Búsqueda de blogs de modo que los sitios que establecen vínculos hacia su blog serán indexados pero es posible que tarden un poco en aparecer.
• La configuración del mensaje de notificación de comentarios no es aplicable a los vínculos de retroceso (no nos avisan como hacen con los comentarios nuevos)
• En lugar de la notificación de comentarios, puede utilizar Búsqueda de blogs y una consulta como link:nombre.blogspot.com y, a continuación, suscribirse a los resultados. De esta forma el efecto será el mismo.

En realidad, cualquier que lo haya usado sabe que la Búsqueda de blogs de Google es muy mala, los resultados son escasos.

En realidad, todos los servicios dan resultados diferentes. Buscando un post específico:

• Blogger muestra 4 enlaces: Ejemplo 1
• Google muestra 2 enlaces: Ejemplo 2
• Technorati muestra 4 enlaces: Ejemplo 3

Algunos son similares, otros son distintos. Tampoco están todos

Es notable que algo que podría ser útil y a lo que Blogger le da tanta importancia ya que sus plantilla contienen mucho código al respecto no sea más flexible. Probablemente, porque esos enlaces sólo se crean si utilizamos su propia herramienta: BlogThis!.

Lo que ocurre al hacer click en Crear un vínculo es que se abre una nueva ventana donde nos encontramos con un editor que ya incluye un vínculo a la página web que uno está visitando. Arriba, vemos una lista desplegable donde podemos seleccionar uno de los blogs de nuestra cuenta. Desde allí, podemos crear una entrada sin tener que ingresar a Blogger.

Lo mismo podemos hacer si agregamos el vínculo BlogThis! a la barra de herramientas del navegador o ya tenemos incluida la función si usamos la Barra de Google.

¿Y podemos personalizar este elemento? Sí, en términos generales tiene la misma estructura que el elemento Archivos así que hay que usar algunos trucos para sobrescribir el estilo que Blogger pone por defecto pero eso, lo vemos en la próxima.

Un scraper es un sitio cuyo contenido es copiado integramente de otros sitios. Para eso, utiliza técnicas o software específico. No se trata de un simple copy and paste sino de arácnidos de todo tipo (bots, webbots, crawlers, harvesters, spiders) que recorren la red para extraer contenido. De alguna manera, lo que hacen es similar a lo que realizan los buscadores como Google o Yahoo; buscan ciertas palabras claves e indexan las páginas.

"Contenido duplicado es cuando se tiene una copia exacta de un sitio. Página por página, archivo por archivo, imagen por imagen."

Su existencia ha sido siempre un problema y su extensión se está volviendo ya algo relevante que no sólo afecta a sitios "importantes" sino a todos. Su único fin es ganar dinero, aprovechando el trabajo ajeno y legalmente, no hay mucho que pueda hacerse porque se mueven dentro de una franja dudosa y, desde la práctica, cualquier licencia o advertencia de copyright no es otra cosa que una entelequia sin valor.

¿Dónde está el problema? Fundamentalmente, como casi todo en este mundo de la internet, Google es la clave del asunto porque el efecto se ve en los buscadores. Es común que esos sitios aparezcan mejor posicionados que el original y no están solos, lo mismo ocurre con redes sociales como Menéame o con algunos directorios de blogs.

Imaginemos un ejemplo extremo. Un blog recién creado publica un artículo que es reproducido por otro sitio muy bien rankeado. En una búsqueda, aparecerá primero la copia y el original estarará en la página 10 de los resultados.

El buscador, no termina de funcionar correctamente.

Esto se ha transformado en un problema tan serio que el mismo Google ha publicado un artículo al respecto donde se dan algunas explicaciones sobre el contenido duplicado.

Lo que dice, es casi obvio pero no importa.

En la mayoría de las ocasiones, el administrador de un sitio no tiene control sobre la distribución sin su consentimiento y, por lo tanto, publicar varias veces el mismo contenido no viola los términos de la Guía para Webmasters. Google, a veces es bueno para diferenciar la fuente original de las copias pero a veces no. Si lo hace bien, el posicionamiento de las páginas originales no es afectado; si lo hace mal ... quien sabe.

Cuando se encuentra contenido duplicado en diferentes páginas, Google trata de determinar cuál es el contenido original y hay dos casos generales: duplicados en el mismo sitio y duplicados en sitios diferentes.

En el primer caso, lo que recomiendan es evitarlo o bloquearlo si es que disponemos de las herramientas para hacerlo. En Blogger o cualquier otro servicio gratuito no hay mucho que podamos hacer salvo establecer el dominio preferido (con o sin www). En los blogs, esas duplicaciones son parte integral del mismo sistema, hay una página inicial, una para cada categoría, una de archivos, una individual.

En el segundo caso, cuando los duplicados están en sitios distintos, las cosas se complican, Google dice que intenta determinar cuál es la original pero no siempre lo logra. Ellos, recomiendan tratar de colocar algún tipo de marca en los feeds (un enlace a nuestra web) pero, eso, depende del servicio que usemos. Si podemos hacerlo, es una forma de aprovechar ese contenido duplicado para beneficio propio. En WordPress hay plugins que lo hacen; en Blogger o Feedburner, lo desconozco.

Otro método más casero es incluir enlaces a nuestro propio sitio en los artículos pero, eso hay que hacerlo con moderación.

¿Y qué pasa si vemos que nuestro artículo original está relegado y la copia esta mejor posicionada? Nuevamente, en Blogger, nada; en otros servicios, si podemos acceder al sitemap deberíamos verificarlo.

Para quienes estén preocupado por el PageRank o el posicionamiento, Google aclara que, en la mayoría de los casos, el contenido duplicado no afecta la presencia de un sitio en el índice a menos que se detecte una actitud maliciosa .

Hay un muy buen artículo que podemos ver en Search Engine Land donde se muestra gráficamente la forma en que los buscadores analizan el contenido duplicado.

REFERENCIAS:

Arkitip

Google se dispara en Bolsa tras el confirmarse el acuerdo publicitario con Yahoo!

Hace muy poco, Yahoo! anunció que daba por terminadas las conversaciones con Microsoft, y que había alcanzado un acuerdo de cooperación en materia de publicidad con su competidor Google

Como "defensa" ante el interés de Microsoft, hace unos meses, había comenzado a insertar publicidad de Google dentro de los resultados de su buscador. Por ahora, el único beneficiado es Google y Yahoo! ha tenido que reconocer que su tecnología publicitaria no es lo suficiente como para rentabilizar el tráfico de sus sitios.

El Senado norteamericano se dispone a investigar las consecuencias que tendrá este acuerdo para los consumidores y Herb Kohl, presidente del subcomité antimonopolio dijo que las consecuencias "podrían ser de gran envergadura".

Yahoo! colocará en sus páginas de Estados Unidos y Canadá avisos publicitarios que le siginidicarían ingresos extras por 800 millones de dólares, convirtiéndose así, en un revendedor de Google.

Rumor: Google podría haber adquirido ya Digg, para integrarlo en 'Google News'

El valleywag.com se asegura que Google y Digg podrían haber llegado hace un mes a un acuerdo de unos 200 millones de dólares, por el cual este último se integraría dentro de la red de servicios del primero, posiblemente dentro de Google News. De esta manera, Google seguiría desarrollando un servicio de noticias de actualidad con el cual obtener ingresos económicos a través de la publicidad.

Esta nueva alianza podría derivar en un germen de "red social" que le permita competir con MySpace o con Facebook.

¿Es FriendFeed un Facebook creado por Google en la sombra?

La popularidad de Twitter crece constantemente y los servicios de mini-blogging son una nueva herramienta que combinando blog y chat se han convertido rápidamente en otro buen negocio.

FriendFeed, es uno e esos servicios que amplia lo que ofrece Twitter agregándole la posibilidad de dejar comentarios sobre cualquier elemento que comparta un usuario. De esta manera, se crea una conversación en lugar de tener una serie de monólogos independientes.

Muchos de los trabajadores más valiosos de Google han abandonado la empresa para unirse a proyectos de herramientas sociales y FriendFeed es uno de ellos que se presenta como independiente aunque los contenidos más populares son servicios de Google.

REFERENCIAS:

google.dirson.com

Se recostó respirando agitado.

- Ya no estás para estos trote, viejito - se dijo en voz alta.

Respiraba hondo, con la boca abierta, tragándose hasta los muebles en cada bocanada. Miró a su alrededor, las paredes desnudas y casi grises, el piso encerado, ese olor tan atrayente y tan repulsivo de la cera reciente. El corazón se le iba, las piernas parecían flotar en un mar infestado de algas. Se dejó llevar por el aire húmedo. La voz de su hijo lo devolvió un poco a la habitación en donde estaba.

- ¿Y papá? - traía en su mano un revólver de juguete. Se miró la suya, tenía uno idéntico - ¡dale!, ¡dale!, ¡vamos a seguir jugando! - exigió.

- ¡Pará!, ¡pará, fanático!, ¡pará un poco que no doy más!.

- ¿Estás descansando un ratito? - preguntó el chico, mirándolo.

- Sí, sí - balbuceó.

- Ah, bueno. Mirá, vamos a cambiar a que yo era un marciano con casco y todo. ¿Este es un revolver marciano, papá?.

- Sí, sí - se resignó el padre.

- ¿Y vos quién eras? - insistió.

- ¿Yo? - pensó, algo adormilado - Al Capone - se sonrió.

- Al Capone - repitió tratando de memorizar - bueno, dale papi, dale.

- Sí, sí, ya voy.

El chico salió corriendo. Intentó seguirlo pero se desplomó exhausto sobre el sofá. Muerto de cansancio. Era lógico, habían estado corriendo como locos durante toda la mañana de ese santo domingo.

Sintió la voz de su hijo, lejana, muy lejana, que lo llamaba desde otro lugar, desde otro planeta ¿Acaso ahora no era un marciano? Sonrió. Debía estar en el patio, a diez metros de distancia, nada más, diez metros, sin embargo, muy lejos. Estoy rendido, resopló, y se dejó llevar por el cansancio. Miraba el techo, y allá lejos, muy lejos, lejísimos, unas voces le llegaban apagadas a través del desierto de los ojos cerrados.

Le pesaba la mano. Se la miró, tenía el revolver de juguete. Plateado, plástico nacarado. Sonrió, se lo imaginó verdadero, como cuando era niño. Una sensación de alegría lo invadió repentinamente. Ese pecado de sentir lo prohibido.

Apuntó a la ventana y disparó, cayó un hombre. Sopló el hilo de humo que no salía del cañón frío; el hombre siguió caminando, dobló la esquina y desapareció. Sonrió otra vez. Llevaba un paquete de masas o algo parecido. Masas. Bombones, no, bombones no. Una torta, sí, una torta. Se relamió de gusto, ya era hora de almorzar y el estomago rugió. Su mujer debía estar poniendo los cubiertos. Si se estiraba un poco, podía llegar a verla revoloteando alrededor de la mesa. Si fuera verdad, pensó, si sólo fuera verdad. Y sintió el gusto de la muerte, ese dulce delirio que producía la ensoñación de la muerte.

La muerte, la muerte era matar. Morir. Sentir la carne que se destroza. La avispa que penetra hondo desgarrando las entrañas. Todo en cámara lenta. Penetrándolo lentamente. Penetrando. Un punto de sangre y nada más. Suspiró.

Apuntó a un auto que estalló en miles de pedazos pero claro, el auto continuó andando con sus ocupantes vivos y muertos al mismo tiempo. Van de contramano pensó pero es domingo y el tráfico del barrio es casi nulo.

Miró el revolver, la sonrisa no se le había borrado. Era más chico que su mano abierta. El cañón era ínfimo, un pequeño tubo; la culata, negra, con dos o tres rebordes inútiles; una marca desdibujada que seguramente decía made in china. El gatillo justo del tamaño de un chico, su dedo apenas se podía acomodar. Amartilló y disparó. Suspiró otra vez.

Lo estaban llamando. El almuerzo tal vez, sí, seguro que era el almuerzo; pero, ¿a quién le interesaba el almuerzo ahora? Desde muy lejos, llegaba una extraña música sin melodía, un ritmo vibrante, casi podía asegurar que era su imaginación, que podía callarla en cualquier momento, pero no, la sentía ahí, muy adentro, más allá del sonido, más allá de todo, unas voces lo reclamaban.

Si fuera verdad, pensó, y sintió un breve escalofrío en la mano, unas cosquillas que le subieron poco a poco hasta apoderarse del cuello. Es de verdad, se dijo, ahora sí que es verdad. La boca se le crispó, miró el revolver. Ahora era otra cosa. Se le ocurrió majestuoso, como si una aureola lo hubiese cubierto, invadiéndolo a él también.

La música era cada vez más fuerte, más firme, más segura. Casi gritó. No es cierto, no puede ser cierto, es imposible, no es verdad; no, no lo es. Al demonio conmigo, al demonio con mi imaginación, es el hambre, sí, ha de ser eso ¿Cuándo estará listo ese maldito almuerzo? Ah, cierto que ya estaba ¡Qué ocurrencia, Dios, qué ocurrencia!

Amartilló y apuntó a la cara. La sonrisa era una mueca. Miró el tubo que formaba el cañón, allá debía estar la bala pero no había nada. No hay que pensar en estupideces, esas son cosas de viejas, se dijo, tratando de convencerse. Sin embargo, miró otra vez el arma que aún mantenía frente a su cara; no, no es mentira pero no puede ser verdad. Se colocó el revolver en la sien. Acarició el gatillo y cerró los ojos. Sintió que la música se detenía abruptamente. Creo, dijo, ¡sí, creo!.

Temblando, se levantó del sofá y tiró el revolver contra la pared. Creo, creo, ¡Creo!, ¡creo!, ¡creo!, ¡claro que creo! ¡Creo!, ¡creo!, ¡por favor, basta! Se apoyó contra la puerta, transpiraba. Husmeó el aire, no, no, no puede ser. Creo, pero no puede ser. Demonios, sí, Dios, demonios que creo ¿Qué es esto?

Pegó un gritó y corrió hasta el otro extremo de la habitación. Levantó decididamente el revolver, lo amartilló, lo colocó justo frente a su garganta y apretó el gatillo.

Durante unos segundos, todo se detuvo y no hubo ni mundo ni casa, sólo esperar el desenlace, pero nada pasaba. Silencio. Ahora, nada más faltaba ordenarle a sus piernas que se dirigieran hacia el comedor y hacia ese almuerzo que terminaría por volverlo todo a su verdadero sitio, pero no pudo. Al final de cuentas, había tenido razón

No se sorprendió. Cayó al suelo. Muerto, pero sonriendo.

 

Hace unos meses, Feedburner avisaba que sería posible ingresar al servicio utilizando nuestras cuentas de Google. Esto significaba un nuevo paso en la integración a la que se le sumaba la posibilidad de agregar Adsense en los feeds.

Ahora, lo que se viene es la integración total que incluirá nueva portada que todavía no está habilitada:
http://feedburner.google.com/

¿Qué pasará entonces con nuestras cuentas?

Por un lado, se dice que las direcciones cambiarán de:

http://feeds.feedburner.com/nombre

a:

http://feeds.feedburner.google.com/nombre

¿Qué deberemos hacer nosotros?

Por el momento, nada. En principio, esos cambios se implementarán lentamente y serán ellos los que redirijan las cosas, incluso Google ha creado un proxy para administrar eso:

http://feedproxy.google.com/

Se dice que en las próximas semanas, algunos usuarios comenzarán a recibir información al respecto y se los invitará a seguir con sus cuentas o migrarlas a las de Google. Obviamente, todo será optativo pero no por mucho tiempo y en algún momento, esa transferencia será forzosa.

REFERENCIAS:

Google Operating System

Según leo en Blog en serio, mañana, sábado 14 de junio, es el Dia Internacional del Blogger (International Weblogger’s Day) que se celebra por quinto año consecutivo.

En el sitio oficial, se dice que este año, el tema es el CAMBIO y se invita a todos los que quieran unirse a la iniciativa a escribir una entrada sobre qué ha cambios han tenido en este último año y qué es lo que esperan para el próximo.

Personalmente ... espero regalos de los visitantes

Por otro lado, en el períodico Clarín, se anuncia que el domingo 15 de junio, se celebra es Día Internacional del Comentarista (DIC) y claro, también hay un sitio oficial.

Este día, tan en broma o tan en serio como el otro, tiene su historia que puede ser leida en mantantirulirula

Bueno, en este caso, no esperen regalos

Este no será un post muy explicativo porque no hay mucho que explicar. Se trata de dos scripts muy livianas creadas por leigeber.com que permiten crear menúes desplegables con un efecto de fade y que funcionan bastante bien en cualquier navegador. Un script lo usamos para crear menues horizontales y el otro, menues verticales.

Menú UNO

• Menú UNO - Item Nº 1
• Menú UNO - Item Nº 2
• Menú UNO - Item Nº 3
• Menú UNO - Item Nº 4
• Menú UNO - Item Nº 5

Menú DOS

• Menú DOS - Item Nº 1
• Menú DOS - Item Nº 2
• Menú DOS - Item Nº 3
• Menú DOS - Item Nº 4

Menú TRES

• Menú TRES - Item Nº 1
• Menú TRES - Item Nº 2

Para los menúes horizontales podemos usar este ZIP que incluye un demo aunque lo único necesario es el archivo dropdown.js que alojaremos en una servidor y cargaremos antes de </head>

<script type="text/javascript" src="URL_dropdown.js"></script>

Luego, incluiremos el CSS que podrá variar de acuerdo a nuestros gustos, pero algunas de las propiedades principales son estas:

<style type="text/css">
.dropdown {
  float:left;
  padding-right: 5px;
}
.dropdown dt {
  width:125px;
  cursor:pointer;
}
.dropdown dt:hover {
}
.dropdown dd {
  display: none;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  width: 200px;
  z-index: 200;
}
.dropdown ul {
  list-style: none;
  margin: 0;
  padding: 0 0 0 10px;
  width: 200px;
}
.dropdown li {
  display:inline;
}
.dropdown a, .dropdown a:active, .dropdown a:visited {
  display:block;
  padding:5px;
  width:170px:;
}
.dropdown a:hover {
}
</style>

Para usarlo, debemos armar una lista donde cada item tendrá un código similar a este:

<dl class="dropdown">
  <dt id="nombre-ddheader" onmouseover="ddMenu('nombre',1)" 
      onmouseout="ddMenu('nombre',-1)">Texto del menú</dt>
  <dd id="nombre-ddcontent" onmouseover="cancelHide('nombre')" 
      onmouseout="ddMenu('nombre',-1)">
    <ul>
      <li><a href="URL_item1">Item 1</a></li>
      <li><a href="URL_item2">Item 2</a></li>
      <li><a href="URL_item3">Item 3</a></li>
      <li><a href="URL_item4">Item 4</a></li>
    </ul>
  </dd>
</dl>

Pueden tenerse tantos de estos bloque como sea necesario y sólo debemos tener en cuenta que el ID sea diferente para cada uno de ellos.

El ejemplo del post se encuentra en este archivo de texto .

Para crear un menú vertical podemos usar este otro ZIP que también incluye un demo y donde todo lo necesario es el archivo flyout.js que alojaremos en una servidor y cargaremos antes de </head>

<script type="text/javascript" src="URL_flyout.js"></script>

Luego, incluiremos el CSS que es similar al anterior, la única variante es que en lugar de definir la clase dropdown como flotante:

.dropdown { /* para el menú horizontal */
  float:left;
  padding-right: 5px;
}

la definimos como un bloque y establecemos su posición como relativa:

.dropdown { /* para el menú vertical */
  display: block; 
  position:relative
}

El resto es exactamente igual y un ejemplo se encuentra en este otro archivo de texto .

A la salida de la Firefox 3 RC2 (Second Firefox 3 Release Candidate), que, desde hace unos días puede descargarse desde Mozilla y la promoción del Download Day 2008 para establecer un record Guinness, ahora, la gente de Firefox le ha sumado un nuevo elemento de promoción; un video de cuatro minutos donde se explican las principales novedades que se han incluido:

REFERENCIAS:

The Inquirer

Zona Firefox

Slidemenu es otro mini-script de Leigerber que, con solo unas líneas, nos da la posibilidad de crear una acordeón horizontal donde podemos agregar menúes, imágenes o cualquier otro contenido.

¿Qué necesitamos? El script que podemos descargar de su página y que tiene dos variaciones: el original funciona cuando colocamos el mouse encima de la solapa
y la variante que hace lo mismo pero las solapas se cierran cuando quitamos el mouse Sea cual sea la que elijamos, el ZIP contiene un ejemplo completo aunque, lo que necesitamos es muy poco.

Primero subimos el script a un servidor y lo cargamos en la plantilla antes de </head>:

<script src='URL_slidemenu.js' type='text/javascript'></script>

Luego, agregamos el estilo CSS que tendrá muchas variantes pero que, como mínimo dice esto:

<style type='text/css'>
.sm { /* es la clase genérica */
display: block;
height: VALORpx; /* el alto de la imagen o bloque */
list-style: none;
overflow: hidden
width: VALORpx;  /* el ancho total que normalmente será 100% */
}
.sm li { /* cada una de las solapas */
display: inline;
float: left;
overflow: hidden
}
</style>

Podemos crear utilizar la cantidad de solapas que queramos ya que será el mismo script el que se encargue de "repartirlas" de manera pareja a lo ancho. Esas solapas son sólo items de una lista así que sus propiedades CSS pueden ser múltiples, imágenes de fondo, bordes, tamaño, etc.

Creamos el menú con un poco de HTML; por ejemplo:

<ul id="nombre" class="sm">
<li>el contenido de la primera solapa</li>
<li>el contenido de la segunda solapa</li>
<li>el contenido de la tercera solapa</li>
</ul>

Por último, llamamos a la función correspondiente. Esto, lo podemos hacer de varias formas. En general, lo razonable sería agregarlo a la etiqueta body:

<body onload="slideMenu.build('ID',ancho,v1,v2,n)">

Pero, en Blogger, esto es complejo ya que el editor suele rechazarlo o bien transformarlo en algo ininteligible e inútil así que lo mejor es agregar la función justo antes de </body> o después del código HTML del acordeón; en ambos casos, el código es el mismo:

<script type='text/javascript'>slideMenu.build('ID',ancho,v1,v2,n);</script>

Donde los parámetros son:

ID es el nombre del atributo ID del bloque (por defecto 'sm')
ancho es el ancho máximo en pixeles de la solapa expandida
v1 y v2 son las velocidades de reacción para desplegarse (1 es lo más rápido)
n es el número de la sección que se verá expandida

En este ejemplo, la función dice:

slideMenu.build('sm',200,10,10,1);

Y el código completo del ejemplo puede verse en este archivo de texto

• • Google
  • Yahoo
  • Blogger
  • Wikipedia
• • El escaparate de Rosa
  • Gem@ Blog
  • La Bloguería
• 

REFERENCIAS:

Matta's page

¿Seguir o no seguir? (That is the question).

Nofollow (no seguir) es un atributo HTML que puede agregarse a los enlace si queremos que estos no sean tenidos en cuenta por los buscadores. Es un invento diseñado por Matt Cutts (de Google) y Jason Shellen (de Blogger) que comenzó a usarse en el 2005 con el fin de evitar el spam en los comentarios de los blogs.

En poco tiempo, todas las plataformas de blogs y webs importantes, desde Wordpress y Drupal hasta la Wikipedia y Technorati adoptaron el sistema y agregaron el atributo nofollow a sus enlaces con lo que se pretendía evitar que la gente utilizara páginas muy visitadas para conseguir backlinks y aumentar su PageRank.

En la práctica, esto:

<a href="unaPaginaWeb">ENLACE</a>

se transforma en esto:

<a href="unaPaginaWeb" rel="nofollow>ENLACE</a>

También puede aplicarse de manera genérica agregando una etiqueta META en el header:

<meta name="robots" content="index, nofollow">

Google sigue insistiendo en que se siga usando en cualquier lugar donde los usuarios puedan agregar enlaces por si mismos y no lo hace sólo por evitar el spam sino también para que en los resultados de las búsquedas no aparezcan datos irrelevantes.

Algunos especialistas dicen que no es cierto que este tipo de enlace no es tenido en cuenta por los buscadores y hay experimentos realizados que parecen confirmar esa duda.

De un tiempo a esta parte hay una gran discusión en la web sobre el asunto e incluso hay sitios que promueven evitar su uso. La idea se ha extendido y hay muchos blogs que han comenzado a quitarlo de sus páginas.

Los argumentos en uno u otro sentido son variados, quienes recomiendan eliminarlo dicen que su uso no garantiza que nos libraremos del spam y que, en todo caso, existen métodos como la moderación de comentarios que permiten hacer lo mismo. Dicen: colocar nofollow en un enlace es lo mismo que decir, no confío en ese enlace.

En realidad, más allá de detalles técnicos, la esencia de la objeción a usarlo es promover los comentarios y eso ya es un tema demasiado personal para hacer una evaluación porque podemos encontrarnos con sugerencias bastante discutibles:

• Google privilegia las páginas con PageRank ... comenten en posts antiguos
• Se el primero en comentar y obtendrás tráfico
• Usa letra negrita para atraer la atención
• Muéstrate en desacuerdo, usa el humor

O más razonables: "Premiar los comentarios".

Desde el punto de vista práctico, si alguien quiere eliminar ese atributo puede leer un muy buen artículo al respecto en El escaparate de Rosa aunque deben tenerse en cuenta un par de detalles para que el resultado no nos sorprenda porque podemos eliminar el nofollow de nuestra plantillas pero no totalmente.

En una plantilla de Blogger podemos ver ese atributo en dos lugares específicos: los backlinks y los autores de los comentarios. El primero no tiene mayores inconvenientes; el de los comentarios es dudoso porque si el autor utiliza su cuenta normal para ingresar, el enlace generado no apuntará a su sitio sino a su perfil en el mismo Blogger así que el "premio" es nulo.

Además, hay que tener en cuenta que sin importar lo que hagamos ni como modifiquemos la plantilla, el contenido de los comentarios es manejado por Blogger y cualquier enlace interno, cualquier link agregado dentro de un comentario SIEMPRE tendrá el atributo nofollow porque se lo agregará Blogger de manera automática de la misma manera en que lo hacen casi todos los servicios de blogs, incluyendo Wordpress donde es necesario recurrir a plugins para eliminarlos o modificar los arhivos PHP del sistema si es que tenemos acceso a ellos.

Es verdad que un blog es una conversación y los comentarios son una parte sustancial pero ¿es necesario fomentarlos? A primera vista, uno diría que sí pero ¿tendrán el mismo valor si los "premiamos" que si son espontáneos? Imagino que hay tantas respuestas como personas así que no pienso responder.

Click para ver los videos.

¿Qué son las cajas de mensajes?

Seguramente los habrán visto muchas veces. Tal vez es difícil de explicar, lo mejor es mirarlas:

Fundamentalmente, se utiliza para mostrar textos resaltados, diferenciados del resto y suele haber varios modelos, uno para cada tipo de información.

Hacerlos no es difícil y si usamos CSS, podemos generar varios, transformarlos en clases y utilizarlos cuantas veces los necesitemos sin tener que escribir mucho código. Básicamente, lo que necesitamos es establecer las propiedades y tener un conjunto de imágenes o íconos representativos

Como en Janko at Warp Speed ya hay un artículo bastante claro al respecto, vamos a usarlo y ahorrarnos trabajo.

Los mensajes, los colocaremos en un DIV (o cualquier etiqueta de bloque) y la clase tendrá una imagen de fondo que, en este caso, será un CSSGIF transparente de 32x32 a la que posicionaremos 10 pixeles a la izquierda y centraremos verticalmente. Eso, lo hacemos con estas propiedades:

background-repeat: no-repeat;
background-position: 10px center;

Para que el texto se separe de los bordes y no se superponga con la imagen, agregamos la propiedad padding:

padding:15px 10px 15px 55px; /* arriba derecha abajo izquierda */

Así, dejamos un espacio de 15 pixeles arriba y abajo, 10 pixeles a la derecha y lo separamos mucho de la izquierda, tanto como sea necesario para que la imagen quede intacta.

Lo ideal es crear clases con nombres que recordemos con facilidad y las propiedades comunes las agrupamos. Por ejemplo:

.informacion, .descarga, .referencia {
  background-position: 10px center;
  background-repeat: no-repeat;
  font-family: Tahoma;
  font-size: 14px;
  margin: 10px 0px;
  padding: 15px 10px 15px 55px;
}

Y luego, los detalles individuales de cada una:

.informacion {
background-color: #F7F79C; /* el color de fondo */
background-image: url(laImagen); /* la imagen representativa */
color: #002299;  /* el color del texto */
}
.descarga {
background-color: #94F79C;  /* el color de fondo */
background-image: url(laImagen); /* la imagen representativa */
color: #000000;  /* el color del texto */
}
.referencia {
background-color: #6B9CFF; /* el color de fondo */
background-image: url(laImagen); /* la imagen representativa */
color: #FFFFFF; /* el color del texto */
}

Las clases, las usamos en cualquier etiqueta "contenedora":

<div class="informacion">el contenido del mensaje</div>

<p class="descarga">el contenido del mensaje</p>

De esta manera, la caja del mensaje se adaptará automáticamente al tamaño del contenido y no tendremos que preocuparnos por su altura:

MODELO 1: Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

MODELO 2: Nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

MODELO 3: Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Como son etiquetas de bloque, ocupan todo el ancho, si quisiéramos que fueran más chicas y aparecieran centradas deberíamos agregar las propiedades correspondientes:

width:80%; /* el ancho puede ser un porcentaje o una medida fija */
margin-left: auto; /* centrada con respecto a la izquierda */
margin-right: auto; /* centrada con respecto a la derecha */

Esto, lo podemos poner en las clases o, hacer variaciones específicas en alguna etiqueta:

<div class="referencia" style="width: 80%; margin-left: auto; margin-right: auto;">
  el contenido del mensaje
</div>

MODELO 4: Ut wisi enim ad minim veniam.

MODELO 5: Ut wisi enim ad minim veniam.

MODELO 6: Ut wisi enim ad minim veniam.

Le podemos agregar bordes:

border:1px solid #C7C7C7;
border:3px ridge #FFAD08;

MODELO 7: Nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

MODELO 8: Nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

O poner una al lado de otra si les damos anchos pequeños y las hacemos flotar:

<div class="referencia" style="float: left; width:150px;">
  el contenido de una
</div>
<div class="descarga" style="float:left;width:150px;margin-left:5px;">
  el contenido de otra
</div>
<div style="clear:both;"></div>

MODELO 9: Vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio

MODELO 10: Vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio.

Parece que el cambio del ícono de Google ha creado un gran revuelo, tanto, que la empresa ha tenido que salir a explicar a través de un comunicado oficial:

Nos dimos cuenta que era necesario que el ícono representativo de Google pudiera ser aplicado en diferentes aplicaciones, tanto en la web como en los móviles y en las aplicaciones offline. Sentimos que "la pequeña g" tiene muchas de esas características y que es la que mejor representa nuestra marca: es simple, divertido y único. De cualquier manera, estamos buscando como mejorarlo.

Incluso, en el Blog Oficial de Google han salido a contar la historia de la bendita g.

La razón principal del cambio luego de casi nueve años de existencia es que querían tener un conjunto de íconos que se pudiera usarse en iPhone y dispositivos móviles. El favicon en cuestión es sólo uno de una larga serie:

Dicen que eligieron esos luego de realizar unos 300 modelos diferentes y, por las dudas aclaran: "por el momento, ese es el elegido pero sólo es un primer paso". Incluso, invitan a los usuarios a enviar sus opiniones u otros modelos a Faviconideas, una página creada especialmente para eso.

De todos modos, usando Firefox y teniendo Greasemonkey instalado podemos recurrir a un script que restaure las cosas para que el mundo vuelva a ser lo que era o bien.

Si esto no es suficiente, podemos recurrir a una extensión llamada Favicon Picker que nos permite personalizar los íconos de los marcadores.

REFERENCIAS:

Search Engine Land

With a little help from my friends - The Making of Sgt. Pepper es un documental oficial filmado para la televisión en el que George Martin sirve de guia a través de las diferentes canciones del disco más importante realizado por The Beatles y uno de los que más influyeron en la música popular de todos los tiempos..

Se transmitió en Inglaterra el 14 de junio de 1992 e incluía entrevistas por separado a Paul, George y Ringo además de Martin tocando algunos temas nunca antes grabados.

The Beatles grabaron el disco en los estudios de Abbey Road excepto A day in the life que se grabó en el Studio One ya que requería una orquesta sinfónica y se necesitaba espacio para los invitados que incluyeron a Mick Jagger, Keith Richards y Donovan.

Click para ampliar.

Hay que recordar que estamos hablando de 1967 y la grabación de algo tan sofisticado requería utilizar imaginación para reemplazar los escasos recursos técnicos de la época. Martin dice: "en un inicio, las canciones eran sencillas y no había mucho para trabajarlas pero en ese disco, estábamos creando imágenes con sonidos y nada era fácil".

The Beatles buscaban desesperadamente esos sonidos que imaginaban pero no lograban reproducir con los instrumentos tradicionales. Por ejemplo, en Lovely Rita, parte de la percusión es producida por un rollo de papel higiénico con el logo de la EMI que era soplado a través de un peine. Lennon quería un auténtico órgano de tubos para Being for the benefit of Mr. Kite pero no lo consiguieron así que lo reemplazaron con una mezcla de armonio y armónicas ejecutadas simultáneamente por George y Ringo que luego fueron cortadas en pedazos. Para Within you without you Harrison transformó los estudios en un cuarto de meditación y, junto a un grupo de músicos hindues, se sentaron sobre una enorme alfombra a tocar el sitar rodeados de velas e incienso.

"Para nosotros, parece inevitable que la paz, el amor y la justicia terminarán por reinar. Grabamos Sgt. Pepper para cambiarnos a nosotros mismos, para liberarnos de lo que éramos y para divertirnos." (Paul McCartney)

Hasta cierto día de 1967, sólo eran cuatro muchachos que querían ser famosos: John era el inteligente, Paul el "lindo", George el tranquilo y Ringo era Ringo. Juntos, en 129 días de grabación, cambiaron el mundo.

The Beatles: The Making of Sgt. Pepper (49 minutos)
Click para ver el video.

Como la existencia de Ecoogler, el buscador ecológico recorrió la web de uno a otro extremo del mundo, me parece lógico aclarar ciertas cosas antes de seguir induciendo a errores o a que se siga abusando de nuestra buena fe.

Básicamente, todo se resume en una o dos frases: Ecoogler es falso y para eso, me remito al comunicado oficial de Alberto Arébalos, Director de Comunicaciones de Google para América Latina, que fue publicado el pasado miércoles cuatro en El Blog Oficial de Google:

Una cadenda de emails está recorriendo Internet diciendo que Google tiene un nuevo buscador llamado Ecoogler y que por cada 10.000 busquedas se donará un árbol al Amazonas. Y eso es mentira.

Ecoogler fue un miembro de nuestro programa AdSense (por el que avisos son colocados en sitios sin costo para los editores) pero fue cancelado debido a que Google no permite que editores generen visitas a sus sitios (y por ende ingresos por publicidad) a cambio de premios, sorteos, o promesas de ningún tipo.

Nuestra filosofía es que la experiencia de los usuarios de Internet sea la mejor posible y que los sitios tengan usuarios basados en su contenido, no falsos incentivos.

Con el fin de asegurar una buena experiencia para los usuarios y profesionales de la publicidad, los editores de Sitios Web no deberían pedir a los usuarios a que hagan click en los anuncios dentro de sus sitios o depender de métodos engañosos para obtener clicks

Los editores de Sitios Web que forman parte del programa AdSense tampoco deberían alentar a los usuarios a clickear sobre las publicidades de Google utilizando frases como "clickeé las publicidades", "ayúdenos", "visite estos links", u otras similares.

Tampoco dirigir la atención del usuario a las publicidades a través de flechas, cursores u otros "trucos gráficos". No deben poner imágenes engañosas al lado de publicidades independientes. No deben promover sitios a través de publicidades en mails masivos no solicitados o en publicidades no deseadas en sitios de terceros.

No deben compensar a los usuarios por ver publicidades ni por su desempeño para las búsquedas, tampoco prometer compensaciones a terceros por este tipo de comportamiento. No deben utilizar etiquetas engañosas sobre los módulos de los avisos, como por ejemplo "Sitios favoritos" en lugar de "Enlaces Patrocinados" que sería lo correcto.

Moraleja: Google indica que no tiene nada que ver con el proyecto. Obviamente, los árboles no existen y todo se trata de algo parecido a una estafa. Consejos, ninguno, si quieren usarlo, úsenlo pero, recomendaría que retirasen los banners publicitarios.

En Blogger in draft trabajan desesperadamente por mejorar Blogger. De eso no tengo dudas. De lo que dudo es de si tienen idea de para que lado van o sólo se dedican a inventar cosas inútiles que a nadie le importan.

La novedad de este mes es ... un modelo de nuevo escritorio (dashboard). Bueno, no de todo sino de la primera página. Una maravilla de diseño del que están muy pero muy orgullosos:

"Our old dashboard was getting a little cramped, so we reorganized things and gave everything a fresh, new look."

Bueno, esa es sólo una parte, y este derroche de nuevo look sigue para abajo mostrando lo mismo de simpre, el Blogger Buzz en español ... atrasado un mes.

Y no es que el que está en inglés tenga mucho más pero ... por lo menos habla de las actualizaciones y "arreglos" de junio (no, no habla de los errores, ni de los de mayo ni de los de junio) ¿Dice algo sobre la programación de post que funciona mal o a veces (hoy) directamente no funciona? No. Dice otras cosas:

1. En caso eliminarse un post o cambiar la URL, hasta ahora, al acceder a esa dirección errónea, Blogger mostraba una página que decía No se ha encontrado el blog. Ahora, mostrará un mensaje que dice Page not found.

Charlando con Alejandro , comentábamos que eso parecía razonable porque una cosa es que el blog no exista y otra que una página de ese blog no exista. Lo ideal sería tener una alternativa para que los usuarios podamos redirigir ese tipo de error a una página especial (una página 404 personal) o que el mismo Blogger simplemente lo enviara a la página principal.

Es verdad, aparece un enlace para eso pero parece insuficiente y algo más, no funciona al 100% porque, por ejemplo este enlace mostrará el viejo error de No se encuentra el blog:

http://www.vagabundia.blogspot.com/noexiste.html

probablemente, porque la página NUNCA existió.

Sin embargo, esta otra muestra el error de Page not found:

http://vagabundia.blogspot.com/2008/06/vidgeo-widgets-en-flash-para-todos-los.html

probablemente, porque es la URL de una página existente a la que le he cambiado una letra.

2. Se ha resuelto un problema con la etiqueta <blockquote> en las plantillas Minima, Scribe, Harbor, Dots, 867/565, Moto, y Thisaway (si las cargan otra vez, no en las modificada).

Aparentemente, mostraban un problema al agregar citas. Alejando me lo confirma pero tampoco parece estar muy claro: "luego de colocar el blockquote, los párrafos que escribo luego pierden distancia entre renglón y renglón". Si ya hicimos cambios en el CSS, ellos dicen que debe moverse la propiedad line-height desde .post p {} hasta .post {}.

A ver si lo aclaramos un poco. Si la etiqueta blockquote posee una propiedad line-height, esto se hace para que la separación entre los párrafos de esa cita sea diferente de la "normal". Al terminar esa cita, se continúa con la separación por defecto o la que hayamos establecido nosotros. El problema es que si escribimos un post, el editor no usa la etiqueta P sino la etiqueta DIV y por lo tanto, no le estamos indicando la separación. Por eso, lo que debemos hacer es establecerla para todo el post; en general eso se hace en:

.post-body {
  .......
  line-height:valor;
}

Ese valor es variable (1.5em o 1.6em son los normales).

3. Las plantillas se mostrarán igual aunque coloquemos un valor erróneo en una etiqueta <data:nombre/>. Antes, se mostraba una página de error con el famoso código bX que nada decía.

Esta es una modificación importante y no me parece que sea algo bueno. Lo anterior era malo pero esto también. Lo único razonable es que se mostrara un mensaje de error indicándonos cuál es o dónde está el error y no que se lo pasara por alto ya que entonces, nos inducirá a tomar decisiones equivocadas.

Si Blogger quiere "cuidarnos" chequeando la sintaxis debe mostrar TODOS los errores e indicarnos cuáles son; sino, que no muestre ninguno. Mostrar unos y no mostrar otros es confuso. Habrá que estar atentos cuando modifiquemos las plantillas.

Alejandro termina comentando:

Cuándo pondrán algo tipo: ''Now comment on Blogger is much easier, similar to other platforms (wordpress)''

Es que él es una persona de mucha fe

Mandelrot tenía una inquietud que expresaba en varios comentarios. Había agregado el script Fabtabulous e intentaba agregar contenidos automáticos.

Empecemos por el principio

Fabtabulous es un pequeño script que usa la librería Prototype y que nos permite crear un bloque con solapas que tengan diferente contenido por lo que en poco espacio, podemos mostrar varias cosas sin tener que extendernos a lo largo de la sidebar.

Para mi gusto es una de los mejores scripts ya que es muy pequeño, sencillo de usar y tiene la característica de poder personalizarse gráficamente con CSS. Los archivos necesarios para usarlo y las explicaciones respectivas pueden verse en el este post.


La pregunta de Mandelrot apuntaba a un ejemplo concreto: poder colocar las etiquetas del blog en una de esas solapas.

La idea me pareció interesante y el uso de solapas me gusta, de hecho, con el mismo script, era lo que usaba en WordPress pero en Blogger ¿cómo hacerlo?

Hubo un largo feedback de ideas y fracasos. El problema radica en que en Blogger, ciertos datos sólo son accesibles cuando se encuentran incluidos en un elemento (widget) determinado. Por ejemplo, los datos del post solo podemos leerlos en el elemento Entradas del Blog y los datos de los archivos en el el elemento Archivos. Lo mismo ocurre con las etiquetas que sólo podemos leer en un elemento Labels. Esta es la gran limitación de Blogger, si pudiéramos leerlas en cualquier parte de la plantilla incluyendo el header, sabríamos la categoría del post a mostrar antes de hacerlo y podríamos manipularlo; por ejemplo, mostrar un diseño diferenciado según fuera de un tipo o de otro.

Esta bien, entonces, si sólo podemos leer las etiquetas en un elemento Labels ¿podemos usar el elemento Labels para agregar otro tipo de contenido? Esa era la idea que quedó flotando y en principio, no veo porque no debería poder hacerse. Claro, no podremos agregar datos de otros elementos exclusivos pero podemos agregar contenido propio como hacemos con los elementos HTML.

Si bien el ejemplo está implementado con Fabtabulous, en realidad, podríamos usar cualquier otro script del mismo tipo.

Lo que vamos a aprovechar es la posibilidad de crear tantos elementos Label como se nos ocurra. Si ya tenemos uno, agregamos otro desde Elementos de la Página, le ponemos un título y establecemos las opciones que nos parezcan convenientes. Guardamos y ahora vamos a Edición HTML de la plantilla y expandimos los artilugios.

Buscamos el código del nuevo elemento (por eso es bueno colocar un título claro aunque después lo cambiemos). Si ya teníamos un elemento similar, lo que veremos será algo así:

<b:widget id='Label2' locked='false' title='NOMBRE' type='Label'>
<b:includable id='main'>
  <!-- este es el título del elemento -->
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <!-- este es el bucle que lee las etiquetas del blog y las muestra -->
    <ul>
      <b:loop values='data:labels' var='label'>
        <li>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'>
              <data:label.name/>
            </span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
              <data:label.name/>
            </a>
          </b:if>
          <span dir='ltr'>(<data:label.count/>)</span>
        </li>
      </b:loop>
    </ul>
    <!-- este es el ícono para editar el elemento -->
    <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>

Como en este momento no estoy usando un script con solapas en mi blog, decidí entonces colocarlo en uno de pruebas y, para probar las cosas, simplemente copié el ejemplo del post anterior que puede verse en este archivo de texto

<b:widget id='Label2' locked='false' title='NOMBRE' type='Label'>
<b:includable id='main'>
  <!-- este es el título del elemento -->
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <!-- AQUÍ COLOCO EL CÓDIGO DE LAS SOLAPAS -->
    <ul id='tabs'>
      <li><a class='active-tab' href='#tab1'>Tab 1</a></li>
      <li><a href='#tab2'>Tab 2</a></li>
      <li><a href='#tab3'>Tab 3</a></li>