aScroller: Un script para desplazar contenidos

Este script de Argilla es una forma de reemplazar las MARQUEES de manera sencilla y funciona en la mayoría de las versiones de Internet Explorer, Firefox, Safari y Opera.

Lo primero que debemos hacer es descargar el archivo y agregarlo en la plantilla antes de </head>; ya sea alojándolo en un servidor propio:

<script src='URL_aScroller-1.0.js' type='text/javascript'></script>

o insertando su contenido entre estas etiquetas:

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

Para utilizarlo, debemos definir un DIV al que le daremos un nombre único, con el atributo ID y adentro de este, colocaremos otro DIV donde irá el contenido a ser mostrado. Inmediatemente después, colocaremos la llamada a la función:

divScroller("nombreID", "modo", velocidad, delay);

nombreID el nombre del DIV
modo "h" para un scroll horizontal y "v" para un scroll vertical
velocidad de desplazamiento (a valores más altos, menor velocidad)
delay demora entre mensajes cuando es vertical (en microsegundos)

Un ejemplo de scroll horizontal:

<div id="sDemo1" style="height: alturapx; width: anchopx;">
<div>....... aquí va el contenido a mostrar .......</div>
</div>
<script type="text/javascript">divScroller("sDemo1", "h", 20, 3000);</script>

Dentro del atributo STYLE, debemos colocar, obligatoriamente, el ancho y el alto del elemento pero, podemos agregar otras propiedades como colores y fuentes.

<div style="background:transparent url(imagenFONDO) no-repeat 50% 50%;width:100%;height:50px;"><div id="scrollDemo2" style="color:#FFFFFF;font-size:20px;height:50px;line-height:50px;margin:0 auto;width:400px;"><div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit ...</div></div><script type="text/javascript">divScroller("scrollDemo2", "h", 20, 1000);</script></div>

El modo "vertical" fuciona de la misma manera. En este ejemplo, sólo cambiamos "h" por "v".

En los scrolls verticales, es posibile agregar múltiples párrafos. Si ponemos cada uno dentro de un DIV, se mostrarán de manera secuencial:

<div id="scrollDemo3" style="height: 40px; color:#FFFFFF;line-height: 40px; width: 400px;margin:0 auto;text-align:center;font-size:17px;"><div style="background-color:#3E5266;">PARRAFO 1: Lorem ipsum dolor sit amet ...</div><div style="background-color:#4E6276;">PARRAFO 2: Ut wisi enim ad minim veniam ...</div><div style="background-color:#5E7286;">PARRAFO 3: Duis autem vel eum ...</div><div style="background-color:#6E8296;">PARRAFO 4: At vero eros et accumsan ...</div></div><script type="text/javascript">divScroller("scrollDemo3", "v", 20, 3000);</script>

Ambos modelos permiten colocar casi cualquier tipo de contenido dentro de los DIVs así que también es una forma sencilla de crear un slideshow o un blogroll ya que podemos utilizar imágenes o enlaces además de poder establecer estilos individuales.

El resto, depende de la imaginación.

Paul Neave es un inglés que se dedica a hacer animaciones de Flash interactivas. Su sitio merece ser visto y como si fuera poco, todos sus experimentos están disponibles para ser descargados, no solo los SWFs sino los códigos fuentes así que es una buena manera de aprender.

Flash Earth y Planetarium son mapas satelitales que utilizan diferentes fuentes, incluyendo la NASA.

Experimentos visuales: Anaglyph | Strobe | Television | Fractal, Dandelion | Light

Google Ajax Feed API es una herramienta que nos permite crear widgets donde se mostrarán feeds de manera dinámica, eligiendo "palabras clave".

Hay tres formatos diferentes y no es mucho lo que puede configurarse. Está pensado como una forma sencilla de mostrar noticias de otros sitios aunque al no poder elegirlos y sólo poder establecer "palabras", funciona como un buscador es decir, los resultados mostrados son un poco aleatorios; sin embargo, tal vez también nos sirva para mostrar nuestras propios feeds.

Como podemos previsualizar los cambios, todo es cuestión de probar y probar. Una vez que encontramos algo que nos parezca satisfactorio, simplemente hacemos click en generar y nos mostrará el código que deberemos copiar y pegar donde quisiéramos mostrarlo.

Según estudios el promedio normal que una persona muestra atención es de 10-12 minutos, es decir, 10-12 minutos es el tiempo que una persona puede hacer una actividad centrándose absolutamente y solamente en ella. Después de ese tiempo la atención disminuirá y como consecuencia descenderá también la productividad.

... Uyyy parece que va a llover ¿de que hablaba?

REFERENCIAS:

Cosas sencillas

Yo siempre creí que la patafísica sólo era un cosa que estudiaba Joan, la difunta noviecita de Maxwell, el que iba por la vida con un martillo en la mano pero, estaba profundamente equivocado.

La patafísica es un movimiento cultural que surgió en Francia allá por 1950 y que tiene raices e común con el surrealismo. Es "una ciencia burlona" dedicada al estudio de las soluciones imaginarias para los problemas que no existen. En lo personal, creo que eso la hace absolutamente genial y en su momento, muchos intelectuales se hicieron seguidores de ella: Raymond Queneau, Boris Vian, Eugène Ionesco, Jean Genet, Joan Miró, Umberto Eco, etc (más información)

Pero vamos al punto.

Dos suecos, Elisabeth y Lasse Diding intentaron registrar un nombre para su hijo nacido en 1991 pero, el nombre fue rechazado basándose en una ley que dice que: "Los nombres a registrar no serán aprobados si pueden ser causa de ofensa, provocar incomodidad o por razones obvias, no sean compatibles con un primer nombre." Como protesta, enviaron otra petición, argumentando que el nuevo nombre era una creación artística basada en el espíritu de la patafísica.

Querían llamarlo:

Brfxxccxxmnpcccclllmmnprxvclmnckssqlbb11116

Para más exactitud:

Brfxxccxxmnpcccclllmmnprxvclmnckssqlbb11116 Hallin

Un tiempo después, intentaron llamarlo "A" (se pronunciaba Albin) y una vez más, el pedido fue rechazado y los padres, multados (más información).

Como resultado de tanta discusión, el niño no tiene nombre y su pasaporte dice eso pero, claro, en sueco: "Icke namngivet gossebarn".

No es el primer ni el único caso de nombres estrafalarios; la Wikipedia tiene una lista de personas con nombres un tanto exóticos:

• Rhoshandiatellyneshiaunneveshenk Koyaanisquatsiuth Williams es una niña de Texas
• Creedence Clearwater Couto es el nombre de un jugador de football de Brasil
• Espn es el nombre de dos niños de USA
• Yahoo Serious es un actor australiano
• Yahoo es el primer nombre de un niño en México
• Rodolpho Pierre Filibert Alphanzo Rafael Gugliemli di Valentina d'Antoguella es el verdadero nombre del actor Rodolfo Valentino
• Brian Peter George St. John le Baptiste de la Salle Eno es el nombre real del músico inglés Eno
  

Hay peores:

• Siddig El Tahir El Fadil El Siddig El Abderahman El Mohammed Ahmed El Abdel Karim El Mahdi es un actor de TV que trabajaba en la serie Star Trek Deep Space 9
• Crystal Ocean Supri Heavenly Blue Sky Hellman es una actriz
• Clarissa Theresa Philomena Aileen Mary Josephine Agnes Elsie Trilby Louise Esmerelda Dickson Wright es una famosa chef británica
• Anna Bertha Cecilia Diana Emily Fanny Gertrude Hypatia Inez Jane Kate Louise Maud Nora Ophelia Prudence Quince Rebecca Sarah Teresa Ulysis Venus Winifred Xenophon Yetty Zeno Pepper es una mujer inglesa
• Autumn Sullivan Corbett Fitzsimmons Jeffries Hart Burns Johnson Willard Dempsey Tunney Schmeling Sharkey Carnera Baer Braddock Louis Charles Walcott Marciano Patterson Johansson Liston Clay Frazier Foreman Brown es el nombre de un niño norteamericano, nacido e nel 2007
• Lleieusszuieusszesszes Willihiminizisteizzi Hurrizzissteizzi un residente de Los Angeles
• Louis George Maurice Adolphe Roche Albert Abel Antonio Alexandre Noë Jean Lucien Daniel Eugène Joseph-le-brun Joseph-Barême Thomas Thomas Thomas-Thomas Pierre Arbon Pierre-Maurel Barthélemi Artus Alphonse Bertrand Dieudonné Emanuel Josué Vincent Luc Michel Jules-de-la-plane Jules-Bazin Julio César Jullien un francés nacido en 1812
• James Dr No From Russia with Love Goldfinger Thunderball You Only Live Twice On Her Majesty's Secret Service Diamonds Are Forever Live and Let Die The Man with the Golden Gun The Spy Who Loved Me Moonraker For Your Eyes Only Octopussy A View to a Kill The Living Daylights Licence to Kill Golden Eye Tomorrow Never Dies The World Is Not Enough Die Another Day Casino Royale Bond un polaco
• Zenzile Makeba Qgwashu Nguvama Yiketheli Nxgowa Bantana Balomzi Xa Ufun Ubajabulisa Ubaphekeli Mbiza Yotshwala Sithi Xa Saku Qgiba Ukutja Sithathe Izitsha Sizi Khabe Singama Lawu Singama Qgwashu Singama Nqamla Nqgithi es un cantante sudafricano
  

¿Puede ser peor aún? Sí:

• I AM THE BEAST SIX SIX SIX OF THE LORD OF HOSTS IN EDMOND FRANK MACGILLIVRAY JR NOW. I AM THE BEAST SIX SIX SIX OF THE LORD OF HOSTS IEFMJN. I AM THE BEAST SIX SIX SIX OF THE LORD OF HOSTS. I AM THE BEAST SIX SIX SIX OTLOHIEFMJN. I AM THE BEAST SSSOTLOHIEFMJN. I AM THE BEAST SIX SIX SIX. BEAST SIX SIX SIX LORD
  

Pero no sólo los suecos son "locos". Los nombres de los hijos y nietos del músico Frank Zappa son: Moon Unit Zappa, Dweezil Zappa, Ahmet Emuukha Rodan Zappa, Diva Magika Zappa.

Por lo menos, él tenía claro el asunto. Cuando le preguntaron el por qué de esos nombres, respondió:

"Porque se nos dio la gana. En realidad, la gente se preocupa por esos extraños nombres pero no me parece que sea un problema; para ellos, el problema será el apellido."

New York 1981
Parte 1	Parte 2

Click para ver los videos.

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

Usar Microsoft Word o cualquier otro procesador de texto para escribir directamente en el blog no es buena idea (más información). Son muchas las consultas sobre problemas que terminan siendo causados por códigos que se agregan sin que nos demos cuenta.

Esto es lo que siempre ocurre cuando copiamos "texto enriquecido" en el editor; no sólo es un problema de Word, lo mismo ocurriría si copiamos y pegamos directamente de una página web.

Limpiarlo no es sencillo, generalmente es más rápido escribirlo otra vez y l oque suele recomendarse es pegar en el Modo HTML o en el block de notas para quedarnos sólo con el texto plano.

Ahora, según veo en labnol.org, hay una herramienta online que puede ayudar a realizar esa limpieza. Se trata de wordoff; allí, pegamos el código HTML generado y la herramienta eliminará los elementos vacios, todas las etiquetas DIV y SPAN, los atributos de las etiquetas excepto los enlaces, los saltos de línea extras, etc.

Hace un tiempo vi un artículo en Trade Show Resources que explicaba como crear un buscador utilizando imágenes de fondo. Me gustó el resultado pero me pareció complejo de implementar.

El problema de sólo usar imágenes en algunos controles de los formularios es que en Internet Explorer se produce un efecto extraño; cuando el texto que ingresamos es demasiado largo, el fondo se desplaza (realiza un scroll). Este ejemplo muestra el error:

Por lo general, para resolver este problema se recurre a hacks pero, no hace falta y hay dos soluciones posibles.

Como lo que queremos es mostrar una imagen en lugar de los controles del navegador, podemos ubicar la imagen en la etiqueta FORM en lugar de colocarla en la etiqueta INPUT:

La otra opción es más sencilla, en lugar de alinear el fondo a la izquierda, como hacemos por defecto, lo alineamos a la derecha y de esa manera, el scroll no lo afecta. Vamos a basarnos en esa solución para continuar agregando los efectos.

La idea es que el formulario de búsqueda sean sólo imágenes, tanto el control donde ingresamos el texto como el botón de envío. Además vamos a hacer que tenga un efecto similar al mouseover, que cuando comencemos a escribir, cambie la imagen y que cuando salimos del control de texto, se restaure la imagen original.

El resultado final sería algo así:

En este caso, necesitaremos tres imágenes:

Fondo 150x46	Botón 60x23	Botón 60x23

Para crear ese efecto, nos vamos a valer de dos eventos (más información):

onfocus="instrucciones" se activa cuando un control recibe el foco (hacemos click adentro)
onblur="instrucciones" se activa cuando un control pierde el foco (hacemos click afuera)

En esos dos eventos, le vamos a decir que, cuando se ejecuten ,"hagan algo", en este caso, que cambien de clase CSS. La sintaxis genérica sería esta:

<input value="" type="text"
  class="elBuscadorBLUR" 
  onfocus="className='elBuscadorFOCUS';" 
  onblur="className='elBuscadorBLUR';"
/>

Por último, para evitar cargar imágenes con la consiguiente demora, vamos a usar una técnica que ya fue explicada en otra entrada y que consiste en usar solo una imagen de fondo y mostrar una mitad, la superior o la inferior aprovechando que la propiedad background nos permite ajustar la posición exacta. La sintaxis de estas propiedades serían estas:

.elBuscadorBLUR {background: transparent url(URL_laImagen) no-repeat right top; height: valorpx;}
.elBuscadorFOCUS {background: transparent url(URL_laImagen) no-repeat right bottom; height: valorpx;}

Este es el el código HTML para el buscador:

<form id="elBuscador" target="_blank" method="get" action="http://miSitio.blogspot.com/search">
<input value="" name="q" type="text" class="elBuscadorBLUR" 
  onfocus="className='elBuscadorFOCUS';" 
  onblur="className='elBuscadorBLUR';" />
<input src="URL_imagenBotonNORMAL" class="elBuscadorENVIO" type="image" 
  onmouseover="this.src='URL_imagenBotonOVER';" 
  onmouseout="this.src='URL_imagenBotonNORMAL';" />
</form>

Y ahora el estilo CSS que agremos antes de </b/skin>:

form#elBuscador { /* el formulario en general */
  height: 23px; /* es igual a la altura de la imagen */
  margin: 0;  /* eliminamos los márgenes por defecto */
  padding: 0;  /* eliminamos los paddings por defecto */
  width: 215px;  /* el ancho total */
}
form#elBuscador input { /* los controles en general */
  border: 0; /* eliminamos el borde de los controles */
  color: #FFFFFF; /* el color del texto */
  float: left; /* nos permite colocarlos uno al lado del otro */
  font-size: 14px; /* el tamaño del texto */
  height: 20px; /* la altura de la imagen menos el padding superior */
  margin: 0;  /* eliminamos los márgenes por defecto */
  padding: 3px 5px 0; /* con esto controlamos la posición del texto */
  width: 140px; /* el ancho de la imagen menos los paddings dercho e izquierdo */
}
.elBuscadorBLUR { /* el fondo normal */
  background: transparent url(URL_search-box-bg.png) no-repeat right top;
}
.elBuscadorFOCUS { /* el fondo activo */
  background: transparent url(URL_search-box-bg.png) no-repeat right bottom;
}
.elBuscadorENVIO { /* el botón de envio */
  padding: 2px 0 0 5px !important;  /* lo alineamos con el control */
  width: 60px !important; /* es igual al ancho de la imagen */
}

REFERENCIAS:

Personalizando los buscadores 1

Personalizando los buscadores 1

Drag to Download es un script que utiliza Prototype y Scriptaculous para crear un sistema sencillo que nos permite descargar un archivo con sólo arrastrarlo.

Aunque parezca algo engorroso es bastante sencillo y tiene la particularidad de poder adaptarse a muchos diseños gráficos.

Para probarlo, podemos descargar el ZIP que contiene un demo y un ejemplo con las correspondientes imágenes. De todo eso, lo único fundamental es el archivo dragdrop.js que alojamos en un servidor como Goo... como el que encontremos

Lo incorporamos justo antes de </head>:

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

Por supuesto, también debemos tener Prototype y Scriptaculous agregados en la plantilla.

Vamos a ver cómo usarlo basándonos en el mismo demo del ejemplo. La idea es sencilla; tenemos que crear un bloque contenedor (en este caso lo llamaremos container) dentro del cual, colocaremos otros tres:

El primero tendrá la fuente y en este caso es una imagen (folder_grey.png), desde allí, arrastraremos el archivo (lo llamaremos drag).
El segundo tendrá el destino, hacia allí arrastraremos el archivo (lo llamaremos dropwrap) y dentro de este, habrá otro al que llamaremos drop y que también sólo será una imagen (download_box.png).
El tercero y último sólo contiene un texto explicativo y lo llamamos status.

<div id="container">
<div id="drag" class="item"><img src="URL_folder_grey.png" /></div>
<div class="dropwrap">
<div id="drop"><img src="URL_download_box.png" /></div>
</div>
<div id="status">Arrastre el ícono para descargar el archivo</div>
</div>

Cada uno de ellos tendrá un nombre que lo identifica (ID) y una vez creados esos bloques, sólo nos falta agregar el script que los controlará así que inmediatamente después, ponemos lo siguiente:

<script type="text/javascript">
new Draggable('drag',{revert: 'true', constraint: 'horizontal'});
Droppables.add('drop', {
accept: 'item', 
hoverclass: 'hovered', 
greedy: 'false', 
onDrop: function() { 
$('status').innerHTML = "Descargando el archivo ..."; 
window.location.href="URL_archivo";
}
});
</script>

Recuerden que todo esto, si lo incluimos en un post, debemos escribirlo en una sola línea.

Lo que nos faltaría es darle un poco de estilo así que podemos usar las propiedades CSS:

<style type="text/css">
#container { /* el bloque contenedor  */
background-color: #404951;
border: 1px solid #99AABB;
margin: 0 auto;
overflow: hidden;
padding: 10px 20px;
width: 500px;
}
#status { /* el texto a mostrar */
text-align: center;
color: #99AABB;
font-size: 17px;
line-height: 60px;
}
#drag { /* el bloque fuente */
cursor: move;
float: left;
}
#drop { /* el bloque de destino */
color: #FFFFFF;
float: right;
}
.hovered { /* el efecto al arratrar el archivo sobre la zona de descarga */
background: url(URL_download_white.png) no-repeat center center;
}
</style>

Y eso es todo, el archivo ZIP conteniendo los archivos puede descargarse desde aquí:

REFERENCIAS:

Drag and Drop usando Scriptaculous (1)

Drag and Drop usando Scriptaculous (2)

Click para jugar.

REFERENCIAS:

Home Page

¿Obsesivo? Sin duda; y por eso sigo con lo de los elementos condicionales de Blogger. Esta vez, tratando de usarlos para aliviar un poco más la carga del blog.

Todos nos preocupamos por si tal o cual script es más o menos lenta y eso está bien; probablemente, no nos preocupamos por el código CSS y a decir verdad, optimizar las hojas de estilos es muy importante ya que suelen ocupar muchos bytes y reducir su tamaño implica reducir el tamaño del archivo y por ende, del tiempo de carga.

Hay algunas herramientas online como Robson CSS Compressor que hacen el trabajo por nosotros y, desde el punto de vista del tamaño, la diferencia puede ser sustancial (entre un 25% y un 30% menos) sin embargo, ese tipo de compresión transformará el código en algo casi ilegible, imposible de editar:

body{background-color:#343F4A;color:#CCC;font-family:'Trebuchet MS', Trebuchet, Helvetica, Arial, Verdana, Sans-Serif;font-size:12px;margin:0;min-width:920px;padding:0;text-align:center}.clear{clear:both;line-height:0;height:0}#navbar-iframe{height:0;visibility:hidden;display:none}a,a:visited,a:link{color:#AAA;outline:none;text-decoration:underline}a:hover{color:#FFF;outline:none}a img{border:none;outline:none;text-decoration:none}object{outline:none}h1,h2,h3,h4,h5,h6{font-family:'Trebuchet Ms', helvetica, arial, sans-serif;margin:10px 0}p,ol,ul{margin:10px 0}pre{color:#F0F0F0;font-family:Tahoma,Arial,'Trebuchet Ms';font-size:13px;line-height:17px;margin:10px 0 10px 10px}pre.long{white-space:pre-wrap}.code{background-color:#EFEFF7;border:2px solid #399BA6;color:#000;font-family:Courier New,Courier,monospace;padding:15px 5px 15px 15px}blockquote{background:#f2f8fc url('http://photos1.blogger.com/blogger2/323/4098/200/bloque1.png') no-repeat scroll left top;color:#222;margin:0 0 5px 20px;padding:0;text-align:center;width:250px;font:italic 15px Georgia, Arial}blockquote p{background:transparent url('http://photos1.blogger.com/blogger2/323/4098/200/bloque2.gif') no-repeat scroll right bottom;margin:0;padding:15px 10px 15px 15px}blockquote a,blockquote a:link,blockquote a:visited{color:navy !important}blockquote a:hover{color:red !important}#outer-wrapper{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRu_H3nORdxObkEsqB_gwku25GwWKIad9UA5uLKTAWm-gc-t2D5TGRwzEujCjJQted1H0n8efivVw2jbuEWshFwlyrrIRP_j5iq0B6ISY4P6lTUik6OSOAO1xZLMqgE6VdGch1zA/s0/containerbg920.gif) repeat-y;margin:0 auto;position:relative;text-align:left;width:920px}#wrap2{background:none;border-bottom:1px solid #5b626A;margin:0 10px;position:static;width:auto}#header-wrapper{background:#600 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjFt-c2vmRP9PyqrA-ivfHp_RLnBhcHHqyrwLjsZhBS_MDLSRtswupd2vzQKPWIbAkH61RB4VrlivIHQs9JMO9f0ZM7EzGgXxbkR0KGEh0CA2piIOnKJ7AmEfuEp7Gzvpgi3_T/s0/VAGAheader_1.png) no-repeat;height:176px;margin-top:-3px;position:relative;width:900px}#header-inner{padding:20px 0 0;position:static}

Otras herramientas como CleanCSS son menos severas sin embargo, algunas optimizaciones son posibles si nos tomamos el trabajo de revisar.

En lo posible, sería buena idea colocar todos nuestras definiciones de estilo dentro de <b:skin> </b:skin>, de esa manera eliminamos las etiquetas STYLE redundantes y, si necesitamos identificarlas, podemos comentarlas:

/* --- Vinculos y Objetos */
a, a:visited, a:link  {
  color:#AAA;
  outline:none;
  text-decoration:underline;}
a:hover {color:#FFF;outline:none;}
a img {
  border:none;
  outline:none;
  text-decoration:none;
}

Allí, en el ejemplo, ya podemos ver algunas otras optimizaciones posibles.

Eliminar los espacios innecesarios depende de nuestra forma de trabajo. Lo ideal es que no haya ninguno así que deberemos encontrar alguna solución intermedia que nos permita tener código reducido pero legible.

Optimizar los valores de los colores:

• cambiar los valores largos tipo #AAAAAA por #AAA
• cambiar los valores de tipo rgb(255,255,255) por el valor hexadecimal FFF
  

si estamos en la sutileza, colocar red en lugar de #FF0000 y, en términos generales, elegir siempre el valor que ocupe menos caracteres. Todos estos valores significan lo mismo:

#FFEBCD = BlanchedAlmond = rgb(100%,92%,80%) = rgb(255,235,205)

Eliminar las unidades de cualquier valor igual a cero:
margin: 0px 10px;
equivale a:
margin:0 10px;

Unificar las definiciones cuando sea posible (border, background, font, margin, padding):
.clase1 {margin-bottom: 0px; margin-left: 100px; margin-right: 20px; margin-top: 0px;}
equivale a:
.clase1 {margin:0 20px 0 100px;}

.clase2 {margin-bottom: 0px; margin-left: 20px; margin-right: 20px; margin-top: 0px;}
equivale a:
.clase2 {margin:0 20px;}

Lo mismo ocurre con la propiedad background:
.clase3 {background-attachment: scroll; background-color: transparent; background-image: url(URL_imagen); background-position: left 50%; background-repeat: no-repeat;}
equivale a:
.clase3 {background: transparent url(URL_imagen) no-repeat scroll left 50%;}

Sería bueno revisar que no hubiera definiciones repetidas y en ese caso, unificarlas (es algo bastante común); lo mismo ocurre con propiedades que se sobrescriben:

a, a:visited, a:link  {
  color:#AAA;
  outline:none;
  text-decoration:underline;
  color:#CCC;
}

¿Y qué tiene que ver esto con los elementos condicionales de Blogger?

Nuestra plantilla tiene una sola hoja, es un archivo. Blogger lo lee y actua en consecuencia. Si estamos en el home, la página principal se muestra de cierta forma; si estamos en una entrada individual, se muestra de otra forma. El ejemplo típico son los comentarios que sólo vemos desplegados en las páginas individuales y en la principal ni siquiera están ocultos, Blogger, simplemente "se saltea" ese código.

Hay que tener muy claro que, un elemento ocultado con CSS (display: none) se carga de la misma manera que los visibles así que "ocultar" algo no reduce el tiempo de carga.

Por defecto, no importa en que tipo de página estemos, el CSS se carga igual así que bien podríamos condicionarlo y crear tres grupos:

<b:skin>
  [... aquí val las definiciones generales ...]
</b:skin>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
  <style type='text/css';>
    [... aquí van las definiciones exlusivas para la página principal ...]
    [por ejemplo: Posts expandibles]
    [por ejemplo: Paginación]
  </style>
</b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <style type='text/css';>
    [... aquí van las definiciones exlusivas para la páginas individuales ...]
    [por ejemplo: Comentarios]
    [por ejemplo: Formulario de comentarios incrustado]
    [por ejemplo: Post relacionados]
    [por ejemplo: Marcadores sociales]
  </style>
</b:if>

No son grandes cambios pero, todo suma.

En Blogger in Draft apareció la lista de "mejoras" y "arreglos" realizados durante septiembre. Pocos, muy pocos.

Uno de los importantes es que están incorporando la posibilidad de Suscribirse a los comentarios en el nuevo formulario incrustado de tal manera de acercarse un poco más a las opciones que existen en el "viejo modelo".

Según Rosa, parecería que no funciona bien e incluso advierte que hay errores en los feeds y que esto puede ser un problema circunstancial debido a esa inclusión ... veremos, esperemos, suspiremos.

Algo que nos desvela es la imposibilidad de modificar ese formulario. A los problema de los fondos de plantilla oscuros donde ciertos textos no se ven ya que están escritos en negro, ahora le sumamos el espantoso azul del enlace que para colmo, dice Suscribe, lo que es un poco confuso para quien no sepa de qué se trata ya que puede creer que se trata de otro tipo de suscripción.

No. Hasta donde sé, no hay nada que pueda hacerse para cambiarlo. Si alguien tiene una idea, escucho ansioso.

De todas formas, en Blogger in Draft aparece una última frase un poco críptica: "We’ve also added improved color matching in the form for all browsers."

No sé a que se refiere y es un poco inentendible que el IFRAME no se adapte a las plantillas tal como hacen otros widgets del mismo Blogger. Lo que si he visto y tampoco comprendo, es que si cargamos una plantilla nueva, el código del formulario es levemente distinto. Debajo del IFRAME aparece una instrucción diferente:

<iframe allowtransparency='true' expr:src='data:post.commentFormIframeSrc' ... />
<data:post.iframeColorizer/>

Eso de data:post.iframeColorizer se transforma luego en un script al generar la página:

<script src="http://www.blogger.com/jsbin/41356324-iframe_colorizer.js" type="text/javascript">

¿Hace algo? Ni idea; no veo diferencias entre un blog que lo tenga incorporado y otro que no lo tenga, tal vez sea un script para el futuro. Blogger es muy silencioso, jamás explica.

Si mezclamos la posibilidad de utilizar elementos condicionales con el servicio de Feed2JS, podríamos crear un widget en la sidebar que mostrase en las páginas individuales, una lista con las últimas entradas que tengan la misma etiqueta que el post.

Como no hay ninguna instrucción de Blogger que nos permita conocer las etiquetas de un post fuera del bucle que lo muestra, vamos a usar JavaScript para "guardar" ese dato y utilizarlo luego.

Lo primero que debemos hacer es colocar una línea en la plantilla; expandiendo los artilugios, buscamos el código correspondiente al bucle que muestra las etiquetas (arriba o abajo de los posts) y añadimos eso marcado en color:

<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<script>
var etiquetasRelacionadas=&quot;<data:label.name/>&quot;;
</script>
<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
</b:loop>

Simplemente, creamos una "variable" a la que llamamos etiquetasRelacionadas y donde guardamos el dato que nos devuelve Blogger en <data:label.name/> es decir, el nombre de una etiqueta.

Ahora, deberíamos agregar un elemento HTML que ubicaremos en la sidebar donde quisiéramos que se mostrase y allí, colocamos lo siguiente:

<script type="text/javascript">
var fuente = "http://feed2js.org//feed2js.php?src=http://nuestroBlog.blogspot.com/feeds/posts/summary/-/" + etiquetasRelacionadas + "&amp;chan=n&amp;num=10&amp;desc=0&amp;html=p&amp;date=n&amp;targ=y&amp;utf=y";
document.write('<script src="' + fuente + '"><\/script>');
</script>

Donde lo único que debemos cambiar es nuestroBlog.blogspot.com por la dirección de nuestro blog.

Lo que hará ese script es construir la dirección de los feeds de la etiqueta que siempre tiene la misma estructura:

http://nuestroBlog.blogspot.com/feeds/posts/summary/-/nombreEtiqueta

Y luego, creará una etiqueta SCRIPT y la escribirá en la página.

Por último, como esto sólo tendrá sentido en una página individual, deberemos volver a la plantilla, expandir los artilugios y modificar el elemento para que no se muestre en el resto de las páginas:

<b:widget id='HTMLX' locked='false' title='ETIQUETAS CONDICIONALES' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
<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:else/>
<style>#HTMLX {display: none;}</style>
</b:if>
</b:includable>
</b:widget>

En el ejemplo, sólo detectamos una etiqueta (esa es una limitación) pero, con alguna modificación podríamos "guardar" varias usando un array aunque no se me ocurre cómo podríamos utilizarlas

La sidebar del blog suele ser una de las cosas más "pesadas" a la hora de cargarlo. Solemos colocarles muchas cosas ... tal vez, demasiadas pero, es parte de nuestra idiosincracia.

En Blogger, hay una forma bastante sencilla de colocar condiciones de tal manera que el blog se muestre diferente en función del tipo de página donde nos encontramos. Básicamente, lo que podemos detectar es si estamos en una página de entradas individuales o no; para eso, hay un dato interno que lo indica:

data:blog.pageType = &quote;item&quote;

Si esto es así, entonces, también sería sencillo hacer que ciertos elementos de la sidebar se muestren o se oculten según sea el tipo de página.

Todos los elementos que agregamos tiene la misma estructura; por ejemplo, si agregáramos un elemento HTML con el título MI ELEMENTO; podría verse esto:

<b:widget id='HTML7' locked='false' title='MI ELEMENTO' type='HTML'>
<b:includable id='main'>
  [ ... el código interno ... ]
</b:includable>
</b:widget>

HTML7 es el ID que variará de acuerdo a la cantidad que tengamos agregados y el atributo type será diferente si se trata de otro tipo de elemento (Label, Archive, Feed, etc).

Blogger no nos deja colocar código antes de b:widget así que colocaremos la condición adentro:

<b:widget id='HTML7' locked='false' title='MI ELEMENTO' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == &quote;item&quote;'>
  [ ... el código interno ... ]
<b:else/>
  <style>#HTML7 {display: none;}</style>
</b:if>
</b:includable>
</b:widget>

En el ejemplo, el elemento HTML7 sólo se mostrará en las páginas individuales y ya que a veces, aunque no tenga contenido, el elemento tiene "tamaño"; reforzamos la instrucción ocultándolo por completo.

La condición inversa sería no mostrar el elemento en las páginas individuales; para eso, lo más fácil es usar:

<b:if cond='data:blog.pageType != &quote;item&quote;'>

El armado de la página de forma condicional no está limitada a los elementos individuales. Podemos condicionar casi cualquier cosa. Este esquema nos permitiría tener sidebars diferentes para las páginas individuales y la página principal:

<b:if cond='data:blog.pageType != &quote;item&quote;'>
  <div id='sidebar-wrapper'>
  <b:section class='sidebar' id='sidebar' preferred='yes'>
    [ ... el código de los diferentes elementos de la sidebar de la página principal ... ]
  </b:section>
  </div>
<b:else/>
  <div id='sidebar-wrapper-2'>
  <b:section class='sidebar' id='sidebar-2' preferred='yes'>
    [ ... el código de los diferentes elementos de la sidebar para entradas individuales ... ]
  </b:section>
  </div>
</b:if>

Moraleja: cualquier cosa es posible y el resto queda librado a la imaginación de cada uno.

Click para ver los videos.

Cortos creados y dirigidos por el francés Thomas Szabo (más información).

Y Twitter sirvió para algo; por ejemplo, para ver este video recomendado por Carlos de El blog de Inforc Ecuador que también fue publicado en Xombra.

Es un documental de Discovery Channel al que llaman "La guerra de los navegadores" aunque habla de la historia de internet. En realidad, uno se pregunta si al fin de cuentas amabas cosas no son lo mismo.

IF YOU GIVE UP, THEY GIVE UP

Le réchauffement climatique (El calentamiento global), realizado por Seagulls Fly para la organización Quercus.

Un favicon ese esa imagen pequeña que se ve en la barra de direcciones del navegador o cuando agregamos un sitio a los marcadores o favoritos. En un blog de Blogger podemos agregarlo con bastante facilidad y hay muchas herramientas online que nos ayudan a generar uno a partir de cualquier imagen.

Hace tiempo, en una entrada se mostraba la forma de asociar ciertas extensiones o tipos de archivos a una imagen determinada, utilizando los selectores condicionales de CSS. Más recientemente, La Bloguería ofrece la opción de descargar una hoja de estilo donde ya están definidas las propiedades para integrar una serie de íconos de tal manera que los enlaces a ciertos archivos se muestran con un ícono determinado (ver ejemplo).

En el caso de las páginas web, hay otro método manual para utilizar los favicons que las identifican; se trata de un servicio (Google Shared Stuff) que dispone el mismo Google y que nos muestra ese favicon en formato PNG.

No hay muchas explicaciones al respecto y parece más curioso que útil aunque es sencillo de utilizar ya que basta escribir una etiqueta IMG:

<img src="http://www.google.com/s2/favicons?domain=DOMINIO" />

Tiene bastantes limitaciones así que no siempre funcionará. Por ejemplo, si el sitio no utiliza el típico favicon.ico , no es reconocido; tampoco funcionará si se trata de subdominios así que los sitios alojados en Blogger mostrarán siempre el mismo, sin importar si están en blogspot.com o si están en un dominio propio ; para colmo, no acepta transparencias así que algunos se ven espantosos sobre fondos que no sean blancos

	<img src="http://www.google.com/s2/favicons?domain=www.blogger.com" />
	<img src="http://www.google.com/s2/favicons?domain=wikipedia.org" />
	<img src="http://www.google.com/s2/favicons?domain=youtube.com" />
	<img src="http://www.google.com/s2/favicons?domain=twitter.com" />
	<img src="http://www.google.com/s2/favicons?domain=www.facebook.com" />
	<img src="http://www.google.com/s2/favicons?domain=flickr.com" />
	<img src="http://www.google.com/s2/favicons?domain=www.mozilla.org" />

Bueno, con tantas limitaciones no sé ni para que escribo esto

Si no se tiene un blog es difícil que se comprenda esta entrada. Si se tiene, posiblemente tampoco se comprenda a menos que uno tenga el blog para jugar y para colmo, no sé si describirlo es suficiente. Sólo sé que a veces, la magia existe.

Los fragmentos de una conversación con Cata. El motivo carece de importancia, eran cuestiones técnicas menores, esas que suelen llevar horas de trabajo:

— ... si, es cierto y le pondría un borde
— Pensaba lo mismo.
— Ahí puse el borde, dejame ver lo del autor.
— Ganó muchisimo con el borde.
— Sí ¿Dónde iría el nombre del autor?
— Mmmm, yo diría que abajo.
— Eso me temía.
— Abajo a la derecha con letra tipo manuscrita.
— ¿Algo más?

Y entonces, así, sin anestesia, CaTa dice:

Oye ... de repente se me cruzó una imagen ...
... nosotros no hacemos posts, nosotros jugamos peeeeroo jugamosssss!!!
... así, concentrados, como los pequeños juegan a las bolitas.

Recién me vi y conecte cuando era pequeñita y jugaba sola en mi pieza o en el patio; super concentráaaa, tanto que mi mami me salía a buscar pensando que me había pasado algo porque no metía ni ruido ...

Es que allá a lo lejos, uno tuvo un patio, un jardín, una bohardilla o un rincón cualquiera en que éramos nosotros mismos y no hacía falta otra cosa más que dejarse llevar hasta donde terminara el horizonte, aunque estuviera a sólo unos metros delante nuestro.

Si crecimos, fue para perder algo de eso; para olvidarnos de lo que aprendimos y para creer que el mundo es algo que se puede guardar en una cuenta del Lehman Brothers: "¡Puro veneno! ¡Risas que duelen! ... ¡El bote roto! ¿A quién le importa? ... Si te sofoca ¿A quién le importa?"

Resumiendo: por eso tengo un blog:

— Maravilloso ... bienvenida — Llegué a sentir burbujitas que salían de mi corazón ...

Ahora que tweeteamos un poco, esto de las URL cortas será muy bueno porque ahorra espacio pero no deja de ser un poco molesto e incluso "peligroso" ya que no sabemos a donde nos llevarán.

Por ejemplo, ¿qué es?: http://tinyurl.com/5l5uy3

¿Un video de YouTube que alguien recomienda? ¿una página web con alguna información que nos interesa? Basta hacer click para saberlo pero yo quiero saberlo antes.

En la Sizlopedia acaban de mostrar una extensión para Firefox, de esas que apenas ocupan lugar y resuelven el tema.

Se trata de LongURL Mobile Expander y lo único que hace es volver a poner las cosas en su debido lugar así que, si vemos el enlace reducido basta colocar el cursor del ratón encima para que un tooltip nos muestre la dirección real.

También está disponible como script de Greasemonkey y funciona con muchos servicios, incluyendo tinyurl, is.gd, bit.ly, snipurl.com, snurl.com, snipr.com, ping.fm, metamark.net, y xrl.us.

Si bien podemos insertar el widget de Twitter tal y como nos lo ofrece el servicio, también podemos modificarlo para ampliar un poco las posibilidades.

En mi caso, he hecho eso y he cambiado pequeñas cosas: puse los textos en español, eliminé ciertos códigos HTML innecesarios, agregué otros, coloqué clases CSS en cada etiqueta para poder personalizarlo, etc.

La primera parte no difiere de los ejemplos anteriores; creamos un elemento HTML y lo ubicamos donde queremos que aparezca en la página. Allí, escribimos lo siguiente:

<div id="twitter_div">
<ul id="twitter_update_list"></ul>
<a class="linkTwitter" href="http://twitter.com/nombreusuario">texto</a>
</div>

Donde debemos recordar que hay que cambiar nombreusuario y colocar el texto que nos guste para enlazar a la página principal.

Luego, agregaremos los scripts justo antes de </body> pero, en lugar de enlazar blogger.js, lo agregaremos manualmente en la plantilla y lo modificaremos a gusto.

<script type='text/javascript'>
//<![CDATA[
// esta es la función que lee Twitter y escribe los mensajes en el blog
function twitterCallback2(obj) {
var wwwregular = /\bwww\.\w.\w/ig;
var regular = /((https?|s?ftp|ssh)\:\/\/[^"\s\<\>]*[^.,;'">\:\s\<\>\)\]\!])/g;
var atregular = /\B@([_a-z0-9]+)/ig;
var twitters = obj;
var statusHTML = "";
var username = "";

for (var i=0; i<twitters.length; i++){
var posttext = "";
posttext = twitters[i].text.replace(wwwregular, 'http://$&');

// reemplaza los enlaces tipo  http://tinyurl.com/000000 por un texto
posttext = posttext.replace(regular, '[ <a class="linkEnlaces" href="$1" title="$1">VER enlace</a> ]');

// cuando el mensaje es una respuesta, el nombre es un enlace
posttext = posttext.replace(atregular, '@<a class="linkUsuario" href="http://twitter.com/$1">$1</a>');
username = twitters[i].user.screen_name

// se escribe el item de la lista con el mensaje y se termina indicando el tiempo transcurrido
statusHTML += ('<li>'+posttext+' <span class="linkTiempo"><a href="http://twitter.com/'+username+'/statuses/'+twitters[i].id+'" title="Ver el mensaje en Twitter">'+relative_time(twitters[i].created_at)+'</a></span></li>')
}

document.getElementById('twitter_update_list').innerHTML = statusHTML;
}

// esta función calcula el tiempo transcurrido desde la publicación del mensaje y escribe un texto
function relative_time(time_value) {
var values = time_value.split(" ");
time_value = values[1] + " " + values[2] + ", " + values[5] + " " + values[3];
var parsed_date = Date.parse(time_value);
var relative_to = (arguments.length > 1) ? arguments[1] : new Date();
var delta = parseInt((relative_to.getTime() - parsed_date) / 1000);
delta = delta + (relative_to.getTimezoneOffset() * 60);
// los textos a mostrar varían de acuerdo al tiempo transcurrido
if (delta < 60) {
return 'reciencito'; // menos de un minuto
} else if(delta < 120) {
return 'hace casi un minuto'; // hace un minuto
} else if(delta < (60*60)) {
return 'hace unos ' + (parseInt(delta / 60)).toString() + ' minutos'; // menos de una hora
} else if(delta < (120*60)) {
return 'hace casi una hora'; // hace una hora
} else if(delta < (24*60*60)) {
return (parseInt(delta / 3600)).toString() + ' horas atrás'; // menos de 24 horas
} else if(delta < (48*60*60)) {
return 'ayer'; // más de 24 horas
} else {
return 'esto fue hace ' + (parseInt(delta / 86400)).toString() + ' días'; // más de 48 horas
}
}
//]]>
</script>

<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/nombreusuario.json?callback=twitterCallback2&amp;count=1"></script>

Como cada etiqueta tiene una clase, las posibilidades de personalizarlo son infinitas. Para hacerlo, agregamos el estilo CSS en la plantilla, antes de </b:skin> o justo al inicio del elemento HTML donde colocamos el código. Esta sería una de las posibilidades:

<style type="text/css">

/* este es el DIV contenedor donde se mostrará el widget */
#twitter_div {
background: transparent url(URL_imagenOptativa) no-repeat top left; /* una imagen o color de fondo */
border: 1px solid #valor; /* puede tener o no tener un borde */
color: #valor; /* es el color del texto de los mensajes */
overflow-x: hidden; /* para evitar que algunos textos se "salgan" del DIV */
}

/* es la lista con mensajes y conviene eliminar posibles márgenes */
ul#twitter_update_list {
margin: 0;
padding: 0;
}

/* cada item de la lista (los mensajes en si mismos) */
ul#twitter_update_list li {
list-style-type: none;
list-style-image: url();
margin: 0;
padding: 5px 10px; /* separarlo de los bordes del contenedor */
}

/* es el enlace al nombre de un usuario (si existe) */
a.linkUsuario {color:#valor;}
a.linkUsuario:hover {color: #valor;} /* efecto rollover  */

/* son los enlaces interiores de los mensajes con un ícono identificatorio */
a.linkEnlaces {
background: transparent url(URL_imagenIcono) no-repeat right 50%;
color: #valor;
padding-right: 12px; /* la separación depende del ancho de la imagen */
}
a.linkEnlaces:hover {color: #valor;} /* efecto rollover  */

/* es el bloque que contendrá el enlace que muestra la antigüedad del mensaje */
.linkTiempo {
display: block; /* se fuerza a que sea mostraado en una nueva línea */
text-align: right; /* y a la derecha */
}
.linkTiempo a { /* el enlace en si mismo con una imagen de fondo */
background: transparent url(URL_imagen) no-repeat scroll left 50%;
color: #valor;
padding-left: 12px; /* la separación depende del ancho de la imagen */
}
.linkTiempo a:hover {color:#valor;} /* efecto rollover  */

/* es el enlace inferior que lleva al home de nuestro Twitter */
a.linkTwitter {
color: #valor;
display: block;
line-height: 48px; /* es uan forma de darle altura y centrar el texto */
margin: 10px 0 0 0; /* separado del mensaje superior */
padding-right: 10px; /* separado del borde derecho */
text-align: right; /* alineado a la derecha */
}
a.linkTwitter:hover {color:#valor;} /* efecto rollover  */

</style>

El script tiene muchas posibilidades y con un poco de paciencia puede modificarse para contemplar otras opciones. Como lo que lee es el texto del mensaje, basta establecer una serie de condiciones para filtralos y mostrarlos de diferentes formas.

Podríamos ocultar algunos (por ejemplo las respuestas que comienzan con arroba) o si usamos TweeterFeed para enviar los posts publicados, podemos detectarlo estableciendo un texto específico antes del título.

Una función extra que podemos agregar es mostrar un mensaje por vez pero leer varios y luego, navegar por ellos de manera similar a lo que hace el widget de Flash y en todos los casos, para personalizarlo usamos CSS y lo mejor es que cada elemento HTML tenga definida una clase.