Insertar Flash en el blog

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

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á, 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.

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

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

REFERENCIAS:extraverage.net

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.

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

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;}

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.

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.

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):

1. el primer item
2. el segundo item
3. 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(archivo) 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í:

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

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

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

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.

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?

Wallpapers (primeros planos)

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

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

Your printer is a brat

Con subtítulos en español.

<object width='425' height='350' id='movie' type='application/x-shockwave-flash' data='http://www.youtube.com/v/n5Prg_qebBk'><param name='movie' value='http://www.youtube.com/v/n5Prg_qebBk' /><param name='wmode' value='transparent' /><param name='allowfullscreen' value='true'/></object>Copiar el código para insertar el video

REFERENCIAS:Colores nevados

"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:

1. Google 74%
2. Directo 16%
3. Referral 7%
4. 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

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.

Click para ampliar.

Moraleja: sólo resta esperar a menos que a alguien se le ocurra una solución milagrosa.

REFERENCIAS:SpamLoco

Cualquier tipo de código HTML puede ser escrito utilizando JavaScript. Esta posibilidad es muy útil cuando se trata de códigos repetidos o engorrosos como lo son los reproductores de video o de audio que, por lo general, son siempre iguales ý sólo cambia un dato, el archivo a reproducir.

Así como era posible crear un script para insertar videos de YouTube con una instrucción sencilla, también podemos hacerlo con un reproductor de audio como el DewPlayer.

¿Qué necesitamos? Alojar el reproductor (un archivo SWF) en un servidor, por ejemplo en una cuenta de ImageShack y agregar este código en nuestra plantilla, antes de </head>:

<script type='text/javascript'>
//<![CDATA[
function escribir_MP3(archivo) {
var output = "<object type=\"application/x-shockwave-flash\" data=\"URL_dewplayermulti.swf?mp3=" + archivo + "\" height=\"20\" width=\"240\">";
output += "<param name=\"movie\" value=\"URL_dewplayermulti.swf?mp3=" + archivo + "\"></object>";
document.write (output);
}
//]]>
</script>

Donde debemos reemplazar URL_dewplayermulti.swf por la dirección URL de nuestro archivo.

¿Cómo lo usamos? Escribiendo una llamada al script donde quisiéramos que se mostrara:

<script type='text/javascript'>escribir_MP3("URL_archivo");</script>

Cada vez que lo usamos, simplemente cambiamos el dato del archivo de audio a reproducir y para probarlo, ya que estamos, aprovechamos la entrada de Gem@ y usamos XooImage para alojar algunos archivos MP3s.

Click para ver

¿Son iguales?

invertir | restaurar

REFERENCIAS:Nerd Modo

Cuando subimos una imagen a Blogger, el proceso es sencillo pero a veces, desconcertante, sobre todo si queremos hacer alguna clase de modificación en la imagen o se nos ocurre intentar algo distinto de las cosas que ya están predefinidas. De todas las cosas extrañas, el tamaño de la imagen subida es la que más confusión crea ya que sólo hay tres alternativas:

Tamaño de la imagen:
Pequeñas
Medio
Grandes

¿Que significan esas opciones? Así, en abstracto, parecerían no significar nada porque algo es grande o chico si tenemos otra cosa con que compararlo y aquí, no hay nada. Tampoco significa que si la imagen es "grande" debamos usar esa opción y si es "pequeña" la otra; en realidad, mientras la imagen no pese mas de 8MB, da lo mismo si elegimos una opción u otra, la imagen original se guardará tal y como es, aunque no nos demos cuenta.

Al subir una imagen, Blogger crea una serie de miniaturas de manera automática y son esas las que normalmente usamos; al definir Pequeñas/Medio/Grandes estamos decidiendo cuál de esas miniaturas vamos a usar y eso es lo que nos muestra el código HTML.

Supongamos que yo tengo una imagen que mide 617x423 pixeles, la subo a y elijo Medio y Centrar; el código generado dirá algo así:

<a href="http:// ....... /s1600-h/miImagen.jpg"> 
<img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 320px; height: 219px;" src="http:// ....... /s320/miImagen.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_XXXXXXXXXX" />
</a>

Lo primero que tenemos que saber es que lo único que nos interesa es la etiqueta IMG, el enlace no importa. Allí, en esa etiqueta hay dos datos claves en el parámetro style:

width: 320px; height: 219px;

es decir, la imagen, se mostrará de ese tamaño, de 320x219, no es la imagen subida, es una miniatura; usando Grande, pasaría algo similar, sólo cambiarían los valores, el valor de width diría 400px y si usara la opción Pequeña diría 200px.

Ah, bueno, entonces, para ver la imagen real deberé cambiar ese valor y poner width:617px ... no; eso no funcionará, veremos la imagen de ese tamaño pero no será la original, seguirá siendo la misma pero redimensionada y por lo tanto, se verá mal (pixelada): Ver/Ocultar un ejemplo [+]

El problema es que sin importar la parte de style, la URL de la imagen es la miniatura y eso está indicado por el directorio donde está guardada; es lo que vemos justo antes del nombre:

htp://......./s320/miImagen.jpg"

Ese dato define la miniatura a usar:

dirá s200 si elegimos Pequeña
dirá s320 si elegimos Medio
dirá s400 si elegimos Grande

Sólo cambiar ese dato tampoco servirá de nada porque style seguirá influyendo, veremos las distintas miniaturas, todas redimensionadas así que tendrán el mismo tamaño. Ver/Ocultar el ejemplo [+]

Si cambiamos la miniatura también debemos cambiar las propiedades width y height o eliminarlas. Ver/Ocultar el ejemplo [+]

Es importante entender que lo que hace Blogger es limitar el tamaño pero no necesariamente el ancho, eso depende de la imagen, si es apaisada (más ancha que alta) el tamaño máximo lo define width pero si no lo es (es más alta que ancha), el máximo lo define height. Por ejemplo, al insertar una imagen de 533x800 se generará este código:

<img 
  style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 213px; height: 320px;"
  src="http:// ....... /s320/miImagen.jpg"
  border="0"
  alt=""id="BLOGGER_PHOTO_ID_XXXXXXXXXX" />

Las miniaturas generadas por las opciones por defecto tendrán un tamaño máximo en alguno de sus sentidos (ancho o alto) pero ¿dónde está la imagen original? ¿podemos usarla? Si nuestro blog está en un dominio de blogspot.com, podemos usarla con facilidad, si está en un dominio propio, no porque hay restricciones que limitan su uso.

Como el resto de las miniaturas, la imagen original se encuentra en un directorio especial o mejor dicho, en varios: s00, s000 o s1600. Todos ellos contienen la imagen real, la que nosotros hemos subido y pueden usarse con el mismo criterio anterior, eliminando width y height del style y cambiando el directorio:

http:// ....... /s00/miImagen.jpg

Esta es la imagen original de 617x423 y esta otra la de 533x800.

El hecho que Blogger cree esas miniaturas es útil ya que con una sola imagen, tenemos cuatro variantes a nuestra disposición ¿No habrá más? Pués la verdad si y ahí las cosas se vuelven interesantes.

Subo otra imagen, esta vez de 596x596. No importa el método porque lo único que voy a usar es la URL de la etiqueta IMG así que ya dispongo de cuatro:

http: ....... /s00/demoIMGs_01.jpg la original de 596x596
http: ....... /s200/demoIMGs_01.jpg una miniatura de 200x200
http: ....... /s320/demoIMGs_01.jpg una miniatura de 320x300
http: ....... /s400/demoIMGs_01.jpg una miniatura de 400x400

Pero si juego un poco y pruebo otros directorios, me encuentro con que todos estos también funcionan y para verlos, uso una imagen mayor, la de 533x800:

s220 mostrará la imagen como miniatura de 220x220
s640 mostrará la imagen como miniatura de 426x640
s720 mostrará la imagen como miniatura de 480x720
s800 mostrará la imagen como miniatura de 533x800 que es la original

Pero también es interesante que nos muestra miniaturas mucho más chicas lo que es útil para generar galerías:

s32 son miniaturas de 32 pixeles
s48 son miniaturas de 48 pixeles
s64 son miniaturas de 64 pixeles
s128 son miniaturas de 128 pixeles
s150 son miniaturas de 150 pixeles

Y Plethoras comenta que ha encontrado más así que seguimos ampliando la lista de posibilidades:

s72 | s94 | s104 | s110 | s144 | s160 | s288 | s512 | s576 | s912 | s1024 | s1152 | s1280 | s1440

s32	s48	s64	s128	s150	s00
					596x596
					501x750
					450x609
					533x800
					617x423