Vagabundia

viernes, julio 25, 2008

¿Tienes actualizado tu navegador?

siguen haciendo preguntas. Esta vez, apuntan a un estudio realizado por Google, IBM y ETH Zurich que demuestra como millones de usuarios de internet siguen utilizando versiones no actualizadas de sus navegadores.

En términos generales, las actualizaciones, recomendables o no, son algo personal, tanto como cuál es el navegador que usamos; sin embargo, desde el punto del diseño de una web, no es un tema menor.

Las estadísticas de visitas de este blog vienen mostrando la misma proporción casi desde su inicio; Internet Explorer y Firefox se reparten el total de visitas por mitades:

Hasta ahí no hay nada extraño, lo que llama la atención es la cantidad de usuarios que siguen usando IE6 y no han actualizado a IE7 pese a que hace ya mucho que puede descargarse sin restricciones.

En el caso particular de un blog, "que Internet Explorer no siga los estándares no es un problema moral, es un problema práctico" y no cabe duda que muchos de los inconvenientes que se producían en IE6 han sido superados en la nueva versión

Firefox	Internet Explorer

Creo que es el momento de "jubilar" Internet Explorer 6 ya que resulta casi imposible compatibilizarlo con el resto o requiere un esfuerzo extra que no sé hasta que punto vale la pena. El tiempo pasa y no sólo nosotros nos ponemos viejos ...

Las confusiones de la vida moderna

jueves, julio 24, 2008

Las listas en HTML (2)

Si las listas parecen tener tan pocas alternativas ¿por que se usan tanto? Porque son cómodas pero, para sacarles provecho hay que entender un poco como las afectan las propiedades CSS.

Por defecto, la separación entre un item y otro es equivalente a la altura de la fuente. Eso, lo controlamos con la propiedad margin o, individualmente con margin-top y margin-bottom; sólo hay que tener en cuenta que los márgenes son "invisibles" es decir, el tamaño del elemento no cambia. Esto que parece raro, es fácil de entender si le colocamos un color de fondo.

Otra forma es usar la propiedad height pero, aumentar la altura, no hará que se alineen los textos. Lo mejor es utilizar la propiedad line-height. Con ella, aumentamos el espacio que ocupa el texto y siempre lo veremos centrado verticalmente:

Lista Normal	Propiedad margin	Propiedad height	Propiedad line-height

Una de las propiedades de las lista que les da flexibilidad es display. Por defecto, los items se muestran una debajo del otro pero si les agregamos la propiedad display:inline, veremos los items uno al lado el otro. Eso es lo que normalmente se hace para crear menús.

ITEM 1 ITEM 2 ITEM 3	ITEM 1 ITEM 2 ITEM 3
background-color: #555555;	background-color: #555555; display: inline; margin-left: 10px; padding: 2px 5px;

Con la propiedad list-style-image podemos personalizar las listas cambiando los bullets por una imagen cualquiera. Si la colocamos en UL, la imagen se usará en todos los items LI:

<ul style="list-style-image: url(URL_imagen)">

Si la colocamos en LI, será válida para cada item así que podrá haber varias en una misma lista:

<li style="list-style-image: url(URL_imagen)">

ITEM 1
ITEM 2
ITEM 3

ITEM 1
ITEM 2
ITEM 3

ITEM 1
ITEM 2
ITEM 3

En todos los casos, UL debe tener un padding-left de 1.5em como mínimo porque sino, la imagen aparecerá "partida":

ITEM 1
ITEM 2
ITEM 3

Como bajo ciertas condiciones, el uso de list-style-image suele tener problemas en IE, últimamente se está reemplazando esta propiedad por background que funciona con cualquier etiqueta. Esto, incluso, nos permite tener un mejor control sobre cada item ya que si eliminamos list-style-type, podemos manejar las listas de modo más sencillo.

Por ejemplo, de esta manera podemos implementar un efecto rollover:

ITEM 1 ITEM 2 ITEM 3 ITEM 4	ITEM 1 ITEM 2 ITEM 3 ITEM 4	ITEM 1 ITEM 2 ITEM 3 ITEM 4

UL {
  list-style-type: none;
  margin: 0 auto;
  padding: 0;
  width: 160px;
}
UL li {
  background: transparent url(URL_imagen1) no-repeat left 50%;
  cursor: pointer;
  padding: 0 0 0 20px;
  line-height: 20px;
}
UL li:hover {
  background: transparent url(URL_imagen2) no-repeat left 50%;
}

UL {
  list-style-type: none;
  margin: 0 auto;
  padding: 0;
  width: 160px;
}
UL li {
  background: transparent url(URL_imagen1) no-repeat left 50%;
  cursor: pointer;
  padding: 0 0 0 20px;
  line-height: 20px;
}
UL li:hover {
  background: #FF9933 url(URL_imagen2) no-repeat left 50%;
  color: #000000;
}

UL {
  list-style-type: none;
  margin: 0 auto;
  padding: 0;
  width: 160px;
}
UL li {
  background: transparent url(URL_imagen1) no-repeat left 50%;
  cursor: pointer;
  line-height: 20px;
  padding: 1px 0 1px 20px;
}
UL li:hover {
  background: transparent url(URL_imagen2) no-repeat left 50%;
  border-bottom: 1px solid #800000;
  border-top: 1px solid #800000;
  padding: 0 0 0 20px;
}

Otra posibilidad para moderar comentarios

Según dicen en Google Operating System, Blogger no hace mucho para evitar el spam. Lo única que existe es la posibilidad de moderar los comentarios y, si queremos, agregar una verificación de palabras (CAPTCHA).

En el artículo, sugieren que Google debería implementar algún sistema adicional como Akismet, el mismo que usa WordPress.

Una nueva función que ya está disponible es la moderación de comentarios pero a la que puede indicársele una fecha; es decir, los comentarios anteriores a cierta fecha serán moderados y los más recientes no.

Por defecto, el valor establecido es 14 días pero podemos indicar cualquier otro número.

Aquí entonces, comienza la discusión.

¿Hay tanto spam como dice el artículo? Claro, la gran diferencias es que Google Operating System tiene casi 70 mil suscriptores y está en inglés pero, aún así teniendo 70 veces menos suscriptores, la cantidad de spam real que he recibido es ínfima y, curiosamente, es siempre en los mismos posts ya que deben tener algunas palabras que atraen a los robots malignos.

No sé si en WordPress hay más o menos ya que se usa un filtro y la diferencia es justamente esa, allí "vemos" lo que llega y es considerado como spam y nosotros debemos eliminarlo. En Blogger no lo vemos ya que los elimina directamente. Ninguno es perfecto; Akismet suele bloquear comentarios legítimos sin motivo aparente y en Blogger no lo sabemos porque carece de un sistema para manejarlos.

En realidad, creo que lo más sincero sería decir que la moderación que se coloca en los blogs no es para evitar el spam sino por razones más personales que tienen que ver con el tipo de comentarios recibidos o por el temor a recibirlos. Ambas son razones válidas y no hay reglas, cada uno deberá lidiar con el tipo de sitio que quiera tener y lo deberá manejar como quiera o como pueda.

miércoles, julio 23, 2008

Y sumamos tres plantillas más

Tres plantillas para Blogger, convertidas y rediseñadas por Randomness (Fernandooo1). Habría cuatro pero ... "estoy trabajando en una plantilla que me pidieron -.- Algo girly para mí, pero ya está casi lista. Es cuestión de publicarla: ¡busco tiempo! twitter"

	Birds on a Wire 2.0 Diseño original: Better in Pink (Madeline D'Amato) Demo online: VER Archivo ZIP: DESCARGAR Información y detalles: VER
	City Scape Theme Diseño original: Tutorial Blog Demo online: VER Archivo TXT: DESCARGAR Información y detalles: VER
	Twilight or Eclipse? Demo online: VER Archivo ZIP: DESCARGAR Información y detalles: VER

Mini tutoriales para sacarle provecho a Firefox

Yo no tenía idea de su existencia pero en Mozilla hay una serie de video que muestran de manera muy clara, como sacar provecho de algunas funciones especiales.

Me ha gustado el de personalizar la barra de herramientas de Firefox porque es algo que uso habitualmente: