Un millón de clicks contra la pobreza

Un millón de clicks contra la pobreza porque para que desaparezca, primero hay que verla.

REFERENCIAS:www.1millionclicksagainstpoverty.org

Interesante lista de diferencias entre el CSS de Internet Explorer 6, 7 y 8 publicadas por Smashing Magazine y, en mi opinión personal, lo que demuestra es por qué debemos tener actualizado nuestro navegador.

Muchas veces, las consultas sobre algún tipo de problema se refieren a estos navegadores y allí, tal vez, habría que decir algo políticamente incorrecto: IE8 funciona bien y es muy difícil que si el CSS es correcto, algo no se muestre en este navegador de modo similar al que se muestra en Firefox. En realidad, dejando de lado las nuevas funciones experimentales del llamado CSS3 que no están soportadas, el resto no tiene problemas y, en ciertos casos, es mucho más estricto y obliga a especificar cosas que en otros navegadores están sobreentendidas. Eso, podrá ser un fastidio pero, no sé si lo llamaría un error.

Distinto es el caso de Internet Explorer 6 ya que no es un navegador al que debamos tener en cuenta. Suena feo pero me parece casi elemental. Es cierto, aún es un navegador utilizado pero, por suerte, cada vez menos o así lo que demustran las estadísticas globales de StatCounter.

Excluyendo entonces al "viejito 6", selectores, clases múltiples, pseudo-elementos y pseudo-clases funcionan normalmente incluyendo algo tan utilizado como el hover sobre etiquetas que no sean enlaces. Las únicas excepciones son :focus :before y :after que sólo están implementadas en IE8.

Las propiedades top, right, bottom, left, min-height, min-width, max-height y max-width funcionan; lo mismo que el color transparent y el valor fixed de los fondos; tanto en IE7 como en IE8.

IE8 acepta toda una serie de propiedades para tablas (border-spacing, empty-cells, caption-side), las popiedade para seleccionar regiones (clip), outline (¡era hora!!!!) y los valores ampliados de la propiedad display (inline-block, inline-table, list-item, run-in, table, table-caption, table-cell, table-column, table-column-group, table-footer-group, table-header-group, table-row, table-row-group) de las que alguna vez habrá que hablar porque son una alternativa muy interesante y que en el futuro pueden transformarse en el nuevo modelo de diseño de una página web.

Moraleja rápida: Los navegadores sólo son herramientas y cualquier guerra entre ellos es un problema de empresas de las cuales, los usuarios, no tenemos acciones. Tomar partido por uno u otro es ridículo y esas pasiones deberían dejarse para cosas más importantes y trascendentes. Que cada uno use el que le resulte cómodo y listo. Basta saber que cualquier navegador de ultima generación funciona correctamente y es tan seguro como criterioso sea quien lo maneje.

Siguiendo la idea de la entrada anterior, ¿es posible utilizar diferentes banners en el mismo blog? Sí, hay decenas de alternativas. Una de ellas es establecer banners diferenciados para la página principal y para las páginas individuales. En el CSS "normal" colocamos la imagen por defecto y luego, antes de </head> colocamos una condición que cambiará la imagen de fondo en las páginas individuales:

<b:if cond='data:blog.pageType == &:quot;item&:quot;'>
<style>
#header-wrapper { background: transparent url(URL_IMAGEN) no-repeat left 50%; }
</style>
</b:if>

También es posible tener una lista de imágenes y hacer que estas se muestren de manera aleatoria aunque para esto, deberemos agregar algo de JavaScript. Por ejemplo, ponemos esto antes de </head>:

<style type='text/css'>
#header-wrapper {
background:transparent url() no-repeat left 50%;
/* o usamos background:transparent url() repeat left top; si se trata de un fondo a modo de mosaico */
margin:0 auto;
height: 175px; /* el alto del header */
width: 960px; /* el ancho del header */
}
#header h1 { display: none; }
</style>

<script type='text/javascript'>
//<![CDATA[
// precargar las imágenes
var imagenHeader = new Array();
imagenHeader[0] = "URL_IMAGEN_1";
imagenHeader[1] = "URL_IMAGEN_2";
imagenHeader[2] = "URL_IMAGEN_3";
window.onload = function() {
var alea;
// el valor a usar es igual a la cantidad de imágenes menos uno
alea = Math.round(Math.random()*2);
document.getElementById('header-wrapper').style.backgroundImage = 'url(' + imagenHeader[alea] + ')';
}
//]]>
</script>

De manera similar, podemos hacer que los banners o fondos roten cada cierto tiempo:

<style type='text/css'>
#header-wrapper {
background:transparent url(URL_imagen) no-repeat left 50%;
/* o usamos background:transparent url(URL_imagen) repeat left top; si se trata de un fondo a modo de mosaico */
margin:0 auto;
height: 175px; /* el alto del header */
width: 960px; /* el ancho del header */
}
#header h1 { display: none; }
</style>

<script type='text/javascript'>
//<![CDATA[
// precargar las imágenes
var imagenHeader = new Array();
imagenHeader[0] = "URL_IMAGEN_1";
imagenHeader[1] = "URL_IMAGEN_2";
imagenHeader[2] = "URL_IMAGEN_3";
function bannerRotativo() {
numBanner ++;
if(numBanner >= imagenHeader.length) { numBanner = 0 }
document.getElementById('header-wrapper').style.backgroundImage = 'url(' + imagenHeader[numBanner] + ')';
}
var numBanner = 0;
window.onload = function() {
setInterval("bannerRotativo()", 2000);
}
//]]>
</script>

El valor de 2000 es el tiempo que permanecerá visible cada banner y está expresado en milisegundos (1000 = 1 segundo).

Otra variante, ejecutando un scroll de una imagen:

<style type='text/css'>
#header-wrapper {
background:transparent url(URL_imagen) repeat left top;
margin:0 auto;
height: 175px; /* el alto del header */
width: 960px; /* el ancho del header */
}
#header h1 { display: none; }
</style>

<script type='text/javascript'>
//<![CDATA[
function scrollBanner(maxSize,direccion) {
backgroundOffset = backgroundOffset + 1;
if (backgroundOffset > maxSize) { backgroundOffset = 0; }
if(direccion==false) {
document.getElementById('header-wrapper').style.backgroundPosition = '0 ' + backgroundOffset + 'px';
} else {
document.getElementById('header-wrapper').style.backgroundPosition = backgroundOffset + 'px 0px';
}
}
var backgroundOffset = 0;
window.onload = function() {
setInterval('scrollBanner(200,false)', 100);
}
//]]>
</script>

Si queremos que el scroll sea vertical, usamos el valor false:

setInterval('scrollBanner(200,false)', 100);

Si queremos que el scroll sea horizontal, usamos el valor true:

setInterval('scrollBanner(200,true)', 100);

En ambos casos, el valor 200 es el tamaño máximo a desplazar (por lo general, el ancho o alto de la imagen) y el valor 100 es el tiempo expresado en milisegundos.

Siempre he creido que el elemento Header o Cabecera de página es uno de los códigos más absurdos que posee Blogger, difícil de entender [1 | 2 | 3] y aún más difcil de modificar. Por momentos, críptico, se supone que está allí para facilitarnos la tarea y suele tener el efecto contrario; a la hora de personalizarlo, son muchas las preguntas que surgen. Muchas de esas preguntas tienen una raiz común, suponer que el Header es algo diferente al resto, una zona prohibida.

Pero no es así, sólo es una sección como cualquier otra, un rectángulo contenedor donde es posible agregar cualquier otro elemento aunque, por defecto, eso está bloqueado en la mayoría de las plantillas. Para habilitarlo, basta buscar esto:

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

y cambiarlo así:

<b:section class='header' id='header'>

de ese modo, aparecerá en Diseño como cualquier otro elemento y podremos agregarle widgets de cualquier tipo.

Otro inconveniente con el que solemos toparnos es cuando queremos colocar una imagen en lugar del título; las opciones que nos muestran son pocas e inflexibles. Obviamente, lo mejor sería eliminar el elemento por completo y usar un código normal o un elemento HTML pero, vamos a partir de no tocar nada, de dejarlo como está y de olvidarnos de las "facilidades" que nos ofrecen.

Para agregar un fondo en el Header no necesitamos otra cosa que subir la imagen en cualquier entrada, copiar la URL y agregarla en las definiciones del CSS:

#header-wrapper {
  ... la pondremos acá ...
}

Sólo hay que tener en cuenta un par de detalles. Si la imagen es un banner que ocupará todo el ancho, lo mejor es establecer la altura del DIV usando la propiedad height. Deberíamos utilizar algo así:

background: transparent url(URL_IMAGEN) no-repeat left 50%;

Si se trata de un logo que ocupa sólo un sector:

background: transparent url(URL_IMAGEN) no-repeat valorpx valorpx;

donde podemos ubicarlo con precisión, estableciendo los datos de valorpx. Por ejemplo, esto la colocará a 10 pixeles del borde izquierdo y a 50 pixeles del borde superior:

background: transparent url(URL_IMAGEN) no-repeat 10px 50px;

Si se trata de una pattern o imagen que se repite, usaremos:

background: transparent url(URL_IMAGEN) repeat left top;

En todos los casos, no es conveniente eliminar la etiqueta H1 que contiene el título del blog, si no queremos verlo, lo mejor es ocultarlo para que los buscadores lo lean aunque no se vea. Eso nos lleva a un segundo punto importante, el header suele funcionar como enlace a la página principal y eso podemos eliminarlo de este modo:

#header h1 {
  .......
    display: none;
}

A mi juicio, lo mejor es preservarlo así que, sin tocar el código del widget podríamos agregar un par de definiciones extras que harán que no lo veamos pero que permanezca allí:

#header h1 {
  .......
  filter: alpha(opacity=0);
  opacity: 0;
}
#header h1 a { filter: alpha(opacity=0); opacity:0; }
#header h1 a:hover { filter: alpha(opacity=0); opacity:0; }

Con los medios de comunicación hay que tener un poco de sana desconfianza ... pasa lo mismo que con los espejos.

Uno crece en la inteligencia de que los espejos devuelven fielmente la imagen de quien se les pone adelante. Y es una convicción muy fuerte. Hasta que por ahí, alguien, alguna mano malvada empieza a fabricar espejos que deforman. Espejos que no devuelven la verdad, sino la mentira.

Y entonces uno, a la mañana se va a afeitar y ve a una persona rubia, uno que es morocho, ve una persona rubia distinta a la que es uno. Y uno tiene tiene tanta confianza en los espejos que incluso prevalece esa confianza por encima de la realidad. Y uno que se sabe morocho, que ha vivido una morocha vida durante tantos años y que ha andado entre morochos, se ve rubio en el espejo y empieza a asumir rubias conductas ¿Por qué? Porque desde chico nos han dicho que el espejo no miente.

Yo creo que, a lo mejor, ha llegado el tiempo de desconfiar del espejo.

Y de pensar que tal vez, los fabricantes de espejos tienen intereses inconfesables que nosotros no conocemos. Intereses entre los cuales figura el de lograr que nosotros nos creamos rubios siendo que somos morochos.

Así que, más que mirar al espejo, hay que preguntarle al de al lado; al que también es morocho; al que vive como nosotros a ver cómo nos ve, qué le pasa, qué siente. Y, a lo mejor, hay que mirar más la realidad y menos el espejo de la realidad porque a veces, ese espejo, está tendenciosamente modificado y es fraudulento.

Alejando Dolina

Cuando creamos un blog nos preguntan el nombre y elegirlo puede ser dificultoso pero termianmos resolviéndolo, hay pocas rescricciones e incluso, podemos cambiarlo sin problemas o mostrarlo de manera diferente a la que hayamos definido en un primer momento.

También nos piden que definamos la dirección del blog (URL) que, en Blogger, será un subdominio de blogspot.com así que terminará siendo:

http://NOMBRE.blogspot.com

Y ahí comienzan las dificultades. Tal vez, el nombre que elegimos ya existe (Comprobar la disponibilidad) y nos muestren alternativas que no nos convenzan; tal vez, decidimos erróneamente y luego nos veamos en problemas ya que, si bien es posible cambiar esa URL por otra, una vez que nuestro sitio está funcionando, hacer eso genera problemas adicionales.

Todos dicen que es muy importante elegir un buen título para un sitio web pero, esa elección es subjetiva; también dicen que es muy importante elegir una buena dirección URL y esa elección no es tan subjetiva porque hay restricciones que debemos tener en cuenta, tanto para posicionar el blog en los buscadores como para que sea accesible a diferentes herramientas..

Algo en lo que todos están de acuerdo es que la URL debe ser lo más corta posible. No hay demasiadas restricciones técnicas al respecto ya que, dependiendo de los navegadores, estos aceptan URLs con varios cientos de caracters sin problemas pero, es obvio que si la direción es muy larga, nadie la recordará.

Lo ideal es que el título del sitio y la URL sean el mismo o muy similares para evitar confusiones.

Los únicos caracteres admitidos en una URL son los alfanuméricos (números y letras) pero se excluyen los caracteres especiales como la ñ y las vocales acentuadas. Hay una única excepción permitida en Blogger: el guión medio (mi-nombre) aunque en algunos otros sistemas también se admite el guion bajo (mi_nombre) ¿Cuál es mejor? Ni Google lo tiene claro; en lo personal, evitaría el uso de ambos pero, el guión bajo tiene dos problemas extras: genera un problema visual al mostrarse subrayado, no se ve muy claro:

mi_dominio.com
mi_dominio.com

y además, Feedburner no lo reconoce.

Animated Navigation es es un menú animado simple que requiere del uso de la librería JQuery que podemos agregar a nuestro sitio utilizando las AJAX Libraries API de Google agregando lo siguiente antes de </head>:

<script src="http://www.google.com/jsapi"></script>
<script>
  google.load("jquery", "1.3.2");
</script>

o bien, enlazándolas de manera directa:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js' type='text/javascript'/>

El primer paso es agregar el pequeño código del script, también, antes de </head>:

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
  $("#topnav li").prepend("<span></span>");
  $("#topnav li").each(function() {
    var linkText = $(this).find("a").html();
    $(this).find("span").show().html(linkText);
  }); 
  $("#topnav li").hover(function() {
      $(this).find("span").stop().animate({marginTop: "-40"}, 250);
    } , function() {$(this).find("span").stop().animate({marginTop: "0"}, 250);});
  });
//]]>
</script>

Y luego, el CSS que podremos personalizar a gusto:

<style type="text/css">
  ul#topnav {  /* el menú es una lista */
    float: left;
    list-style-type: none;
    margin: 0;
    padding: 0;
  }
  ul#topnav li { /* cada item de la lista */
    float: left;
    height: 40px;
    list-style-type: none;
    margin: 0;
    overflow: hidden; /* importante */
    padding: 0;
  }
  ul#topnav a, ul#topnav span { /* cada item es un enlace */
    clear: both;
    height: 20px;
    line-height: 20px;
    padding: 10px 15px;
    float: left;
    /* propiedades de color, fonto y fuente de los textos */  
  }
  #menu li a:hover { /* efecto onmouseover sobre los enlaces */
    /* propiedades de color, fonto y fuente de los textos */  
  }
</style>

Hasta allí toda la preparación, ahora, el menú en si mismo que podemos colocar en cualquier parte, donde deseemos mostrarlo:

<ul id='topnav'>
  <li><a href="direccion_URL"> MENU-1 </a></li>
  <li><a href="direccion_URL"> MENU-2 </a></li>
  <!-- cada item es un enlace -->
  <li><a href="direccion_URL"> MENU-X </a></li>
</ul>

Quienes utilicen otro tipo de framework como Prototype + Scriptaculous deben tener en cuenta que habrá un conflicto ya que las librerías son incompatibles. Para esto, hay una solución que implica editar los scripts. Otra alternativa menos elegante pero en este caso, efectiva, es usar un blog auxiliar, colocar el menú allí y cargarlo mediante un IFRAME que es el modo en que se ve en el ejemplo de esta entrada.