Espiando el Firefox 3

JMiur [E]

A la salida de la Firefox 3 RC2 (Second Firefox 3 Release Candidate), que, desde hace unos días puede descargarse desde Mozilla y la promoción del Download Day 2008 para establecer un record Guinness, ahora, la gente de Firefox le ha sumado un nuevo elemento de promoción; un video de cuatro minutos donde se explican las principales novedades que se han incluido:

REFERENCIAS:

The Inquirer

Zona Firefox

Un acordeón horizontal en sólo unas líneas

Slidemenu es otro mini-script de Leigerber que, con solo unas líneas, nos da la posibilidad de crear una acordeón horizontal donde podemos agregar menúes, imágenes o cualquier otro contenido.

¿Qué necesitamos? El script que podemos descargar de su página y que tiene dos variaciones: el original funciona cuando colocamos el mouse encima de la solapa

y la variante que hace lo mismo pero las solapas se cierran cuando quitamos el mouse

Sea cual sea la que elijamos, el ZIP contiene un ejemplo completo aunque, lo que necesitamos es muy poco.

Primero subimos el script a un servidor y lo cargamos en la plantilla antes de </head>:

<script src='URL_slidemenu.js' type='text/javascript'></script>

Luego, agregamos el estilo CSS que tendrá muchas variantes pero que, como mínimo dice esto:

<style type='text/css'>
.sm { /* es la clase genérica */
display: block;
height: VALORpx; /* el alto de la imagen o bloque */
list-style: none;
overflow: hidden
width: VALORpx;  /* el ancho total que normalmente será 100% */
}
.sm li { /* cada una de las solapas */
display: inline;
float: left;
overflow: hidden
}
</style>

Podemos crear utilizar la cantidad de solapas que queramos ya que será el mismo script el que se encargue de "repartirlas" de manera pareja a lo ancho. Esas solapas son sólo items de una lista así que sus propiedades CSS pueden ser múltiples, imágenes de fondo, bordes, tamaño, etc.

Creamos el menú con un poco de HTML; por ejemplo:

<ul id="nombre" class="sm">
<li>el contenido de la primera solapa</li>
<li>el contenido de la segunda solapa</li>
<li>el contenido de la tercera solapa</li>
</ul>

Por último, llamamos a la función correspondiente. Esto, lo podemos hacer de varias formas. En general, lo razonable sería agregarlo a la etiqueta body:

<body onload="slideMenu.build('ID',ancho,v1,v2,n)">

Pero, en Blogger, esto es complejo ya que el editor suele rechazarlo o bien transformarlo en algo ininteligible e inútil así que lo mejor es agregar la función justo antes de </body> o después del código HTML del acordeón; en ambos casos, el código es el mismo:

<script type='text/javascript'>slideMenu.build('ID',ancho,v1,v2,n);</script>

Donde los parámetros son:

ID es el nombre del atributo ID del bloque (por defecto 'sm')
ancho es el ancho máximo en pixeles de la solapa expandida
v1 y v2 son las velocidades de reacción para desplegarse (1 es lo más rápido)
n es el número de la sección que se verá expandida

En este ejemplo, la función dice:

slideMenu.build('sm',200,10,10,1);

La vida es injusta

¿follow o nofollow?

¿Seguir o no seguir? (That is the question).

Nofollow (no seguir) es un atributo HTML que puede agregarse a los enlace si queremos que estos no sean tenidos en cuenta por los buscadores. Es un invento diseñado por Matt Cutts (de Google) y Jason Shellen (de Blogger) que comenzó a usarse en el 2005 con el fin de evitar el spam en los comentarios de los blogs.

En poco tiempo, todas las plataformas de blogs y webs importantes, desde Wordpress y Drupal hasta la Wikipedia y Technorati adoptaron el sistema y agregaron el atributo nofollow a sus enlaces con lo que se pretendía evitar que la gente utilizara páginas muy visitadas para conseguir backlinks y aumentar su PageRank.

En la práctica, esto:

<a href="unaPaginaWeb">ENLACE</a>

se transforma en esto:

<a href="unaPaginaWeb" rel="nofollow>ENLACE</a>

También puede aplicarse de manera genérica agregando una etiqueta META en el header:

<meta name="robots" content="index, nofollow">

Google sigue insistiendo en que se siga usando en cualquier lugar donde los usuarios puedan agregar enlaces por si mismos y no lo hace sólo por evitar el spam sino también para que en los resultados de las búsquedas no aparezcan datos irrelevantes.

Algunos especialistas dicen que no es cierto que este tipo de enlace no es tenido en cuenta por los buscadores y hay experimentos realizados que parecen confirmar esa duda.

De un tiempo a esta parte hay una gran discusión en la web sobre el asunto e incluso hay sitios que promueven evitar su uso. La idea se ha extendido y hay muchos blogs que han comenzado a quitarlo de sus páginas.

Los argumentos en uno u otro sentido son variados, quienes recomiendan eliminarlo dicen que su uso no garantiza que nos libraremos del spam y que, en todo caso, existen métodos como la moderación de comentarios que permiten hacer lo mismo. Dicen: colocar nofollow en un enlace es lo mismo que decir, no confío en ese enlace.

En realidad, más allá de detalles técnicos, la esencia de la objeción a usarlo es promover los comentarios y eso ya es un tema demasiado personal para hacer una evaluación porque podemos encontrarnos con sugerencias bastante discutibles:

Google privilegia las páginas con PageRank ... comenten en posts antiguos
Se el primero en comentar y obtendrás tráfico
Usa letra negrita para atraer la atención
Muéstrate en desacuerdo, usa el humor

O más razonables: "Premiar los comentarios".

Desde el punto de vista práctico, si alguien quiere eliminar ese atributo puede leer un muy buen artículo al respecto en El escaparate de Rosa

aunque deben tenerse en cuenta un par de detalles para que el resultado no nos sorprenda porque podemos eliminar el nofollow de nuestra plantillas pero no totalmente.

En una plantilla de Blogger podemos ver ese atributo en dos lugares específicos: los backlinks y los autores de los comentarios. El primero no tiene mayores inconvenientes; el de los comentarios es dudoso porque si el autor utiliza su cuenta normal para ingresar, el enlace generado no apuntará a su sitio sino a su perfil en el mismo Blogger así que el "premio" es nulo.

Además, hay que tener en cuenta que sin importar lo que hagamos ni como modifiquemos la plantilla, el contenido de los comentarios es manejado por Blogger y cualquier enlace interno, cualquier link agregado dentro de un comentario SIEMPRE tendrá el atributo nofollow porque se lo agregará Blogger de manera automática de la misma manera en que lo hacen casi todos los servicios de blogs, incluyendo Wordpress donde es necesario recurrir a plugins para eliminarlos o modificar los arhivos PHP del sistema si es que tenemos acceso a ellos.

Es verdad que un blog es una conversación y los comentarios son una parte sustancial pero ¿es necesario fomentarlos? A primera vista, uno diría que sí pero ¿tendrán el mismo valor si los "premiamos" que si son espontáneos? Imagino que hay tantas respuestas como personas así que no pienso responder.

Cajas de mensajes con estilo

¿Qué son las cajas de mensajes?

Seguramente los habrán visto muchas veces. Tal vez es difícil de explicar, lo mejor es mirarlas:

Fundamentalmente, se utiliza para mostrar textos resaltados, diferenciados del resto y suele haber varios modelos, uno para cada tipo de información.

Hacerlos no es difícil y si usamos CSS, podemos generar varios, transformarlos en clases y utilizarlos cuantas veces los necesitemos sin tener que escribir mucho código. Básicamente, lo que necesitamos es establecer las propiedades y tener un conjunto de imágenes o íconos representativos

Como en Janko at Warp Speed ya hay un artículo bastante claro al respecto, vamos a usarlo y ahorrarnos trabajo.

Los mensajes, los colocaremos en un DIV (o cualquier etiqueta de bloque) y la clase tendrá una imagen de fondo que, en este caso, será un CSSGIF transparente de 32x32 a la que posicionaremos 10 pixeles a la izquierda y centraremos verticalmente. Eso, lo hacemos con estas propiedades:

background-repeat: no-repeat;
background-position: 10px center;

Para que el texto se separe de los bordes y no se superponga con la imagen, agregamos la propiedad padding:

padding:15px 10px 15px 55px; /* arriba derecha abajo izquierda */

Así, dejamos un espacio de 15 pixeles arriba y abajo, 10 pixeles a la derecha y lo separamos mucho de la izquierda, tanto como sea necesario para que la imagen quede intacta.

Lo ideal es crear clases con nombres que recordemos con facilidad y las propiedades comunes las agrupamos. Por ejemplo:

.informacion, .descarga, .referencia {
  background-position: 10px center;
  background-repeat: no-repeat;
  font-family: Tahoma;
  font-size: 14px;
  margin: 10px 0px;
  padding: 15px 10px 15px 55px;
}

Y luego, los detalles individuales de cada una:

.informacion {
background-color: #F7F79C; /* el color de fondo */
background-image: url(laImagen); /* la imagen representativa */
color: #002299;  /* el color del texto */
}
.descarga {
background-color: #94F79C;  /* el color de fondo */
background-image: url(laImagen); /* la imagen representativa */
color: #000000;  /* el color del texto */
}
.referencia {
background-color: #6B9CFF; /* el color de fondo */
background-image: url(laImagen); /* la imagen representativa */
color: #FFFFFF; /* el color del texto */
}

Las clases, las usamos en cualquier etiqueta "contenedora":

<div class="informacion">el contenido del mensaje</div>

<p class="descarga">el contenido del mensaje</p>

De esta manera, la caja del mensaje se adaptará automáticamente al tamaño del contenido y no tendremos que preocuparnos por su altura:

MODELO 1: Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

MODELO 2: Nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

MODELO 3: Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Como son etiquetas de bloque, ocupan todo el ancho, si quisiéramos que fueran más chicas y aparecieran centradas deberíamos agregar las propiedades correspondientes:

width:80%; /* el ancho puede ser un porcentaje o una medida fija */
margin-left: auto; /* centrada con respecto a la izquierda */
margin-right: auto; /* centrada con respecto a la derecha */

Esto, lo podemos poner en las clases o, hacer variaciones específicas en alguna etiqueta:

<div class="referencia" style="width: 80%; margin-left: auto; margin-right: auto;">
  el contenido del mensaje
</div>

MODELO 4: Ut wisi enim ad minim veniam.

MODELO 5: Ut wisi enim ad minim veniam.

MODELO 6: Ut wisi enim ad minim veniam.

Le podemos agregar bordes:

border:1px solid #C7C7C7;
border:3px ridge #FFAD08;

MODELO 7: Nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

MODELO 8: Nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

O poner una al lado de otra si les damos anchos pequeños y las hacemos flotar:

<div class="referencia" style="float: left; width:150px;">
  el contenido de una
</div>
<div class="descarga" style="float:left;width:150px;margin-left:5px;">
  el contenido de otra
</div>
<div style="clear:both;"></div>

MODELO 9: Vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio

MODELO 10: Vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio.