La hoguera de los numeritos

TwittBoy decía "@vagabundia sigues siendo el twitter de los 33 following!! jajaja!! no te deja twitter tener mas?

Y me quedé pensando en eso ...

Más allá de los problemas técnicos que tengo con mi cuenta desde que el ataque a Twitter la dejó en estado catapléjico y con no sé qué byte torcido que me impide hacer ciertas cosas y no refleja exactamente qué sigo o no sigo, la cuestión de follow y nofollow es un tema que siempre me da vueltas en la cabeza y que me perturba porque yo no creo en la web ególatra y no quiero una web hoguera de vanidades.

No me sigue nadie y soy un paria. Me siguen 200 y soy una maravilla pero ... a aquel otro lo siguen 1000 así que soy una maravilla de paria y para colmo a ese otro lo siguen un millon así que mis 10.000 no son nada ... ¡algo debo hacer para que el mundo sepa que soy genial y todos quieran ser mis amigos! Yo soy cool, caramba ¿no se dan cuenta? ¡Síganme!

Este coso del follow de Twitter siempre me pareció una forma de institucionalizar el viejo y espantoso enlazame que te enlazo que, para mi gusto, es más parecido a un chantaje que a otra cosa. Poco tiene que ver con aprecios o reconocimientos, sólo es un trueque de intereses sin demasiada sustancia.

Sin ninguna sustancia.

Quien quiera, puede hacer la prueba práctica, cree una cuenta en Twitter y empiece a seguir a mucha gente, marque 100, 200, 1000, hágalo hasta que se le gaste el dedo índice de tanto hacer click y verá que en pocos días tendrá cientos y cientos de seguidores ¿quienes? ni idea y poco importa, sólo serán cartelitos vacios y un número mágico que dirá: SOMOS ALGUIEN ¿Quién?

¿A quién le importa quién somos? Lo importante es que SOMOS algo y mucha gente nos ve ¿Para qué nos ven? ¡Qué importa!!! Si nos ven, somos alguien. Si somos alguien nos ven pero ¿alguien mira? ¿A alguien le importa mirar?

Está bien, no hay problema, el que quiera ir por ese camino es obvio que tiene derecho a hacerlo, pero, no es el mio. No es filosofía (también lo es pero no viene al caso) es algo práctico: YO LOS LEO y si me siento frente a la pantalla y encuentro 100 tweets con sólo unos pocos a quienes sigo, ¿que pasaría si siguiera a 100 o 400? Hagan la cuenta, multipliquen por 3 por 5 por 10, ¿los leería? La verdad, no ... y si no los leo ¿para que los sigo? ¿para que ellos me sigan? ¿Que importancia puede tener seguir a fulano en lugar de a mengano si total, puedo comunicarme con cualquiera de ellos y ellos pueden comunicarse conmigo?

Las redes sociales son eso, una herramienta de comunicación, probablemente, una de las más importantes que se hayan creado en los últimos tiempos pero nada más: herramientas. Son algo que usamos o no usamos que nos sirven o no nos sirven pero no son un fin en si mismo, son un medio, son para comunicarse, para informarse, para compartir, no son listas vacías de contenido o por lo menos, no deberían serlo.

Bah ... sólo es un delirio de madrugada, sólo algo personal y simplísimo: me niego a jugar el juego de los numeritos. Prefiero saber hacia dónde me dirijo antes que saber quién me sigue. Es más, prefiero que no me siga nadie, preferiría que me acompañaran ...

¿Será pedir demasiado?

... y después que cesaron las pantominas
se quita el maquillaje del rostro para revelar
las lágrimas que corren por sus mejillas:
solo

y sale al mundo pero es demasiado tarde
al final

se ha quedado sin cara ...

Masks - Peter Hammill

Modificando las plantillas (Tutorial 8: Fluido)

Cuando usamos una plantilla de Blogger, lo que vemos en común con todas ellas es que tienen definido un ancho, generalmente escaso para estos tiempos en que los monitores tienen resoluciones de pantalla cada vez más grandes; están pensadas para 800x600 y si bien podemos cambiar ese ancho, siempre, estamos hablando de algún valor fijo.

Una forma diferente de encarar el diseño de una web es utilizar los llamados anchos fluidos es decir, que los distintos sectores del blog cambien de tamaño según sea la resolución de pantalla que utilice quien lo visite.

La forma estandard de hacer una plantilla fluida es utilizar anchos establecidos como porcentajes en lugar de valores en pixeles, de esa manera, del 100% de la pantalla, las entradas podrían tener el 70% del ancho y la sidebar el 30% o cualquier otra proporción. Pero hay que aclarar antes que nada que no hay un diseño bueno y uno malo, dependerá del tipo de contenido y del gusto personal. Ninguno de ellos es perfecto; los anchos fluidos tienen el inconveniente de su propia definición, si todo es variable, no sabemos si este es excesivo o escaso para ubicar determinado elemento, sobre todo, esos que solemos colocar en la sidebar.

Para minimizar estos problemas, hay opciones de diseño que combinan ambas cosas, estableciendo anchos fijos para determinados sectores y anchos variables para otros.

Un ejemplo muy interesante de este sistema es el que se muestra en un artículo de A list apart que ya tiene sus años pero que, con modificaciones, podemos adaptar a un blog de Blogger.

La idea es diseñar una plantilla con tres columnas, una sidebar a la izquierda, el área de entradas al centro y otra sidebar a la derecha. Ambas sidebars tendrán tamaños fijos definidos y el área de entradas será fluida, adaptando su ancho a la resolución del monitor de tal manera que el blog ocupara siempre el 100% de la pantalla.

Un detalle que lo vuelve aún más interesante: como los navegadores muestran las páginas webs en orden, el uso de sidebars a la izquierda suele ser problemático ya que esta se carga antes que las entradas y, como en general los navegantes no tienen (tenemos) mucha paciencia, si el contenido de esa sidebar es excesivo, hay visitantes que simplemente se irán porque todos queremos ver el contenido rápidamente. En este caso, la columna central se mostrará antes que las sidebars, sin importar la disposición de estas.

Blogger tiene una diagramación sencilla (no se rian) que podemos ver en una plantilla mínima si no expandimos los artilugios; el contenido del body es algo así:

<div id='outer-wrapper'><div id='wrap2'>
  <div id='header-wrapper'>
    ....... este es el header .......
  </div>
  <div id='content-wrapper'>
    <div id='main-wrapper'>
      ....... esta son las entradas y se muestran a la izquierda .......
    </div>
    <div id='sidebar-wrapper'>
      ....... esta es la sidebar y se muestra a la derecha .......
    </div>
    <div class='clear'>&#160;</div>
  </div>
  <div id='footer-wrapper'>
     ....... este es el footer .......
  </div>
</div></div>

A este esquema simplemente le vamos a agregar una sidebar extra (la izquierda). Eliminaremos esto:

<div class='clear'>&#160;</div>

y en su lugar, pondremos esto:

<div id='sidebar-wrapper-2'>
  <b:section class='sidebar' id='sidebar2' />
</div>

De aquí en adelante, el resto es puro CSS así que vamos a las definiciones elementales.

El body sólo tiene un dato importante a definir, el ancho mínimo y esto lo podemos calcular sumando el ancho de las dos sidebars (que tendrán anchos fijos) y un poco más, tanto como se nos ocurra que puede ser contraida la columna central, por ejemplo, digamos que será de 300 pixeles; entonces, tendremos:

sidebar izquierda + sidebar derecha + 300 que en este ejemplo dará 250 + 200 + 300 = 750

body {
  margin:0;
  padding:0;
  min-width: 750px;
}

#navbar { /* oculto la navbar */
  display: none;
  height:0;
  visibility: hidden;
}

#content-wrapper {
  padding-left: 200px; /* es igual al ancho de la sidebar izquierda */
  padding-right: 250px; /* es igual al ancho de la sidebar derecha */
}

#content-wrapper #main-wrapper,
#content-wrapper #sidebar-wrapper,
#content-wrapper #sidebar-wrapper-2 { /* propiedades comunes a las tres columnas */
  float: left;
  position: relative;
}

#header-wrapper { /* cualquier propiedad */
   /* no debe tener un ancho definido */
  text-align:center;
}

#outer-wrapper { /* no tiene propeidades */ }

#main-wrapper { /* la columna central con las entradas */
  width: 100%;
}

#sidebar-wrapper { /* la sidebar izquierda */
  /* el margen es negativo y del mismo valor que el ancho */
  margin-right: -250px;
  width: 250px;
}

#sidebar-wrapper-2 { /* la sidebar derecha */
  /* esta es la clave de todo */
  margin-left: -100%;
  right: 200px;
  width: 200px;
}

#footer-wrapper { /* cualquier propiedad */
   /* no debe tener un ancho definido */
  clear: both;
  text-align:center;
}

Sólo nos faltaría algo, evitar que haya problemas en las versiones de Internet Explorer anteriores a la 8; para eso, debajo de ]]></b:skin> agregaremos lo siguiente:

<!--[if lt IE 8]>
  <style type='text/css'> #sidebar-wrapper-2 {left: 250px;} </style>
<![endif]-->

He puesto un demo online donde puede verse el resultado. Para comprobar el efecto basta cambiar el tamaño de la ventana del navegador.

Como añadir los enlaces en un menú

Incluir un menú en el blog no resulta demasiado complicado, especialmente cuando lo añadimos siguiendo las instrucciones de cualquier web de menús o desde alguna de las entradas de mi blog al respecto por ejemplo.

El mayor problema que se presenta y que yo misma he comprobado a través de algunos de los correos que recibo, suele ser a la hora de construir los enlaces del menú, en concreto la pregunta que más se repite es:

¿Como hago para que las pestañas de mi menú lleven a tal o cual página?

Dependiendo del tipo de menú, este constará de códigos distintos para su funcionamiento, pero siempre incluirá el código HTML que será necesario precisamente para la construcción de los enlaces, y que será algo parecido a este código:

<div class="MenuLove">
<div id="Lovenav">
<ul>
<li><a href="url-de_la_pagina" title="cartel_enlace">Inicio</a></li>
<li><a href="url-de_la_pagina" title="cartel_enlace">Enlace_1</a></li>
<li><a href="url-de_la_pagina" title="cartel_enlace">Enlace_2</a></li>
<li><a href="url-de_la_pagina" title="cartel_enlace">Enlace_3</a></li>
<li><a href="url-de_la_pagina" title="cartel_enlace">Enlace_4</a></li>
</ul>
</div>
</div>

Visto así, no es complicado de configurar:

url-de_la_pagina Sustituimos esto por la url de la página o destino que vamos a enlazar.

cartel_enlace Sustituimos por una pequeña descripción, que se mostrará en un cartelito (tooltip) al pasar el ratón sobre la pestaña del menú.

Enlace_1, Enlace_2, etc. Sustituimos por el texto de cada enlace que se verá en el menú.



El problema aparece cuando, a pesar de que sabemos que vamos a enlazar, no tenemos claro como obtener exactamente la url de destino...
Veremos a continuación como conseguir la url de los enlaces más habituales en cualquier menú:

Enlazar una pestaña con la página de Inicio o Home.

Como veis en el código de ejemplo, es el primer enlace que he puesto, allí en lugar de "url-de_la_pagina" es donde colocaríamos la url de nuestro blog.

Enlazar una pestaña con la página de nuestro perfil.

Entramos a la página de nuestro perfil de Blogger y copiamos la url que vemos en el navegador, esa url es la que usaremos en el enlace que dirá "Mi perfil" por ejemplo.

http://www.blogger.com/profile/06743611108067453905

Enlazar una pestaña con una entrada.

Si tenemos añadido en una entrada el formulario de correo, un mensaje de bienvenida, o lo que sea, y queremos enlazar esa entrada concreta en el menú, pinchamos sobre el título de la entrada para que dicha entrada se muestre en su propia página (donde se ven los comentarios debajo de ella) y copiamos la url que vemos en el navegador. Esa es la url que usaremos para enlazar la entrada desde la pestaña correspondiente del menú.

http://elescaparatederosa.blogspot.com/2009/08/manual-blogger-para-principiantes.html

Enlazar una pestaña con una etiqueta concreta.

El procedimiento es exactamente igual que para las entradas, solo que en este caso usaremos la url que vemos una vez hemos pinchado sobre la etiqueta a enlazar, y que mostrará todas las entradas con esa etiqueta.

http://elescaparatederosa.blogspot.com/search/label/Blogger

Enlazar una pestaña con un mes de archivo.

Para mostrar solo las entradas del mes de vacaciones o lo que sea... El mismo procedimiento que los anteriores, pero obtendríamos la url pinchando sobre el mes a enlazar en el gadget de archivos:

http://elescaparatederosa.blogspot.com/2009_07_01_archive.html

Enlazar una pestaña con el "suscribirse".

Si no estamos usando un servicio distinto al de Blogger para facilitar la suscripción, la url a colocar en el enlace y que por defecto proporciona Blogger, sería esta:

http://NOMBRE DE NUESTRO BLOG.blogspot.com/feeds/posts/default


Para enlazar un sitio fuera del blog, por supuesto que tendríamos que colocar la url del sitio en el enlace.

Guardar, añadir, y enviar copia de la plantilla

Hace tiempo para tener una copia de la plantilla lo hacíamos copiando el código de la plantilla y pegándolo en un archivo que más tarde guardaríamos con extensión txt, proviene de Text y viene a ser lo mismo que (texto)

Más tarde tuvimos la opción de descargar la plantilla con un simple click, pero últimamente veo que hay muchas dudas sobre la forma de guardar una copia de la plantilla y creo que a estas alturas todos deberíamos saber guardar el archivo XML que Blogger proporciona, de esa forma podemos añadir de nuevo la plantilla en una abrir y cerrar de ojos.

Dicho así parece que hablemos de numeración romana y no va por ahí la cosa es mucho más sencillo y lo podemos hacer siguiendo el ejemplo de las siguientes imágenes

Nos situamos en plantilla Edición de HTML y pulsamos sobre "Descargar plantilla completa"

Cuando nos pide si Abrir o Guardar archivo marcamos Guardar archivo

Ya tenemos el archivo de la plantilla en nuestro PC listo para usar en cualquier momento.

Si queremos añadir de nuevo esa plantilla en un blog nos situamos en Edición de HTML pulsamos Examinar localizamos el archivo que guardamos y volvemos a pulsar esta vez en Subir

Algunas veces para solucionar un problema me enviáis una copia de la plantilla en archivo de texto o pegado en el mismo correo, en lugar de eso es mucho mejor enviar el archivo XML de la plantilla lo podemos hacer enviando el archivo como datos adjuntos.

Vida de perros

El problema no es que haya animales viviendo como personas sino que hay demasiadas personas viviendo como animales ...

Dog´s Life es un comercial para la televisión de Portugal, dirigido por Rita Nunes para Amnesty International.

Evitar que se indexe cierto contenido

Así como agregando el atributo rel="nofollow" se le indica a Google que no indexe determinado enlace, parecería que también es posible evitar que indexe contenidos más amplios y para eso existen estas dos etiquetas: googleoff y googleon que, simplemente, le indican a los robots del buscador que ignore lo que se encuentre entre ellas.

Tiene distintos parámetros:

<!--googleoff: all -->
  todo lo que esté entre ambas etiquetas no será indexado
<!--googleon: all -->

esto se indexa
<!--–googleoff: index–--> esto no se indexa <!--–googleon: index–-->
esto se sigue indexando

<!--googleoff: anchor -->
  todos los enlaces entre ambas etiquetas no serán indexados pero si el resto del contenido
<!--googleon: anchor -->

De alguna manera, es similar a las etiquetas que provee Adesense y que permiten seleccionar las áreas relevantes cuando se inserta publicidad:

<!--– google_ad_section_start–-->
esta es el área relevante
<!--– google_ad_section_end–-->

REFERENCIAS:WEBtaller

Mi buscador interno

Cuando tenemos interés por algo o ese algo nos sale mal nos angustiamos, no damos tiempo a pensar que pueden haber mil soluciones, sólo hay que buscarlas o mejor dicho aprender a buscarlas.

Debemos saber que los buscadores que vemos en cualquier sito web están para realizar una función, dicha función es localizar artículos escritos que contengan la palabra que ingresamos en el buscador. No es nada complicado, si queremos buscar por ejemplo algo relacionado con los títulos de la sidebar la palabra idónea para buscar sería "sidebar" seguramente nos dará varios resultados es ahí donde debemos tener paciencia y buscar aquella relacionada con nuestra búsqueda.

A veces lo que buscamos no está porque un blog no es una enciclopedia, otras es necesario dedicar unos minutos más de la cuenta porque la palabra que escribimos en el buscador no coincide con la misma que el autor a dado a ese tema que buscamos, un ejemplo sería buscar "columna" cuando en realidad nos referimos a "sidebar" o "cabecera" cuando lo que buscamos se refiere al header.

La idea de esta entrada no era "enseñar" a nadie como utilizar un buscador sino explicar la forma de añadir un buscador idéntico al que hay en mi sidebar, ocurre que guarda cierta relación una cosa con otra y me fui por las ramas.

Añadimos la imagen y estilos para el texto en plantilla Edición de HTML, justo antes de ]]></b:skin>

#buscador {

background:transparent url(url de la imagen) no-repeat scroll 0 0;border:medium none;

color:#CCCCCC;

font-family:Georgia,serif;

font-size:17px;

font-style:italic;

padding:5px;

width:210px;

}

La imagen es la siguiente, podemos guardarla en nuestro PC para luego subirla a nuestro sitio de alojamiento, una vez conseguida la url la pegamos sustituyendo en los estilos donde dice "url de la imagen" por la url de nuestra imagen.

Guardamos los cambios y en plantilla de diseño editamos un nuevo gadget de HTML donde incluiremos:

<form action="http://search.blogger.com/" target="_blank"

name="b-search"><input class="buscador" value="gemablog-.blogspot.com/" name="bl_url" type="hidden"/>

<input id="buscador" onfocus="if (this.value == &quot;Buscar...&quot;) this.value = &quot;&quot;;" value="Buscar..." name="as_q" onblur="if (this.value == &quot;&quot;) this.value = &quot;Buscar...&quot;;" type="text"/>

</form>

» Donde gemablog-.blogspot.com/ lo sustituimos por la url de nuestro blog (sin http://)
» Buscar... es el texto que podemos sustituir por otro.

Con esta entrada espero responder a varias peticiones sobre el buscador.