Optimizar los títulos del blog

JMiur [E]

NOTA: Este post está desactualizado debido a los cambios realizado por Blogger.

Para una soluciòn efectiva, ver el siguiente artículo:

Hace un par de días, Quique preguntaba cómo cambiar el orden en que se muestran los títulos de los posts en la barra superior del navegador.

Por defecto, la barra de títulos del navegador, muestra esto:

Es decir:

Nombre del blog : Título del post - Navegador

Y no sólo es es una cuestión estética, Google indexa las entradas con el titulo del blog y no con el titulo del post (ver captura ejemplo) y lo ideal es que aparezcan invertidos, primero el título del post y luego el nombre del blog (ver captura ejemplo).

En WordPress es sencillo, hasta hay plugins que lo hacen. En Blogger también puede hacerse pero, debemos agregar el código directamente en la plantilla.

Vamos a Diseño / Edición HTML y sin expandir los artilugios, buscamos lo siguiente:

<title><data:blog.pageTitle/></title>

Y lo reeemplazamos por esto:

<!-- Optimización del título de Blogger -->
<b:if cond='data:blog.pageType == "item"'>
<b:section id='titleTag'>
<b:widget id='Blog2' locked='false' title='Entradas del blog' type='Blog'>
  <b:includable id='nextprev'/>
  <b:includable id='backlinks' var='post'/>
  <b:includable id='post' var='post'><data:post.title/></b:includable>
  <b:includable id='commentDeleteIcon' var='comment'/>
  <b:includable id='status-message'/>
  <b:includable id='feedLinks'/>
  <b:includable id='backlinkDeleteIcon' var='backlink'/>
  <b:includable id='feedLinksBody' var='links'/>
  <b:includable id='postQuickEdit' var='post'/>
  <b:includable id='comments' var='post'/>
  <b:includable id='main' var='top'>
    <title>
      <b:loop values='data:posts' var='post'>
        <b:include data='post' name='post'/></b:loop> : <data:blog.title/>
    </title>
  </b:includable>
  </b:widget>
  </b:section>
<b:else/>
  <title><data:blog.pageTitle/></title>
</b:if>
<!-- final optimización del título de Blogger -->

Si ya se posee un segundo elemento Blog en la plantilla, deberemos cambiar el numero del ID por el que corresponda. Por ejemplo:

<b:widget id='Blog3' locked='false' title='Entradas del blog' type='Blog'>

Eso es todo salvo un par de advertencias.

Hay que tener en cuenta que una vez que agreguemos el código y guardemos la plantilla, este, se nos mostrará diferente ya que, por defecto, Blogger oculta el contenido de los widgets:

<b:if cond='data:blog.pageType == "item"'>
<b:section id='titleTag'>
  <b:widget id='Blog2' locked='false' title='Entradas del blog' type='Blog'/>
  </b:section>
<b:else/>
  <title><data:blog.pageTitle/></title>
</b:if>

Por último, no vayan a creer que los cambios en los resultados de las búsquedas que muestra Google serán instantáneos. Pueden tardar muchos días en ser aplicados.

Google Profiles

El silencio

Era de esperar. Era inevitable. La libertad es eso que se usa sólo para poder arrojar una bomba en medio de una aldea indefensa y poder dormir con la conciencia tranquila.

La historia se repite. Prometeo decidió robarles las semillas del sol a los dioses y entregárselas a los hombres para que pudieran comer. Zeus enfureció ¿Cómo osaba hacer semejante cosa? Los hombres sólo son hombres, los Dioses son ... Dioses.

Y ordenó la creación de una mujer plena de virtudes y se la entregó a un hombre, Epimeteo, que se enamoró perdidamente de ella. Pandora, la mujer-trampa abrió el ánfora que contenía todas las desgracias humanas (vejez, enfermedad, locura, vicio, pasión, tristeza, pobreza, crimen).

Asustada, Pandora cerró el ánfora justo antes que saliera la Esperanza. Y corrió hacia los hombres a decirles que no estaba todo perdido, que aún quedaba algo.

No tengo el privilegio de vivir en la Madre Patria (la U.S.A.), así que no puedo escuchar música; debo contentarme con el tam-tam de los tambores y la letanía de los nativos invocando espíritus misteriosos.

Vivo, claro, en alguna parte del resto del mundo; del otro lado de la frontera, cruzando el Rio Bravo. Palmeras, gauchos, carnaval carioca, La Cucaracha. Estoy demasiado lejos del American dream, ni siquiera alcanzo a comprender qué es eso del American way of life.

Soy: un outsider.

"We are deeply, deeply sorry to say that due to licensing constraints, we can no longer allow access to Pandora for listeners located outside of the U.S. We will continue to work diligently to realize the vision of a truly global Pandora, but for the time being we are required to restrict its use. We are very sad to have to do this, but there is no other alternative." (leer más)

Se veía venir. Lo habían anunciado hace un par de días. globalpandora.com ha terminado por sucumbir ante el poder de los dioses del Olimpo. Tal vez se pueda utilizar algún método alternativo pero no es fácil conseguirlo. Hay que probar y probar y seguir probando.

No sé si vale la pena el esfuerzo.

Al fin y al cabo sólo soy uno de los "salvajes".

¡Oh qué maravilla!
¡Cuántas criaturas bellas hay aquí!
¡Cuán bella es la humanidad!
¡Oh mundo feliz, en el que vive gente así!

Al fin y al cabo sólo soy uno de los tantos "otros".

Pero ...

No todas son rosas en el campo del rey
no todas las rosas del campo son del rey
no todos los reyes saben mucho sobre rosas
no todas las rosas quieren saber de algún rey.

Más cambios en YouTube

Textos degradados con CSS

En Web Designer Wall muestran un truco sencillo para crear títulos o encabezados con degradados, utilizando sólo CSS.

Si bien el truco es sencillo, hacer que funcione en cualquier navegador no lo es, a menos que utilicemos el hack para Internet Explorer que ellos proponen pero, esto obliga a definir los códigos en el encabezado de la plantilla y, como sólo pretendo hacer una demostración, no es una solución que me convenciera demasiado.

Vamos a la explicación elemental.

Todo se limita a anteponer una etiqueta <span> vacía dentro del título y aprovechando la propiedad position: absolute, superponer una imagen con el degradado.

Por ejemplo:

<h1><span></span> el texto a mostrar </h1>

Pero claro, debemos definir previamente las propiedades:

<style>h1 {
position: relative; /* obligatorio */
color: #464646;
font: bold 330%/100% "Lucida Grande";
}
h1 span {
display: block; /* obligatorio */
position: absolute; /* obligatorio */
width: 100%; /* obligatorio */
background: url(URL_imagen.png) repeat-x;
height: 30px;
}
</style>

Aquí, URL_imagen.png es la imagen que vamos a utilizar y salvo las propiedades obligatorias, el resto es personalizable.

El problema, claro, es el uso de imágenes PNG-24 transparentes para las gradientes, un tipo de imagen que (¿estamos en el 2008?) el bendito Internet Explorer no muestra correctamente en muchas de sus versiones (casualmente, las más utilizadas, 6 para abajo).

De allí que ellos proponen utilizar un hack que se agrega debajo de la definición de estilo anterior:

<!--[if lt IE 7]>
<style>
h1 span {
background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='URL_imagen.png',
sizingMethod='scale');
}
</style>
<![endif]-->

Hasta aquí todo funciona perfectamente pero claro, ambas definiciones de estilo deben ir en el encabezado de la página, es decir, antes de </head>. Sin embargo, mi idea era mostrarlo y no integrarlo en la plantilla.

En principio, no hay problema, se coloca la definición de estilo en el post con la precaución de colocar todo en una sola línea y es suficiente pero ¿y el hack para IE? Eso no podemos ponerlo en un post, no funcionará de ninguna manera. El problema no es usar la propiedad filter, podría ponerse y los otros navegadores simplemente la ignorarían. El tema es que debemos colocar background: none. Es decir, para IE, no debe haber un fondo y para el resto si. Moraleja, o funciona en uno o funciona en otros.

Decidí recurrir a otro método. Me acordé de la definición que leí una vez: como IE es estúpido, aprovechemos su estupidez.

Si anteponemos un guión bajo a cualquier propiedad CSS, cualquier navegador "decente" la reconocerá como una propiedad "comentada" es decir, no la tendrá en cuenta ... IE no. Por ejemplo:

color: red;
_color: blue;

IE mostrará el texto en azul, todos los demás en rojo (supongo que pa'llevar la contra, nomás).

Así que ahora puedo establecer las propiedades para los diferentes ejemplos sin necesidad de modificar la plantilla y crear variaciones usando clases:

<style>
h1.degrademo {
font: bold 330%/100% "Lucida Grande";
position: relative;
text-align: center;
color: #E6D9C7;
}
h1.degrademo span {
height: 30px;
background: transparent url(http://.../gradiente.png) repeat-x;position: absolute;
display: block;
width: 100%;
_background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='http://.../gradiente.png', 
sizingMethod='scale');}
</style>

<h1 class="degrademo"><span></span> el texto </h1>