KeepMeOut: Para alejarnos de "vicios"

No sé si es una aplicación tonta como dice wwwhatsnew, digamos que es ... curiosa.

KeemMeOut nos permite seleciconar sitios a los que entramos demasiado frecuentemente sin poder evitarlo, esos sitios adictivos de los que queremos huir pero no podemos.

Porque ahora que terminé de mudar todo de SkyDriver, NI PIENSO!!!!!!!!!!

Chau Billy. Glad to see you.

Estoy leyendo en varios lados, algo que me parece un concepto incorrecto, para resumirlo seria algo así como: "No se quejen, Blogger es gratis, disfruten lo que tienen y no pidan otras cosas .. si quieren alojar archivos, paguen por un hosting".

Me resulta curioso porque lo primero que debe hacer un servicio, grutuito (o pago) es SERVIR, si no sirve, si se paga o no se paga es irrelevante. Tampoco es razonable pensar que un servicio gratuito es una limosna y que por lo tanto, uno debe conformarse con cualquier bazofia, total, viene de arriba. Lo menos que debe hacer quien crea un servicio es hacerlo eficiente y ESCUCHAR a los usuarios porque, al final de cuentas, ellos son el inicio y el fin de su empresa. Sin ellos, no existen.

¿Vale la pena decir que pagar un servicio tampoco garantiza nada? ¿Cuántos hostings pagos existieron y desaparecieron de la noche a la mañana sin dejar rastros? ¿Cuánto pagarías por tener un blog en Blogger? ¿Cero es mucho? A mi, me parece demasiado: Habría que cobrarles ...bastante.

Además, ¿por qué ese desprecio por lo "gratuito"? ¿Será un excesivo aprecio por lo contrario? ¿Tanto tienes tanto vales? ¿Si tienes dinero, puedes tener un blog y expresarte, si no lo tienes, siéntate en un rincón y observa? ¿Si tienes dinero puedes escuhar música y si no lo tienes, silencio? No se te ocurra tararear que te cobramos el canon.

Si tienes dinero tienes derechos si no lo tienes ... si no lo tienes, no existes.

Pero dejo lo naif y me centro en este mundo o en lo que queda de él; yo me pregunto ¿Google pierde manteniendo Blogger?

Lo dudo mucho, en el reino de Don Dinero vale todo menos perder. Si lo mantiene es porque le rinde y si le rinde es porque hay millones de usuarios que a través de los blogs y gracias a los blogs, han hecho de Google el monstruo que es hoy ¿O se creen que los cartelitos de monetizar son decorativos? ¿Quién gana cada vez que un pequeño blog agrega Adsense? ¿Por qué tanto jaleo con los seguidores y las redes sociales de Mr.Google? ¿Acaso alguien cree que es porque en California les gusta juntar gente para charlar y jugar a las cartas? Eso es dinero, dinero que fluye y cae en sus bolsillos. No, no es limosna, es un negocio que nosotros mantenemos.

No nos "dan algo" porque son buenos. Crearon un servicio para ganar dinero y lo consiguieron. Ahora, queremos más.

Por supuesto, ellos no nos deben nada y nosotros tampoco a ellos pero sin duda, podemos exigir y protestar todo lo que se nos ocurra ya que no somos mendigos, somos usuarios y son ellos quienes dependen de nosotros y no al revés. Son los "consumidores" los que dicen SI o los que dicen NO.

Y entonces ¿por qué nos quedamos? Pués cada uno tendrá su respuesta. La mia es sencilla: porque se me da la gana; porque no me gusta que me echen, porque soy cabezadura y como si fuera poco, porque creo que Blogger podría ser una extraordinaria plataforma aunque sus gerenciadores y desarrolladores se empeñen en boicotearlo sistemáticamente.

En fín, a veces, parece que Blogger y yo no nos llevamos bien.

• Ellos quieren seguidores y yo quiero un formulario de comentarios donde no haya que escribir diez veces las cosas.
• Ellos quieren que ponga publicidad y yo quiero que permitan alojar archivos.
• Ellos adoran los "Blogs importantes" y yo todavía no entiendo para que demonios sirve la previsualización del editor de entradas.
• Ellos creen que hacen las cosas bien y yo creo que las hacen muy mal.
• Ellos me hablan en inglés y yo les hablo en castellano.
• Ellos nunca contestan y yo seguiré gritando.
• Ellos miran para otro lado y yo no.

Y todo seguirá así hasta que deje de serme útil y lo reemplace por otra cosa, como tantas otras veces, como pasa siempre que una escoba deja de barrer bien.

Siguiendo con la idea de terminar con el problema de los alojamientos, esta sería una solución válida si se usa un script para colocar la lista de los últimos comentarios en la sidebar. Los detalles son los mismos que en la entrada original, sólo vamos a agregarlo a la plantilla de forma directa y dejar de mendigar alojamientos.

@Blogger: ¡queremos un espacio para alojar archivos !!!

Podemos hacer dos cosas, o lo insertamos directamente antes de </head> o bien, si no queremos "verlo" porque es molesto tener tanto código, podemos agregarlo en un elemento HTML.

Confieso que parecía fácil pero me ha costado trabajo hacerlo porque si bien en esos elementos, Blogger no tiene restricciones en cuanto a los caracteres como < > y & que estan prohibidos en la plantilla misma, al parecer, hace algunas cosas raras que comento en una nota aparte por si alguien está interesado [Ver/Ocultar detalles]

Este código es perfectamente aceptable:
for(var i=0;i<a_rc;i++) {
sin embargo, Blogger lo cambia provocando un error. Al parecer, se confunde con el símbolo < y para evitar que esto ocurra, hay que dejar un espacio intermedio:
for(var i=0; i < a_rc; i++) {
Lo mismo ocurre con esta línea:
if(l_rc.length<o_rc) {
nuevamente, se soluciona separando el símbolo < con espacios atrás y adelante:
if(l_rc.length < o_rc) {

Vamos a la solución práctica.

Agregamos un elemento HTML, le ponemos el título y allí, copiamos las tres partes. Primero, el script con al función, luego las variables que podemos configurar a gusto y por último la llamada.

Sólo debe cambiarse el nombre del blog en la última línea:

<script type="text/javascript" src="http://NOMBREBLOG.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>

Para modificar las variables, simplemente cambiamos los valores:

<script type="text/javascript">
var a_rc=10; // la cantidad de comentarios a mostrar
var m_rc=false; // poner en true si se quiere mostrar la fecha
var n_rc=false; // poner en true si se quiere mostrar el título del post
var o_rc=50; // es la longitud máxima a mostrar de cada comentario (caracteres)
</script>

Con eso, el script funcionaría sin necesidad de alojarlo en otro sitio y tendrá las mismas propiedades gráficas que el resto de las listas de la sidebar.

Para quien quiera personalizarlo, lo más sencillo es, luego de agregar el elemento, ir a la edición HTML, expandir los artilugios y buscar algo así:

<b:widget id='HTMLXX' locked='false' title='EL TITULO' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='ultimosComentarios'><data:content/></div>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

Le agregaremos ese DIV con un ID para identificarlo claramente y asignarle definiciones CSS antes de </b:skin>:

#ultimosComentarios li {
/* es el rectángulo que contiene cada item de la lista */
}
#ultimosComentarios li:hover {
/* efecto sobre esos rectángulos */
}
#ultimosComentarios b {
/* es el nombre del autor del comentario */
}
#ultimosComentarios a, #ultimosComentarios a:link, #ultimosComentarios a:visited {
/* el texto del comentario */
}
#ultimosComentarios a:hover {
/* efecto sobre el enlace */
}

Wallpapers (Rene Magritte)

Click en la imagen para previsualizar un modelo reducido.
Descargar el archivo ZIP que contiene las imágenes

REFERENCIAS:BellFlower

Difícil tema este de los scripts. No hay respuestas que abarquen todos los casos y cualquier método será útil: si funciona, está bien.

En lo personal, he tratado de buscar alguna clase de solución atemporal, que dependa lo menos posible de servidores externos y es por eso que no me canso de recomendar que se agreguen los scripts y las hojas de estilo en la misma plantilla. Eso he hecho hace tiempo, cuando se produjeron crisis similares con Hostfile y Google Pages.

Todos los scripts que hacen al funcionamiento del blog están agregados usando el método explicado en el post anterior. Los scripts externos (muchísimos) son los que uso en las entradas individuales cuando muestro alguna cosa en particular; esos son complejos de solucionar, no tanto por no tener alternativas donde realojarlos sino por el trabajo que significa editar entrada por entrada. UFA!!!.

Pero (siempre hay un pero) había un script que en este blog era importante y que no tenía forma de resolver de manera razonable: el que hace funcionar LightWindow. Por su volumen (casi 2000 líneas) y su complejidad, resultaba impráctico agregarlo a la plantilla y si bien podia, como en otros casos, cambiarle la extensión a TXT y lograr que funcionara sin problemas, ese volumen hacía que el ancho de banda disponible en casi cualquier servicio fuera insuficiente.

Hoy se me ocurrió experimentar con una alternativa y, como veo que funciona, aquí va la explicación por si a alguien le sirve.

LightWindow no sólo es un script "largo", también es uno de esos que crean problemas a la hora de agregarlos a la plantilla aún usando CDATA. Ya sabemos que Blogger es estrambótico y cambiar los símbolos no aceptados por sus equivalentes no sólo es engorroso, casi es imposible a menos que se tenga la paciencia de un santo. Pero, esa misma deficiencia de Blogger en tratar las distintas partes de una plantilla con criterios diferenciados nos permite cambiar lo malo en bueno porque las restricciones de la plantilla en si misma no se aplican a los elementos HTML agregados, allí, el código que podemos insertar es "normal".

Lo que hice entonces es crear una sección nueva justo después de <body>. Una sección es un DIV donde podemos agregar elementos y que, en general, no tiene propiedades por si misma así que es "invisible":

<!-- CONTENEDOR SCRIPTS -->
<b:section class='contenedorScripts' id='contenedorScripts' />

Hecho eso, en la ventana Elementos de la página ya está disponible como cualquier otra así que simplemente agrego un elemento HTML/JavaScript al que le doy un título para identificarlo fácilmente y luego, copio y pego el contendio del archivo lightwindow.js entre etiquetas SCRIPT:

<script type='text/javascript'>
... aquí pego el contenido del archivo ...
</script>

No uso CDATA proque no es necesario ya que Blogger no cambiará el código y lo dejará intacto.

Para mayor comodidad, voy a Edición HTML y expandiendo los artilugios, edito el elemento y le quito el título ya que no quiero que se vea nada de nada:

<!-- CONTENEDOR SCRIPTS -->
<b:section class='contenedorScripts' id='contenedorScripts'>
<b:widget id='HTMLX' locked='false' title='LightWindow' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
</b:section>

Vuelvo a guardar y todo parece estar en orden debido a que este script en particular no es necesario que esté en el encabezado de nuestra página porque se ejecuta recién cuando esta se ha cargado.

El mismo criterio podría usarse con otros scripts que llaman a funciones, bastaría crear elementos HTML para cada uno de ellos y colocar el contenido en ellos de tal manera de tenerlos a buen reguardo, accesibles siempre y editables.

Son varios quienes me han preguntado por el tiempo de carga del blog y si agregar los códigos en la plantilla no aumenta ese tiempo. El hecho que la plantilla tenga veinte líneas y que todo lo demás sea cargado con archivos externos no implica que el sitio se cargará más rápido ya que el total de códigos a leer es el mismo. Estén en la plantilla o fuera de ella, el navegador debe leerlos y procesarlos.

Es cierto que, en principio, se recomienda tener los scripts y las hojas de estilo en archivos externos pero esto sólo es válido en el caso de sitios con un servidor propio. Blogger no lo tiene así que, en realidad, el beneficio de ser externos y que el navegador los guarde en la caché, se ve disminuido al estar en otros servidores a los que hay que acceder para cargarlos. Si a esto, le sumamos la imposibilidad de editarlos de manera sencilla, entonces, la respuesta a la pregunta no será muy exacta pero, diría que es mejor tenerlos incluidos y que de ese modo, la velocidad de carga, mejorará en lugar de empeorar.

Por supuesto, esto no es lo ideal pero podría ser peor.

La única solución estable y definitiva es que Blogger se ponga los pantalones largos y permita de una buena vez el alojamiento de archivos en sus servidores, tal y como hace cualquier otro servicio mediocre.

Y sí. No tenemos paz.

Dados los problemas generados por SkyDrive, aquí van algunas pseudo-soluciones:

1. Utilizar las AJAX Libraries API de Google para cargar aquellos scripts de tipo general lo que nos permite olvidarnos del alojamiento. En estos momentos, están disponibles las siguientes versiones:

• jQuery 1.3.2
• jQuery UI 1.7.1
• Prototype 1.6.0.3
• script.aculo.us 1.8.2
• MooTools 1.2.1
• Dojo 1.2.3
• SWFObject 2.1
• Yahoo! User Interface Library (YUI) 2.7.0
  

La lista completa y sus detalles puede verse en este enlace.

Incorporarlas a Blogger es sencillo, por ejemplo, para cargar Prototype + Scriptaculous agregamos lo siguiente en el HEAD de la página:

<script src='http://www.google.com/jsapi'/>
<script>
google.load("prototype", "1.6.0.3");
google.load("scriptaculous", "1.8.2");
</script>

2. Agregar los scripts directamente en la plantilla. Esto es útil en muchos casos siempre y cuando no sean demasiado complejos. Para hacerlo, basta copiar y pegar su contenido entre etiquetas SCRIPT:

<script type='text/javascript'>
//<![CDATA[
  ... aquí ponemos el contenido del archivo ...
//]]>
</script>

Tampoco es necesario separarlas, pueden ponerse todas dentro de la misma etiqueta y la mayor parte de los trucos funcionará:

<script type='text/javascript'>
//<![CDATA[
  // la nube de etiquetas
  .......
  // expandir y contraer
  .......
  // agregar a favoritos
  .......
  // últimos comentarios
  .......
  // posts relacionados
  .......
  // contador de comentarios, fechas y calendarios
  .......
  // posts expandibles
  .......
  // cualquier otro script debe probarse
  .......
//]]>
</script>

3. Agregar las hojas de estilo directamente en la plantilla copiando y pegando su contenido entre etiquetas STYLE:

<style type='text/css'>
  ... aquí ponemos el contenido del archivo ...
</style>

4. Los scripts sólo son archivos cuyo contenido es un texto plano. El que tengan extensión JS es sólo una convención y no es obligatorio. Muchos servicios no nos permiten alojarlos simplemente porque no aceptan esa extensión pero nada impide que modifiquemos eso y, por ejemplo, la cambiemos por una extensión "inofensiva" como TXT (más información).

Así que, el mismo archivo, podría renombrarse y alojarse en un servidor cualquiera como Fileden y seguirá funcionando:

<script type='text/javascript' src='URL_miScript.TXT' />

5. Hay otros servidores que admiten scripts pero, inevitablemente, siempre estaremos con la espada de Damócles pendiendo sobre la cabeza. Nadie sabe si serán estables, si durarán en el tiempo, si cambiarán las reglas o si el ancho de banda disponible es suficiente. Todo se resolvería si Blogger nos permitiera alojar esos archivos en su propio servidor pero, hoy por hoy, eso parece casi una utopía.

6. No hay soluciones genéricas y tal vez, eso que cuenta La Bloguería que leyó en un foro sea la respuesta más honesta que podría esperarse:

"Mail me your problems and needs. I will pray for you and then feel the difference."

Que traducido sería algo así como: "Arréglense como puedan y no molesten más."

Gracias, Blogger.

Este post está desactualizado ya que SkyDrive no permite utillizar los archivos de manera directa
Otras alternativas

Hay problemas serios con los archivos alojados en SkyDrive. Otra vez sopa, diría Mafalda.

Los archivos están allí pero han cambiado las direcciones URL y por lo tanto, los scripts dejan de funcionar. Basta cambiar esas direcciones para que se solucione pero, parecería que al acabo de cierto tiempo, cambian otra vez.

Lo importante, es saber que esto no tiene nada que ver con la plantilla. Lo digo porque solemos creer que la culpa siempre es nuestra y muchas veces, al tratar de arreglar algo empeoramos las cosas.

Para comprobar si un archivo funciona o no, lo más sencillo es copiar la dirección URL, pegarla en la barra de direcciones del navegador y luego ENTER. Si lo que vemos en una página web, o una página en blanco, quiere decir que algo está mal. Si se trata de un script, el navegador mostrará su contenido como texto o bien nos pedirá autorización para descargarlo.

Sugeriría tener paciencia y esperar a ver si esto es sólo un problema temporal o si se trata de alguna clase de cambio en la política de SkyDrive. Por el momento, no hay ningún tipo de información oficial lo cual no es extraño porque los usuarios sólo somos un cero a la izquierda.

REFERENCIAS:Gem@ Blog

Me da la impresión que Adobe está pisando fuerte en la web. La nueva (por lo menos nueva para mi) herramienta online que nos da 5GB de espacio para compartir archivos y trabajar de manera cooperativa con otros usuarios es muy interesante y llama la atención el esfuerzo que han puesto en su diseño.

Algo similar es lo que ofrecen las aplicaciones creadas para Adobe Air, un entorno multiplataforma que combina distintos lenguajes que normalmente están asociados a la web para crear software de escritorio que puede usarse sin estar conectado a internet.

Cada vez hay más y más de estas aplicaciones y claro, hay de todo, algunas funcionan bien, otras mal pero no dejan de ser interesantes y por lo general, son pequeñas así que no cuesta mucho probarlas hasta encontrar aquellas que nos gusten.

En hongkiat.com nos dan una lista de 60 aplicaciones recomendadas y algo similar podemos ver directamente en el marketplace de Adobe mismo.

• GMDesk Gmail, Google Calendar, Google Docs y Google Maps como aplicaciones de escritorio
• ReadAir cliente de escritorio para Google Reader
• ImageDropr herramienta para subir imágenes a Flickr
• Snoto navegador de imágenes
• FLVPlay HD reproductor de archivos FLV y MP4 locales o remotros, incluyendo videos de YouTube
• AIRTube Video Downloader reproduce y descarga videos de YouTube en formatoFLV
• RichFLV editor de videos FLV, permite cortarlos, convertirlos a SWF o extraer el audio en formato MP3
• Adobe Media Player es el reproductor multimedia de Adobe; permite gerenciar y descargar contenido de TV
• DeskTube es una aplicación completa con todas las opciones de YouTube disponibles en el escritorio
• Shrink-O-Matic permite redimensionar imágeness JPG, GIF y PNG
• Colorpicker selector de colores
• Font Picker selector de fuentes tipográficas
• WebKut captura de páginas web
• TweetDeck una aplicación para Twitter
• Alert Thingy una aplicación para FriendFeed
• Posty permite envios a diferentes servicio de microblogging y redes sociales
• Facedesk una aplicación para Facebook
• AIR iPhone simula la interfaz de un iPhone y permite efectuar y recibir llamados, chequear mensajes de voz, etc
• KonoLive es una herramienta para trabajos grupales
• Bookmash aplicacicón que permite buscar, descargar y organizar videos y música de diferentes servicios
• Jigsawlite crea puzzles a partir de imágenes
• Wikipedia Desktop Widget acceso a la Wikipedia desde el escritorio
• MyDesktopNotes creación de notas rápidas
• JavaScript Example referencias a métodos y propiedades

Hace unos dias, Sidhe and Darky Dragonseeker preguntaba la forma de colocar los títulos tal como se ven en la sidebar, utilizando dos colores o dos tipos distintos de fuentes. Es una técnica bastante simple. Basta agregarle una etiqueta extra al encabezado.

Gem@ se suma a la pregunta y, curiosamente, da la respuesta cuando en su último artículo, habla de la etiqueta span y los estilos porque, en realidad, de eso se trata.

En HTML, hay dos etiquetas que podrían llamarse de usos multiples, que no hacen nada por si solas pero que sirven para "contener cosas", especialmente estilos CSS. La que siempre vemos es DIV pero hay otra similar llamada SPAN. La diferencia entre una y otra es que DIV es un bloque (crea un salto de línea) y SPAN no, es lo que se llama una etiqueta inline así que si uno escribe:

un texto con una <span>etiqueta span</span> no veremos nada particular

Entonces ¿para que sirve? Por ejemplo, para cambiar el estilo de cierto texto:

un texto con una <span style="color:red;">etiqueta span</span> que se verá diferente

Usamos SPAN para cambiar las propiedades de una parte sin cambiar las del resto.

Lo mismo ocurrirá con los encabezados de la sidebar aunque allí, lo que deberíamos hacer primero es quitarle el código que pone Blogger.

Cuando agregamos un elemento siempre nos da la posibilidad de agregarle un título. Aunque no nos interese mostrarlo, es útil ponerlo porque de esa manera, identificamos los distintos elementos cuando los queremos editar. Si no queremos que se vean, lo que debemos hacer es ir a la plantilla y editarla expandiendo los artilugios. Por defecto, suele verse esto:

<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
    <h2 class='title'><data:title/></h2>
</b:if>

Lo único que hace eso es mostrar el título del elemento si es que existe. La clase class='title' suele no estar definida jamás y <data:title/> es el texto del título que le colocamos al elemento. Si no queremos mostrarlo, basta eliminar ese código y listo.

Si lo vamos a mostrar, podemos cambiarlo utilizando el criterio anterior, por ejemplo, cambiamos todo y lo reemplazamos por una línea más simple:

<h2>este es <span>mi título</span></h2>

Ahora, lo que faltaría es agregar o modificar las definiciones CSS genéricas que suelen encontrarse en alguna parte entre <b:skin> y </b:skin>:

.sidebar h2 {
.......
}

Necesitamos dos definiciones:

.sidebar h2 {
... serán las propiedades generales del título ...
}
.sidebar h2 span {
... serán las propiedades de esa parte modificada ...
}

¿Qué propiedades podemos usar? Las que que quieran, imágenes de fondo, colores, tipos de fuente, etc. Por ejemplo, podríamos usara algo así:

.sidebar h2 {
color: DarkSalmon;
font-size: 30px;
font-weight: normal;
letter-spacing: -1px;
}
.sidebar h2 span {
color: Tomato;
}

este es mi título

Hay propiedades que no solemos usar frecuentemente, una de ellas es letter-spacing que establece la distancia extra entre las letras de un texto.

Como esta propiedad acepta valores negativos, con ciertas tipografías se logran efectos interesantes colocando valores de -1 o -2 pixeles para "acercar" las letras entre si. Claro que nada impide hacer cosas más extrañas como colocar valores muy altos, tan altos que el texto se ve invertido:

letras
letras

Más ejemplos:

.sidebar h2 {
-moz-border-radius: 5px;
background-color: DarkRed;
color: yellow;
font-family: 'Century Gothic';
font-size: 30px;
font-weight: normal;
height: 40px;
line-height: 40px;
text-align:center;
width: 300px;
}
.sidebar h2 span {
color: YellowGreen;
font-family: Arial;
font-size: 40px;
}

este es otro título

.sidebar h2 {
-moz-border-radius: 5px;
background-color: #444;
color: white;
font-family: 'Century Gothic';
font-size: 30px;
font-weight: normal;
height: 45px;
line-height: 41px;
text-align: center;
width: 300px;
}
.sidebar h2 span {
-moz-border-radius: 5px;
background-color: #000;
color: #BB0;
font-family: Arial;
padding: 0 5px;
}

y este es otro título

Otra propiedad poco común que podemos usar es line-height. Con ella es posible controlar la posición de las letras con respecto a un fondo:

.sidebar h2 {
background-color: #345;
color: #999;
font-family: 'Times New Roman';
font-size: 24px;
height: 30px;
line-height: 5px;
text-align: center;
width: 370px;
}
.sidebar h2 span {
color: #CCC;
font-size: 56px;
}

otro título más

Hay dos métodos para insertar una hoja de estilo externa, podemos usar la etiqueta LINK o la propiedad @import:

<link href='URL_archivo.css' type='text/css' />

<style type='text/css'>@import url(URL_archivo.css);</style>

Aunque se suele utilizar LINK cuando la incluimos en el HEAD de nuestra página, ambos métodos son correctos y el resultado será el mismo.

¿Para qué sirve entonces @import? Generalmente, se utiliza para importar hojas de estilo dentro de una hoja de estilo y en Blogger en particular, ese es el método que debemos usar si queremos agregar un archivo CSS externo en un post ya que la etiqueta LINK no es aceptada.

¿Y para qué agregar una hoja de estilo en un post? Porque si las agregamos en la plantilla se cargarán siempre aunque no la utilicemos así que, por ejemplo, si estamos mostrando algo eventual, algo que sólo se se verá en un post o en muy pocos, lo mejor es "importarla" cuando realmente se necesite.

En esos caso, la única condición a seguir para no tener problemas es que el código esté escrito en una sola línea.

¿Y qué es una hoja de estilo? Un archivo de texto plano, sin formato, que podemos crear con el block de notas y que NO INCLUYE etiquetas. Esto es fundamental, es el error más común. Esta restricción también es válida para agregar definiciones de estilo en la plantilla. Las etiquetas de Blogger <b:skin> y </b:skin> son similares a <style> y </style>; dentro de ellas no debe haber otras etiquetas:

<b:skin>
  ... propiedades ...
  <style>
    ... propiedades ...
  </style> 
  ... propiedades ...
</b:skin>

Eso resaltado es un error y hará que el resultado sea imprevisible. Lo mismo ocurrirá si comentamos el código como lo hacemos en el resto del HTML:

<b:skin>
  ... propiedades ...
  <!-- este comentario es un error -->
    ... propiedades ...
  /* este comentario es válido */
  ... propiedades ...
</b:skin>

Una hoja de estilo es una lista de definiciones que contiene propiedades y tiene una sintaxis estricta; las propiedades deben terminar con un punto y coma o no tendrán efecto:

<style>
  /* el color no se mostrará */
  color: #FFF
  font-size: 20px;
</style>

Como en Blogger no podemos alojar archivos, tener hojas de estilo externas no es demasiado práctico, tardarán en cargarse y editarlas es complejo ya que habrá que descargarlas, cambiarlas y volverlas a subir. Siempre es mejor agregarlas directamente en la plantilla.

También es buena idea organizarlas y agruparlas, no tiene mucho sentido tener una serie de etiquetas STYLE, una sola es suficiente y nada impide que usemos la que ya está incluida por defecto (b:skin) así que en lugar de algo así:

<b:skin>
  ... propiedades generales ...
</b:skin>

<style>
  ... propiedades para el truco XXX ...
</style>

<style>
  ... propiedades para el truco YYY ...
</style>

<style>
  ... propiedades para el truco ZZZ ...
</style>

Podemos escribir:

<b:skin>
  ... propiedades generales ...

  /* el truco XXX */
  ... propiedades ...

  /* el truco YYY */
  ... propiedades ...

  /*el truco ZZZ */
  ... propiedades ...
</b:skin>

El fin de la humanidad no será esa fantasmagoría ideada por San Juan. Ni ángeles con trompetas, ni monstruos ni batallas en el cielo y en la tierra. El fin de la humanidad será lento, gradual, sin ruido, sin patetismo: una agonía progresiva. Los hombres se extinguirán uno a uno. Los aniquilarán las cosas, la rebelión de las cosas, la resistencia, la desobediencia de las cosas. Las cosas, después de desalojar a los animales y a las plantas e instalarse en todos los sitios y ocupar todo el espacio disponible, comenzarán a mostrarse arrogantes, despóticas, volubles de humor caprichoso.

Su funcionamiento no se ajustará a las instrucciones de los manuales. Modificarán, por sí solas, sus mecanismos. Luego funcionarán cuando se les antoje. Por último se insubordinarán, se declararán en franca rebeldía, se desmandarán, harán caso omiso de las órdenes del hombre.

El hombre querrá que una máquina sume, y la máquina restará. El hombre intentará poner en marcha un motor, y el motor se negará. Operaciones simples y cotidianas como encender la televisión o conducir un automóvil se convertirán en maniobras complicadísimas, costosas, plagadas de sorpresas y de riesgos.

Y no sólo las máquinas y los motores se amotinarán: también los simples objetos. El hombre no podrá sostener ningún objeto entre las manos porque se le escapará, se le caerá al suelo, se esconderá en un rincón donde nunca lo encuentre. Las cerraduras se trabarán. Los cajones se aferrarán a los montantes y nadie logrará abrirlos. Modestas tijeras mantendrán el pico tenazmente apretado. Y los cuchillos y tenedores, en lugar de cortar la comida, cortarán los dedos que los manejen.

No hablemos de los relojes: señalarán cualquier hora. No hablemos de los grandes aparatos electrónicos: provocarán catástrofes. Pero hasta el bisturí se deslizará, sin que los cirujanos puedan impedirlo, hacia cualquier parte, y el enfermo morirá con sus órganos desgarrados.

La humanidad languidecerá entre las cosas hostiles, indóciles, subversivas. El constante forcejeo con las cosas irá minando sus fuerzas. Y el exterminio de la raza de los hombres sobrevendrá a consecuencia del triunfo de las cosas.

Cuando el último hombre desaparezca, las cosas frías, bruñidas, relucientes, duras, metálicas, sordas, mudas, insensibles, seguirán brillando a la luz del sol, a la luz de la luna, por toda la eternidad.
Marco Denevi (Falsificaciones)

Pués sí, es que cuando uno pasa un fin de semana entre apagones y apagones que nos llevan al siglo 18 con todas sus desventajas y ninguno de sus beneficios, comienza pensar en cuán dependientes somos de las cosas inmateriales.

Bah, frente a eso, sólo queda dormir y dormir hasta que alguien encuentre el cable roto, baje la palanca y diga ¡hágase la luz!.

650 millones de años

Evolution - Fuel TV

La historia de la humanidad en Lego

Weltraffer

Una animación de Christian Denkhaus, Hendrik Denkhaus, Kilian Helmbrecht y Lukas Helmbrecht.

<object width='425' height='350' id='movie' type='application/x-shockwave-flash' data='http://www.youtube.com/v/kkHHzkH5txE'><param name='movie' value='http://www.youtube.com/v/kkHHzkH5txE' /><param name='wmode' value='transparent' /><param name='allowfullscreen' value='true'/></object>Copiar el código para insertar el video

La evolución de la educación

La evolución del hombre

Aviso publicitario de Guinness

Guinness Evolution

Publicidad ganadora del Cannes Grand Prix TVC.

<object width='425' height='350' id='movie' type='application/x-shockwave-flash' data='http://www.youtube.com/v/1t4sdgvy-pk'><param name='movie' value='http://www.youtube.com/v/1t4sdgvy-pk' /><param name='wmode' value='transparent' /><param name='allowfullscreen' value='true'/></object>Copiar el código para insertar el video

REFERENCIAS:Listicles

Wallpapers (Computín)

Click en la imagen para previsualizar un modelo reducido.
Descargar el archivo ZIP que contiene las imágenes

Blueding es un sitio que posee diferentes herramientas que permiten descargar el contenido multimedia (imágenes, mp3) a un móvil vía Bluetooth.

Hay varias opciones disponibles.

• Puede agregarse un bookmarklet a los favoritos o marcadores
• Descargar una extensión para Internet Explorer
• Descargar una extensión para Firefox
• Utilizar un plugin para WordPress
• Instalar un gadget para Blogger
  

Este último, por ejemplo, genera dos enlaces al final de cada post que permiten efectuar las descargas y puede ser configurado, modificando el CSS y algunas de las variables del script.

Una vez agregado, podemos añadir la URL de nuestro sitio al directorio de descargas del sitio.

Google Blog Search nunca fue una maravilla. Los backlinks en Blogger [1, 2] utilizan ese servicio y pasaron de ser casi nulos a mostrar decenas de resultados con lo cual, ni fueron ni son muy útiles.

Hace poco, según cuentan en Digital Inspiration, han empezado a modificarlo un poco, por lo menos en la versión en ingles, agregando algunas funciones a las que puede accederse con Browse Top Stories New. Allí, se supone que podremos navegar buscando temáticas y se nos mostrará la cantidad de blogs que hacen referencia a cierto tema.

¿Para qué usamos Google Blog Search? Para buscar referencias o contenido pero como herramienta se ha transformado en una inutilidad ya que no filtra los sitios que republican nuestros feeds con lo cual, los resultados que vemos son irrelevantes.

Muchos sitios han hablado de un cambio en el uso de los buscadores o mejor dicho, en los hábitos de nosotros, los usuarios y creo que no estan muy equivocados. Si bien, la proporción de visitas generada por Google en todas sus formas sigue siendo muy relevante, han aparecido nuevas formas y si miramos las estadísticas, confirmaremos los datos mostrados en Micro Persuasion. La búsqueda de blogs de Google prácticamente no existe, Technorati es un fantasma y aparece Twitter como fuente de tráfico destacable.

De allí tal vez, el uso intensivo de Twitter Search y sus distintas alternativas como comenta Pizcos, lo interesante que resulta integrar esos resultados al buscador normal tal como explica SpamLoco o la casi adictiva página de holatwitter que tanto le gusta a Nico.

Smilies.

No sólo a las palabras se las lleva el viento.

Rápido, rápido, rápido ...

Mi primer auto.

El fin del mundo.

La calle. La vereda. Camino. Una puerta. Está abierta y entro. Escupo en la alfombra. Rompo un par de floreros. Garabateo las fotos familiares. Contento con mi obra, salgo a la calle y sigo caminando como si nada. Me siento bien. Soy un héroe. Nadie me vio, nadie sabe quién soy. Me siento impune porque soy impune. Mi vida es una porquería pero no importa, ese es un detalle.

Un blog es eso. Una casa donde la puerta está abierta y cualquier psicótico puede entrar y salir para descargar sus frustraciones, para pretender ser lo que no puede ser, para perturbar a los otros, para sentir, por unos instantes, que es una especie de semidios al que la vida le debe algo. No hará daño, sólo nos dejará un sabor amargo y como cualquier otra basura, bastará pasar un trapo para que deje de existir y no queden rastros.

En algún momento, sentí pena por ellos. Ya no. Tal vez es hora de ponerse a pensar si hay formas razonables de evitar estas cosas o minimizarlas al máximo.

Las herramientas disponibles son pocas o ninguna. Cuando llegamos a cierto hartazgo es el momento de usarlas pero, me gustaría tomar una decisión que no fuera el resultado de un acto de histeria o de bronca y tal vez por eso escribo, porque es la forma de escucharme a mi mismo.

Blogger no ayuda en nada, al contrario, pone trabas. Ellos manejan los comentarios a su antojo, lo hacen mal y creen que lo hacen bien. Pedirles que cambien es pedirle peras al olmo. Los que debemos cambiar somos nosotros para no parecernos a ellos.

Nos permiten decidir si moderamos los comentarios o definir quienes pueden realizarlos. Lo usual es que tengamos marcada la primera: Cualquiera. No es que lo hayamos pensado, es que es la opción obvia, uno abre un blog y como es público, no se nos ocurre poner restricciones porque suena contradictorio; aún quienes vemos en esto un juego, pensamos "no hay problema", cualquiera puede unirse al juego. No lo hacemos de bondadosos ni porque somos mercachifles, lo hacemos porque nos parece natural.

Pero algo falla en alguna parte y no estoy muy seguro de tener una respuesta que me satisfaga.

Un juego. Sí. Un juego donde aparece alguien que quiere jugar pero permanece distante, usa nuestros juguetes pero no nos presta los suyos; o no los trae o no quiere compartirlos, no importan sus motivos, tal vez son valederos, tal vez no se trata de egoismo sino de simple comodidad pero algo falla, algo no está bien, algo hay que corregir. Una conversación debe tener un ida y vuelta, un mirarse a los ojos aunque sea una mirada virtual, un compromiso de ambos lados.

Anónimo o URL personal es lo mismo, eso está claro, pongo Juanito http://www.mongoaurelio.com y ya está, yo soy quién sabe quién. Peor aún, pongo un nombre de alguien conocido y su dirección y soy el otro. Miento, engaño, da igual. Me creo con derecho a decir lo que se me ocurra porque es la única manera en que alguien me escucha. Los obligo a prestarme atención. Soy un chiquilín masturbásndose en la soledad y que cree que hay dos vidas distintas y que lo que hacemos en la web no es parte de la vida real. Y así, termina siendo un nada que se olvida que la vida es la suma de cada uno de nuestros actos y que sólo existe si la construimos segundo a segundo. Patético. Cree que nos hace perder el tiempo pero sólo nos aburre.

Disfrazarnos o usar un pseudónimo no nos hace otros.

En tiempos en que la privacidad es un valor en discusión que afecta nuestra seguridad personal, la guerra entre lo público y lo privado nos genera nuevos problemas. La navegación anónima es una de las nuevas herramientas al alcance de la mano de cualquiera y tarde o temprano terminará por influir en cualquiera que tenga un blog.

Dudas, dudas, dudas. Lo único que tengo claro es que ya es imposible dejar la puerta abierta y lo que me faltaría responder es ¿cómo cerrarla?

Es cierto que limpiar no es difícil, unos cuantos clicks y en un par de minutos ya está listo pero, ni siquiera quiero perder esos pocos minutos. Lo mejor, para quienes no nos gusta limpiar, es ensuciar poco.

Moderar es lo más razonable simplemente porque es inevitable aunque no termina de convencerme; estoy pensando en voz alta, preguntándome si la lógica para ingresar a cualquier casa no implica identificarse.

Identificarse no es una restricción, es un signo de cortesía, significa decir "Hola, yo soy Fulano", significa mostrar reciprocidad. Estoy en tu casa, esta es la mia. Juego con tus juguetes, traje los mios, juguemos juntos. Hablemos cara a cara, discutamos cara a cara. No hacerlo, permanecer en el anonimato, puede ser sólo pereza o costumbre pero también, puede significar desprecio ¿Qué motivos puede haber para permanecer anónimo? ¿Acaso esos mismos motivos no serían valederos para que nos negáramos a escucharlos? No quiero que sepan quien soy ¿por que debería hablar contigo? ¿La confianza es un camino que sólo tiene una dirección? ¿Tú tienes derecho a permanecer en las sombras y yo tengo la obligacion de prestarte atención cuando se te ocurre salir de ellas?

A medida que escribo esto me convenzo más y más que los comentarios anónimos no deberían ser admitidos.

Anónimo es igual a nadie.

Anónimo es igual a nada, un cero sin entidad ni sustancia, alguien invisible, alguien que no deja huella, alguien que será olvidado.

Un blog es un alguien y requiere de otros, de gente que se involucre, que discrepe, que participe, que disienta, que genere cosas y lo retroalimente. Un blog requiere dar la cara y no gritar desde el limbo de la inexistencia.

No hablo de seguridad. No hablo de otra cosa que de reciprocidad y de buenos modales.

En la última entrada referida a solapas o tabs había un comentario de Malina en el que preguntaba si era posible colocar las categorias del blog dentro de esas solapas. Unos días después, Haîmat se sumaba a esa pregunta y la extendía, hablando de elementos en general y aportando un ejemplo.

En algún momento, hace ya tiempo, había mostrado una forma de incluir las etiquetas en solapas pero es una solución que, si bien funciona, nunca me convenció demasiado así que aprovechamos el ejemplo para intentar otro método que me parece más flexible.

El problema que surge para explicar esto es que no hay un solo método para incluir solapas, hay muchos, hay decenas de scripts y todas son diferentes aunque en general, tienen una estructura similar, en una lista ordenada (UL LI) se muestran las solapas y abajo, en distintos DIVs, se agrega el contenido de cada una de ellas.

Este ejemplo usará Fabtabulous que es uno de esos scripts que ya he utilizado alguna otra vez (más información)

Coloco entonces los scripts necesarios antes de </head>:

<script src='http://www.google.com/jsapi'/>
<script>
google.load("prototype", &quot;1.6.0.3&quot;);
google.load("scriptaculous", &quot;1.8.2&quot;);
</script>
<script src='URL_fabtabulous.js' type='text/javascript'/>

Debajo de eso, el CSS que puede tener cualquier propiedad y que es lo que podemos personalizar.

<style type='text/css'>
#tabs-wrapper {
width: 320px;
float: right;
margin: 30px 0;
word-wrap: break-word;
overflow: hidden;
}
#tabs {
list-style-type: none;
margin: 0;
padding: 0;
}
#tabs li {
float: left;
list-style-type: none;
margin-right: 1px;
}
#tabs a {
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
background-color: #BBB;
color: #FFF;
float: left;
font-family: Arial;
font-size: 16px;
font-weight: bold;
height: 28px;
line-height: 30px;
outline: none;
margin: 0;
padding: 0 8px;
text-decoration: none;
}
#tabs a.active-tab {
background-color: #EEE;
color: #444;
outline: none;
}
.demoTabs {
color: #444;
}
.panel {
background-color: #EEE;
clear: both;
display: none;
padding: 10px;
}
.panel.active-tab-body {
display: block;
}
</style>

Colocar contenido en una solapa es sencillo si se trata de códigos escritos por nosotros; en la primer parte van las solapas en si mismas con sus títulos:

<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>
</ul>

Debajo, el contenido de cada una:

<div class='demoTabs'>
<div class='panel active-tab-body' id='tab1'>
<div>El contenido de la primera solapa</div>
</div>
<div class='panel' id='tab2'>
<div>El contenido de la segunda solapa</div>
</div>
<div class='panel' id='tab3'>
<div>El contenido de la tercera solapa</div>
</div>
</div>

El problema surge porque no podemos colocar un elemento de Blogger ya que los widgets deben estar en una sección y una sección sólo puede contener widgets:

<b:section class='unaClase' id='unNombre'>
  ... aquí no nos permiten agregar códigos ...
<b:widget id='otroNombre' locked='false' title='TITULO' type='TIPO'/>
  ... aquí no nos permiten agregar códigos ...
</b:section>

Pero si podemos armar las cosas de este otro modo:

... aquí podemos agregar códigos ...
<b:section class='unaClase' id='unNombre'>
<b:widget id='otroNombre' locked='false' title='TITULO' type='TIPO'/>
</b:section>
... aquí podemos agregar códigos ...

Así que podríamos armar las solapas de ese modo, creando secciones en cada una de ellas y de tal modo, podríamos mover los elementos que ya tenemos o bien agregar otros directamente desde la ventana de Diseño | Elementos de la página. Para eso, vamos a colocar las solapas en un DIV al que le daremos las mismas propiedades que a la sidebar y que en este caso, para ser original, tendrá como nombre id='tabs-wrapper':

<div id='tabs-wrapper'>
<ul id='tabs'>
<li><a class="active-tab" href="#tab1">Tab 1</a>
<li><a href="#tab2">Tab 2</a>
<li><a href="#tab3">Tab 3</a>
</ul>
<div class='demoTabs'>
<div class='panel active-tab-body' id='tab1'>
<b:section class='solapa1' id='solapa1' maxwidgets='1' showaddelement='yes'/>
</div>
<div class='panel' id='tab2'>
<b:section class='solapa2' id='solapa2' maxwidgets='1' showaddelement='yes'/>
</div>
<div class='panel' id='tab3'>
<b:section class='solapa3' id='solapa3' maxwidgets='1' showaddelement='yes'/>
</div>
</div>
</div>

Ahora, lo que veremos en la ventana de edición será algo así:

Y haciendo click en las solapas, accederemos a cada una de ellas, de la misma manera que ocurre en el blog y podremos agregar un gadget cualquiera.

Obviamente, puede haber detalles que modificar o adaptar de acuerdo a cada elemento pero, para eso, cada sección tiene su propio ID y su propia clase así que deberías ser sencillo hacerlo o tan complicado como hacerlo en la misma sidebar.

Así como podemos permutar la visibilidad de un elemento cualquiera modificando sus propiedades CSS, también podemos hacer lo mismo con su transparencia (más información).

En este caso, las propiedades que las controlan varían según sea el navegador que utilizamos así que lo normal es agregarlas todas y que el navegador escoja la que va a utilizar, la otra, la ignorará:

En Internet Explorer:
filter:alpha(opacity=valor) un valor entre 0 (transparente) y 100 (opaco)

En Firefox:
opacity: un valor entre 0.0 (transparente) y 1.0 (opaco)

Es muy fácil de aplicar (más información):

Lo más sencillo es establecer una clase CSS que agregamos antes de </b:skin> o entre etiquetas <style> y </style>. Por ejemplo:

<style type="text/css">
.demoTransparencia {filter:alpha(opacity=50); opacity:0.5}
.demoTransparencia:hover {filter:alpha(opacity=100); opacity:1.0}
</style>

La usamos de esta forma:

<div class="demoTransparencia"> ... el contenido ... </div>

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

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip.

Si usamos Scriptaculous, las posibilidades de manejar las transparencias se amplian ya que, como muestran en Woork, le podemos agregar algún efecto extra.

Para eso, vamos a insertar un pequeño script antes de </head>:

<script type="text/javascript">
//<![CDATA[
function changeOpacity(id) {
$opacityStatus = $(id);
if($opacityStatus.value==0) {
new Effect.Opacity(id, {duration:0.5, from:1.0, to:0.5});
$opacityStatus.value = 1;
} else {
new Effect.Opacity(id, {duration:0.5, from:0.5, to:1.0});
$opacityStatus.value= 0;
}
}
//]]>
</script>

Lo que hace ese script es muy simple; cada vez que se lo ejecuta, verifica la opacidad del elemento. Si es opaco lo hace transparente y viceversa. Allí, hay tres valores que podemos establecer:

duration:0.5 es la duración del efecto, el tiempo que tarda entre dos estados
from:1.0 el valor opaco (sin transparencia)
to:0.5 el valor final de la transparencia

Para aplicarlo, usamos eventos; por ejemplo onmouseover y onmouseout:

<div id="demo1" style="filter:alpha(opacity=50); opacity:0.5;" onmouseover="javascript:changeOpacity('demo1')" onmouseout="javascript:changeOpacity('demo1')">
... el contenido ...
</div>

Lo mismo podría hacerse usando el evento onclick:

<div id="demo2" style="filter:alpha(opacity=50); opacity:0.5;" onclick="javascript:changeOpacity('demo2')">
... el contenido ...
</div>

En este ejemplo, usamos una imagen, al hacer click sobre ella, el texto a la izquierda permutará de estado:

<div>
<img onclick="javascript:opacidadS('demoO3')" src="URL_imagen" class="izquierda" />
<span id="demoO3" style="filter:alpha(opacity=50); opacity:0.5;">
... el contenido ...
</span>
</div>

1. ¿Hay derecho a decir cualquier cosas sobre cualquier tema en cualquier momento?
2. ¿Tenemos derecho a dar opiniones que no nos han pedido?
3. ¿Que algo no me guste será una opinión?
4. ¿Todo lo que no me gusta es malo?
5. ¿Cuál es la difencia entre libertad de expresión y ser mal educado?
6. ¿Cuál es la diferencia entre conversar y hacerse escuchar?
7. ¿Cuál es la diferencia entre criticar y maltratar?
8. ¿Qué derecho tengo a juzgar todo, todo el tiempo?
9. ¿Seguirá siendo válido eso de no hagas a los demás lo que no te gustaría que te hicieran a ti?
10. ¿Quién cree que Menéame es un buen ejemplo de lo que deben ser las relaciones humanas?
11. ¿Es posible andar por la vida gritando todo el tiempo esto me gusta y esto no me gusta?
12. ¿Serán los blogs el nuevo basurero de las miserias ajenas?
13. ¿Cuál es el aporte de alguien que sólo grita?
14. ¿Hasta dónde llega la responsabilidad de los administradores de los sitios?
15. ¿Cuando algo es público resulta que no es de nadie?
16. ¿Habrá que poner límites?
17. ¿Hay que explicitar esos límites o son obvios?
18. ¿Quién decide cuáles son los límites?
19. ¿Seremos "dueños" de nuestro propio blog?
20. ¿A quién demonios le importa mi opinión?

Con el odio acabaremos ...

Nacha Guevara - La canción del odio.

<object width='425' height='350' id='movie' type='application/x-shockwave-flash' data='http://www.youtube.com/v/cyXgK0GTke0'><param name='movie' value='http://www.youtube.com/v/cyXgK0GTke0' /><param name='wmode' value='transparent' /><param name='allowfullscreen' value='true'/></object>Copiar el código para insertar el video

Los bookmarklets son pequeños scripts que se agregan como marcadores o favoritos y que en lugar de tener una dirección URL, ejecutan un código determinado. Tienen una ventaja sobre otro tipo de plugins o extensiones, la mayoría son compatibles con casi cualquier navegador,.

Son sencillas de agregar, basta arrastrar los enlaces a la barra de marcadores o hacer click con el botón derecho para añadirlas a los favoritos.

Google Notebook bookmarklet

C&oacte;mo agregar bookmarklet al navegador.

<object width='425' height='350' id='movie' type='application/x-shockwave-flash' data='http://www.youtube.com/v/QrwevUN0KdQ'><param name='movie' value='http://www.youtube.com/v/QrwevUN0KdQ' /><param name='wmode' value='transparent' /><param name='allowfullscreen' value='true'/></object>Copiar el código para insertar el video

En Firefox podemos manejarlas con cierta facilidad. Por ejemplo, basta hacer click con el botón derecho para acceder a las propiedades y agregar una palabras clave para lanzarlo. Como una vez que nos acostumbramos a utilizarlas pueden ser una larga lista, lo mejor es crear una carpeta y guardarlas allí.

Su uso se está extendiendo y hay para todos los gustos y necesidades; aquí hay una lista con algunas:

• Enviar link a Twitter via Twit-it!
• Twitter Reactions
• Crear Short URL usando bit.ly
• Traducir página o texto al inglés usando Google Translate
• Traducir texto o página al español usando Google Translate
• Enviar texto o página s GMail
• Mostrar todas las imágenes de una página
• Sencilla calculadora científica
• Tabla de colores standard
• Tabla de caracteres ISO
• Get YouTube video
• Habilitar menú contextual en páginas donde está deshabilitado
• Descargar PDF via pdfdownload.org

REFERENCIAS:labnol.org

ver la versión actualizadaImagine: Un tributo

Wallpapers (más animales)

Click en la imagen para previsualizar un modelo reducido.
Descargar el archivo ZIP que contiene las imágenes

REFERENCIAS:Concurso Fotos de Carnaval 2009 de elcorreodigital.com

Un comentario de Diego en la entrada donde se explica la forma de identificar los comentaristas utilizando algún tipo de avatar distinto a los que coloca Blogger por defecto, me obliga a ampliar un poco más el tema.

"Sólo una duda, si por casualidad un visitante pusiese el mismo alias que el autor del blog (por ejemplo si fuesen a comentar en el mío y se llamasen Diego también), ¿no le aparecerá mi imagen?"

Y la respuesta es sí, ocurrirá eso.

Si miramos la página de comentarios tradicional, veremos que no pasa lo mismo ya que cada comentarista está identificado correctamente. Esto es así porque Blogger utiliza otro dato para chequear si alguien está registrado en el servicio, mediante OpenId o utiliza una URL propia. En función de ese dato, muestra un ícono diferente.

Para equiparar esto, vamos a utilizar data:comment.authorClass que nos devuelve tres posibilidades:

blogger-comment-icon si el comentarista está logueado en Blogger
openid-comment-icon si el comentarista está logueado con OpenId
anon-comment-icon cualquier otro método

Es decir, si un comentarista no utiliza algunos de los métodos de registro aceptados, aunque coloque su URL, para Blogger, es un "Anónimo".

Modificando un poco el código, podemos hacer lo mismo, se hará un poco más engorroso pero es efectivo y de hecho, ese es el método que uso en el blog para evitar situaciones indeseadas.

Aquí va el código:

<b:loop values='data:post.comments' var='comment'>
  <div class='' expr:id='data:comment.id'>
    <dt class='comment-author' expr:id='data:comment.anchorName'>
      <a expr:name='data:comment.anchorName'/>

      <!-- verificamos si el comentarista colocó una URL -->
      <b:if cond='data:comment.authorUrl'>

        <!-- lo hizo así que verificamos si el autor está logueado en Blogger -->
        <b:if cond='data:comment.authorClass == &quot;blogger-comment-icon&quot;'>
          <b:if cond='data:comment.author == &quot;miNOMBRE&quot;'>
            <!-- mis propios comentarios -->
            <img src='URL_imagenMISCOMENTARIOS'/>
            <data:comment.author/>
          <b:else/>
            <!-- cualquier otro comentaristas logueado en Blogger -->
            <img src='URL_imagenGENERAL'/>
            <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
          </b:if>
        <b:else/>

          <!-- no está logueados en Blogger pero colocó una URL -->
          <b:if cond='data:comment.authorClass == &quot;openid-comment-icon&quot;'>
            <!-- el comentarista está logueado con OpenID -->
            <img src='URL_imagenGENERAL'/>
            <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
          <b:else/>
            <!-- el comentarista colocó nombre y URL pero cuidado, su identidad no es verificable -->
            <img src='URL_imagenANONIMO'/>
            <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
          </b:if>

        </b:if>

      <b:else/>
        <!-- si no hay una URL es un comentarista anónimo -->
        <img src='URL_imagenANONIMO'/>
        <data:comment.author/>
      </b:if>
      .......
    </dt>
  </div>
</b:loop>