Un buscador completo

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?