Personalizando un poco los buscadores (1)

En Blogger, agregar un buscador interno es sencillo, podemos usar el que nos muestran en Blogger Draft o bien, simplemente, usar los servicios de Google.

¿Cómo lo hacemos? Creamos un elemento HTML con un título cualquiera y luego, copiamos y pegamos el código que, en su versión más sencilla es algo así:

<form action='http://nombreblog.blogspot.com/search' method='get'>
  <input type='text' value='' name='q' />
  <input type='submit' value='Buscar' />
</form>

Donde lo único que hacemos es cambiar nombreblog por el nuestro.

El resultado sería este:

Para personalizarlo, podemos darle propiedades CSS, tanto a la etiqueta FORM que es el contenedor del formulario de envío, como a los dos controles INPUT que son los elementos visibles, donde ingresamos los datos y el botón.

Por ejemplo, para que todo se vea centrado y con un borde como en el ejemplo, le agregamos el parámetro style a FORM:

style="border: 1px solid #CCCCCC; margin: 0 auto; padding: 10px 0; text-align:center;"

Los controles también pueden modificarse con el parámetro style:

width: 200px; border: 2px ridge #FFFFFF; background: none;
border: none; background: #FFFFFF url(); text-align: center;
color: #FFFFFF; border: 2px solid #647586; padding: 5px 2px 5px 30px; background: #445566 url(URL_imagen) no-repeat 0% 50%;

Otra opción es cambiar el típico botón de los formularios por una imagen. Para eso el control INPUT debe ser levemente diferente:

<input type="image" src="URL_imagen" />

Si queremos forzar a que la página de resultados se muestre en otra pestaña o en otra ventana empleamos el mismo método que usamos con los enlaces, le agregamos el atributo target a la etiqueta FORM:

<form target="_blank" ....... >

En las etiquetas INPUT podemos colocar un atributo llamado value que será el texto que se mostrará por defecto. En el que funciona como botón es lo que veremos si no usamos una imagen. Ese texto determina el ancho del botón a menos que indiquemos algo diferente:

<input value="un texto" ....... >

El atributo value también podemos colocarlo en el otro control, por ejemplo, para indicar para que sirve aunque, sea evidente:

Este control podemos personalizarlo aún más utilizando los eventos onfocus y onblur; el primero se activa cuando hacemos click en el interior, el segundo cuando hacemos click en otro lado. Usando estos eventos, podríamos colocar un texto que, cuando usamos el control, se borra dejando el control en blanco y si salimos de él, restaura el texto del atributo value:

<input value='elTexto'
  onfocus="if (this.value=='elTexto') this.value='';" 
  onblur="if (this.value=='') this.value='elTexto';"
  ....... />

Por supuesto, todo en la misma línea:

¿Agregamos más detalles? Hagamos que tenga un color de fondo más oscuro y que, al hacer click dentro, se aclare. Para esto, seguimos usando los mismo eventos:

this.style.backgroundColor='#FFFFFF'; // fondo claro
this.style.backgroundColor='#CCCCCC'; // fondo oscuro

Este sería el código:

<input 
  type="text"
  style="text-align: center; background-color: #CCCCCC;" 
  value='elTexto'
  onfocus="if (this.value=='elTexto') this.value='';this.style.backgroundColor='#FFFFFF';" 
  onblur="if (this.value=='') this.value='elTexto';this.style.backgroundColor='#CCCCCC';"
/>

Que se vería así:

En algunos casos, lo que queremos es limitar la cantidad de resultados a ser mostrados. Si no lo hacemos, la página puede ser muy larga y por lo tanto tardará mucho. Para eso, lo que debemos hacer es agregar parámetros.

Una búsqueda de un palabra cualquiera en Google nos mostrará algo parecido a esto en la barra de direcciones del navegador:

http://www.google.com.ar/search?hl=es&client=firefox-a&rls=org.mozilla:es-AR:official&hs=eyQ&pwst=1&q=palabra&start=20&sa=N

No importa saber qué significa cada cosa sino que se han agregado parámetros a la búsqueda y eso se logra agregando etiquetas INPUT "escondidas". Por ejemplo, para limitar a 5 la cantidad de entradas a ser mostradas, usaríamos esto:

<input name="max-results" value="5" type="hidden"/>

Y el resultado que nos mostraría el navegador sería algo así:

http://miSitio.blogspot.com/search?q=palabra&max-results=5

Si bien ya es posible acceder de manera más o menos sencilla a Open Pandora, nunca está de más tener alternativas y otra vez es en artutogoga.com donde leo información de un sitio que no deja de ser interesante para visitar y ... escuchar.

AccuTunes no es igual, diría que es un poco más limitado pero nos permite elegir entre alguno de los géneros, un canal dentro de estos y luego, simplemente dejar que suene la música.

No es necesario registrarse, es sencillo de usar e incluso, si vamos a AccuRadio podemos ver la lista completa de canales, realizar búsquedas o enterarnos de las novedades.

Claro, como en este mundo casi nada es más criminal que escuchar música, si el servicio continúa o desaparece, depende de muchas cosas:

Los derechos de autor y las licencias de uso de las radios en internet todavía son un punto al que no se le ha encontrado solución aunque hay ciertos progresos ya que se trabaja en diferentes frentes. Se espera la definición de los tribunales donde se han apelado ciertos fallos; se sigue negociando con las organizaciones que nucléan a las diferentes empresas que integran la industria música y, se espera que el congreso de USA promulgue de una buena vez la llamada Internet Radio Equality Act. Mucha más información al respecto puede verse en el sitio de SaveNetRadio.org.

Leer el post sobre elementos adicionales en el diseño de la plantilla que publica El escaparate de Rosa me permite ampliar un par de respuestas a problemas concretos que, tal vez, nos sirvan a todos.

Empecemos con ese artículo ¿cuál es el tema?

Hay veces en que queremos añadir algún nuevo elemento en alguno de los grandes bloques en que Blogger divide las plantilla y no podemos, algo parece impedirlo. Esos grandes bloques que Blogger llama secciones están entre las etiquetas <b:section> y </b:section> y por defecto son: el header, el área de posts, la sidebar y el footer [más información]

Lo normal es que no tengamos inconvenientes cuando queremos agregar elementos salvo si lo queremos hacer en el header o en el área de posts, allí, hay veces en que la plantilla no lo admite ¿Por qué? Porque el código así lo indica por lo tanto, debemos ir a la Edición HTML, buscarlo y cambiarlo.

Rosa dice:

Para añadir más elementos en el header (cabecera) localizamos esta línea de código:

<b:section  class='header' id='header' maxwidgets="1" showaddelement="no">

y la sustituimos por esta otra:

<b:section  class='header' id='header' maxwidgets="2" showaddelement="yes">

Para añadir más elementos en la sección de entradas (main) localizamos la línea de código correspondiente:

<b:section class='main' id='main' showaddelement='no'>

y la sustituimos por esta otra:

<b:section class='main' id='main' maxwidgets='2' showaddelement='yes'>

Como se ve, basta cambiar el valor del parámetro showaddelement de no a yes y poner en el parámetro maxwidgets el número máximo de elementos a ubicar.

En realidad, este último parámetro no es obligatorio sino optativo por lo tanto, si directamente no lo ponemos, nos evitaremos el trabajo de tener que cambiarlo y la cantidad será ilimitada:

<b:section class='main' id='main' showaddelement='yes'>

Si tuviéramos problemas con las otras secciones haríamos lo mismo aunque, por lo general no tienen esta restricción y si disponemos de una plantilla con una sección especial llamada crosscol, podemos repetir el mismo proceso.

¿Y si queremos crear otras secciones o nuestra plantilla no las tiene? No es una pregunta retórica, hay algunas que carecen de la sección del footer, por ejemplo. En ese caso, simplemente vamos a Edicion HTML de la plantilla y sin expander los artilugios, buscamos dónde ponerla:

<div id='nombreUnico'>
<b:section id='otroNombreUnico' class='unaClase' showaddelement='yes'>
</b:section>
</div>

Por supuesto, a eso habrá que agregarle las propiedades CSS correspondientes y es por eso que, lo lógico es utilizar los atributos ID y class recordando que el primero, siempre debe ser único, es decir, no puede haber dos elementos con el mismo ID dentro de la misma página. Luego, dentro de <b:skin> </b:skin> colocaremos las declaraciones y propiedades:

#nombreUnico { ....... }
#otroNombreUnico { ....... }
.unaClase { ....... }

¿Cuales son esas propiedades? Dependerá de cada caso. Una alternativa, por ejemplo, es copiar las que tenga alguna de las otras secciones.

Hasta aquí todo perfecto pero, una de las preguntas recurrentes es: ¿por qué no puedo agregar dos elementos de cierto tipo? Blogger no nos deja, nos dice que ya existe uno y no podemos poner otro. El caso más común es el elemento Archivos peor también ocurre con los elementos Header y Profile ¿Y para que quiero tener dos elementos iguales? Eso ya no tiene respuesta pero, por ejemplo, podemos tener uno de tipo desplegable (hierarchy) y otro que sea una caja (drop-menu) para ubicarlos en diferentes partes de la página [más información]

Nuevamente nos topamos con ciertas incongruencias; no nos deja hacerlo desde Elementos de la página pero si vamos a Edición HTML de la plantilla, nada lo impide. Igual que en los casos anteriores, para trabajar con más comodidad dejamos desmarcada la opción Expandir artilugios y buscamos la siguiente línea:

<b:widget id="BlogArchive1" locked="false" title="Blog Archive" type="BlogArchive">

La seleccionamos, la copiamos y la pegamos debajo, luego podremos reubicarla.

Ahora, sólo falta que cambiemos el ID por cualquier otro (lo obvio es BlogArchive2) y el título (para poder localizarla rápidamente). Entonces, quedaría algo así:

<b:widget id="BlogArchive2" locked="false" title="COPIA ARCHIVOS" type="BlogArchive">

Guardamos la plantilla y ya podemos ir a la solapa de Diseño, mover o editar el elemento como cualquier otro.

Trabajar directamente sobre el código HTML no es algo que le guste hacer a nadie pero muchas veces es inevitble porque los ajustes deben hacerse allí. Lo mismo ocurre cuando nos topamos con ciertos errores. Este es el caso de la última de las consultas.

El problema planteado es así: se subió una imagen y se la colocó como fondo en el header del blog. Por el motivo que fuera, se la quiere eliminar, se usan todos los métodos "normales" y no hay caso, la imagen permanece allí, probablemente, por algún error interno el mismo Blogger ¿Qué hacemos?

Como vimos antes, el header, por defecto sólo admite un elemento:

<b:section class="header" id="header" maxwidgets="1" showaddelement="no">

Así que lo cambiamos para que admita más elementos:

<b:section class="header" id="header" maxwidgets="3" showaddelement="yes">

Guardamos, vamos a Elementos de la plantilla y hacemos click en Editar.

Sin que nos tiemble la mano, lo eliminamos.

Por fin nos hemos deshecho de la imagen rebelde. Ahora, basta hacer click en Agregar un elemento, seleccionar Header y hacer de cuenta que nada ha pasado.

La furia de la tormenta era tremenda, el viento soplaba sobre sus cabeza y les hacía chocar unas contra otras, golpearse contra los bordes de su embarcación y sacudirse como espigas de trigo mecidas por un huracán. De pronto, apareció una piedra en el medio del canal y el barco comenzó a dar vueltas; la proa y la popa giraron enloquecidas cambiando de posición.

Ellas se asomaban por la borda y volvían a juntarse temblorosas en el centro. Sin tener elementos para dirigir el barco, estaban abandonadas a su propia suerte. El frío las hacía contraerse como ovillos; era pleno invierno y su hogar les parecía cada vez más lejano. Recordaban cuando habían sido sacadas, y aún sentían la presión de las manos del destino que las había colocado en medio del agua enfurecida. Ahora, la suerte estaba echada.

La cultura del spaghetti

continuar leyendo

El uno de los últimos post del amigo Pepiche en Aeromodelismo a Full daba consejos a tener en cuenta a la hora de sustituir la bujía Glow en motores de aeromodelismo.

Él sabe que yo no tengo la menor idea de lo que está hablando pero me imagino que no debe ser así: