Vagabundia

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

El aniversario del rey

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

Faltan casi dos meses pero aún así el blog oficial de Google habla del próximo cumpleaños de Blogger y sus diez años de vida.

23 de agosto de 1999 - 23 de agosto de 2010

El hecho que, cada minuto se publiquen 270.000 palabras y que se creen nuevos blogs constantemente es lo que aún lo mantiene en la cima de los servicios de este tipo, con una posición dominante, casi duplicando el número de visitas de su inmediato competidor. Tal como titulan en baluart.net, aún sigue siendo el rey aunque claro, los usuarios seguimos esperando que sea una especie de Luis XVI y que no se demore mucho la revolución francesa que lo transforme en algo un poco menos autoritario

Imagino que deben anticiparse tanto no sólo para que compartamos nuestras anécdotas sino para que lo agendemos y les enviemos regalitos.

Ahora mismo estoy pensando: ¿Qué podría regalarle a Blogger?

El tunel del tiempo

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

The Travel Film Archive es un canal de YouTube que se especializa en documentales de distintas partes del mundo. Lo interesante es que muchos de ellos fueron filmados hace muchos pero muchos años lo que nos permite ver cómo era el mundo cuando todo era blanco y negro.

Wallpapers (primeros planos)

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

¿Cómo se comunican los ordenadores?

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

¿Cómo se comunican los ordenadores? o La impresora caprichosa

REFERENCIAS:Colores nevados

Optimizar el blog para que nos encuentren

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

"Cuando se sienta frente a su equipo informático y realiza una búsqueda en Google, obtiene de forma prácticamente instantánea una lista de resultados de la Web. ¿Qué sistemas utiliza Google para encontrar páginas web que coincidan con su consulta y para determinar el orden de los resultados de búsqueda?"

Así comienza una página de ayuda de las Herramientas para Desarrolladores de Google y tal vez, pueda servir como introducción para responder una pregunta que me formulan una y otra vez: ¿Cómo hacer que mi sitio sea conocido? Y si digo introducción es porque hasta ahí podemos llegar, es lo que podemos "controlar" y el resto, como en cualquier orden de la vida, dependerá de miles de casualidades.

Que nuestro sitio aparezca en los buscadores es lo elemental ¿En que posición de los resultados? En la mejor posible, de eso, se encargan las técnicas SEO y la Divina Providencia.

¿Por qué es importante? Porque la fuente de tráfico principal de un sitio son los motores de búsqueda:

Google 74%
Directo 16%
Referral 7%
Otros 3%

Claro que visitas y lectores no es lo mismo. Si analizan las estadísticas notarán que si bien la mayor cantidad de visitas es la que poviene de los buscadores, también es la más volatil, la que menos páginas mira y la que dura menos. Es lógico y hay que tener muy en claro lo que nos interesa ya que el "exito" es una definición muy subjetiva que no depende de números.

Sea como sea, los buscadores son "la vidriera" que nos permite tener cierta presencia, sin ellos, las cosas se harían muy complicadas. Entonces, el punto elemental es ¿conocen los buscaores la existencia del sitio? ¿pueden encontrarlo? ¿cómo lo hacen? Es lo que llaman Rastreo. Los buscadores recorren la web y mediane el uso de ciertos programas (robots, arañas, spiders, como quieran llamarse) leen, toman nota de lo que encuentran y lo añaden a sus índices. Cada vez que encuentran un enlace dentro de un sitio, lo guardan para ampliar la búsqueda y visitarlo luego. En teoría, salvo en una red cerrada, partiendo de una sola página, podrían llegar a recorrer toda la web.

Esto quiere decir que esos robots nos visitan cada cierto tiempo ¿cuántas veces? ¿lo hacen regularmente con todos los sitios? No, en realidad, visitan más seguido ciertos sitios que otros, sobre todo, si se dan cuenta que son sitios que se modifican con cierta asiduidad o que tienen cierta relevancia ¿Si tengo Adsense o alguna publicidad similar, Google lo tendra en cuenta? La respuesta es NO, sería un soborno y en principio, los buscadores son independientes.

El segundo punto es la Indexación, es decir, la forma en que se guarda y ordenar la información del rastreo. Es el punto clave y hay que tener claro que lo único que leen los buscadores es texto. Aunque últimamente han ampliado esa posibilidad, deberíamos basarnos en esa premisa, todo lo que no es texto es ignorado y eso significa que el contenido es lo único relevante, que los scripts son ignorados y que las etiquetas que usamos son muy importantes. Parámetros como title y alt en las imágenes, el uso adecuado de los encabezados (h1 h2 h3 h4 h5 h6) que no son sólo un tamaño de letra. El título de las entradas, la descripción del sitio. Todo es importante pero, como cualquier otra cosa que hagamos, siempre hay detalles que pueden mejorarse y ninguno genera resultados mágicos.

¿Y cómo hacer que un sitio tenga una buena posición en las páginas de resultados? ¿Qué significa esto? Es obvio que si alguien hace una búsqueda de algo, y recibe cincuenta páginas con "respuestas", es mejor estar entre las primera que entre las últimas. Esa posición es lo que llaman relevancia, es decir, de alguna manera, las páginas se analizan y se ordenan "de mayor a menor".

Google dice que esas relevancia se determina a partir de más de 200 factores pero sólo uno de ellos es el PageRank. Sabemos, por experiencia propia que a veces, esos resultados suelen ser raros. Escribes un artículo original y el primero que aparece es una referencia a ese artículo publicado en otro sitio. Pasa seguido, muy poco podemos hacer al respecto y aunque garantizan que siempre trabajan para perfeccionar la detección de la página con el contenido original, da la impresión que aún tienen mucho camino que recorrer.

En la práctica, los pasos para dar a conocer nuestro sitio a los buscadores son sencillos:

enviar el sitio a Google http://www.google.es/addurl.html o en Blogger, marcar la opción SI en ¿Deseas añadir tu blog a nuestras listas? y ¿Deseas permitir que los motores de búsqueda encuentren tu blog?
enviar un sitemap que ayudará a reconocer la estructura del sitio

Las recomendaciones sobre el diseño y el contenido también ayudan:

usar enlaces de texto claros y lo más simple posibles
evitar la sobreabundancia de enlaces internos y privilegiar sólo los que se consideran relevantes
si una página contiene más de cien enlaces deberia dividirse en varias
el contenido debe tener información útil
pensar qué palabras podría introducir un usuario para localizar esas páginas e incluir esas palabras en el sitio
utilizar texto en lugar de imágenes para mostrar nombres, contenido o enlaces importantes
eliminar los enlaces obsoletos
corregir el código HTML incorrecto
saber que, en principio, JavaScript, frames, DHTML y Flash no son indexados

Las imágenes que usamos no sólo son decorativas, pueden ser un elemento muy importante así que se recomienda utilizar nombres de archivo informativos y detallados, nada de nombres crípticos. Por ejemplo:

IMG00023.jpg no es un buen nombre
gatito.jpg es más adecuado
gatito-jugando-playa.jpg es casi ideal sobre todo si le agregamos alt a la etiqueta:

<img src="gatito-jugando-playa.JPG" alt="gatito jugando en la playa de Ipanema" />

Como todo, esto debe hacerse sin abusar porque el uso excesivo de palabras clave se considera una infracción que es penada.

"La página en la que se encuentra una imagen y el contenido que la rodea (incluidos los títulos y los pies de foto) ofrecen a los motores de búsqueda una información importante sobre el tema de la imagen. Por ejemplo, si incluye una fotografía de un oso polar en una página sobre cultivo de tomates de cosecha propia, estará transmitiendo un mensaje confuso a los motores de búsqueda sobre el tema del archivo osopolar.jpg."

Por útimo, las recomendaciones sobre calidad tienen algunos puntos que vale la pena pensar:

cree páginas para los usuarios, no para los motores de búsqueda
no engañe a los usuarios de su sitio ni muestre a los motores de búsqueda un contenido distinto del que ofrece a los usuarios
no participe en esquemas de enlaces destinados a mejorar la posición de su sitio o a manipular los resultados del algoritmo PageRank en su favor
evite los enlaces a spam o "sitios indeseables"
no utilice técnicas de redireccionamiento engañoso
no cree varias páginas, subdominios o dominios que presenten básicamente contenido duplicado
no cree páginas de comportamiento malicioso, como páginas de suplantación de identidad (phishing) o páginas que instalen virus, troyanos u otro tipo de software malicioso
proporcione contenido único y relevante que ofrezca a los usuarios una razón para visitar el sitio

REFERENCIAS:Optimización de motores de búsqueda: Mejor posición para su sitio en las búsquedas

Los sitemaps de Blogger y sus errores

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

Hace unos días, me preguntaban en un comentario respecto a un error que habían advertido en los sitemaps de Blogger enviados a través de las Herramientas para Desarrolladores de Google. Verifiqué los mios y no vi problemas, respondí entonces que lo mejor era reenviarlos porque se trata de feeds así que tal vez, un pequeño error provoca esas advertencias; no es algo fuera de lo común y normalmente, no tiene mayor trascendencia.

Un par de dias después, es Alejandro quien tiene la misma inquietud, los sitemaps muestran una advertencia y además, indican que las URLs indexadas en cada uno de ellos es 22 y no las aproximadamente 500 que son las indicadas:

atom.xml?redirect=false&start-index=1&max-results=500

Vuelvo a fijarme y, efectivamente, la advertencia existe en algunos de ellos:

Código XML no válido en la Etiqueta principal: author
No se ha reconocido esta etiqueta. Soluciónelo y vuelva a enviar la información.

Como en principio, sólo es una advertencia y por lo tanto no debería tener importancia ni podemos corregir el error, el proceso normal es reenviarlo o esperar. Eso hice y por lo general, la respuesta es rápida pero en este caso no, todos los reenviados permanecieron como pendientes durante varios dias; los otros no tenían problemas; de todas maneras de 2500 páginas indexadas, ahora se mostraban 1500. No es poca cosa.

Tal como lo dice el post de SpamLoco , intentamos varias combinaciones cambiando parámetros a ver si alguno funcionaba. Incluso lo hice en un blog de pruebas y el resultado era siempre el mismo: nada.

Hoy ya veo que lo que me muestra es que todos los sitemaps indican error y todos reconocen sólo 24 páginas así que la cantidad de URLs indexadas ha pasado a ser 120. Mucha diferencia

Click para ampliar.

Las respuestas de Google son curiosas. Hay muchas quejas y ambiguedades. Comenzaron minimizando el problema y terminaron reconociéndolo pero, curiosamente, dicen que "no afecta la indexación" y se limitan a contarnos que trabajan en algún metodo para "ocultar" el error, es decir, no corregirlo, taparlo ya que todos sabemos que lo que no se ve, no existe

Es cierto, la advertencia en si misma sólo es una molestia aunque no debería haber errores, sobre todo porque estamos hablando de la misma empresa que imagino yo, coordina los cambios para no afectar a los usuarios. Sin embargo, nada dicen de esa baja en la cantidad de páginas indexadas. Peor aún, en una respuesta, un empleado dice que no vale la pena enviar sitemaps en Blogger porque el sistema se encarga de hacerlo:

"If your site is hosted on Blogger, you don't need to submit a Sitemap file at all. This is all done automatically for you, so you can either ignore those errors or just remove the Sitemap file from your Webmaster Tools account."

Gracioso porque cualquier blog creado en Blogger y que tenga los feeds habilitados se integra de manera automática a las Herramientas de Google e incluye un sitemap.