Una lupa sobre las imágenes

Loupe es un pequeño script que nos permite agregar una lupa a las imágenes que insertamos en una página web y funciona en la mayoría de los navegadores actuales.

Para usarla podemos descargar este ZIP que nos ofrecen donde se incluyen varias páginas de ejemplo.

Hay dos archivos JS necesarios que deben alojarse en un servidor propio, uno es el script genérico y el segundo es una adaptación para Internet Explorer. Los agregamos en la plantilla antes de </head>:

<script type="text/javascript" src="URL_loupe.js></script>
<!--[if gte IE 6]>
<script type="text/javascript" src="URL_loupeIE.js"></script>
<![endif]-->

Hay varios modos de utilizarlo y algunos parámetros que pueden configurarse. Veamos la más sencilla:

<div>
<img id="unNombre" onLoad="initLoupe(this.id);" src="URL_imagen" width="ancho" height="alto" />
</div>

Donde:

unNombre es el identificador único de la imagen

en src colocamos la dirección de la imagen que, por lógica debe ser "grande" o "muy grande"

con los parámetros width="ancho" y height="alto" lo que vamos a hacer es mostrarla de un tamaño menor

La función tiene la siguiente sintaxis:

initLoupe(arg1[,arg2][,arg3][,arg4][,arg5])

y el único argumento obligatorio es el primeo que es el ID de la imagen.

Los siguientes argumentos son opcionales:

arg2 si es true, la lupa es visible y no hay necesidad de hacer click en el ícono para mostrarla (por defecto, es false)
arg3 la posición horizontal inicial de la lupa expresada en pixeles
arg4 la posición vertical inicial de la lupa expresada en pixeles
arg5 si es true se muestra un cursor tipo crosshair en la lupa (por defecto, es false)

Veamos un ejemplo con algunos parámetros y un pequeño truco; vamos a mostrar una imagen pero, "la ampliación" nos mostrará otra:

<div style="position:relative;">
<img 
id="nombre"
onLoad="initLoupe(this.id,true);"
src="URL_imagenOculta"
style="z-index: -1; cursor:wait;"
width="anchoVisible" height="altoVisible" />
<div
style="position:absolute; left:0; top:0;
width:anchoVisiblepx; height:altoVisiblepx;
background: #color url(URL_imagenVisible) no-repeat;">
</div>
</div>

Creamos un bloque donde la propiedad position esté definida como relative. Adentro, colocamos la imagen oculta (la que se mostrará al pasar la lupa). Luego, agregamos otro bloque DIV al que posicionamos en forma absoluta y lo ubicamos encima de la imagen anterior. Como está encima, si le agregamos un fondo con otra imagen, esta última, tapará la primera.

En el sitio, aconsejan no utilizar el script con varias imágenes en la misma página y, cualquier detalle, puede consultarse la FAQ.

Time Machiner es un sitio con una mini-aplicación desde donde podemos enviar emails con fechas post-datadas. Tal vez, lo podríamos usar como recordatorio, como lista de cosas a hacer; ellos lo dicen: las posibilidades son infinitas.

¿Será útil enviar email al futuro? ... no lo sé.

Estimado Sr/Sra Futuro:

Me dirijo a Usted y por su intermedio a quien corresponda, a los efectos de recordarle sueños infantiles no cumplidos, promesas juveniles inconclusas y deseos maduros insatisfechos.

No pretendo que la presente sea tomada como una queja más y se archive sin mayores consecuencias. Pretendo sentar un precedente y que esto, sirva de punto de partida para un entendimiento que redundará en beneficios mutuos.

Mi estimado/a, lo que le propongo es una tregua. Usted me garantiza cierta razonabilidad y yo, como contrapartida, disminuyo mis pretensiones.

No es mucho lo que pido: que el árbol frente a mi ventana siga siendo árbol; que las estrellas sigan brillando; que mi vecino no deba huir escapando de una persecución; que mis hijos tengan un pequeño lugar donde protegerse y que mis nietos puedan sentarse alguna vez a mirar el mismo paisaje que miro yo y algún otro un poquito mejor.

No me venga con declamaciones inconducente. No me hable del libre albedrío. Usted y yo sabemos que tenemos cuentas pendientes y que mal que mal, hasta ahora, he cumplido con cada uno de sus designios. Creo que ha llegado la hora que sea Usted quien deba dar el brazo a torcer.

Pero, ya ve, otra vez cedo, disminuyo mis pretensiones, resigno mis ambiciones y sólo coloco sobre la mesa de negociaciones unas pocas demandas que considero mínimas, justas y posibles si es que estamos actuando de buena fe.

Sin más, saludo a Usted y a su familia.

Su seguro servidor:
Yo Mismo

No creo que conteste. En caso, siempre podemos enviar un telegrama al pasado y llorar amargamente sobre la leche derramada.

El último post de Gem@ que leo me resulta interesante porque toca un tema poco conocido: redireccionar una página. Allí menciona claramente los dos métodos típicos que podemos emplear: usar las etiquetas META o un script (lo normal en principio, es usar ambas cosas).

Hasta aquí no hay nada que agregar pero, se me ocurrió pensar ¿para qué redireccionar una página? Y parto entonces desde allí. Es cierto que hay muchas razones legítimas para hacer una redirección pero no hay muchas razones legítimas si usamos Blogger y eso, Google lo sabe así que debe tenerse cuidado porque ¿no está penalizado?

La respuesta no es sencilla. Google nos puede penalizar por tener dos webs duplicadas (con el mismo contenido), si el sitio al que se redirecciona tiene un contenido diferente, esa penalización no existe. Aquí hay una razón válida. tenemos un blog que nos redirige a otro sitio ¿por qué? bueno, eso ya no es posible contestarlo, en principio, parece bastante inútil, no ganamos mucho, no parece tener sentido ¿será por eso que a Google no le gusta?

Es que la realidad indica que a Google no le gustan las redirecciones hechas desde una página ya sea usando JavaScript o etiquetas META. Los que saben de estas cosas dicen que sólo acepta dos formas válidas: las llamadas redirecciones 301 o las realizadas utilizando el .htaccess. En ambos casos, la "página vieja" (origen) pasa a ser la "página nueva" (destino); se va directo a la página destino sin cargar la página origen. Esto es lo adecuado cuando nos mudamos de dirección. Por ejemplo, cuando se compra un dominio, normalmente hay una opción de redirección y esta se hace desde el lado del servidor (desde el nuevo dominio) y entonces Google la acepta, obedece, sigue los enlaces e indexa las páginas de origen y destino con el mismo contenido, pero sin sancionarlas.

Todo eso no se hace desde Blogger sino desde el nuevo servidor y, de esa manera, Google conserva el Pagerank, por ejemplo. Hay que tener en cuenta que sobre todo esto hay más especulaciones que realidades ya que Google es bastante reacio a dar respuestas concretas.

El código 301 significa Redirección Permanente y el código 302 significa Redirección Temporal. Los buscadores, al encontrar una redirección 301 saben que la URL ha cambiado a la web redirigida y actualizan rápidamente las URLs antiguas de su base de datos; si no lo hicieran, perderíamos los enlaces existentes y sería lo mismo que empezar de nuevo.

Esto es bastante sencillo pero imposible en Blogger ya que se requiere acceso a herramientas de programación del lado del servidor, por ejemplo en PHP sería algo así:

<?php
Header( "HTTP/1.1 301 Moved Permanently" );
Header( "Location: http://nuevaDireccion" );
?>

Como el tema aquí es Blogger, tenemos que buscar alternativas que sean más o menos razonables y, a decir verdad no hay muchas por no decir ninguna. Vamos a ver lo que, a mi juicio, es una de las pocas razones lógicas para redireccionar un blog de Blogger: una migración. Y de esas, la más usual es la migración a Wordpress.

Cualquiera de los dos métodos mostrados por Gem@ funcionará. En todo caso, hay un tercer método más rústico y poco recomendable: poner un texto e incluir un enlace que diga "Me mudé, visítenme en tal-lugar.com"

Usando cualquiera de los métodos de redirección normales, esta se efectuará pero ... desde cualquier enlace o página de Blogger nos mandará a la página principal de nuestro nuevo sitio y lo ideal es que, como hemos importado los posts de un servicio a otro, los enlaces sean coincidente, si alguien abre una página particular de nuestro antiguo blog en Blogger, se debería abrir la página con el mismo post en nuestro nuevo blog de WordPress.

Lo primero que se debe hacer en WordPress luego de importar, es cambiar la estructura de los permalinks (los enlaces) para que sean equivalente a los que muestra Blogger. Esto, lo hacemos desde el panel de Configuración de WordPress, creando una estructura personalizada:

Custom Structure

Esto, hara que los posts tengan la misma URL donde sólo cambiará el nombre del dominio:

http://elBlogAntiguo.blogspot.com/2008/04/una-pagina-cualquiera.html
http://elNuevoBlog.com/2008/04/una-pagina-cualquiera.html

De esta manera, no perderemos visitas pero, esto no es suficiente. Si bien hay ciertos plugins que lo hacen correctamente, muchas veces no funcionan así que hay un método "más manual" que puede usarse y que, por ejemplo fue empleado en el blog de CaTa cuando se realizó su migración.

Primero que nada, las etiquetas META que sólo se usarán cuando el navegador del visitante no tenga JavaScript habilitado. Justo debajo de <head> agregamos el siguiente código:

<noscript>
<meta http-equiv="expires" content="0"/>
<meta name="DESCRIPTION" content="301 moved permanently"/>
<meta name="KEYWORDS" content="301 moved permanently"/>
<meta name="ROBOTS" content="noindex, follow"/>
<meta name="GOOGLEBOT" content="noindex, follow"/>
</noscript>

Le estamos diciendo a los robots de Google (Googlebot) y a los de los otros buscadores que no indexen el sitio (noindex) y que sigan los enlaces (follow). Además, describimos el sitio como permanentemente removido para expresar nuestra buena fe.

Por último, justo debajo de <body> agregaremos el script que establecerá la dirección de la página de Blogger donde nos encontramos, la transformará en la nueva URL y luego, nos redireccioanará hasta ella:

<script type='text/javascript'>
oldurl=document.URL;
temp=oldurl.substring(longitud);
newurl='http://nuevaURL/'+temp;
document.location.href=newurl;
</script>

Donde:

longitud es la cantidad de caracteres de nuestra dirección en Blogger; por ejemplo si fuera:

http://vagabundia.blogspot.com/

el valor a colocar sería 31; escribiríamos: temp=oldurl.substring(31);

y http://nuevaURL/ sería la dirección de nuestro nuevo sitio.

Hace unos días hablaba de un pequeño sofware con el cual podían agregarse "efectos de agua" en una imagen cualquiera. Ahora, leo en PortaFolioBlog que nos permite hacer lo mismo pero online, gratuitamente, sin registrarnos y sin necesidad de descargar nada.

Wavemypic admite que subamos una imagen en formatos png, jpg o gif y, con un sencillo click, la convierte en un gif animado

La imagen de Cosas Sencillas puede decirlo todo:

O casi todo ...

Es que eso de que una imagen vale más que mil palabras, no es del todo cierto:

... y ahí está la poesía está de pie contra la muerte ...

Juan Gelman, Premio Cervantes 2007

Ruedas (fragmento)

Ella llora con una rueda en la garganta
que gira contra el deseo y con
restos de oscuras órdenes. Hay
que envolverte ahora
con la luz que seas.
Esa luz tiene horizontes que ninguno ve,
como fulgor en un borde casual del viaje.

(a Andreíta)

Hasta ahora, Gickr era un sitio donde podíamos crear GIFs animados de fotos alojadas en Flickr pero recientemente han agregado dos posibilidades más. La primera, utilizar imágenes que tengamos en nuestra PC (hasta 10); la segunda, crearlos a partir de un video de YouTube.

Vamos a la página correspondiente y alli colocamos la dirección del video; por ejemplo:

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

Definimos el tamaño (50, 100, 120 o 200 pixeles de ancho), la cantidad de frames (por defecto 25); click en Next y esperamos. El tiempo variará de acuerdo al tamaño del video.

Cuando termine el proceso, podemos descargar el GIF o usar el enlace que nos dan y enlazarlo directamente.

REFERENCIAS:

Google Discovery

Wikileaks es una versión no censurable de la Wikipedia que mantiene a sus autores en el anonimato y hace pública información sin contar con autorización o aprobación oficial.

Básicamente, su interés se centra en cierto países con regímenes autoritarios aunque abarcan cualquier tipo de comportamiento no éticos por parte de gobiernos y empresas en general.

En este momento, disponen de más de 1,2 millones de documentos.

En febrero pasado un juez federal de San Francisco ordenó cerrar Wikileaks por una denuncia realizada por un banco suizo que consideró una violación de su privacidad la publicación de documentos confidenciales que revelaban prácticas de evasión impositiva de su filial de las Islas Caimán. Inmediatamente, aparecieron direcciones alternativas de Wikileaks en Bélgica y Alemania por lo que el intento produjo el efecto contrario haciendo mucho más popular al sitio, generando críticas y protestas. Días después, el juez revocó su orden.

El caso se enmarcan en el llamado “Efecto Streisand” que se produce espontáneamente ante cualquier intento de censurar contenidos en internet: "... con al afán de censurar o bien ocultar alguna información, ésta recibe mayor publicidad que la que hubiera tenido si no se le hubiera pretendido acallar ..."

REFERENCIAS:

Mirá!

ver la versión actualizadaEl dinero sólo puede comprar manzanas

¿Qué pasaría con mis _ _ _ (completar con algún número entre 1 e infinito) posts si mañana Google, por alguna razón, suspende mi cuenta en Blogger?

No es extraño que Alejandro siga preocupado con el tema y que su experiencia con el bloqueo temporal de SpamLoco lo haga mirar detalles que, a lo mejor, a nosotros se nos escapan. En uno de sus últimos posts nos cuenta sobre "una perlita":

Al parecer Blogger elimina automáticamente comentarios que contengan enlaces a sitios maliciosos o que infrinjan el copyright, no recuerdo exactamente qué contenía el comentario pero provenía de un lector habitual. En su momento no lo vi como una amenaza para los lectores, de lo contrario lo hubiese eliminado sin dudarlo y si la memoria no me falla se hacía referencia a un sitio de descargas.

El enlace ''Learn more'' dejado por Google nos recuerda los términos y condiciones del servicio, yo me pregunto qué hubiese pasado si el enlace se publicaba en el cuerpo del post, ¿me hubiesen alertado de alguna forma o esa es una de las razones por las cuales un blog puede ser considerado spam?, ¿qué pasa si enlazamos a un sitio y este 3 meses después se vuelve malicioso o completamente ilegal?

Es un tema complicado. En principio, no parece irracional que Blogger detecte ese tipo de sitios ya que también son detectados por Google y el buscador nos advierte de la peligrosidad al ingresar en algunos resultados. Desde ese punto de vista, es una protección discutible pero "lógica"; el problema radica en eso que se pregunta Alejandro, ¿qué pasa si ponemos un enlace normal que luego, pasado un tiempo se transforma en "anormal"? Google/Blogger no da explicaciones, castiga como los dioses, arbitrariamente.

Por otro lado, si bien el filtro anti-spam de los comentarios funciona bastante bien (por lo menos, comparado con WordPress, por ejemplo), siguen apareciendo uno que otro comentario de spam evidentes y eso sería sencillo de resolver si, por ejemplo, nos dieran lo opción de configurar la cantidad de enlaces aceptables en un comentario. Si este tuviera más, simplemente podría marcarse para que tuviera que ser aprobado por el administrador del blog antes de ser publicado. No creo que esto sea un tema técnico complejo de resolver, probablemente, Google/Blogger están tan seguros de su eficiencia que ni lo han pensado y nos siguen tratando como imberbes a los que deben proteger de peligros reales e imaginarios.

Por último, es cierto que los administradores de un blog deben hacerse responsables de los comentarios. No hablo de censura, hablo de responsabilidad. Obviamente, no pueden estar pendientes las 24 horas pero deben revisar metódicamente lo que se dice porque tienen la obligación de "guiar la conversación", de mantenerla dentro de ciertos límites.

Muchas veces, esto no se cumple. Una discusión puede derivar en una andanada de insultos inaceptables que, tal vez ayuden al sitio a hacerse famoso pero que de poco nos servirá a los usuarios. Los trolls en internet existen y debemos tratar de controlarlos o no seguirles el juego. Lo mismo podemos decir de aquellos comentarios que poseen enlaces: DEBEMOS VERIFICARLOS porque, los visitante son huéspedes y tenemos la obligación de protegerlos, hasta donde nos sea posible.

En la práctica, revisar hacia atrás, chequear enlace por enlace es materialmente imposible y allí es donde Google, en lugar de ayudarnos o educarnos, nos castiga.

Pregunta: ¿que es esto que parece en las nuevas plantillas?

<div id='crosscol-wrapper' style='text-align:center'>
  <b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>

Pues, es un bloque que ha agregado Blogger para agregar AdSense en el blog aunque los anuncios también pueden colocarse colocarse en el header. Por ejemplo, buscamos:

<div id="header-wrapper">
  >b:section class="header" id="header" maxwidgets="1" showaddelement="no"/>
</div>

Modificando, si es necesario, los parámetros maxwidgets y showaddelement para poder agregar más elementos:

<div id="header-wrapper">
  <b:section class='header' id='header' showaddelement='yes'/>
</div>

Hay otros códigos en las plantillas asociados con AdSense:

<data:adStart/>
<data:adEnd/>
<data:adCode/>
<b:if cond='data:post.includeAd'> ... </b:if>

¿Podemos usar ese espacio para otra cosa?

El bloque crosscol-wrapper está ubicado por defecto justo debajo del header y podemos usarlo para cualquier cosa como cualquier otro bloque. Como no tiene propiedades definidas, podemos crearlas y agregarlas:

#crosscol-wrapper {
  [ ... ]
}
#crosscol {
  [ ... ]
}
.crosscol {
  [ ... ]
}

Pero, como no está habilitado para recibir elementos, lo hacemos, agregando el parámetro necesario:

<div id="crosscol-wrapper">
  <b:section class="crosscol" id="crosscol" showaddelement="yes"/>
</div>

Con eso, tendremos otra sección lista para utilizar y allí podemos agregar cualquier tipo de elemento.

Click para ver el video.

Los cambios en GMail parecen haber llegado a estas tierras, con todos sus beneficios y nuevas funciones pero con alguna sorpresa desagradable para los que usamos scripts de Greasemonkey:

Las posibilidades son dos, OCULTAR, solo ocultará la advertencia; el otro enlace los dirá que la extensión Better Gmail puede interferir y, si hay problemas, convendría que actualizáramos a la versión Better Gmail 2.

Lamentablemente, otros scripts no tienen solución y dejan de funcionar; algo similar a lo que ocurrió recientemente con los scripts que funcionaban con YouTube.

En este mundo de la internet es fácil creer que Google es todo lo que existe pero, no es así. Está bien, tal vez, el resto de los buscadores tengan un porcentaje menor en los resultados que nos interesan pero ... existen.

En algún momento, gracias a que algunos le buscaron la vuelta, pudimos agregar un sitemap en Google y con eso, mejorar nuestra posición. Incluso logramos saltearnos restricciones y limitaciones propias del mismo Blogger ¿Será posible avanzar un poco más? Por ejemplo, ¿será posible agregar un sitemap en Yahoo?

La respuesta es sí y el procedimiento es muy similar al que usamos en Google.

Primero que nada, tenemos que tener una cuenta de Yahoo. Si no la tenemos, nos registramos gratuitamente y listo; luego, ingresamos a Yahoo! Search y allí hacemos click en Submit Your Site for Free.

En esa nueva página hay dos acciones que podemos realizar; la primera, Submit a Website or Webpage, agregará nuestro sitio al buscador lo que nos garantizará ser indexados. La segunda, Submit Site Feed es la más interesante, enviar un sitemap:

Enter the full URL of the site feed you would like to submit:

Please include the http:// prefix (for example, http://www.yahoo.com).

Podemos utilizar diferentes formatos para indicar la URL del sitemap pero, en Blogger sólo tenemos dos alternativas y cualquiera de ellas es válida:

http://nombreBlog.blogspot.com/rss.xml

o bien:

http://nombreBlog.blogspot.com/atom.xml

Luego, hacemos click en el botón Authentication que nos abrirá una ventana donde deberemos determinar el método de autentificación y, nuevamente, sólo hay una alternativa posible, agregar una etiqueta META, algo que por suerte, Yahoo comenzó a implementar este año. Así que, copiamos la etiqueta que será algo similar a esto:

<META content='123456789abcdef' name='y_key'/>

Y la pegamos justo después de </TITLE> recordando que la etiqueta META no tiene una etiqueta de cierre así que, para que Blogger la acepte, debemos agregarle la barra de cierre final.

Una vez que lo hacemos, guardamos la plantilla y click en el botón Ready to Authenticate. Nuestro sitio aparecerá como pendiente de autentificación y ahora, sólo restará esperar.

¿Y qué pasa con otros buscadores?

MSN no posee un procedimiento ni una dirección donde enviar sitemaps, se habla que tal vez, lo tenga en un futuro pero, por ahora, es imposible sin embargo, hay una solución alternativa, enviar el sitemap a moreover.com que parece tener un acuerdo con MSN por la cual actua como intermediario. Sea o no sea cierto, hacerlo es sencillo y no nos hará daño; basta completar la siguiente dirección con la URL de nuestro sitio, copiarla y pegarla en la barra de direcciones del navegador:

http://api.moreover.com/ping?u=http://nombreBlog.blogspot.com/rss.xml

Hecho esto, se nos mostrará un mensaje de aprobación:

Enviar un sitemap a Ask.com también es sencillo. Nuevamente, completamos los datos, copiamos y pegamos lo siguiente en la barra de direcciones:

http://submissions.ask.com/ping?sitemap=http://nombreBlog.blogspot.com/rss.xml

La respuesta, será una página de aceptación donde podemos ver algunas de las otras herramientas de este buscador, un poco olvidado.

Como se ve, si el buscador posee un sistema de sitemaps y no encontramos una dirección que nos facilite su ingreso, podemos agregar el nuesto a cualquiera de ellos siguiendo siempre el mismo tipos de código:

http://urlBuscador/ping?sitemap=http://nombreBlog.blogspot.com/rss.xml

ACTUALIZACIÓN:

Gracias a la información de ls, ahora también podemos agregar un sitemap en MSN, ingresando en MSN Webmasters Tools. Necesitamos tener una Windows Live ID y si no, nos registramos gratuitamente.

En la página, agregamos la URL de nuestro sitio y la URL de los feeds, como en todos los otros casos:

Web address: http://nombreBlog.blogspot.com
Sitemap address: http://nombreBlog.blogspot.com/rss.xml

Y establecemos como método de verificación, agregar un etiqueta META que colocamos en la plantilla junto con las otras. Por último, click en SUBMIT y todo listo.

De allí en adelante, podemos cambiar ese sitemap simplemente enviándolo directamente:

http://webmaster.live.com/webmaster/ping.aspx
?siteMap=http://nombreBlog.blogspot.com/rss.xml

Son muchas las veces que me han preguntado si era posible crear un sistema de etiquetas más flexibles en Blogger y, por lo general, se refieren a tener la posibilidad de tener categorías y subcategorías. La respuesta siempre fue NO, eso no puede hacerse porque Blogger no lo contempla y no nos da la posibilidad de acceder a los datos de manera sencilla y rápida.

Pensando un poco en el tema, se me ha ocurrido hacer un experimento y después de algunas idas y vueltas, creé un blog de pruebas para ver si era posible jugar un poco con las etiquetas. El resultado no es nada maravilloso pero, tal vez, sirva como un primer boceto para seguir investigando.

Leyendo el código de un elemento Label, vemos que Blogger hace un bucle por las etiquetas y lee tres datos: data:label.name es el texto de cada una, data:label.url es la dirección URL y data:label.count es la cantidad de posts en cada etiqueta. De esos datos, el único que realmente importa es el nombre así que ¿por que no guardarlos en un array de JavaScript para después manipularlos? Para simplificar un poco, un array es, una lista con un subíndice; por ejemplo imagen[0], imagen[1], imagen[2], etc.

Imaginé lo siguiente: el blog posee una cantidad de etiquetas comunes pero, algunas de ellas, se agrupan de alguna manera y contienen dos partes, la categoría a la que pertenecen y la subgcategoría, separadas ambas por un carácter especial, un carácter que, normalmente no usaría, por ejemplo, el guión bajo (_). De esta manera, ese blog de pruebas en particular tiene una serie de posts clasificados así:

Africa America_Brasil America_Canada Asia_India Asia_Indonesia Asia_Japón Europa_España Europa_Francia Europa_Portugal Oceanía

Los continentes, serían las categorías principales y los paises las subcategorias. Para complicarlo un poco más, dos de esos continentes no tienen subcategorias. Hasta aquí, no hay problema, puedo ver todos los posts de cualquiera de ellas; un enlace a http://nombre/labels/Europa_Francia me mostrará los posts de esa categoría pero, lo que quiero es mostrarlos agrupados por continente y luego listar sólo esos.

En la sidebar hay tres elementos con etiquetas:

• Etiquetas con Secciones sólo muestra las categorías (los continentes); haciendo click en cada una de ellas, se despliega para mostrar los enlaces a las subcategorías (los países).
• Etiquetas sin Secciones sólo muestra las etiquetas que no tiene subcategorías.
• Etiquetas Normales es el elemento standard de Blogger y no tiene uso.

Reproducir el ejemplo es sencillo; como no hay restricciones en cuanto a su cantidad, creamos tres elementos Labels desde Elementos de la página de la plantilla y les ponemos nombres para diferenciarlos. Luego, en la Edición HTML de la plantilla, desplegamos los artilugios y buscamos esos elementos que dirán algo así:

<b:widget id='Label1' locked='false' title='el_nombre' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span><data:label.name/></span>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
<span>(<data:label.count/>)</span>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Usaremos un elemento Label para mostrar las categorías desplegables, otro para las categorías simples y el tercero, será el común que sólo dejaremos para comparar resultados. En los dos primeros, eliminaremos todo lo indicado en rojo y allí colocaremos los códigos correspondientes.

<script type='text/javascript'>

// definición de las variables utilizadas
var elBlog =&quot;<data:blog.homepageUrl/>&quot;; // la URL del blog
var listaEtiquetas = new Array(); // el array que contendrá las etiquetas
var listaEtiquetasNum=0; // contador auxiliar
var laSeccion = &quot;&quot;; // guarda los nombres de las categorías
var elEnlace =&quot;&quot;; // el enlace a cada subcategoría

// usamos los datos de Blogger para recopilar todas las etiquetas del blog
<b:loop values='data:labels' var='label'>
// leemos el nombre de cada una de las etiquetas
var elNombre = &quot;<data:label.name/>&quot;;
// lo guardamos en el array
listaEtiquetas[listaEtiquetasNum] = elNombre;
listaEtiquetasNum ++; // incrementamos el contador
</b:loop>

// función auxiliar para expandir y contraer las secciones
function linkLista(cual) {
var idListaUL = document.getElementById(cual);
if(idListaUL.style.display == &#39;none&#39;) {
idListaUL.style.display = &#39;block&#39;;
}else{
idListaUL.style.display = &#39;none&#39;;
}
return false;
}

</script>

<!-- el script está dividido en dos partes para agregarlo en la plantilla sin errores -->

<script type='text/javascript'>
//<![CDATA[

// leemos todas las etiquetas y las separamos en dos partes
  for (var i = 0; i < listaEtiquetas.length; i++) {
var cual=listaEtiquetas[i]; // leemos la etiqueta completa
var auxiliar = cual.split("_"); // la separamos en dos
listaEtiquetas[i]=new Array(1); // ampliamos el array 
listaEtiquetas[i][0] = auxiliar[0]; // guardamos el nombre de la categoría
listaEtiquetas[i][1] = auxiliar[1]; // guardamos el nombre de la subcategoría
}

// leemos el array generado y escribimos el documento HTML
for (var i = 0; i < listaEtiquetas.length; i++) {
var leerSeccion = listaEtiquetas[i][0]; // el nombre de la categoría
var leerItem = listaEtiquetas[i][1]; // el nombre de la subcategoría
// si no hay una sucbategoría, leerItem no tendrá un valor y lo salteamos
if (leerItem!=undefined) {
// sólo mostramos categorías y subcategorías
if (laSeccion != leerSeccion) {
// si todavía no lo hicimos, creamos el enlace de la categoría desplegable
document.write("</ul>"); // por las dudas, cerramos cualquier lista abierta
laSeccion = leerSeccion; // el nombre de la categoría (el continente)
// creamos un enlace con una clase CSS llamada listadoSECCION
// que servirá para desplegar y contraer la categoría
document.write("<a class=\"listadoSECCION\" title=\"Expandir/Contraer la sección\" href=\"javascript:void(0);\" onclick=\"return linkLista('" + laSeccion + "');\">" + laSeccion + "</a>");
// iniciamos el bloque oculto con la lista de subcategorías
// a las que le establecemos una clase CSS llamada listadoBloqueITEMS
document.write("<ul class=\"listadoBloqueITEMS\" id=\"" +  laSeccion + "\" style=\"display:none;\">");
} 
// determinamos la URL de cada enlace
elEnlace = elBlog + "search/label/" + laSeccion + "_" + leerItem
// escribimos cada item de la lista con una clase CSS llamada listadoITEM
document.write("<li class=\"listadoITEM\"><a href=\"" + elEnlace + "\">" + leerItem + "</a></li<");
}
}

//]]>
</script>

<ul class='listadoBloqueITEMS'>
<script type='text/javascript'>
//<![CDATA[
// leemos el array generado y escribimos el documento HTML
for (var i = 0; i < listaEtiquetas.length; i++) {
var leerSeccion = listaEtiquetas[i][0]; // el nombre de la categoría
var leerItem = listaEtiquetas[i][1]; // el nombre de la subcategoría
 // si no hay una subcategoría, leerItem no tendrá un valor y lo mostramos
if (leerItem==undefined) {
laSeccion = leerSeccion; // el nombre de la categoría
// determinamos la URL de cada enlace
elEnlace = elBlog + "search/label/" + laSeccion
// escribimos cada item de la lista con una clase CSS llamada listadoITEM
document.write("<li class=\"listadoITEM\"><a href=\"" + elEnlace + "\">" + laSeccion + "</a></li>");
}
}
//]]>
</script>
</ul>

Ambos scripts están armados de manera muy sencilla y sólo usan instrucciones elementales para que puedan comprenderse y documentados hasta donde es posible.

Lo único que faltaría es establecer las propiedades de las clases CSS que serán personales pero, pueden resumirse de esta forma:

<style type="text/css">

/* los pseudo-botones para desplegar las subcategorías */
a.listadoSECCION, a.listadoSECCION:visited, a.listadoSECCION:link {
background-color: beige;
border: 2px ridge Brown;
color: DarkRed;
display: block;
[... otras propiedades ...]
}
a.listadoSECCION:hover {
text-decoration: none;
[... propiedades para el efecto mouseover...]
}

/* el bloque oculto con la lista de subcategorías */
ul.listadoBloqueITEMS {
list-style-position:inside;
[... propiedades varias ...]
}

/* cada item de las subcategorías */
li.listadoITEM {
[... propiedades varias ...]
}

/* cada item es un enlace */
li.listadoITEM a, li.listadoITEM a:visited, li.listadoITEM a:link {
text-decoration:none;
[... propiedades varias ...]
}
li.listadoITEM a:hover {
[... propiedades para el efecto mouseover...]
}

</style>

En verdad, como sólo se trata de una vaga idea, espero que alguien le saque provecho o plantee alguna alternativa más razonable.

REFERENCIAS:

gorillasushi.com

No tengo un iPhone (ni voy a tenerlo) pero, para sacarme la curiosidad, bastó instalar iPhone Emulator; una extensión experimental para Firefox.

Bueno, no es "exactamente" lo mismo pero, por lo menos se le parece un poco. Puede navegarse sin problemas pero carece de la posibilidad de hacer scroll a menos que el sitio esté codificado específicamente para verse en ese tipo de telefonía móvil. Tampoco tiene sonido pero dispone de botones para avanzar retroceder.

(Click en la imagen para ver una captura de pantalla)

Una vez instalada, la ejecutamos desde Herramientas Launch iPhone Emulator y se abrirá en otra ventana.

Una vez que lo hemos visto un rato, podemos desinstalarla y seguir con nuestra vida.

REFERENCIAS:

gHacks

Mucho se habla del futuro Internet Explorer 8 y de sus mejoras pero, el mismo Microsoft reconoce que, en realidad, estas ampliaciones en la interpretación de las propiedades CSS no serán demasiadas.

Aunque se trata de un documento preliminar, en msdn nos muestran cuáles son las propiedades soportadas por las diferentes versiones y nos anticipan las escasas novedades.

	IE 6.0	IE 7.0	IE 8.0
@charset	Si	Si	Si
@import	Si	Si	Si
@media	Si	Si	Si
@page	Si	Si	Si
@font-face	Si	Si	Si
@namespace	No	No	No
.value	Parcial	Si	Si
#value	Si	Si	Si
E	Si	Si	Si
*	No	Si	Si
ns|E	No	No	No
[att=val]	No	Si	Si
[att]	No	Si	Si
[att|=val]	No	Si	Si
[att~=val]	No	Si	Si
[ns|attr]	No	Si	Si
[att^=val]	No	Si	Si
[att*=val]	No	Si	Si
[att$=val]	No	Si	Si
E+F	No	Si	Si
E>F	No	Si	Si
EF	Si	Si	Si
E~F	No	Si	Si
:active	No	Parcial	Si
:after	No	No	Si
:before	No	No	Si
:first-child	No	Si	Si
:focus	No	No	Si
:hover	No	No	Si
:lang(C)	No	No	Si
:link	Si	Si	Si
:visited	Si	Si	Si
:root	No	No	No
:nth-child()	No	No	No
:nth-last-child()	No	No	No
:nth-of-type()	No	No	No
:nth-last-of-type()	No	No	No
:last-child	No	No	No
:first-of-type	No	No	No
:last-of-type	No	No	No
:only-child	No	No	No
:only-of-type	No	No	No
:empty	No	No	No
:target	No	No	No
:not(X)	No	No	No
:enabled	No	No	No
:disabled	No	No	No
:checked	No	No	No
:indeterminate	No	No	No
:default	No	No	No
:valid	No	No	No
:invalid	No	No	No
:in-range	No	No	No
:out-of-range	No	No	No
:required	No	No	No
:optional	No	No	No
:read-only	No	No	No
:read-write	No	No	No
:first-letter	Si	Si	Si
:first-line	Si	Si	Si
::before	No	No	No
::after	No	No	No
::first-letter	No	No	No
::first-line	No	No	No
::selection	No	No	No
::value	No	No	No
::choices	No	No	No
::repeat-item	No	No	No
::repeat-index	No	No	No
!important	Parcial	Si	Si
list-style	Si	Si	Si
list-style-image	Si	Si	Si
list-style-position	Si	Si	Si
list-style-type	No	Parcial	Si
color	Si	Si	Si
background	Si	Si	Si
background-attachment	Parcial	Si	Si
background-color	Si	Si	Si
background-image	Si	Si	Si
background-position	Parcial	Parcial	Si
background-repeat	Si	Si	Si
color-profile	No	No	No
rendering-intent	No	No	No
background	No	No	No
background-clip	No	No	No
background-origin	No	No	No
background-break	No	No	No
background-size	No	No	No
border	Si	Si	Si
border-bottom	Si	Si	Si
border-bottom-color	Si	Si	Si
border-bottom-style	Si	Si	Si
border-bottom-width	Si	Si	Si
border-collapse	Parcial	Parcial	Si
border-color	Si	Si	Si
border-left	Si	Si	Si
border-left-color	Si	Si	Si
border-left-style	Si	Si	Si
border-left-width	Si	Si	Si
border-right	Si	Si	Si
border-right-color	Si	Si	Si
border-right-style	Si	Si	Si
border-right-width	Si	Si	Si
border-spacing	No	No	Si
border-style	Parcial	Parcial	Si
border-top	Si	Si	Si
border-top-color	Si	Si	Si
border-top-style	Si	Si	Si
border-top-width	Si	Si	Si
border-width	Si	Si	Si
caption-side	No	No	Si
clear	Si	Si	Si
empty-cells	No	Parcial	Si
float	Si	Si	Si
margin	Si	Si	Si
margin-bottom	Si	Si	Si
margin-left	Si	Si	Si
margin-right	Si	Si	Si
margin-top	Si	Si	Si
padding	Si	Si	Si
padding-bottom	Si	Si	Si
padding-left	Si	Si	Si
padding-right	Si	Si	Si
padding-top	Si	Si	Si
table-layout	Si	Si	Si
border-break	No	No	No
border-image	No	No	No
border-radius	No	No	No
box-shadow	No	No	No
direction	Si	Si	Si
font	Si	Si	Si
font-family	Si	Si	Si
font-size	Si	Si	Si
font-style	Si	Si	Si
font-variant	Si	Si	Si
font-weight	Parcial	Parcial	Si
letter-spacing	Si	Si	Si
line-height	Si	Si	Si
text-align	Si	Si	Si
text-decoration	Si	Si	Si
text-indent	Si	Si	Si
text-transform	Si	Si	Si
unicode-bidi	Si	Si	Si
vertical-align	Si	Si	Si
white-space	Parcial	Parcial	Si
word-spacing	Parcial	Parcial	Si
font-effect	No	No	No
font-emphasize	No	No	No
font-size-adjust	No	No	No
font-smooth	No	No	No
font-stretch	No	No	No
hanging-punctuation	No	No	No
punctuation-trim	No	No	No
ruby-align	Si	Si	Si
ruby-overhang	Si	Si	Si
ruby-position	Si	Si	Si
ruby-span	No	No	No
text-align-last	Parcial	Parcial	Parcial
text-emphasis	No	No	No
text-justify	Si	Si	Si
text-outline	No	No	No
text-overflow	Parcial	Parcial	Parcial
text-shadow	No	No	No
text-wrap	No	No	No
word-break	Parcial	Parcial	Parcial
word-wrap	Si	Si	Si
writing-mode	Si	Si	Si
content	No	No	Si
counter-increment	No	No	Si
counter-reset	No	No	Si
quotes	No	No	Si
bottom	Parcial	Parcial	Si
clip	Si	Si	Si
display	Parcial	Parcial	Si
height	Si	Si	Si
left	Parcial	Parcial	Si
max-height	No	Si	Si
max-width	No	Si	Si
min-height	No	Si	Si
min-width	No	Si	Si
overflow	Parcial	Si	Si
position	Parcial	Si	Si
right	Parcial	Parcial	Si
top	Parcial	Parcial	Si
visibility	Si	Si	Si
width	Si	Si	Si
z-index	Parcial	Parcial	Si
overflow-x	Parcial	Si	Si
overflow-y	Parcial	Si	Si
orphans	No	No	Si
page-break-after	Si	Si	Si
page-break-before	Si	Si	Si
page-break-inside	No	No	Si
widows	No	No	Si
fit	No	No	No
fit-position	No	No	No
image-orientation	No	No	No
page	No	No	No
size	No	No	No
cursor	Si	Si	Si
outline	No	No	Si
outline-color	No	No	Si
outline-style	No	No	Si
outline-width	No	No	Si
appearance	No	No	No
box-sizing	No	No	Si
icon	No	No	No
nav-down	No	No	No
nav-index	No	No	No
nav-left	No	No	No
nav-right	No	No	No
nav-up	No	No	No
outline-offset	No	No	No
outline-radius	No	No	No
resize	No	No	No
column-break-after	No	No	No
column-break-before	No	No	No
column-break-inside	No	No	No
column-count	No	No	No
column-gap	No	No	No
column-rule	No	No	No
columns	No	No	No

Y pensando en las propiedades del futuro CSS3, las que se refieren al manejo del lenguaje, no serán implementadas: voice-volume, voice-balance, speak, pause, pause-after, pause-before, rest, rest-before, rest-after, cue, cue-after, cue-before, mark, mark-before, mark-after, voice-family, voice-rate, voice-pitch, voice-pitch-range, voice-stress, voice-duration, phonemes.

Tampoco las nuevas propiedades para el manejo multimedia: width, height, device-width, device-height, device-aspect-ratio, color, color-index, monochrome, resolution, scan, grid.

Ni se permitirá el uso de los siguientes valores: angle, time, frequency, counter(), attr(), calc(), color rgba(r,g,b,a), color hsl(h,s,l), color (hsla(h,s,l,a).

Como se ve, son pocas las diferencias así que, lamentablemente, hasta que todos se pongan de acuerdo, tendremos que seguir sufriendo.

GRACIAS POR LA INFORMACIÓN:

Nico

¿Cuál era la dirección URL de esa imagen que usé una vez? Ni siquiera me acuerdo del post donde la había puesto. Recuerdo que una vez escribí algo sobre cierto tema, había enlaces a ciertas páginas pero no las encuentro ¿Suena conocido? es que cualquier blog puede volverse una maraña inmanejable de datos a los que los visitantes sólo acceden por casualidad o con mucha paciencia y a los que nosotros mismos nos resulta complicado desenredar.

Desde hace un par de días, Blogger ha habilitado el buscador interno en la Edición de Entradas para todos los lenguajes.

Sólo colocamos el dato que queremos buscar y click. Nos mostrará la lista de posts donde se encuentra ese texto.