Vagabundia

Optimizar títulos y otros detalles de Blogger

2009-07-10T00:02:00.000-03:00

En uno de los artículos de chicablogger nos cuentan algunas técnicas que nos ayudarán a optimizar nuestro blog para que se posicione mejor en los buscadores. SEO para usuarios de Blogger.com es una guia para ello y muchas de esas sugerencias son sencillas de implementar.

Es cierto que muchos blogs no tienen fines comerciales y por lo tanto, no se preocupan de estos detalles pero, también es cierto que aún así, no nos hará daño tratar de mejorar u ordenar algunas cosas.

Obviamente, lo primero es generar un sitemap correcto usando las Herramientas para desarrolladores de Google y no dejar de lado otros buscadores como Yahoo o Bing.

1. La etiqueta TITLE que vemos en el HEAD de nuestra plantilla es fundamental y en Blogger es sencillo optimizarla, ya sea con un simple cambio o con cambios más complejos:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <title><data:blog.pageName/> : nombreBlog</title>
<b:else/>
  <title><data:blog.pageTitle/></title>
</b:if>

En el mismo sentido, el uso de la etiqueta Canonical sigue siendo recomendada por todos los buscadores al igual que el uso adecuado de las etiquetas META.

Hasta ahí lo que tal vez ya sabíamos pero el artículo habla de algunas cosas más.

2. Las etiquetas META description y META keywords son un problema. La primera es una descripción del sitio y la segunda, una serie de palabras que ayudan a que los buscadores identifiquen el contenido y lo indexen mejor. En ambos casos, Google recomienda que se diferencien las descripciones de cada página ya que utilizar descripciones idénticas para todas las páginas de un sitio es inútil:

"Si es posible, cree descripciones exactas de la página concreta. Utilice descripciones del sitio en la página principal o en otras páginas generales y descripciones concretas de página en todas las demás. Si no tiene tiempo de crear una descripción para cada página, priorice el contenido: cree por lo menos una descripción de las URL más importantes como, por ejemplo, la página principal y las páginas más visitadas."

¿Qué significa esto? Que cada página debería tener una etiqueta META diferente y eso, en Blogger, es prácticamente imposible. Por eso es que si usamos un sitemap y miramos el apartado Diagnóstico | Estadísticas de rastreo, nos encontraremos con advertencias como: Metadescripciones duplicadas y Etiquetas de título duplicadas para tantas páginas como hayan sido indexadas.

No es que esto signifique un "error" que impida que el sitio sea indexado, significa que podría estar mejor y para esto, la sugerencia es que sólo se añadan esas etiquetas META en la página de inicio y que no se incluyan en el resto. Para ello, deberíamos usamos códigos condicionales:

<b:if cond='data:blog.homepageUrl == data:blog.url'>
  <meta name='description" content='el texto con la descripción del sitio ... ' />
  <meta name='keywords' content='palabra1, palabra2, palabra3, ..., palabraN' />
</b:if>

Pero, ¡eso significa que en las páginas individuales no habrá etiquetas! ¿qué pasa entonces? Lo que dice Google es que, de no existir, lo que se utiliza es parte del texto del contenido de la página y se muestra ese texto como descripción.

3. Un punto clave de las plantillas es el uso de las etiquetas de títulos. La existencia de H1 H2 H3 H4 H5 y H6 como etiquetas HTML diferentes no es un problema de tamaños de letras sino de jerarquías. Los buscadores leen y buscan esa jerarquía y dicen: Si el administrador colocó H1 a un título es porque ese título es IMPORTANTE y si usó H3 es menos importante y acá no importa el tamaño de la fuente que es sólo un efecto visual, es el tipo de etiqueta a usar la que manda.

Así que H1 debería ser la etiqueta a utilizar en los títulos de las entradas de las páginas individuales; es decir, en el home del sitio, el título relevante es el nombre del blog pero en las páginas individuales, el título relevante es el del post en si mismo. Por eso, deberíamos condicionarlo ya que, por defecto, el título de las entradas es H2 o H3.

Lo normal es que el título se muestre así:

<b:if cond='data:post.title'>
  <h1 class='post-title'>
    <b:if cond='data:post.link'>
      <a expr:href='data:post.link'><data:post.title/></a>
    <b:else/>
      <b:if cond='data:post.url'>
        <a expr:href='data:post.url'><data:post.title/></a>
      <b:else/>
        <data:post.title/>
      </b:if>
    </b:if>
  </h3>
</b:if>

Y deberíamos condicionarlo de este modo:

<b:if cond='data:post.title'>
  <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <h1 class='post-title'>
      <b:if cond='data:post.link'>
        <a expr:href='data:post.link'><data:post.title/></a>
      <b:else/>
        <b:if cond='data:post.url'>
          <a expr:href='data:post.url'><data:post.title/></a>
        <b:else/>
          <data:post.title/>
        </b:if>
      </b:if>
    </h1>
  <b:else/>
    <h3 class='post-title'>
      <b:if cond='data:post.link'>
        <a expr:href='data:post.link'><data:post.title/></a>
      <b:else/>
        <b:if cond='data:post.url'>
          <a expr:href='data:post.url'><data:post.title/></a>
        <b:else/>
          <data:post.title/>
        </b:if>
      </b:if>
    </h3>
  </b:if>
</b:if>

Por supuesto, estos cambios deberán hacerse con prudencia, mirando bien qué códigos tenemos ahora porque pueden variar con las distintas plantillas. Lo importante es entender que lo que hacemos es poner una condición y duplicar el código actual, uno con H1 y el otro con H2 o H3. También deberemos agregar las propiedades de estilo adecuadas pero no hace falta duplicarlas. Buscamos todas las referencias que suelen estar en a .post h3 y le agregamos la nueva etiqueta:

.post h1, .post h3  { ....... }
.post h1 a, .post h1 a:visited, .post h3 a, .post h3 a:visited  { ....... }
.post h1 a:hover, .post h3 a:hover { ....... }

4. Un detalle que me comentaba SpamLoco y que también es importante es que en las plantillas de Blogger, la fecha de las entradas utiliza H2 lo cual les da una relevancia que no deberían tener:

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

En este caso, podemos cambiar esa etiqueta por otra cualquiera, un título menor como H4 o un párrafo P o un bloque DIV o SPAN:

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

Y también buscamos las propiedades CSS y cambiamos las referencia:

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

por la nueva:

h4.date-header { ....... }

Por último, también es Alejandro el que sugiere usar las llamadas etiquetas semánticas para resaltar los texto que contienen las entradas cuando estos textos son relevantes: y son las más comunes pero hay otras como <code> </code>, <kbd> </kbd>, <dfn> </dfn>, <acronym> </acronym> y <address> </address> (más información).

The PEN Story

2009-07-10T00:00:00.000-03:00

The PEN Story es una publicidad de las cámaras Olympus realizada con el método de stop motion que requirió de 60.000 fotografías y muchas horas de trabajo.

La música, producida por Michael Kadelbach puede ser descargada gratuitamente en formatos MP3 para para PC o ringtone.

Las miniaturas que no son miniaturas

2009-07-09T00:00:00.001-03:00

La pregunta era: "Aunque estoy usando miniaturas para mostrar imágenes que luego se abren en otra ventana, mi página tarda mucho en cargarse ¿Qué pasa?"

Buena pregunta, ¿qué pasa? ¿Acaso no se supone que de esa manera agilizamos la carga del sitio?

La respuesta es SI pero ... hay un error conceptual; el código es este:

<a href="mi_imagen" target="_blank">
  <img src="mi_imagen" width="128" height="128" />
</a>

¿Estamos cargando miniaturas? NO. Estamos cargando la imagen tal como es, en este caso, de 700x700 y le colocamos en la etiqueta los atributos width y height para que el navegdor la muestre más pequeña y ese es el problema. La muestra pequeña pero carga la grande.

Es un problema de sentido común. Hay un archivo que tiene una imagen, un único archivo. El navegador lo carga y una vez cargado, le decimos que lo muestre de alguna forma y los atributos width y height o las propiedades CSS equivalentes, sólo hacen eso. Podríamos decirle que lo recorte, que lo coloque acá o allá pero siempre sería ese archivo único de 700x700.

Claro, una imagen de ese tamaño demorará un poco pero, si hablamos de muchas imágenes, las cosas se complican. Sólo diez imágenes de ese tamaño significarán uno tres millones de bytes. Es un número sin significado aparente pero, imaginen que una plantilla tiene unos cien mil bytes, una librería como Prototype otro tanto ¡y nos preocupamos por su tamaño!

Para usar miniaturas debemos tener miniaturas, es decir, dos archivos, uno con la imagen original y otro con la imagen reducida y entonces sí, el código será parecido pero diferente:

<a href="mi_imagen" target="_blank">
  <img src="la_miniatura" width="128" height="128" />
</a>

Donde los atributos width y hight sólo son un apoyo que permite que el navegador reserve el espacio necesario para cargar la imagen miniatura que tiene 128x128.

Muchos servicios de alojamiento de imágenes como ImageShack, Photobucket o Picasa nos dan la dirección URL de la imagen original pero a la vez, crean miniaturas automáticas que podemos usar. Blogger hace lo mismo, al subir una imagen se generan miniaturas de distintos tamaños que podemos usar y que reducirán sustancialmente el tiempo de carga.

Esto, no significa que siempre debemos usar miniaturas, significa que debemos entender qué estamos haciendo y cómo funcionan las cosas. Cargar una imagen grande y mostrarla pequeña es una técnica aceptable, puede servir, por ejemplo, para usar un zoom sencillo:

En estos casos, cargamos la imagen más grande y luego la manipulamos. Si usáramos una miniatura, el efecto se perdería ya que debería cargarse la segunda imagen.

En resumen, ambas técnicas son aceptables y no tienen nada de malo. Sólo hay que entender qué hacen y usar las herramientas adecuadas.

Zoomy

2009-07-08T00:04:00.000-03:00

Otra más ... ya son muchas las ventanas modales y sumamos a Zoomy que es un pequeño script que permite mostrar imágenes y posee algunas caracteristicas singulares.

crea un thumbnail de manera automática así que sólo necesitamos la imagen original
permite el agregado de captions opcionales, textos a ser mostrados dentro de la ventana modal
es posible crear ventanas que pueden ser arrastradas

A decir verdad, no me convence mucho (por no decir nada) pero, cumplo con el pedido de explicarlo.

Para utilizarlo se requiere el framework Prototype y Scriptaculous (effect.js y dragdrop.js) todo eso, si no lo tenemos en la plantilla, lo podemos agregar mediante las APIs de Google. A mi entender, esta es la forma más sencilla de añadir estos scripts en Blogger, colocamos lo siguiente antes de </head>:

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

Luego, agregamos el script que podemos descargar desde la misma página en formato ZIP . Allí encontraremos un demo y también las imágenes necesarias (close.gif y zoomy.jpg).

Como para utilizarlo se requiere llamarlo mediante un código que Blogger malinterpreta, este otro ZIP contiene el script modificado. Alojamos los archivos en un servidor y lo cargamos:

<script src='URL_zoomy.js'></script>

Por ultimo, el CSS que podemos agregar directamente en la plantilla.

<style>
.zoomy, .zoomy2 {
  float: left;
  width: 100%;
}
.zoomy li, .zoomy2 li {
  display: inline;
  float: left;
  list-style: none;
  height: 100px;
  margin-bottom: 5px;
  margin-right: 5px;
  width: 150px;
}
.zoomy a, .zoomy2 a {
  display: block;
  background-position: center center;
  height:100px;
  text-decoration: none;
  text-indent: -9999px;
  width: 150px;
}
#zoomy {
  background: #000;
  border:1px solid #B3BEAD;
  color: #fff;
  line-height: 100%;
  padding: 5px;
  position: absolute;
}
#zoomy p {
  margin: 0;
  padding: 5px 5px 10px 5px;
  position: relative;
}
#close {
  background: url(URL_closes.gif) no-repeat;
  cursor:pointer;
  height: 12px;
  position: absolute;
  right: 5px;
  width: 12px;
}
</style>

El script es limitado ya que debemos llamar a una función cada vez que lo utilizamos:

<script>
  new Zoomy(element,{[opciones]});
<script>

donde las opciones son:

appearDuration el tiempo del efecto fade (por defecto es 0.5 segundos)
closeButton por defecto es false, poner en true para mostra el botón cerrar
draggable por defecto es false, poner en true para permitir que se arrastren
hideCaption por defecto es false, poner en true para mostrar textos

Lo usamos de esta manera::

<ul class="zoomy">
  <li>
    <a href="URL_cualquiera" style="background-image: url(URL_imagen1)" title="Demo 1">Ejemplo 1</a>
  </li>
  <li>
    <a href="URL_cualquiera" style="background-image: url(URL_imagen2)" title="Demo 2">Ejemplo 2</a>
  </li>
</ul>

El problema es que debemos definir esa función y el CSS cada vez que lo vamos a aplicar. En estos demos hay dos posibilidades, dos listas, una llamada zoomy y la otra zoomy2. Si quisiéramos otras, habría que agregarlas. Eso es lo que lo hace poco flexible y no muy recomendable aunque la idea en si misma es buena

En resumen, no me parece nada sencilla de utilizar.

Clock Clock

2009-07-08T00:00:00.000-03:00

The Clock Clock es un proyecto de unos diseñadores suecos llamados Humans since 1982 y son una serie de relojes controlados electrónicamente que juntos conforman un enorme reloj.

REFERENCIAS:tecnoculto.com

Wijits: El widget de Lijit (no es un trabalenguas)

2009-07-07T00:00:00.000-03:00

En Blogger Buzz parece que empezaron a publicitar widgets de empresas asociadas y en este caso, muestran Lijit, un servicio que funciona como buscador tanto de nuestro blog como de blogs externos, bookmarks y heerramientas sociales diversas.

Apenas entramos, nos pide que escribamos la URL de nuestro sitio y una vez detectado, nos lleva a la primera página de configuración; allí, podremos seleccionar algunos de los servicios que deseamos incluir: Delicious, digg, Stumble Upon, flickr, You Tube, Vimeo, My Space, Twitter, MyBlogLog, Tumblr, etc. Para cada uno de ellos nos solicitará nuestro nombre de usuario (no la contraseña) y verificará su existencia. Como dato extra, podemos agregar una URL o feed RSS extra escribiendo su dirección.

La segunda pantalla nos permite agregar otros usuarios, el blogroll de nuestro blog, sitios externos, etc.

Ahora, si aún no tenemos una cuenta, deberemos registrarnos para ingresar a la configuración del widget donde podremos elegir colores, skins, el ancho, la cantidad de resultados y una gran cantidad de opciones. Guardamos y listo. En cualquier momento, ingresando en nuestra cuenta, podremos volver a editarla sin que sea necesario modificar nada en el blog.

Para incluirlo, podemos elegir los modos automáticos o simplemente, copiar y pegar el código del script que nos proporcionan:

<script type="text/javascript" src="http://www.lijit.com/wijitinit?uri=http://Fwww.lijit.com/users/NOMBRE&amp;js=1"></script><a style='color: #999' href='http://www.lijit.com' id='lijit_wijit_pvs_link'>Lijit Search</a>

Lijit Search

Modificando las plantillas (Tutorial 6: Centrar)

2009-07-06T00:00:00.000-03:00

Cuando colocamos una plantilla o la modificamos y miramos el resultado, muchas veces, nos vamos a encontrar con una duda que puede transformarse en un error conceptual. Queremos cambiar fondos o tamaños pero ¿cuál es el blog? ¿Es todo eso que vemos en la pantalla del monitor? La respuesta es sí pero no.

Lo que vemos, en cualquier página web a la que accedemos es el contenido de la etiqueta BODY y, por lo general, nuestro blog está dentro de ella, definido con otro rectángulo al que, en Blogger, por defecto, se lo identifica como un DIV llamado outer-wrapper ¿Qué significa esto? Que el BODY es TODA la ventana del monitor, del nuestro pero también de los visitantes y allí nos encontramos con una primera cosa a tener en cuenta: las resoluciones de pantalla.

Es lógico que lo primero que se nos ocurre es que lo que ven los demás es lo mismo que vemos nosotros pero, eso no es así. Claro, cada usuario usa una resolución diferente y podemos suponer que sólo hay dos o tres posibilidades pero, si recorremos los resultados que muestran algunos servicio de estadísticas nos vamos a encontrar con datos que llaman la atención. Por ejemplo, miro lo que dice Google Analytics y dice que en el último mes, en este blog, los visitantes usaron ... 143 resoluciones de pantalla distintas. No dos o tres o cuatro o cinco sino 143.

Son demasiadas para tenerlas a todas en cuenta pero, de todas esas posibilidades, sólo debemos concentramos en los anchos ya que la altura no es relevante para diagramar nuestro sitio. Aún así hay casi 100 tamaños distintos. Un rápido ejemplo:

640 720 768 800 819 832 840 844 896 904 922 936 960 969 983 1000 1007 1016 1024 1037 1045 1069 1080 1088 1112 1117 1120 1126 1140 1143 1152 1170 1176 1192 1200 1229 1264 1241 1250 1263 1267 1276 1272 1280 1317 1344 1350 1360 1366 1372 1400 1408 1421 1435 1440 1451 1503 1512 1517 1536 1540 1568 1579 1600 1652 1680 1728 1772 1776 1920 2048 2304 2560 2880 3360 3840 ...

¿Para qué sirve saber esto? A mi juicio, para tres cosas:

decidir el ancho de nuestro sitio:
centrarlo en la pantalla de cualquier monitor:
poder agregarle fondos

Por supuesto, muchas de ellas son decisiones personales, en mi caso, si el 90% de los usuarios usa resoluciones iguales o mayores a 1024, ese valor debería ser el mínimo. Evidentemente, tal como vienen las cosas, es probable que en poco tiempo más, incluso eso sea escaso ya que hablar de resoluciones de 1280, 1440 o 1680 se está haciendo cada vez más común. Para un usuario novel, este es un problema serio porque todas las plantillas que provee Blogger están pensadas para resoluciones de 800 y por lo tanto, hoy por hoy son demasiado angostas. Incluso muchas plantillas que vemos en distintos sitios de descargas siguen con ese criterio y me parece un error que no suele ser sencillo de corregir (Modificando las plantillas (Tutorial 1: Anchos)).

¿Cómo es eso de centrar el blog? ¿Centrarlo con respecto a qué?

Miremos la pantalla. Todo lo que nos muestra el navegador es el BODY, su ancho es siempre igual al ancho de la resolución de pantalla. Es un gran rectángulo que medirá cierta cantidad de pixeles. Nuestro blog quedará dentro de eso así que podríamos ver diferentes cosas en diferentes monitores:


800x600	1024x768

1280x960

1680x1050

Si el blog no está centrado, veremos esto:

Cuando escribimos un post, tal vez, si no hay remedio, podemos usar alguna etiqueta poco recomendable como <center> </center> porque no se nos ocurre nada mejor o no encontramos una solución; no es lo más recomendable pero bueno ... Sin embargo, al diagramar plantillas, esa etiqueta debe desterrarse, el diseño (layout) de una plantilla debe ser claro, simple y estar basado en DIVs (rectángulos identificados con un nombre único) cuyas propiedades deben ser establecidas con CSS. Haciendo eso, tendremos un sitio flexible, fácil de editar y accesible desde cualquier navegador.

El BODY no tiene un ancho fijo, y usar la propiedad text-align: center para centrar el blog no servirá. Lo que debemos centrar es el rectángulo exterior, el primer DIV, el que por defecto se llama outer-wrapper.

Para centrar DIVs tampoco usamos text-align: center porque eso, centra el contenido de ese rectángulo pero no el rectángulo en si mismo. Para centrarlos debemos darle un ancho (width) y utilizar la propiedad margin. Así que, como mínimo, una plantilla debería tener establecidas estas propiedades:

#outer-wrapper {
  .......
  margin: 0 auto;
  position: relative;
  width: VALORpx;
}

De este modo, sin importar el VALOR, el blog estará centrado en la pantalla del monitor a menos, claro, que alguien utilice resoluciones menores que ese ancho en cuyo caso, aparecerá una barra de desplazamiento horizontal.

Ernie Kovacs

2009-07-05T00:00:00.000-03:00

Click para ejecutar el video.

REFERENCIAS:Ernie Kovacs (1919 – 1962)

Wallpapers (geeky)

2009-07-04T00:00:00.000-03:00

Agregar listas de reproducción con divShare

2009-07-03T00:00:00.000-03:00

Una de las formas más sencillas de crear listas de reproducción de audio es utilizar divShare, un servico gratuito que admite alojar casi cualquier tipo de archivo y que nos ofrece 5GB de espacio disponible y 10GB de tasa de transferencia. Una vez que nos registramos podemos crear carpetas y organizar los documentos para que sean de acceso público o privado.

Por defecto ya hay pestañas para imágenes, audio y video así que vamos a la de audio, creamos una carpeta y comenzamos a subir archivos seleccionándonos desde nuestra PC.

Podemos usar el Upload Standard o el modelo avanzado de Drag-and-Drop que es similar a lo que haríamos con un cliente FTP. En todos los casos, una vez subidos los archivos, podemos seleccionarlos y moverlos de una carpeta a otra sin mayores problemas ya que el uso de las herramientas es muy intuitivo.

Aunque para el caso de audios esto no tiene importancia, hay que tener en cuenta que el tamaño máximo de los archivos individuales es de 200MB.

Utilizando la opción Organize this Playlist podemos reordenar los archivos, cambiarles el nombre, agregarle etiquetas, etc.

Si hacemos click en Share nos mostrará la URL de descarga y un código que debemos copiar y pegar donde quisiéramos colocar el reproductor.

Como cualquier otro reproductor de Flash, basta conocer los datos para utilizar cualquier otro código, en este caso, width="335" y height="85" son el tamaño que podemos cambiar a nuestro gusto y la URL del reproductor en si mismo está en el atributo value:
http://www.divshare.com/flash/playlist?myId=XXXXXXXXXXX
donde lo único que cambiará serán esos caracteres del ID.

<object height="155" width="260" type="application/x-shockwave-flash" data="http://www.divshare.com/flash/playlist?myId=XXXXXXXXXXX"><param name="movie" value="http://www.divshare.com/flash/playlist?myId=XXXXXXXXXXX" /></object>

También podríamos utilizar alguna ventana modal como LightWindow para mostrar el reproductor, de la misma forma en que podemos hacerlo con videos: Click para abrir la lista de reproducción.

GPhotospace: Usar GMail para crear álbumes de imágenes

2009-07-02T00:02:00.001-03:00

Más de 7000MB de espacio disponible y la posibilidad de adjuntar archivos de 25MB hacen que GMail sea un espacio ideal para guardar cosas aunque, claro, limitada por las dificultades a la hora de compartirlas. Muchos lo usamos como backup de ciertas cosas y ahora, GPhotospace viene a darle una nueva vuelta de tuerca, agregándole la posibilidad de crear álbums de fotos que pueden ser accesibles a través de invitaciones personales.

Lo instalamos como cualquier otra extensión de Firefox y la versión más reciente incluye soporte para móviles y la opción de subir imágenes a Blogger, Flickr y otros sitios que admitan la posibilidad de agregar imágenes via mail.

Veremos entonces el ícono en la barra de estado o podemos ingresar a través del menú Herramientas. Nos abrirá una página donde colocaremos la cuenta a utilizar y listo. Lo que se nos mostrará es una ventana similar a la del cliente correo donde podemos crear albums, agregar imágenes, quitarlas, etc.

Share es la forma de invitar a otros usuarios enviándoles un mail en el cual las imágenes seran archivos adjuntos y por lo tanto, puede usarse cualquier cliente de correo y cualquier navegador para acceder a ellas sin necesidad de tener instalada la extensión aunque, si también la utilizan, ingresarán directamente al album.

REFERENCIAS:ghacks.net

Mundo curioso

2009-07-02T00:00:00.000-03:00

Las miniaturas de YouTube

2009-07-01T00:00:00.000-03:00

Utilizar las miniaturas automáticas que provee YouTube es sencillo, hace poco, mostraba la forma de emplearlas para armar listas de videos sin necesidad de insertarlos lo que ayuda a reducir el tiempo de carga de las páginas.

Esas miniaturas son automáticas, basta saber el ID del video para generar la URL de las imágenes:

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

Estas tres son miniaturas de 130x97 pixeles aproximadamente:

http://img.youtube.com/vi/jEOkxRLzBf0/1.jpg
http://img.youtube.com/vi/jEOkxRLzBf0/2.jpg
http://img.youtube.com/vi/jEOkxRLzBf0/3.jpg

No son las únicas. En nealgrosskopf.com nos muestran varias más.

La imagen por defecto es elegida por quien sube el video. Se corresponde con la miniatura 2.jpg pero tiene 120x90 pixeles, la encotramos en esta URL:

http://img.youtube.com/vi/jEOkxRLzBf0/default.jpg

Hay otra de mayor tamaño llamada 0.jpg que tiene 320x240 pixeles:

http://img.youtube.com/vi/jEOkxRLzBf0/0.jpg

Así como hay videos de alta definición, también hay imágenes de 130x97 de alta definicion, son hq1.jpg y hq3.jpg:

http://img.youtube.com/vi/jEOkxRLzBf0/hq1.jpg
http://img.youtube.com/vi/jEOkxRLzBf0/hq3.jpg

La imagen hq2.jpg es más grande, tiene 480x360 pixeles lo mismo que la imagen hqdefault.jpg que es la que tiene la mayor definición:

http://img.youtube.com/vi/jEOkxRLzBf0/hq2.jpg
http://img.youtube.com/vi/jEOkxRLzBf0/hqdefault.jpg

En todos los casos, nos basamos en el ID del video y usamos como base la URL:

http://img.youtube.com/vi/.......

aunque tmabién pue de usarse esta otra:

http://i.ytimg.com/vi/.......

Insertar Flash en el blog

2009-06-30T00:03:00.000-03:00

Parece que incluir archivos de Flash siempre trae complicaciones. No es difícil pero nos lo hacen difícil porque cada servicio nos da instrucciones diferentes. Unos usan OBJECT, otros EMBED, otros ambas. Aparecen cosas misteriosas y crípticas como:

classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"

o:

codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0"

Suelen ser códigos que ocupan varias líneas y ¡vaya uno a saber que dicen!

<object width="600" height="300" type="application/x-shockwave-flash" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0"><param name="movie" value="http://.../achivo.swf" /><param name="quality" value="high" /><embed src="http://.../achivo.swf" quality="high" type="application/x-shockwave-flash" width="600" height="300"></embed></object>

Veamos el más común, el que nos da YouTube:

<object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/jkTNe85y0UI&hl=es&fs=1&"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/jkTNe85y0UI&hl=es&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object>

¡Otra vez distinto!

Así que mejor colocarlos como están y listo pero claro, a veces no funcionan y entonces, más que asustarse, lo mejor es tratar de entenderlos y si lo conseguimos, nos daremos cuenta que ... no los necesitamos.

La etiqueta HTML para insertar archivos de Flash (SWFs, reproductores de audio, reproductores de video, etc) es OBJECT. Como toda etiqueta, se abre y se cierra:

<object .......>
  .......
</object>

Dentro de ella, se colocan parámetros, datos extras que son necesarios o que son optativos:

<object .......>
  <param name="NOMBRE" value="VALOR" />
</object>

Como PARAM es una etiqueta "sin contenido", no es necesario agregar la etiqueta de cierre </param> y es suficiente agregar la barra final en la misma etiqueta de apertura; es lo mismo que pasa con otras como <img ... /> <meta ... /> <input ... />

¿Y la etiqueta EMBED? La respuesta rápida es NO EXISTE Es que en realidad, es un rezago del tiempo en que Microsoft y Netscape se mataban para crear funciones diferenciadas y cada uno inventaba algo que el otro copiaba pero con otro nombre. El resultado de esa guerra es la falta de estandarización y las incompatibilidades entre los navegadores. Si nos basamos en las recomendaciones de la w3org (y deberíamos hacerlo), EMBED es una etiqueta "prohibida" y, en este caso, no se trata de un capricho sino de simple comodidad ¿para qué escribir dos cosas si basta escribir una sola?

Es cierto que las diferencias entre navegadores hace que unos no interpreten lo mismo que los otros pero la etiqueta OBJECT contempla esa diferecencia así que es sencillo de resolver.

<object type="application/x-shockwave-flash" data="http://.../archivo" width="ANCHO" height="ALTO">
  <param name="movie" value="http://.../archivo" />
</object>

Si tuviéramos que insertar un archivo de YouTube, bastarían esas tres líneas para que pudiéramos verlo:

type es un atributo obligatorio y le indica al navegador, cuál es el tipo de formato que debe incrustar
data es un atributo donde colocamos la URL del archivo a reproducir y ese dato es el que reemplaza a la etiqueta EMBED
width y height son el ancho y el alto del archivo (medido en pixeles) y son valores que podemos cambiar

En una etiqueta PARAM colocamos otra vez la URL del archivo a reproducir porque esa es la que leerá Internet Explorer.

Así que esto, mostraría un video de YouTube sin problemas; más corto, imposible:

<object width="425" height="350" type="application/x-shockwave-flash" data="http://www.youtube.com/v/jkTNe85y0UI"><param name="movie" value="http://www.youtube.com/v/jkTNe85y0UI" /></object>

Claro que hay más opciones, cada una de ellas se agrega en una etiqueta PARAM siempre con la misma sintaxis, colocando el nombre del atributo y su valor:

bgcolor establece el color de fondo (valor hexadecimal) si es que el SWF es transparente
wmode define al fondo como transparente (transparent) u opaco (opaque); también hay un valor extra llamado window
menu habilita (true) o deshabilita (false) el menú contextual sobre las películas
quality calidad de salida de la película (low, high, autolow, autohigh, best)
allowFullScreen habilita (true) o deshabilita (false) la posibilidad de ver a pantalla completa

Ejemplos:

<param name="bgcolor" value="#000000" />
<param name="wmode" value="transparent" />
<param name="menu" value="false" />
<param name="quality" value="high" />
<param name="allowFullScreen" value="false" />

La etiqueta OBJECT tiene otros atributos como ID, CLASS y ALIGN que son comunes a casi todas las etiquetas, y otros especiales:

classid identifica el control ActiveX y por lo tanto sólo se aplica a IE. Es un atributo innecesario, aún en Internet Explorer
codebase es la ubicación donde puede descargarse ese control ActiveX en caso que el navegador no disponga de él (en la etiqueta EMBED se usaba pluginspage)

Las etiquetas PARAM tienen opciones diversas (más información):

play indica si la película comienza a reproducirse de manera automática (true) o no (false)
loop indica si la película se repite de manera automática (true) o no (false)
scale especifica la forma en que se manejarán los tamaños (default, showall, noborder, exactfit)
base indica el directorio base para resolver paths relativos
flashvars contiene una serie de variables qie son pasadas al reproductor

Muchas veces, cuando el archivo de Flash contiene ciertas instrucciones, requiere que se le de permiso. Para eso, hay un parámetro específico llamado allowScriptAccess que, por defecto tiene un valor de sameDomain:

<param name="allowScriptAccess" value="sameDomain" />

Eso es lo que ocurre cuando se agregan menus realizados con Flash; no funcionan a menos que permitamos que se comuniquen. Los valores posibles son:

never impide el acceso a scripts de cualqueir tipo
always permite el acceso (es el valor por defecto en las viejas versiones)
sameDomain permite el acceso a scripts ubicados en el mismo dominio de la página

Así que en esos casos, debemos agregarle esto y todo funcionará:

<param name="allowScriptAccess" value="always" />

Coraje es ...

2009-06-30T00:00:00.001-03:00

Coraje es invertir en la gente.descargar imagen original


Coraje es proteger la naturaleza.	Coraje es considerar a los más pequeños.

Coraje es favorecer el transporte público.	Coraje es comprender la diversidad.

REFERENCIAS:Afiches publicitarios de la Agencia Taivas para el Partido Verde de Finlandia

Cambiar el widget de Archivos por un Calendario

2009-06-29T00:00:00.001-03:00

En una de las últimas entradas de BloggerSPhera nos muestran la forma de modificar la forma en que vemos el elemento Archivos de Blogger, reemplazando las listas por un calendario.

Aunque no lo he implementado acá, en este blog de pruebas se lo puede ver funcionando y quedará algo así:

Lo que veremos será un control para seleccionar el mes, un calendario donde estarán resaltados los días donde existan entradas en ese mes, una barra de navegación para avanzar y retroceder mes a mes y debajo, una lista con los enlaces a las entradas correspondientes. Tanto con el selector como con los enlaces de navegación, podremos desplazarnos a lo largo de las listas de archivos, sin cambiar de página.

Para aplicarlo, lo primero es descargar el script correspondiente que está en este archivo ZIP , ya traducido al español. Aunque no es necesario modificarlo para que funcione, podría editarse y cambiarse algunos detalles como los textos que se muestran por defecto.

Podemos agregarlo de dos maneras, lo alojamos en un servidor o bien copiamos y pegamos el contenido dentro de estas etiquetas, justo antes de </head>:

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

Inmediatamente después, agregamos la llamada a la función con esto:

<script chartset='utf-8' src='/feeds/posts/summary?max-results=0&amp;alt=json-in-script&amp;callback=timezoneSet'/>

Ahora, con los artilugios expandidos, vamos a buscar el widget de Archivos:

<b:widget id='BlogArchive1' locked='false' title='XXXXXXX' type='BlogArchive'>
  .......
</b:widget>

Eliminaremos todo lo que está entre la apertura y el cierre de la etiqueta y lo reemplazaremos. Terminará quedando esto:

<b:widget id='BlogArchive1' locked='false' title='NOMBRE' type='BlogArchive'> 
<b:includable id='toggle' var='interval'> <!-- Toggle not needed for Calendar --> </b:includable>
<b:includable id='interval' var='intervalData'> </b:includable>
<b:includable id='flat' var='data'>
 <div id='bloggerCalendarList'>
  <ul>
    <b:loop values='data:data' var='i'>
      <li class='archivedate'>
        <a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>)
      </li>
    </b:loop>
  </ul>
 </div>
  <div id='blogger_calendar' style='display:none'>
    <table id='bcalendar'><caption id='bcaption'></caption>
      <thead id='bcHead'/>
      <tbody><tr><td id='cell1'> </td><td id='cell2'> </td><td id='cell3'> </td><td id='cell4'> </td><td id='cell5'> </td><td id='cell6'> </td><td id='cell7'> </td></tr>
<tr><td id='cell8'> </td><td id='cell9'> </td><td id='cell10'> </td><td id='cell11'> </td><td id='cell12'> </td><td id='cell13'> </td><td id='cell14'> </td></tr>
<tr><td id='cell15'> </td><td id='cell16'> </td><td id='cell17'> </td><td id='cell18'> </td><td id='cell19'> </td><td id='cell20'> </td><td id='cell21'> </td></tr>
<tr><td id='cell22'> </td><td id='cell23'> </td><td id='cell24'> </td><td id='cell25'> </td><td id='cell26'> </td><td id='cell27'> </td><td id='cell28'> </td></tr>
<tr><td id='cell29'> </td><td id='cell30'> </td><td id='cell31'> </td><td id='cell32'> </td><td id='cell33'> </td><td id='cell34'> </td><td id='cell35'> </td></tr>
<tr id='lastRow'><td id='cell36'> </td><td id='cell37'> </td></tr></tbody>
    </table>
    <table id='bcNavigation'><tr><td id='bcFootPrev'/><td id='bcFootAll'/><td id='bcFootNext'/></tr></table>    
      <div id='calLoadingStatus' style='display:none; text-align:center;'>
        <script type='text/javascript'>bcLoadStatus();</script>
      </div>
      <div id='calendarDisplay'/>
    </div>
    <script type='text/javascript'> initCal();</script>
</b:includable>
<b:includable id='menu' var='data'>  </b:includable>
<b:includable id='posts' var='posts'> <!-- posts not needed for Calendar --> </b:includable>
<b:includable id='main'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
  <div class='widget-content'>
  <div id='ArchiveList'>
  <div expr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'>
    <b:if cond='data:style == &quot;HIERARCHY&quot;'>
     <b:include data='data' name='interval'/>
    </b:if>
    <b:if cond='data:style == &quot;FLAT&quot;'>
      <b:include data='data' name='flat'/>
    </b:if>
    <b:if cond='data:style == &quot;MENU&quot;'>
      <b:include data='data' name='menu'/>
    </b:if>
  </div>
  </div>  
  </div>
</b:includable>
</b:widget>

Guardamos y para que esto funcione, deberemos verificar que la configuración del widget sea correcta y esté seleccionada Lista:

Estilo Jerarquía Lista Menú desplegable

Sólo nos faltaría establecer las propiedades CSS para el calendario, eso lo hacemos agregando el estilo antes de </b:skin>:

#blogger_calendar { /* es el bloque donde lo mostraremos */
  margin:0 auto; /* centrado */
  width: 190px; /* el ancho */
}

#bcaption { /* el rectángulo superior con los meses */
  height:20px;
  text-align:right;
}
#bcaption select { /* este es el selector de los meses */
  background-color: #345;
  border: 1px solid #567;
  color: #DDD;
  font-family:Tahoma;
  font-size:11px;
  padding: 0 0 0 10px;
  width:100px
}

table#bcalendar thead tr th { /* cada una de las celdas con los nombres de los dias de la semana */
  background: #345;
  border: 1px solid #567;
  color: #EEE;
  font-family: Tahoma; 
  font-size: 11px; 
  font-weight: bold;
  padding: 2px; 
  text-align: center;
  width: 20px;
}

table#bcalendar tbody tr td { /* cada celda con el número del dia */
  background: #567;
  border: 1px solid #789;
  color: #ABC;
  text-align: center;
  padding: 2px;
  -moz-border-radius: 2px;
}

td.highlightCell { /* las celdas donde hay entradas */
  background-color: #9AB !important;
}
table#bcalendar tbody tr td a { /* el enlace de esas celdas */
  color: #000;
  font-weight: bold; 
}

td.firstCell { /* las celdas vacias del inicio */
  visibility: hidden; /* podemos hacerlas visibles usando visible */
}
td.emptyCell { /* las celdas vacias del final */
  visibility: hidden;  /* podemos hacerlas visibles usando visible */
}
td.filledCell {background: #FFF;} /* el color de esas celdas vacias si es que están visibles */

table#bcNavigation  { /* es la barra de navegación inferior */
  color: #DDD;
  background-color: #123;
  border: 1px solid #234;
  font-family:Tahoma;
  font-size:10px;
  margin: 5px 0 0 0;
  padding: 0 ;
  text-align:center;
  width:190px;
}
table#bcNavigation a {color: #ABC;} /* el color del texto */
td#bcFootPrev {float: left; width: 10px;}  /* el enlace hacia atrás */
td#bcFootNext {float: right; width: 10px;}  /* el enlace hacia adelante */
#calendarDisplay{ /* debajo se muestra la lista de entradas */
}

/* esta es la lista inferior donde se muestran las entradas del mes */
ul#calendarUl { }
ul#calendarUl li { }
ul#calendarUl li a { /* cada item de la lista es un enlace */
  color: #9AB;
display: block;
  font-size:11px;
  padding-left:30px;
}

REFERENCIAS:BloggerSPhera

Internet Archive: Videos clásicos

2009-06-28T00:00:00.000-03:00

Así como podemos usar la WaybackMachine para ver lo que era la web en tiempos tan remotos como hace tan solo un par de años y recorrer blogs pero en sus versiones de junio del 2007 o sitios famosos como YouTube en el 2005, esa no es la única de las posibilidades que tiene el sitio de Internet Archive. También posee un buscador de libros y documentos de textos, otro especializado en software legal con subsecciones como open-source o videogames y otro de audios que van desde audio-libros hasta viejas transmisiones radiales.

Y como si fuera poco, también hay una sección de imágenes, películas y videos, una librería con varios miles de clásicos subidos por los usuarios y muchos de ellos posibles de ser descargados por cualquiera: Animation & Cartoons, Arts & Music, Computers & Technology, Cultural & Academic Films, News & Public Affairs, Non-English Videos, Open Source Movies, Vlogs.

No es sencillo encontrar algo porque abruma la cantidad pero es un sitio a tener muy en cuenta.

Wallpapers (IPhone 2)

2009-06-27T00:05:00.000-03:00

Click en la imagen para previsualizar un modelo reducido.



Descargar el archivo ZIP que contiene las imágenes

REFERENCIAS:extraverage.net

¿Qué es un referrer?

2009-06-26T00:02:00.000-03:00

Eso de los códigos misteriosos hizo que alguien preguntar ¿qué es document.referrer?

En JavaScript hay un "objeto" llamado document que es una referencia a la página que estamos viendo; con eso, podemos modificarla:

document.write("HOLA");

u obtener alguna información como por ejemplo:

document.bgColor es el color de fondo [click]
document.domain es el dominio del servidor [click]
document.location la URL [click]
document.title el titulo de la página [click]
document.referrer es la página de la que viene el usuario [click]

Así que, consultando el dato de document.referrer sabremos si se ha ingresado desde otro blog, desde algún enlace externo o si llegó desde un buscador en cuyo caso también nos dirá qué estaba buscando.

Es fácil comprobarlo, si agregáramos un elemento HTML a nuestro blog y allí pusiéramos esto:

<script type="text/JavaScript">document.write(document.referrer)</script>

estaríamos mostrándo a quien ingresa, desde donde viene o nada si es que es un ingreso directo.

¿Para que sirve saber eso? Muchos lo utilizan para mostrar determinado contenido en función del acceso; por ejemplo, es común que ciertos sitios coloquen publicidad cuando se ingresa a través de buscadores pero no lo hagan si se ingresa de otro modo, es una forma de privilegiar a los usuarios habituales. Del mismo modo hay decenas de ejemplos en la web que juegan con ese dato.

En netmechanic.com proponen algunos métodos sencillos, por ejemplo, un mensaje de bienvenida:

<script type="text/JavaScript">
  if (document.referrer != '') {
    alert('Gracias por visitarnos desde '+document.referrer);
  }
</script>

Claro que esto así puesto daría como resultado cosas un poco extrañas :)

Otra forma de usarlo es para dirigir a los visitantes a otra página

<script type="text/JavaScript">
  if (document.referrer = 'http://deDondeVienen") {
    location.href = "http://aDondeRedirigimos";
  }
</script>

No es muy agradable hacer eso, en todo caso, es mejor mostrar un pop-up:

<script type="text/JavaScript">
  function newWindow(newContent) {
    if (document.referrer = 'http://deDondeVienen") {
      winContent = window.open(newContent, 'nextWin', 'right=0,top=20,width=350,height=350,toolbar=no,scrollbars=no,resizable=no')  
    }
  }
  newWindow('URL_contenido')"
</script>

En webtaller.com hay más opciones, una de ellas es más razonable ya que filtra los resultados:

<script type='text/JavaScript'>
//<![CDATA[
  // creamos una lista de direcciones web que nos interese detectar, cualquiera sea
  var procedenciaValida = new Array(
    'http://www.google',
    'http://bing.com',
    'http://twitter.com'
  );
  // creamos una lista de mensajes para cada una de esas direcciones
  var mensajeValido = new Array(
    'Llegó utilizando el buscador de Google',
    'Llegó utilizando el nuevo buscador de Microsoft',
    'Hizo click en un enlace de Twitter'
  );
  // verificamos si el visitante llega desde alguna de ellas
  var ok = false;
  var elMensaje = 0;
  for(i in procedenciaValida) {
    if(document.referrer.indexOf(procedenciaValida[i]) > -1) {
      ok = true; // si es así será true
      cual = i;
    }
  }
  // y si es así, hacemos algo
  if(ok) {
    document.write(mensajeValido[cual]);
  }
//]]>
</script>

Ese "algo" a hacer puede ser cualquier cosa, un texto, una imagen, una ventana, un elemento oculto, sólo hay que usar la imaginación.

Un buscador completo

2009-06-26T00:00:00.000-03:00

Google sabe todo, hasta donde dejamos esas cosa que siempre se pierden ...

Personalizar la Barra de Videos de Google

2009-06-25T00:00:00.001-03:00

Entre los gadgets que se incluyen en Blogger hay uno llamado Barra de Videos. Es sencillo de usar, hacemos click y nos muestra una serie de opciones; podemos ponerle un título, seleccionar si queremos mostrar los videos más vistos de YouTube o los más valorados o los más recientes. También podemos elegir mostrar canales de usuarios o videos relacionados con ciertas palabras clave.

El resultado, será una barra vertical, nada configurable ya que el códiog que veremos en la plantilla poco dice.

Pero ese no es el único modo. El mismo gadget está disponible en Google AJAX Search API y allí, las alternativas son otras e incluso, con paciencia podríamos configurlarla modificando determinadas cosas.

La primera gran diferencia es que podemos elegir otro modelo y en lugar de ser vertical, ubicarla de manera horizontal. En el wizard, vamos seleccionando opciones y previsualizando el resultado. Por ejemplo, si sólo queremos mostrar nuestro canal, bastará escribir el nombre y desmarcar todo lo demás. Si quisiéramos mostrar varios canales de usuarios, deberíamos ponerlos separados por comas. Una vez que lo tenemos configurado, le pedimos que nos muestre el código a insertar.

<!-- ++Begin Video Bar Wizard Generated Code++ -->
  <!--
  // Created with a Google AJAX Search Wizard
  // http://code.google.com/apis/ajaxsearch/wizards.html
  -->

  <!--
  // The Following div element will end up holding the actual videobar.
  // You can place this anywhere on your page.
  -->
  <div id="videoBar-bar">
    <span style="color:#676767;font-size:11px;margin:10px;padding:4px;">Loading...</span>
  </div>

  <!-- Ajax Search Api and Stylesheet
  // Note: If you are already using the AJAX Search API, then do not include it
  //       or its stylesheet again
  -->
  <script src="http://www.google.com/uds/api?file=uds.js&v=1.0&source=uds-vbw"
    type="text/javascript"></script>
  <style type="text/css">
    @import url("http://www.google.com/uds/css/gsearch.css");
  </style>

  <!-- Video Bar Code and Stylesheet -->
  <script type="text/javascript">
    window._uds_vbw_donotrepair = true;
  </script>
  <script src="http://www.google.com/uds/solutions/videobar/gsvideobar.js?mode=new"
    type="text/javascript"></script>
  <style type="text/css">
    @import url("http://www.google.com/uds/solutions/videobar/gsvideobar.css");
  </style>

  <style type="text/css">
    .playerInnerBox_gsvb .player_gsvb {
      width : 320px;
      height : 260px;
    }
  </style>
  <script type="text/javascript">
    function LoadVideoBar() {

    var videoBar;
    var options = {
        largeResultSet : !true,
        horizontal : true,
        autoExecuteList : {
          cycleTime : GSvideoBar.CYCLE_TIME_MEDIUM,
          cycleMode : GSvideoBar.CYCLE_MODE_LINEAR,
          executeList : ["ytchannel:nombre"]
        }
      }

    videoBar = new GSvideoBar(document.getElementById("videoBar-bar"),
                              GSvideoBar.PLAYER_ROOT_FLOATING,
                              options);
    }
    // arrange for this function to be called during body.onload
    // event processing
    GSearch.setOnLoadCallback(LoadVideoBar);
  </script>
<!-- ++End Video Bar Wizard Generated Code++ -->

Así como está, la podríamos agregar en un elemento HTML y listo pero vamos a ver si podemos modificarle un poco; para eso, hay una página de ayuda del mismo Google donde se enumeran algunas alternativas.

Esta es la idea:

<!-- aquí colocaremos los estilos CSS personales -->
<style type='text/css'
  /* ... ver detalles ... */
</style>

<!-- este es el contenedor donde se mostrará la barra -->
<div id="videoBar-bar"> <span>Cargando ...</span> </div>

<!-- aquí se carga el API de búsqueda de Google, si ya lo estamos usando no es necesario incluirlo otra vez -->
<!-- el CSS de ese API no es necesario en absoluto así que no lo incluyo -->
<script src="http://www.google.com/uds/api?file=uds.js&v=1.0&source=uds-vbw" type="text/javascript"></script>

<!-- aquí se cargan los scripts del API -->
<script type="text/javascript"> window._uds_vbw_donotrepair = true; </script>
<script src="http://www.google.com/uds/solutions/videobar/gsvideobar.js?mode=new" type="text/javascript"></script>
<!-- aquí se cargaría el estilo gsvideobar.css pero prefiero agregarlo por separado así que lo ignoro -->

<!-- la función que ejecuta el script -->
<script type="text/javascript">
  function LoadVideoBar() {
  var videoBar;
  var options = {
      largeResultSet : !true, horizontal : true, autoExecuteList : {
      cycleTime : GSvideoBar.CYCLE_TIME_MEDIUM,
      cycleMode : GSvideoBar.CYCLE_MODE_LINEAR,
      executeList : ["ytchannel:NOMBRE"] }
    }
    videoBar = new GSvideoBar(document.getElementById("videoBar-bar"), GSvideoBar.PLAYER_ROOT_FLOATING, options);
  }
  // esta función se cargará al terminar la carga del blog
  GSearch.setOnLoadCallback(LoadVideoBar);
</script>

videoBar-bar es un DIV donde se mostrará la barra una vez cargada y puede tener cualquier otro nombre.

Para indicar qué cosas queremos mostrar usamos la línea que dice executeList : [], allí, podemos colocar un canal:
executeList : ["ytchannel:NOMBRE"]
o varios canales:
executeList : ["ytchannel:unNOMBRE","ytchannel:otroNOMBRE"]
o usar palabras claves:
"ytfeed:most_viewed.this_week" es la opción Most Viewed Videos
"ytfeed:top_rated.this_week" es la opción Top Rated Videos
"ytfeed:google_news" es la opción Top News Videos
"ytfeed:recently_featured" es la opción Recently Featured Videos
y todos son combinables, así que podemos usar varios, sólo hay que separarlos con comas.

Lo mismo hacemos si queremos agregar expresiones de búsqueda, basta colocarlas entre comillas:
executeList : ["ytchannel:NOMBRE",,"beatles"]

Como dije, el CSS por defecto se carga si incluimos gsvideobar.css pero, prefiero no hacerlo y agregarlo a mano para personalizarlo:

/* el rectángulo donde mostraremos la barra de videos */
#videoBar-bar {margin: 0 auto; width: 425px;}
#videoBar-bar span {color: #BB0000; font-size: 11px;}

/* los colores de los enlaces y los textos */
.playerBox_gsvb div.alldone_gsvb, .playerBox_gsvb a.title_gsvb {color:#DEF;}
.playerBox_gsvb div.alldone_gsvb:hover, .playerBox_gsvb a.title_gsvb:hover {color:#FFF;}

/* cada una de las miniaturas */
.resultsBox_gsvb div.resultDiv_gsvb {border-color: #789; margin-left: 2px;}

/* la ventana modal donde se muestran los videos */
.floatingPlayerBox_gsvb, .floatingPlayerBox_gsvb * {background-color: #345;}
.floatingPlayerBox_gsvb {border: 1px solid #567; -moz-border-radius: 10px;}
.floatingPlayer_gsvb {background-color: #123; -moz-border-radius: 5px;}
.floatingPlayerBox_gsvb {opacity: 0.8; position: absolute; z-index: 9998;}
.floatingPlayer_gsvb {position: absolute; z-index: 9999;}
.floatingBranding_gsvb {position: absolute;}

/* contrl de esa ventana con el reproductor */
.playerBox_gsvb {display:block; margin: 5px 10px 5px 10px; text-align: center;}
.idle_gsvb {display: none;}
.playing_gsvb {display: block;}

/* es el reproductor en si mismo */
/* small: 180x135, medium: 260x195, large player: 320x260, extra large: 480x380 */
.playerInnerBox_gsvb .player_gsvb {height: 260px; width: 320px;}
.playerInnerBox_gsvb div.player_gsvb {margin: auto;}
.floatingPlayer_gsvb .playerInnerBox_gsvb div.player_gsvb {margin: 0;}
.playerBox_gsvb div.alldone_gsvb {cursor: pointer; display: inline; font-size: 11px;}
.playerBox_gsvb div.title_gsvb {font-size: 11px; margin-top: 2px; text-align: center;}

/* la tabla donde se muestran las cuatro miniaturas */
.full_gsvb {display: block;}
.empty_gsvb {display: none;}
table.resultTable_gsvb {border-collapse: collapse;}
table.resultTable_gsvb td {border: none;}
div.resultDiv_gsvb {background-color: #000; border: 1px solid; height: 79px; text-align: center; width: 104px;}
div.smallResultDiv_gsvb {height: 41px; text-align: center; width: 54px;}
div.resultDiv_gsvb img {cursor: pointer; display: inline;}

/* Auto Execute List Status Box (no sé qué es) */
div.statusBox_gsvb {padding: 4px;}
div.statusItem_gsvb {color: #DEF; cursor: pointer; display: inline; font-weight: bold; margin-right: 6px; white-space: nowrap;}
div.statusItemSelected_gsvb {color: #000; text-decoration: none;}

/* y le quitamos el logo :$ */
.gsc-branding{display: none;}

Y este sería el resultado del experimento:

Cargando ...

FilesTube: Usar lo que la web provee

2009-06-24T00:03:00.000-03:00

FilesTube no tiene nada que ver con YouTube, sólo es un buscador de todo tipo de archivos con características particulares como la posibilidad de usar esos archivos en nuestras páginas. No aloja archivos, sólo los busca y nos dice donde están y de dónde podemos descargarlos.

Aunque podemos usarlo libremente, al registrarnos gratuitamente accedemos a algunas de las funciones como historial, crear listas de reproducción de audio o video y la posibilidad de incrustar reproductores.

El proceso es sencillo y está explicado en esta página. Como los MP3s a reproducir se encuentran en "alguna parte" de la web, pueden "desaparecer" pero las listas son editables así que podemos cambiarlas cuantas veces se nos ocurra.

Una nueva etiqueta de Blogger: isFirstPost

2009-06-24T00:00:00.000-03:00

Otra vez es Ariane quien ha descubierto un nuevo código en las plantillas de Blogger pero, esta vez, parece funcionar. En Blogger'SPphera algo nos dicen aunque todavía no hay ningún ejemplo concreto de cómo usarlo y habrá que esperar un poco. Así, a asimple vista, parece interesante.

Si uno carga una plantilla nueva, buscando en <b:includable id='main' var='top'> se encontrará con esto:

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

La etiqueta <b:if cond='data:post.isFirstPost'> es una condición que detecta si lo que se muestra es el primer post o no lo es. Por lo que vi, no detecta si es el último post publicado sino si es el primero de una página, incluso en las páginas de navegación.

Está colocado allí como parte de los códigos de Adsense así que imagino que su utilidad es esa, resaltar algún tipo de publicidad pero, la condición sigue siendo válida así que podría usarse en otras partes como <b:includable id='post' var='post'> y diferenciar el post superior de una lista de los que se muestran debajo, por ejemplo, mostarlo completo y el resto resumido.

<b:if cond='data:post.isFirstPost'>
  ... aquí iría el código de un post completo ...
<b:else/>
  ... aquí iría el código para un post resumido ...
</b:if>

Poca información, lo sé. Blogger no explica nada pero demos gracias a que gente como Ariane y Roseli nos van mostrando estos detalles y nos alientan a experimentar un poco.

Una lista numerada fuera de lo común

2009-06-23T00:00:00.000-03:00

Sexy Ordered Lists with CSS, es decir listas numeradas pero .. sexy ¿Por qué sexy? Vaya uno a saber, seguramente, porque es más llamativo que llamarlas lista con fondos

De todas maneras, es una buena idea.

¿Qué es una lista ordenada? Una etiqueta HTML que muestra eso, una lista con una serie de items y de manera automática se coloca delante un número de orden (ver Las listas en HTML 1 y 2):

el primer item
el segundo item
el tercer item

<ol>
  <li>el primer item</li>
  <li>el segundo item</li>
  <li>el tercer item</li>
</ol>

El truco sexy consiste en colocar dentro de cada item, dos datos separados, un encabezado y un párrafo y de esa manera, tenemos varios elementos que podemos personalizar de manera independiente:

<ol class="steps">
  <li class="first">
    <h2>encabezado 1</h2>
    <p>párrafo 1</p>
  </li>
  <li>
    <h2>encabezado 2</h2>
    <p>párrafo 2</p>
  </li>
  <li class="last">
    <h2>encabezado 1</h2>
    <p>párrafo 1</p>
  </li>
</ol>

Y claro, la clave está en cuáles son las propiedades CSS a aplicarle a cada sector; por ejemplo:

<style type='text/css'>
ol.steps {
  /* la imagen de fondo de los números */
  background: transparent url(http://img198.imageshack.us/img198/9223/ulsexy.gif) repeat-y scroll 0 0;
  border: 1px solid #111;
  margin: 20px 0;
  padding: 0 0 0 40px; /* la alineación horizontal de los números */
}
ol.steps li {
  background:#222 none repeat scroll 0 0;
  /* el efecto resaltado del los bordes de cada item */
  border-top: 1px solid #000;
  border-right: 1px solid #333;
  border-bottom: 1px solid #353535;
  border-left: 1px solid #151515;
  /* la fuente de los números */
  color: #DEF;
  font-family: 'Century Gothic';
  font-size: 25px;
  margin: 0;
  padding: 15px;
}
ol.steps li h5 { /* la fuente de los títulos */
  border-bottom: 1px dashed #333;
  color: #BCD;
  font-family: 'Century Gothic';
  font-size: 22px;
  font-weight: normal;
  padding: 0 0 5px 0;
}
ol.steps li p { /* la fuente de los textos */
  color: #AAA;
  font-family: Tahoma;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.2em;
}
ol.steps li.first { /* el borde superior opatativo */
  border-top: 1px solid #333;
}
ol.steps li.last { /* el borde inferior optativo */
  border-bottom: none;
}
</style>

Daría como resultado algo así:

Curabitur mattis nibh
Vestibulum sapien dolor, viverra bibendum accumsan condimentum, fermentum id sem. Duis vel sapien id dui vestibulum aliquet ut ut libero. Pellentesque eget libero odio. Ut lacus tortor, auctor eget commodo ut, commodo eu nisi. Donec eleifend dapibus justo ut auctor! Donec risus quam, eleifend id suscipit consectetur, iaculis a purus. Morbi magna mauris, ultricies ac consequat ac, lobortis non enim. Curabitur in purus est! Pellentesque aliquam; velit consectetur feugiat ornare, tortor lectus tincidunt leo, in blandit tellus velit vel quam. Mauris eleifend enim quis lectus fringilla consequat. Maecenas arcu est, tincidunt et varius sed, faucibus ut diam. Sed elementum mollis bibendum.
Quis dolor interdum lobortis
Morbi volutpat ipsum sit amet enim iaculis condimentum. Suspendisse mattis neque a enim molestie dignissim. Nulla turpis diam, euismod bibendum laoreet sed, vulputate ac sapien. Sed dignissim nibh hendrerit lacus accumsan vestibulum? Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at hendrerit arcu. Aenean convallis nisl nec nisi feugiat tempor. Phasellus interdum mollis eros; ut rhoncus arcu feugiat ac. Vivamus posuere suscipit risus, sed bibendum massa lacinia non. Mauris dapibus eros quis risus dictum consectetur non ac libero. Quisque tincidunt nunc ac metus posuere varius? Sed cursus tincidunt mauris, a vestibulum ante rhoncus eget! Nullam sodales sagittis tincidunt. Duis dapibus lacinia venenatis. Donec tincidunt nisl nisl? Donec viverra consequat est, eget metus.
Proin sem nibh
In nulla orci, imperdiet sed viverra ac, vulputate sed magna. Vestibulum viverra ullamcorper venenatis? Proin ac aliquet purus. Suspendisse at ligula sed dui lacinia feugiat. Proin lectus est, ultricies eget hendrerit a, molestie vitae arcu! Suspendisse rhoncus, metus id rhoncus iaculis, nisi lacus egestas sem, et feugiat eros arcu in nisl? Ut consequat interdum enim, eget dapibus ligula ultricies at. Donec consequat luctus neque. Maecenas ac magna a quam porttitor ullamcorper semper eu metus. Proin vel dui ipsum, laoreet dapibus massa! Sed interdum rutrum porta. Nam nisl ante, ultricies accumsan aliquam vitae, lacinia id sem! Aliquam erat volutpat. Nulla facilisi.

Agregar el buscador de Bing al blog

2009-06-22T00:02:00.000-03:00

Para utilizar el buscador de Bing en nuestro sitio, sólo debemos agregar un elemento HTML donde se nos ocurra y allí copiar y pegar el siguiente código:

<!-- Web search from Bing-->
<form method="get" action="http://www.Bing.com/results.aspx" target="_blank">
  <input type="hidden" name="cp" value="1252"/>
  <input type="hidden" name="FORM" value="FREEWS"/>
  <table bgcolor="#FFFFFF">
    <tr>
      <td>
        <a href="http://www.Bing.com/"><img src="http://www.bing.com/siteowner/s/siteowner/Logo_Small_51x19.gif" border="0" alt="Bing"/></a>
      </td>
      <td>
        <input type="text" name="q" size="30" />
        <input type="submit" value="Search Web"/>
      </td>
    </tr>
  </table>
</form>
<!-- Web Search from Bing -->

Lo resaltado es opcional o configurable. Al igual que cualquier otro formulario, los detalle gráficos son modificable (más información 1 | 2).

Es un buscador standard así que muestra resultados generales; un modelo más sofisticado se puede conseguir ingresando a Bing Advanced Search Box.

En el primer paso deberemos definirnos por una de las tres alternativas posibles:

Site search: busca en uno o varios sitios (hasta 10 diferentes)
Search Macro: utiliza buscadores especializados como sitios de referencia, MSDN, etc (más información)
Web search: busca en toda internet

Vamos usar la primera y allí agregamos un nombre y la URL de nuestro sitio. Con el botón Try your search box, podemos verificar el resultado y luego Next.

El segundo paso nos permite configurar el buscador. Elegimos el lenguaje, el ancho (322 pixeles por defecto), el tamaño de la ventana donde se mostrarán los resultados (600x400 por defecto) y un color básico para el tema gráfico a usar. Next nos lleva al último paso donde los dan el código HTML a utilizar.

Como usa una ventana de tipo modal, para evitar que ciertos controles u objetos (por ejemplo videos) queden por encima, aconsejan cambiar esta línea:

"appearance":{
  "autoHideTopControl":true,
  "width":600,
  "height":400
},

El código comienza con una etiqueta META:

<meta content='1.1, en-US' name='Search.WLSearchBox'/>

Yo driría que esa debería copiarse en el encabezado de la plantilla aunque no sé, todo muy lindo pero no he logrado que funcionara en Blogger