

El mejor navegador es el que nos resulta útil |
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.
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.
El elemento Header (2) |
<b:if cond='data:blog.pageType == &:quot;item&:quot;'>
<style>
#header-wrapper { background: transparent url(URL_IMAGEN) no-repeat left 50%; }
</style>
</b:if><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>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>setInterval('scrollBanner(200,false)', 100);setInterval('scrollBanner(200,true)', 100);
El elemento Header (1) |
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'><b:section class='header' id='header'>
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á ...
}background: transparent url(URL_IMAGEN) no-repeat left 50%;background: transparent url(URL_IMAGEN) no-repeat valorpx valorpx;background: transparent url(URL_IMAGEN) no-repeat 10px 50px;background: transparent url(URL_IMAGEN) repeat left top;#header h1 {
.......
display: none;
}#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; }
Espejos |

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.
El título y la URL del blog |
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

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.
Menú animado con JQuery |
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1.3.2");
</script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js' type='text/javascript'/>
<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>
<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>
<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>




