Solucionando scripts: Emoticones en los comentarios

JMiur [E]

Seguimos en la tarea de eliminar scripts alojados en archivos externos, agregándolos a la plantilla de manera directa y utilizando el mismo criterio que en los casos anteriores (LightWindow y Últimos Comentarios) es decir, colocándolos en un elemento HTML para no sobrecargar la plantilla y dejarla lo más despejada posible.

A mi juicio, lo mejor es crear una sección nueva en la plantilla y allí colocar los elementos HTML nuevos que contendrán los scripts. Eso, lo hacemos de manera muy sencilla si justo debajo de <body> agregamos este código:

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

Ya tenemos una sección nueva en la que podemos adicionar gadgets desde Diseño | Elementos de la página. Lo hacemos, le ponemos un título o no, a gusto de cada uno y luego copiamos y pegamos el código del archivo entre etiquetas SCRIPT:

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

Si les parece complicado, pueden descargar este archivo de texto

y copiar y pegar su contenido directamente; es el mismo que se muestra en la entrada original.

Sólo faltaría eliminar el script de la plantilla o modificarlo. Buscamos entonces el código que debería estar justo antes de:

<div id='sidebar-wrapper'>

y, en lugar de:

<b:if cond='data:blog.pageType == "item"'>
  <script src='direccion_URL/VEmoticones.js' type='text/javascript'/>
  <script type='text/javascript'>
    emoticonComentario();
  </script>
</b:if>

sólo ponemos la llamada a la función:

<b:if cond='data:blog.pageType == "item"'>
  <script type='text/javascript'>emoticonComentario();</script>
</b:if>

Guardamos y ya está resuelto el tema con ciertas ventajas:

no dependemos del buen humor de quienes alojan archivos
el script es fácilmente editable
al estar en la misma plantilla, se ejecutará más rápido y el blog reducirá su tiempo de carga

Si aún quieren desentenderse un poco más de alojamientos externos, descarguen el ZIP original

, suban las imágenes a Blogger mismo y cambien las URLs del script.

CL1P: Un portapales online

Raro, muy raro pero parece funcionar.

CL1P es un sitio que nos permite crear una URL única y compartir información. Entramos al sitio y definimos la URL con un nombre, por ejemplo:

http://cl1p.net/vagabundia/

Nos enviará a un panel de control desde donde podemos subir archivos de cualquier tipo, enviarlos por mail o dejarlo allí para que sean descargados. Funciona como una especie de portapapeles donde podemos agregar imágenes, archivos, textos o enlaces y basta entrar en esa dirección para acceder a ellos y eventualmente descargarlos, sin necesidad de registrarse aunque podemos hacerlo y tener algún control sobre ese espacio.

Como es un "depósito" temporal, podemos elegir el tiempo que permanecerán accesibles.

REFERENCIAS:ghacks.net

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.

Chau Billy

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

Chau Billy. Glad to see you

¿Google pierde manteniendo Blogger?

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.

Solucionando scripts: Últimos comentarios

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]

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. Todo eso está incluido en este archivo de texto

así que basta copiar y pegar su contenido en ese elemento.

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 */
}

Descargando tensiones

Siempre quise reciclar una entrada y decir "años atrás ...". Este es el momento justo.

Frente a tanta mudanza y scriptalitis aguda, lo mejor es darle al ordenata para descargar tensiones. Además, copiarse a si mismo es sólo un pecado venial

Wallpapers (Rene Magritte)

Espejito, espejito ...

REFERENCIAS:BellFlower

Solucionando cosas de una en una: LightWindow

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.

Repasando alternativas para alojar escripts

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.

Problemas con scripts y SkyDrive

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

Aplicaciones para Adobe Air

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

Cuando los chanchos vuelan

El experimento parece haber ocurrido en la USSR ¿Probaban un paracaidas o simplemente estaban borrachos? Nadie lo sabe ...

REFERENCIAS:haha.nu

Títulos en la sidebar

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

Respuestas rápidas sobre las hojas de estilo

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>

Apocalipsis

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!.

La evolución ilustrada

650 millones de años

Evolution - Fuel TV

La historia de la humanidad en Lego

La evolución de la educación

La evolución del hombre

Aviso publicitario de Guinness

REFERENCIAS:Listicles

Wallpapers (Computín)

Blueding: Plugin de Bluetooth para Blogger

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.

Twitter como fuente de tráfico nada despreciable

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.

Imágenes con explicaciones (3)

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.

El insoluble dilema de las puertas abiertas

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.

Agregando elementos en solapas

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.

Como no uso tabs en el blog, hay una prueba donde he agregado cuatro solapas que contienen los elementos Etiquetas, Archivos, Seguidores y Lista de Blogs. Puede verse haciendo click acá.

Transparencias usando Scriptaculous

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>

Veinte preguntas y una canción desesperada

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

Usando bookmarklets

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.

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:

REFERENCIAS:labnol.org

Videos panorámicos usando Flash

Nunca lo había visto excepto utilizando QuickTime pero, todo esto es Flash. Se trata de videos interactivos con vistas de 360° y podemos ver la explicación detallada en CornFlex.

Todo se basa en una filmación realizada con una cámara especial

Muchos otros demos pueden ser vistos en immersivemedia.com donde están disponibles para ser utilizados en una página web, en formato SWF:

Click para ver los archivos y utilicen el mouse para desplazarse.

Este es un ejemplo del video original realizado con ese tipo de cámaras

No need for greed or hunger

Disponiendo de unas cuantas libras esterlinas, en unos días podríamos comprar un software creado por Propellerheads que nos permitiría crear música utilizando los instrumentos que los Beatles utilizaron en los estudios de Abbey Road.

En realidad, se trata de una réplica digital de los instrumentos originales, grabaciones de las notas que conforman una biblioteca que cada usuario podrá reproducir conectando sus instrumentos en la PC.

Entre esas grabaciones se encuentran:

el piano Steinway de 1905 utilizado en Lady Madonna
un órgano Hammond RT-3
un armonio Mannborg a pedales
un Mellotron 400
las Tubular Bells usadas en When I'm 64
el sampler utilizado para grabar Strawberry fields forever

Abbey Road Keyboards costará alrededor de 200 euros y se distribuirá en un DVD doble.

No está mal pero, como soy sordo pa'esas cosas y no me sobren 200 euros, prefiero deleitarme con los que saben. En ese sentido, una de las cosas más interesantes que he visto es gracias a una sugerencia de Gabriel, quien está experimentando con una nueva forma de hacer música a trtavés de la web.

LaiYouttitham es un usuario de YouTube, un músico nácido en Laos y refugiado en USA que tuvo la idea de enviarle una de sus cintas a diferentes usuarios del mismo servicio para que ellos le fueran agregando cosas a la vez que las grababan en video. Todo eso, luego fue editado por el mismo Lai y publicado en YouTube:

Wallpapers (más animales)

¿Quién es YouTube?

REFERENCIAS:Concurso Fotos de Carnaval 2009 de elcorreodigital.com

Identificando a los autores de los comentarios

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>

Una luna de uso privado

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

Private Moon es un proyecto de Leonid Tishkov y Boris Bendikov, dos artistas rusos que han creado una serie de esculturas de luz con las cuales han decorado un apartamento.

REFERENCIAS:Marcela Faé

La indexacion de las imágenes

En el blog de las Herramientas para desarrolladores, Google publicaron un video donde se dan algunas ideas para optimizar el posicionamiento de las imágenes en el buscador.

Lamentablemente, está en inglés ...

A diferencia de otros resultados, en Google Image Search, la ubicación en la primera página no es tan relevante, los usuarios suelen navegar de manera profunda hasta encontrar lo que buscan ¿Y qué buscan? Ideas, inspiración, diversión, un universo bastante amplio, mucho más que la búsqueda tradicional; curiosamente, hablan de la búsqueda de imágenes como traductor, buscar cierta palabra desconocida nos puede "mostrar" su significado de manera bastamte más clara que si intentamos traducirla.

¿Qué imágenes se indexan? Aquellas que están referenciadas con algún enlace o bien las que están incluidas inline, utilizando la etiqueta IMG.

Se recomienda:

usar imágenes de buen tamaño (o miniaturas que enlacen las imágenes)
usar imágenes de alta calidad
incluir un texto descriptivo junto con la imagen y en el altributo ALT
agregarlas en la parte superior de las páginas

REFERENCIAS:Google Operating System

Otra galería de imágenes sólo con CSS

En CSSplay nos muestran una técnica bastante particular para generar una galería de imágenes. La llaman Sliding Photograph Galleries y nos enseñan dos modelos, uno vertical y otro horizontal.

Más allá de gustos personales, es muy interesante ver como utilizan las propiedades CSS de manera sencilla, sacándole el máximo provecho.

Todo lo que necesitamos es crear una lista (UL) a la que le colocamos un nombre específico (id="gallery"). Dentro de esa lista, cada item contendrá un enlace con una imagen:

<ul id="gallery">
  <li><a href="#"><img src="URL_imagen1" /></a></li>
  <li><a href="#"><img src="URL_imagen2" /></a></li>
  <li><a href="#"><img src="URL_imagen3" /></a></li>
  <li><a href="#"><img src="URL_imagen4" /></a></li>
  <li><a href="#"><img src="URL_imagen5" /></a></li>
</ul>

Mediante CSS, las imágenes de la lista se mostrarán "comprimidas" y, cuando coloquemos el cursor encima, se ampliarán.

Crear esto, sólo requiere algunas definiciones y un poco de aritmética. Supongamos que vamos a poner 5 imágenes de 480x272 pixeles y que las mostraremos, inicialmente, reducidas a 50x272. El bloque contendrá las cinco imágenes. Una se verá normal y las otras cuatro reducidas así que necesitamos que la altura del bloque sea: 272 + 4 * 50 = 472

<style>
  #gallery {
    height: 472px; /* la altura del bloque */
    list-style-type:none;
    margin:0 auto;
    overflow:hidden;
    padding: 0;
    width: 480px; /* el ancho del bloque es el ancho de la imagen */
  }
  #gallery li {
    float: left;
    padding: 0;
  }
  #gallery li a {
    display: block;
    float: left;
    height: 50px; /* la altura de la imagen comprimida */
    text-decoration:none;
    width: 480px; /* el ancho de la imagen normal */
  }
  #gallery li a img {
    height: 50px; /* la altura de la imagen comprimida */
    width: 480px; /* el ancho de la imagen normal */
  }
  #gallery li a:hover {
    height: 272px; /* la altura de la imagen no-comprimida */
  }
  #gallery li a:hover img {
    height: 272px; /* la altura de la imagen no-comprimida */
  }
</style>

Lo mismo ocurre si queremos hacerlo en el otro sentido. Usamos el mismo código HTML y otro ID para no mezclar las cosas, lo llamamos galleryh y calculamos otra vez.

Pondremos las misma cinco imágenes de 480x272 y las reduciremos a 30 pixeles así que el ancho necesario para contener todo será: 480 + 4 * 30 = 600

<style>
  #galleryh {
    height: 272px; /* la altura del bloque es la altura de la imagen */
    list-style-type: none;
    margin: 0 auto;
    overflow: hidden;
    padding: 0;
    width: 600px; /* el ancho del bloque */
  }
  #galleryh li {
    float: left;
    padding: 0;
  }
  #galleryh li a {
    display: block;
    float: left;
    height: 272px; /* el alto de la imagen normal */
    width: 30px; /* el ancho de la imagen comprimida */
  }
  #galleryh li a img {
    height: 272px;
    width: 30px; /* el ancho de la imagen comprimida */
  }
  #galleryh li a:hover {
    width: 480px; /* el ancho de la imagen normal */
  }
  #galleryh li a:hover img {
    width: 480px; /* el ancho de la imagen normal */
  }
</style>

25 sitios para jugar con imágenes

Si con uno de estos sitios donde subimos una imagen y jugamos con los efectos nos transformamos en niños, imaginen lo que esver una lista con 25 de ellos, uno debajo del otro. La tentación es demasiada.

Algunas me resultaron conocidas, otras no:

PhotoFunia: esta la había probado
Fun Photo Box: esta también
Picartia: la mostraba Pizcos hace unos días
Loonapic: ver ejemplo
Magmypic: la fama, la fama
Write On It: ver ejemplo
Dumpr: también lo había probado y es muy divertido
Anymaking: ver ejemplo
Letter James
Yearbook Yourself
Your own Wired Cover
Hollywood Hair Makeover
Hairmixer
My Heritage
Montagraph
PiZap: ver ejemplo
Imagechef: de los primeros que conocí
Funny Photos
Frontpage
Fake Magazine Cover
Personalized money
Faceinhole
Create HDR
Blingee
Photo505

REFERENCIAS:hongkiat.com

Check Places: Verificar los marcadores en Firefox

Check Places es una extensión de Firefox que resulta muy útil si es que acumulamos marcadores (que no sabemos para qué pueden servirnos pero quién sabe). Tiene muy pocas funciones, sólo verificar si esas páginas siguen existiendo o estan duplicadas:

Basta abrir la ventana que se agrega al menú Marcadores y decirle que empiece, decidiendo si lo vamos a hacer en todos o sólo en algunas carpetas:

Terminado el proceso, nos mostará los resultados obtenidos:

Y allí, haremos lo que más nos convenga, verificar su existencia, eliminarlos o dejarlos.

REFERENCIAS:ghacks.net

Tres Tabs Tres

SimpleTabs es eso, un script para crear pestañas o solapas sencillas que no requiere ninguna otra librería externa. Tampoco requiere utilizar IDs diferentes para cada contenedor así que pueden agregarse varios en una misma página con mucha facilidad. Como incluye un control de cookies, se recordará la última solapa abierta así que, al recargar la página, se volverá a mostrar.

Hasta acá, todo bien pero, aunque aseguran que funcionará en cualquier navegador, en Internet Explorer no lo hace bien.

Descargamos el ZIP

y allí tenemos los dos archivos necesarios: simpletabs_1.1.js y simpletabs.css. Podemos agregar ambas antes de </head>:

<script type="text/javascript" src="URL_simpletabs_1.1.js"></script>
<link rel="stylesheet" type="text/css" href="URL_simpletabs.css"/>

También es posible agregar el CSS directamente en la plantilla si es que se quiere personalizar.

div.simpleTabs {
  padding: 10px;
}
ul.simpleTabsNavigation {
  height: 24px;
  line-height: 24px;
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: left;
}
ul.simpleTabsNavigation li {
  background-image: none;
  display: inline;
  list-style-type: none;
  margin: 0;
  padding: 0;
}
ul.simpleTabsNavigation li a {
  background-color: #1E252D;
  border: 2px solid #3E454D;
  color: #BBBBBB;
  margin: 0 1px 0 0;
  padding: 6px 10px;
  text-decoration: none;
}
ul.simpleTabsNavigation li a:hover {
  background-color: #3E454D;
  text-decoration: none;
}
ul.simpleTabsNavigation li a.current {
  background-color: #3E454D;
  color: #FFFFFF;
}
ul.simpleTabsNavigation li a.current:hover {
  cursor: text;
}
div.simpleTabsContent {
  background-color: #3E454D;
  display: none;
  font-size: 12px;
  margin-top: 1px;
  padding: 10px;
}
div.simpleTabsContent.currentTab {
  display: block;
}

El HTML lo insertamos donde queremos mostrar las pestañas, recordando que si es en un post, deberemos escribir todo en una sola línea:

<div class="simpleTabs">
  <ul class="simpleTabsNavigation">
    <li><a href="#">Pestaña 1</a></li>
    <li><a href="#">Pestaña 2</a></li>
    <li><a href="#">Pestaña 3</a></li>
  </ul>
  <div class="simpleTabsContent"> ... contenido Pestaña 1 ... </div>
  <div class="simpleTabsContent"> ... contenido Pestaña 2 ... </div>
  <div class="simpleTabsContent"> ... contenido Pestaña 3 ... </div>
</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 ex ea commodo consequat.

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.

DOMtab es otra alternativa y funciona en IE7. Descargamos el ZIP

y sólo necesitamos dos archivos: domtab.js y domtab.css.

Como en el caso anterior, agregamos ambos antes de </head>:

<script type="text/javascript" src="URL_domtab.js"></script>
<link rel="stylesheet" type="text/css" href="URL_domtab.css"/>

El código HTML elemental tendría esta estructura:

<div class="domtab doprevnext">
  <ul class="domtabs">
    <li><a href="#t1">Pestaña 1</a></li>
    <li><a href="#t2">Pestaña 2</a></li>
  </ul>
  <div>
    <h2><a name="t1" id="t1">La Pestaña 1</a></h2>
    <p> ... contenido Pestaña 1 ... </p>
  </div>
  <div>
    <h2><a name="t2" id="t2">La Pestaña 2</a></h2>
    <p> ... contenido Pestaña 2 ... </p>
  </div>
</div>

Cuando en el bloque principal se agrega la clase doprevnext, en la parte inferior de cada pestaña aparecerá un enlace para avanzar o retroceder.

En el sitio del autor hay muchos más detalles de cómo configurar el script y personalizarlo.

Pestaña 1
Pestaña 2
Pestaña 3

Pestaña 1

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

Pestaña 2

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

Pestaña 3

Por último, Tab View también es otro pequeño script que podemos descargar en formato ZIP

El proceso para utilizarlo es el mismo. Agregamos los dos archivos antes de </head>:

<script type="text/javascript" src="URL_tab-view.js"></script>
<link rel="stylesheet" type="text/css" href="URL_tab-view.css"/>

Como detalle extra, este script usa la imagen tab-view.png así que deberemos alojarla en alguna parte.

El código HTML a utilizar sería este:

<div class="TabView" id="TabView">
  <div class="Tabs" style="width: anchopx;">
    <a class="Current">Pestaña 1</a>
    <a>Pestaña 2</a>
    <a>Pestaña 3</a>
  </div>
  <div class="Pages" style="width: anchopx; height: altopx;">
    <div class="Page" style="display: block;">
      <div class="Pad"> ... contenido Pestaña 1 ... </div>
    </div>
    <div class="Page" style="display: none;">
      <div class="Pad"> ... contenido Pestaña 2 ... </div>
    </div>
    <div class="Page" style="display: none;">
      <div class="Pad"> ... contenido Pestaña 3 ... </div>
    </div>
  </div>
</div>
<script type="text/javascript">tabview_initialize('TabView');</script>

Pestaña 1 Pestaña 2 Pestaña 3

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 ex ea commodo consequat.

Signos

Signs, un corto de Publicis Mojo & RadicalMedia para disfrutar el domingo.

Wallpapers (Homero 2)

Sobre artesanos y falsos dilemas (again)

¿Milagros? Segunda puerta a la derecha ...
sólo se atiende de 8 a 10 y hay que venir en ayunas ...

Servicios de Google que no están a la altura (de Google)

"Blogger. A pesar de haberse actualizado hace poco y de ser el más exitoso de esta lista, no deja de ser un servicio insufrible para usar con poquísimas opciones, restricciones inútiles y apariencia homogénea donde las haya. Siempre me pareció extraño que Google desperdiciase la preciada oportunidad al adquirir Blogger y no desarrollar un producto sencillo pero potente. Con esta situación es de agradecer que un servicio tan excelente como Wordpress lidere el mercado."

Me temo que si digo lo que pienso, el mundo geek gritará como niños histéricos pero, lo lamento, es que tengo un problema serio, uso Blogger hace casi tres años y uso WordPress casi casi durante el mismo tiempo. Acá no se trata de saber si uno es mejor que otro porque esa comparación es una estupidez. Un martillo no es mejor ni peor que una tijera salvo que se nos ocurra clavar un clavo o cortar algo y nos equivoquemos de herramienta. Son diferentes y en este caso, hay un elemento básico que las hace incomparables, una es gratuita y la otra no, porque, me imagino que hablan de wordpress.org y no de wordpress.com.

Ni pienso defender a Blogger. Que se defiendan solos ... si pueden.

Me quejo todos los días de las burradas que hacen y de los errores que cometen. Me quejo todos los días de la falta de feedback y del poco respeto por los usuarios. Me quejo todos los días de las cosas que faltan y de lo sencillo que sería para ellos resolverlas si es que tuvieran un poco de sentido común. Pero tambien me quejo de las quichicientas actualizaciones que tuve que hacer en WordPress porque cada cinco minutos hay que andar cambiando algo, me quejo también porque cada versión me da menos alternativas que la anterior y me quejo por los errores que siguen existiendo desde la primera vez que lo usé. Me quejo de que ambos imiten lo peor del otro. Me quejo porque soy un quejoso y uso ambos, no porque sea masoquista sino porque soy cabezadura y porque me gustan. Es que soy así de raro, a mi, me pueden gustar dos cosas distintas y no creo que Dios sea digital.

Hasta allí, si a alguien le parece que un servicio es mejor que otro, no hay problemas. Verde, rojo, azul, amarillo, cualquier color es bello. El problema empieza cuando si no nos gusta algo, inferimos que lo otro es malo y peor aún: si debemos denigrar al otro para reafirmarnos en nuestra elección, es que hay algo de lo que en verdad, no estamos muy convencidos.

WordPress tiene excelentes blogs. Blogger también. En ambos casos, quienes los hacen excelentes son quienes los han creado y quienes los alimentan dia tras día. Alguna otra vez dije lo que pensaba sobre estos falsos dilemas tipo ¿Blogger o WordPress? ¿Pepsi o Coca? ¿Blanco o negro? Alguna otra vez, en SpamLoco

se tocó el tema de las ventajas y desventajas de las migraciones. No hay conclusiones posibles porque todo se trata de algo tan simple y complejo como la subjetividad, las posibilidades personales y la mera casualidad.

Lo que le falta a WordPress es gente que critique el servicio porque tiene errores, porque puede mejorarse, porque los que lo usamos nos encontramos con problemas y muy pocas respuestas serias. Yo no quiero que sea perfecto, yo quiero que se hable de eso ya que es la única manera en que podrá evolucionar. Andar endiosando productos es patético, hacerlo con productos ajenos es ridículo: "el mejor servicio", "el mejor navegador", "el mejor sistema operativo", "la mejor gaseosa"; ¿que somos? ¿agentes publicitarios ad-honorem? Live and let die, brother.

Creo que se opina demasiado livianamente sobre ciertas cosas y se trazan líneas que dividen el mundo en compartimentos estancos. Algunos "son la elite" y el resto sólo somos unos pobrecitos que, para colmo, vivimos lamiendo las botas de los elegidos. Usar WordPress es cool, Blogger es para aficionados. No hay ningún servico, software o gadget que merezca nuestro amor, reservemos eso para los seres de carne hueso.

¿Blogger no es flexible? Eso no es cierto. Con todas sus limitaciones, es uno de los servicios gratuitos más flexibles. Es cierto, hay cosas que no pueden hacerse pero lo mismo podría decirse de WordPress: hay cosas, que no pueden hacerse, porque siempre hay cosas que no pueden hacerse, así de sencillo. Los milagros estan de muy capa caida en este último siglo y el infinito es un invento chino que aún no se ve en las góndolas de los supermercados.

Eso de "apariencia homogénea donde las haya" me suena como una patada en el hígado, me suena discriminatorio (¿será mucho?) y para colmo, es falso. Y es que yo veo mucha más creatividad y experimentación en blogs alojados en Blogger que en blogs que usan WordPress. No hablo de diseñadores sino de la gente común, esa gente común para la cual han sido creadas este tipo de plataformas y que, justamente, en Blogger, deben lidiar con las limitaciones del servicio y romperse la cabeza para resolver cosas y acomodarlas a su gusto. En el proceso, logran algo inigualable: aprenden. Y como si fuera poco, sonrien de felicidad cuando el borde ese quedó exactamente allí donde querían que quedara. No. Eso no es poca cosa.

¿Y entonces qué hago? preguntará alguien que no termina de entender ¿cuál es mejor? ¿cuál elijo? ¿migro o no migro mi blog? Pués bien, mi respuesta sigue siendo la misma de siempre: ¡Hagan lo que quieran! porque voy a insistir hasta el cansancio con lo mismo: lo que importa no son las herramientas sino los artesanos y allí, en ese tema, Blogger le saca ventaja a cualquier sistema; tiene algo que los demás no tienen, una comunidad abierta que comparte información y que, como si fuera poco, lo hace en todos los idiomas, sin bombos ni platillos, sin alharaca, criticando el sistema, buscándole fallas, enojándose; dando generosa y desinteresadamente, lo poco o mucho que saben o logran averiguar. Sin ellos, Blogger no sería absolutamente nada.

Sólo falta que Blogger se de cuenta de eso.

REFERENCIAS:SpamLoco

Aplicaciones portables para todos los gustos

Una aplicación portátil es un programa que no se instala y por lo tanto, puede usarse en cualquier PC. Por lo general están pensados para usarlos desde un pendrive pero nada impide tenerlos en el disco duro; su uso se está extendiendo y en Cosas Sencilla nos muestran una lista con algunos de los más útiles.

Navegadores: Avant Browser (utiliza el motor de Internet Explorer), Firefox, Google Chrome, Opera, Camino

Editores de texto y HTML: Notepad++, KompoZer HTML editor, Astyle CSS Editor, Nvu Portable, Notepad2

Editores de imágenes: GIMP, Inkscape, IrfanView, Pixia, Macromedia Fireworks

Utilidades varias: XAMPP, FileZilla, Portable SmartFTP, 7-Zip, TreePad Lite, Thunderbird Portable, OpenOffice, Pidgin

La lista completa podemos verla en SpeckyBoy.

Otra alternativa es acceder a PortableApps.com y descagar la suite que incluye:

Mozilla Firefox, Portable Edition (navegador)
Mozilla Thunderbird, Portable Edition (cliente de correo)
Mozilla Sunbird, Portable Edition (calendario/tareas)
ClamWin Portable (antivirus)
Pidgin Portable (mensajería)
Sumatra PDF Portable (lector PDF)
KeePass Password Safe Portable (gerenciador de contraseñas)
Sudoku Portable y Mines-Perfect Portable (juego)
CoolPlayer+ Portable (reproductor de audio)
OpenOffice.org Portable o AbiWord Portable (suites ofimáticas)

Controlar la cantidad de entradas por página

Cuando se abre la página principal de nuestro sitio, lo que vemos es una cantidad de entradas ordenadas cronológicamente desde la más reciente hasta la más antigüa y esa cantidad es la que está definida en la Configuración de Blogger dentro de la pestaña Formato:

Mostrar en la página principal.

Esta cantidad afectará sólo a la página principal y a la navegación entre páginas (los enlaces que aparecen al final del sitio) pero no se aplicará en ningún otro caso.

Como durante las semana, parece que muchos se han puesto de acuerdo para hacer la misma pregunta, veamos si aquí podemos enumerar las distintas aleternativas para modificar esa cantidad en otros enlaces.

En todo ellos, lo que debemos hacer es agregar un parámetro extra que dirá algo así:

?max-results=N

donde N es la cantidad de entradas a ser mostradas.

Esto, puede hacerse con cualquier tipo de página que contenga una lista de entradas. Por ejemplo, un enlace a una página de etiquetas tiene esta URL:

http://miSitio.blogspot.com/search/label/nombreEtiqueta

y lo que nos muestra son 20 entradas lo que suele ser demasiado. Bastaría transformarla en esto:

http://miSitio.blogspot.com/search/label/nombreEtiqueta?max-results=5

para que sólo se mostraran 5.

¿Cómo lo hacemos? Pués debemos editar la plantilla, expandiendo los artilugios y buscar el código que utiliza Blogger para las URLs de las etiquetas: data:label.url. Por lo general, lo encontraremos debajo de los posts y, dependiendo de la plantilla, habrá ciertas variantes:

<a expr:href='data:label.url' rel='tag'>

Lo mismo ocurrirá si tenemos el Elemento Etiquetas agregado a la sidebar:

<a expr:href='data:label.url' expr:dir='data:blog.languageDirection'>

En ambos casos, agregaremos el parámetro en el atributo:

expr:href="data:label.url + "?max-results=5""

En los buscadores internos ocurrirá algo similar pero dependerá del modelo que usemos. Si se trata del buscador estandard:

<form action='http://nombreblog.blogspot.com/search' method='get'>

podemos controlar la cantidad de resultados a ser mostrardos, agregando una etiqueta INPUT oculta:

<input name="max-results" value="5" type="hidden"/>

lo que creará URLs de este tipo:

http://miSitio.blogspot.com/search?q=palabra&max-results=5

Con los enlaces del Elemento Archivos las cosas se complican un poco. Allí, se mostrarán hatas 50 entradas por página y no veo forma de poder controlar eso con facilidad (ni con dificultad).

Por úlimo, si se usa alguna variante de la Nube de Etiquetas, no habrá más remedio que editar el script que tiene muchas variantes. Algunas de las más comunes:

a.href = '/search/label/' + encodeURIComponent(t);
a.href = lcBlogURL + '/search/label/' + encodeURIComponent(t);

En esos casos (donde a veces el carácter de comilla simple se muestra como '), agregamos el parámetro siempre después de encodeURIComponent(t):

a.href = '/search/label/' + encodeURIComponent(t) + '?max-results=5';
a.href = lcBlogURL + '/search/label/' + encodeURIComponent(t) + '?max-results=5';

Repetando el uso de las comillas. Lo anterior es equivalente a :

a.href = '/search/label/' + encodeURIComponent(t) + '?max-results=5';
a.href = lcBlogURL + '/search/label/' + encodeURIComponent(t) + '?max-results=5';

"Qué lindo día feo"

El LOOP de Blogger (agregando miniposts)

La primera cosa que podemos intentar dentro del LOOP de Blogger es "filtar" las entradas según su etiqueta. Para eso, basándonos en una idea de Blogger Buster, vamos a agregarle a nuestro blog, la posibilidad de utilizar miniposts.

¿Qué es un minipost? En términos generales, no es otra cosa que una entrada rápida, una frase, un llamado, algo corto que queremos resaltar. Además, un minipost tiene otra caracterísitica, se muestra de una manera distinta que el resto de las entradas y esto lo podemos hacer de dos maneras básicas: quitándolo de la secuencia cronológica del blog o dándole un diseño diferenciado.

Vamos a un ejemplo. Creamos un post cualquiera y le colocamos como etiqueta minipost. Una vez publicado, se verá normalmente pero, no queremos verlo cuando se muestre la página principal así que vamos a Diseño | Edición HTML y expandimos los artilugios.

Buscamos el LOOP y lo modificamos, insertando lo que está en color:

<b:includable id='main' var='top'>
  <!-- posts -->
  <div class='blog-posts'>
    <b:include data='top' name='status-message'/>
    <b:loop values='data:posts' var='post'>

      <b:if cond='data:blog.url == data:blog.homepageUrl'>

        <b:loop values='data:post.labels' var='label'>
          <b:if cond='data:label.name != "minipost"'>
            <h2 class='date-header'><data:post.dateHeader/></h2>
            <b:include data='post' name='post'/>
          </b:if>
        </b:loop>

      <b:else/>

        <b:if cond='data:post.dateHeader'>
          <h2 class='date-header'><data:post.dateHeader/></h2>
        </b:if>
        <b:include data='post' name='post'/>
        <b:if cond='data:blog.pageType == "item"'>
          <b:include data='post' name='comments'/>
        </b:if>

      </b:if>
    </b:loop>
  </div>
  <!-- navigation -->
  <b:include name='nextprev'/>
  <!-- feed links -->
  <b:include name='feedLinks'/>
</b:includable>

Sólo hemos agregado una condición; cuando estamos en la página principal, antes de mostrar cada post, se leen las etiquetas de este y, si tiene esa específica, seguimos de largo así que no lo veremos.

¿Y cómo lo mostramos?

Lo más sencillo es utilizar el elemento Lista de blogs. Creamos uno y selecionamos las opciones que nos gusten, fundamentelmente, mostrar Fragmento del elemento más reciente. La URL que debemos poner es la etiqueta:

http://nombreBlog.blogspot.com/feeds/posts/default/-/minipost

Algo similar podría hacerse utilizando el elemento Feeds aunque con ese, por defecto, sólo podremos mostrar los títulos.

¿Dónde lo agregamos? Hay muchas posibilidades, lo podemos poner debajo del header, arriba de los posts, en la sidebar, etc.

En este ejemplo, están agregados los dos elementos, la Lista de blogs en la sección crosscol-wrapper y Feeds en la sidebar (ver ejemplo online)

En el caso de la Lista de blogs, podríamos agregarle ciertas características gráficas usando estas clases CSS:

ul#BlogList1_blogs {} /* el bloque del elemento */
ul#BlogList1_blogs li {} /* la lista */
ul#BlogList1_blogs .blog-content {} /* el bloque con el contenido */
ul#BlogList1_blogs .blog-title {} /* el título */
ul#BlogList1_blogs .item-content {} /* el contenido */

Si usamos otros elementos similares, habrá que cambiar el nombre por el que corresponda: BlogList1_blogs, BlogList2_blogs, BlogList3_blogs, etc.

El LOOP de Blogger (¿qué es?)

Entramos en Blogger. Hacemos click en Diseño, luego en Edición HTML. Marcamos Expandir plantillas de artilugios. Hacemos click otra vez y mientras esperamos que se recargue la página, buscamos la palabra "artilugios" en el diccionario.

Suspiramos. Nos inclinamos sobre el monitor y nos desplazamos por el código; una, tal vez dos veces. Murmuramos algo. Cerramos la pestaña y nos vamos a ver videos de japones golpeándose.

Nos dimos por vencidos.

Es lógico. Pusimos toda nuestra buena voluntad porque se nos ocurrió que era hora de tratar de entender un poco más y Blogger no nos lo hace sencillo. En lugar de algo organizado, nos muestra un galimatías donde lo único que alcanzamos a reconocer son dos o tres instrucciones que nos suenan más o menos familiares.

¿Dónde están los posts? ¿Cómo se muestran? ¿Podremos meter mano y hacer cosas diferentes?

No sé por qué motivo, razón o circunstancia, a los desarrolladores de Blogger se les ocurrió esta forma críptica de codificar algo pero, hay que lidiar con ellos. Lo básico, es entender que cuando se genera el código que muestra el navegador, lo que está ocurriendo es que, una serie de instrucciones se repiten una determinada cantidad de veces, una para cada entrada a ser mostrada, todas igualitas. Eso es lo que se llama un LOOP (bucle). Si alguien experimentó con WordPress o leyó artículos referentes a ese servicio, habrá notado que constantemente se hace refencia a "el LOOP", casi como si fuera un nombre propio. Y esto no es un capricho. Es que entender el LOOP es la clave de todo porque es allí donde un blog es un blog.

En Blogger también hay un LOOP y es todo eso que está entre estos dos códigos:

<b:includable id='main' var='top'>
  .......
</b:includable>

El contenido de ese INCLUDABLE es lo que controla la forma en que se mostrarán las entradas de nuestro sitio y en sus orígenes era un código corto pero, en los últimos tiempos, Blogger le ha añadido instrucciones siguiendo la manía generalizada de casi todos los desarrolladores: tratar de pensar por nosotros y preveer todas las posibilidades (omnipotencia pura).

Este es el código por defecto de una plantilla mínima:

<b:includable id='main' var='top'>
  <!-- posts -->
  <div class='blog-posts hfeed'>
    <b:include data='top' name='status-message'/>
    <data:adStart/>
    <b:loop values='data:posts' var='post'>
      <b:if cond='data:post.dateHeader'>
        <h2 class='date-header'><data:post.dateHeader/></h2>
      </b:if>
      <b:include data='post' name='post'/>
      <b:if cond='data:blog.pageType == "item"'>
        <b:include data='post' name='comments'/>
      </b:if>
      <b:if cond='data:post.includeAd'>
        <data:adEnd/>
        <data:adCode/>
        <data:adStart/>
      </b:if>
    </b:loop>
    <data:adEnd/>
  </div>
  <!-- navigation -->
  <b:include name='nextprev'/>
  <!-- feed links -->
  <b:include name='feedLinks'/>
  <b:if cond='data:top.showStars'>
    <script src='http://www.google.com/jsapi' type='text/javascript'/>
    <script type='text/javascript'>
      google.load("annotations", "1", {"locale": "<data:top.languageCode/>"});
      function initialize() {
        google.annotations.setApplicationId(<data:top.blogspotReviews/>);
        google.annotations.createAll();
        google.annotations.fetch();
      }
      google.setOnLoadCallback(initialize);
    </script>
  </b:if>
</b:includable>

Allí, lo que está en amarillo son comentarios es decir, anotaciones hechas en la misma plantilla para explicar algo. No se ejecutan y podemos eliminarlas o modificarlas.

Todo lo rojo es el código para incluir Adsense. Si no usamos ese servicio, también podemos eliminarlo.

Las líneas en azul son lo que maneja la posibilidad de calificar los posts (las estrellitas) y está ahí, de prepo, las usemos o no las usemos. También podemos eliminarlas.

Y ya que estamos, eliminamos todo lo que está en naranja que es irrelevante.

Ahora, el contenido del INCLUDABLE quedará mucho más claro (es una forma de decir):

<div class='blog-posts'>
  <b:loop values='data:posts' var='post'>
    <b:if cond='data:post.dateHeader'>
      <h2 class='date-header'><data:post.dateHeader/></h2>
    </b:if>
    <b:include data='post' name='post'/>
    <b:if cond='data:blog.pageType == "item"'>
      <b:include data='post' name='comments'/>
    </b:if>
  </b:loop>
</div>
<b:include name='nextprev'/>
<b:include name='feedLinks'/>

¡No quedó nada! Y sin embargo, el blog se sigue viendo ¡Ohhhhh! Ahí está algo que dice LOOP.

En esas pocas líneas está el nucleo de nuestro sitio. Un bloque (un DIV) que tiene una clase CSS llamada blog-posts y debajo dos intrucciones propias de Blogger llamadas INCLUDE.

[INCLUDABLE | INCLUDE no se les ocurrió nada mejor para confundirnos que ponerles nombres parecidos a dos cosas diferentes]

INCLUDE es una especie de subrutina; ejecuta algo que está en otro lado, lo "incluye" ahí.

¿Qué "incluye"? Pués un INCLUDABLE ... un trabalenguas XD

Simplificando un poco, luego del bloque donde se ejecuta el LOOP, Blogger va y ejecuta otras dos partes:

<b:includable id='nextprev'> ...... </b:includable>
agrega la barra de navegación inferior (Entradas antigüas, Inicio, etc)

<b:includable id='feedLinks'> ...... </b:includable>
agrega la línea para suscribirse (al sitio o a los comentarios)

El bucle es muy simple. Se ejecuta tantas veces como hemos indicado en la Configuración, mostrando una cierta cantidad de entradas o una sola vez si se trata de una página individual. Aquí es donde Blogger lee los datos de cada post y los muestra.

Primero que nada, la fecha si es que existe (y es donde nos complica la vida al separar la fecha del resto de los datos):

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

Luego, otra vez otro INCLUDE que va y ejecuta una serie de instrucciones que dependen de cada plantilla y que son las que muestran el post en si mismo, el pie de página, las etiquetas, etc, etc, etc:

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

Por último, hay una condición que incluirá los comentarios sólo si estamos en una página individual:

<b:if cond='data:blog.pageType == "item"'>
  <b:include data='post' name='comments'/>
</b:if>

¿Y para qué puede servir saber esto?

Dentro de ese LOOP podemos acceder a algunos datos fundamentales que nos pueden servir para personalizar la plantilla, agregandole funciones o condiciones; la más interesante, a mi juicio, es la posibilidad de detectar la etiqueta de un post y actuar en consecuencia; de tal manera, podríamos mostrar ciertas entradas de una forma distinta al resto.

A eso vamos ...

Un mail de Blogger dando ¿explicaciones?

Acabo de recibir este mail de support@blogger.com

Es la primera vez que recibo algo así y dudo mucho que sea el resultado de una nueva política de comunicación. En lo personal, me gustaría creer que es una respuesta institucional ante un cambio que ha sido rechazado casi por unanimidad pero, también dudo de eso.

Hi Blogger & Friend Connect User:

As a result of a recent integration between Blogger Following and Google Friend Connect, your Blogger privacy settings have been changed. It is important you read this message to understand how the change impacts the sites you follow, your visibility online when using Friend Connect, and what your options are moving forward.

You are receiving this e-mail because you've used both Blogger's Following feature and Google Friend Connect. So that sites you've joined via Friend Connect do not automatically show up on your Blogger profile without your explicit approval, we have changed your following status to "private" on all Blogger blogs. If you would like to have these sites shared publicly on your Blogger profile, here are some instructions for becoming a public follower again.

The post at Blogger Buzz goes into more detail about this change. If you have any questions about this change or how to follow the instructions above, please visit this article in our Help Center.

Thank you for using Blogger.

-The Blogger Team

PS- If you have any follow-up questions, please direct them to our Help Group as we will not be responding to replies over email.

Email preferences: You have received this mandatory email service announcement to update you about important changes to your Blogger product or account.

Google, Inc. 1600 Amphitheatre Parkway Mountain View, CA 94043

¡Qué diverido que es Blogger! Todos los días una sorpresa

SoundzIt: Música desde YouTube al blog

Dicen que tienen 300 millones de canciones disponibles pero no las he contado. Lo cierto es que he encontrado cualquier cosa que he buscado; aunque, como lo que hace es extraer el audio directamente desde YouTube, algunos eran inaccesibles.

Pese a todo, soundzittiene sus ventajas. No requiere suscripciones, nos da un reproductor que podemos insertar en nuestros sitios y es accesible a todo el mundo ... algo que no todos tienen muy en cuenta

Y si miramos el código que nos dan, tal vez, hasta podríamos usar el reproductor de otra manera pero, para eso, lo mejor es entender qué es cada cosa y escribir un código válido en luhgar de la errónea etiqueta EMBED.

Este es el reproductor que mide 300x30: http://soundzit.com/player.swf

¿Cómo funciona? Aparentemente, usa el JWPlayer con un skin personal: http://soundzit.com/skin/stylish_slim.swf y toma un video de YouTube y ejecuta sólo el audio ¿Qué video? Cualquiera, así que podemos tomarlo directamente; por ejemplo:

http://www.youtube.com/watch?v=IyFSmEHddLE

El resto, son las opciones del reproductor original así que podemos establecer algunas como el color de fondo (backcolor), el color principal (frontcolor) y el color secundario (lightcolor). Además, podríamos agregarle un autostart colocando el valor true.

Probemos:

<object width="300" height="30" id="player" type="application/x-shockwave-flash" name="player" data="http://soundzit.com/player.swf"><param name="movie" value="http://soundzit.com/player.swf" /><param name="wmode" value="opaque" /><param name="allowfullscreen" value="true" /><param name="flashvars" value="&file=http://www.youtube.com/watch?v=IyFSmEHddLE&skin=http://soundzit.com/skin/stylish_slim.swf&tracecall=printTrace&backcolor=#AABBCC&frontcolor=#223344&lightcolor=#BB0000"></object>

Bueno, no será muy rápido que digamos pero, algo es algo.

Magazines online sobre diseño

REFERENCIAS:hongkiat.com

Suscribirse a la entradas

este es mi título

este es otro título

y este es otro título

otro título más

¿quién soy

y entonces hablaron

últimas entradas

autopromo

en la bolsa

la puerta abierta