La bicicleta invisible

	A Abelha Demo online: VER Descargar: 4shared.com Información y detalles: VER
	Laranja Rosa Demo online: VER Descargar: 4shared.com Información y detalles: VER
	Classic Style con Galeria de Fotos Fancy JQuery Demo online: VER Descargar: 4shared.com Información y detalles: VER
	Leão Branco Demo online: VER Descargar: 4shared.com Información y detalles: VER

REFERENCIAS:>Dicas e Templates Mamanunes

Uno hace el esfuerzo. Trata de ser positivo, de tener algo de fe ... pero ¡nos lo hacen complicado!

Hace unos minutos apareció el mensajito de Blogger donde se me informaba que este blog ya tenía habilitado el nuevo sistema de comentarios.

Lo primero que uno ve es que los comentarios aparecen en una solapa específica donde hay tres secciones: Publicados, Esperando Moderación y Spam:

La primera nos muestra los comentarios ya publicados. Esto es nuevo y una buena idea ya que hasta ahora, no teníamos forma de verlos salvo recorrer las páginas individuales. Se maneja igual que las entradas, pueden seleccionarse, navegar hacia atras y adelante y sobre ellos tenemos tres acciones posibles: Marcarlos como Spam, Suprimirlos o Suprimir su contenido. Esto es un poco confuso pero, aparentemente, Suprimirlo los borra totalmente y Suprimir Contenido lo publica pero "vacio", dejando constancia de su existencia ... no sé para qué.

Si los tenemos moderados, en la solapa correspondiente otra vez aparecerán tres opciones: Publicar, Spam y Suprimir. Lo que ha mejorado con respecto al anterior sistema es que si el comentarista ha ingresado con alguna cuenta válida como la del mismo Blogger, su nombre es el enlace al perfil.

Pero, yo había comenzado esto con una queja y el punto clave, me parece, es que Blogger ha hecho hincapié en el tema spam y si lo primero que uno ve es que han enviado a la carpeta de Spam un comentario del mismo administrador del sitio ... bueno ... no hay manera de confiar en nada más porque es algo tan pero tan pero tan elemental que si no fuera patético, causaría risa:

Los comentarios que veas en la bandeja de entrada “Spam” no son visibles para tus lectores. Desde aquí, puedes eliminar de forma permanente comentarios spam, seleccionándolos y eligiendo la opción de “Suprimir”. También, puedes marcar como “No es spam” a comentarios que hayan sido clasificados incorrectamente (lo que llamamos falsos-positivos). Para ello, selecciona “No es spam” y los comentarios elegidos serán removidos de la lista e inmediatamente publicados en tu blog.

Las acciones que tomes nos van a ayudar identificar mejor el spam en tu blog. Te recomendamos que visites con regularidad la bandeja de entrada de spam para comprobar si existe algún comentario que fue marcado spam cuando no lo era. Aclaración: el filtro para comentarios spam se aplica sólo a los nuevos comentarios.

Puedes reportar cualquier problema con nuestro nuevo sistema de spam haciendo clic en “Informar de problemas de filtrado de spam”, ubicado en la parte inferior de la página “Comentarios" - "Spam” o visitando nuestro Foro de Ayuda.

Qué criterio utilizarán para determinar qué es spam y que no lo es lo desconozco así que, más vale que nos acostumbremos a mirar esa pestaña de manera regular; no es cierto que esto se aplique sólo a los nuevos comentarios; tal como se ve en la captura, mi propio comentario marcado como spam fue realizado hace varios días y para colmo, estaba publicado hasta ahora.

¿Qué debemos hacer con los comentarios spam? No hay explicaciones, aparentemente, deberíamos suprimirlos porque no creo que funcione de manera automática como lo hace el filtro de GMail ... no debería.

En resumen, hay mejoras y ... cosas ridículas.

No sé si esto les ocurrirá a otros blogs pero acá, durante días, de manera errática, el buscador Ajax de Blogger moría sin decir ni pio y los avatares de los comentarios no se mostraban.

Analizando un poco la forma en que se cargaba el blog, todos los navegadores mostraba un error en el script jsapi que se agrega automáticamente y que es una librería genérica de Google. Era raro porque en otros blogs, no pasaba lo mismo y, en teoría, el script es el mismo en todos.

Mirando un poco las Google Libraries API - Developer's Guide veo que ellos están recomendando cargar esa librería en el head de nuestro sitio antes de cualquier otra, llamado pero incluyendo una clave personal de este modo:

<script src='http://www.google.com/jsapi?key=NUMERO_CLAVE' type='text/javascript'/>

Esa clave, la obtenemos fácilmente, registrándonos acá donde sólo debemos aceptar las condiciones y agregar la URL de nuestro sitio. Luego, click en Generar clave de API y listo, la siguiente página nos mostrará esa clave que es un largo monstruo de letras y número.

Desconozco si este es el método correcto o si sólo fue casualidad pero, una vez agregado eso, todo volvió a la anormal normalidad de Blogger.

Cuando dividimos un rectángulo en columnas usando procentajes pueden surgir problemas, sobre todo, en versiones de Internet Explorer inferiores a la 8 así que para responder a ese dilema trataremos de encontrar explicaciones y alguna forma de resolverlos.
Veamos otra vez el esquema mostrado en la entrada anterior:

.fdizquierda1 {float: left; width: 25%;}
.fdizquierda2 {float: left; width: 25%;}
.fdderecha1 {float:right; width: 25%;}
.fdderecha2 {float: left; width: 25%;}

<div class="footerdemo">
  <div class="fdizquierda1">
    <div class="footerdivs">
      ....... aquí irá el contenido de la izquierda .......
    </div>
  </div>
  <div class="fdizquierda2">
    <div class="footerdivs">
      ....... aquí irá el contenido de la izquierda .......
    </div>
  </div>
  <div class="fdderecha1">
    <div class="footerdivs">
      ....... aquí irá el contenido de la derecha .......
    </div>
  </div>
  <div class="fdderecha2">
    <div class="footerdivs">
      ....... aquí irá el contenido de la derecha .......
    </div>
  </div>
</div>
<div style="clear:both;"></div>

Esto, que deberíamos ver así:

en IE7 lo veremos así:

Todo es un tema de aritmética. La pantalla se mide en pixeles y los pixeles son indivisibles así que si el ancho del rectángulo no es un número divisible con exatitud, habrá un resto con el que deberemos lidiar.

Si dividimos por 3 y usamos 33% para cada uno, hay un 1% que sobra así que es difícil que haya problemas pero, si dividimos por dos, por cuatro o por algún otro número ... las matemáticas nos podrían jugar una mala pasada.

Por ejmplo, en este caso, el ancho total (el 100%) es de 635 pixeles así que si lo divido en cuatro, cada recángulo interior (el 25%) tendría que tener 158.75 pixeles cosa que es imposible ya que no existen fracciones de pixeles y el navegador redondea ese valor; me dirá que cada rectágulo interno tiene 159 pixeles y eso, hará que en IE7 no veamos uno al lado del otro sino que uno de ellos, se irá para abajo ya que:

159 + 159 + 159 + 159 = 636

¡Ese maldito pixel que sobra nos arruinará el diseño y nos volverá locos!!!

Soluciones hay varias y todas son molestas. Podemos calcular el ancho real y cambiar los porcentajes por valores absolutos teniendo en cuenta que la suma de ellos no supere el total:

159 + 159 + 159 + 158 = 635

Podemos elegir uno cualquiera de esos rectángulos internos y poner 24% en lugar de 25% o incluso poner width:24.9%; dependerá de cual sea el resto

.fdderecha2 {float: left; width: 24.5%;}

Por último, también podríamos usar un comentario condicional que agregaremos antes de </head>:

<!--[if lt IE 8]>
  <style> .fdderecha2 {width:24.5%;} </style>
<![endif]-->

Así que esto, debería verse bien, incluso en IE7:

Vestibulum ultrices auctor odio, in gravida ligula auctor id. Quisque tempor, enim eget interdum tristique, quam erat aliquet neque, sed rutrum tortor tortor eget est.

Vestibulum ultrices auctor odio, in gravida ligula auctor id. Quisque tempor, enim eget interdum tristique, quam erat aliquet neque, sed rutrum tortor tortor eget est.

Vestibulum ultrices auctor odio, in gravida ligula auctor id. Quisque tempor, enim eget interdum tristique, quam erat aliquet neque, sed rutrum tortor tortor eget est.

Vestibulum ultrices auctor odio, in gravida ligula auctor id. Quisque tempor, enim eget interdum tristique, quam erat aliquet neque, sed rutrum tortor tortor eget est.

Dividir en columnas el pie de página de cada entrada no difiere demasiado de dividir el footer del blog en columnas y hay muchos modos distintos de conseguirlo sin enfermarse en el intento.

La clave es encontrar cuál es el DIV contenedor de todo eso y la mala costumbre de darle diferentes nombres en plantillas adaptadas de otros sistemas puede hacer de esto una tarea complicada para quien comienza. Así, en general, se encuentra dentro de:

<b:includable id='post' var='post'>

y por defecto, tiene este codigo:

<div class='post-footer'>
  .......
</div>

Dentro de esto es probable que se vean otros sectores, que se mostrarán uno debajo del otro, diferentes cosas según sea nuestra configuración: nombre del autor, fecha de publicación, íconos para compartir, reacciones, etiquetas, etc.

Todo lo que allí está es opcional; pueden eliminarse cosas o agregarse otras sin restricciones y lo mejor, para probar, es agregarle otro footer y ver qué pasa y si eso que intentamos, realmente nos convence. En todo caso, luego, podemos mover el contenido a su nueva ubicación. Esa debería ser una regla básica: siempre, dentro de lo posible, lo mejor es no borrar nada hasta estar seguros.

Entonces, vamos a agregarle otro footer al que identificaremos con una clase CSS para poder darle las propiedades gráficas que nos gusten; en este caso, lo llamaré footerdemo pero, puede ser cualquier cosa.

Las propiedades las colocaremos siempre antes de </b:skin> y el HTML, justo antes del último </div> de ese includable:

    ... aquí el footer nuevo ...
  </div>
</b:includable>

.footerdemo {background-color: #000; clear: both; float: left; margin: 20px 0; width: 100%;}
.footerdivs {padding: 10px;}

<div class="footerdemo">
  <div class="footerdivs">
    ....... aquí irá el contenido .......
  </div>
</div>
<div style="clear:both;"></div>

Vestibulum ultrices auctor odio, in gravida ligula auctor id. Quisque tempor, enim eget interdum tristique, quam erat aliquet neque, sed rutrum tortor tortor eget est.

Con esto no veré nada del otro mundo, sólo un rectángulo con la clase footerdemo he agregado otro con la clase footerdivs para evitar problemas y en ese agregué alguna clase de contenido.

Ahora, dividiré ese rectángulo en dos partes iguales, es decir, el ancho total (100%) lo distribuyo, un 50% para la izquierda y otro 50% para la derecha; eso, debo decírselo al navegador así que agrego otras dos divs con dos clases nuevas:

.fdizquierda {float: left; width: 50%;}
.fdderecha {float: right; width: 50%;}

<div class="footerdemo">
  <div class="fdizquierda">
    <div class="footerdivs">
      ....... aquí irá el contenido de la izquierda .......
    </div>
  </div>
  <div class="fdderecha">
    <div class="footerdivs">
      ....... aquí irá el contenido de la derecha .......
    </div>
  </div>
</div>
<div style="clear:both;"></div>

Vestibulum ultrices auctor odio, in gravida ligula auctor id. Quisque tempor, enim eget interdum tristique, quam erat aliquet neque, sed rutrum tortor tortor eget est.

Vestibulum ultrices auctor odio, in gravida ligula auctor id. Quisque tempor, enim eget interdum tristique, quam erat aliquet neque, sed rutrum tortor tortor eget est.

Mientras mantenga mi aritmética aceitada, podría usar cualquier otra distribución 75% + 25% = 100%:

Vestibulum ultrices auctor odio, in gravida ligula auctor id. Quisque tempor, enim eget interdum tristique, quam erat aliquet neque, sed rutrum tortor tortor eget est.

Vestibulum ultrices auctor odio, in gravida ligula auctor id. Quisque tempor, enim eget interdum tristique, quam erat aliquet neque, sed rutrum tortor tortor eget est.

Uno a la derecha y otro a la izquierda es fácil porque para eso está float. Ahora, le agregaremos un tercero; los dos extremos son iguales (100% / 3 es más o menos 33%) ¿y el central? a ese, no lo dimensiono en absoluto y le digo al navegador que se las arregle o hago lo mismo, coloco el ancho y lo centro con la propiedad margin:

.fdizquierda {float: left; width: 33%;}
.fdderecha {float: right; width:33%;}
.fdcentro {margin: 0 auto; width: 33%;}

<div class="footerdemo">
  <div class="fdizquierda">
    <div class="footerdivs">
      ....... aquí irá el contenido de la izquierda .......
    </div>
  </div>
  <div class="fdderecha">
    <div class="footerdivs">
      ....... aquí irá el contenido de la derecha .......
    </div>
  </div>
  <div class="fdcentro">
      ....... aquí irá el contenido del centro .......
    </div>
  </div>
</div>
<div style="clear:both;"></div>

Vestibulum ultrices auctor odio, in gravida ligula auctor id. Quisque tempor, enim eget interdum tristique, quam erat aliquet neque, sed rutrum tortor tortor eget est.

Vestibulum ultrices auctor odio, in gravida ligula auctor id. Quisque tempor, enim eget interdum tristique, quam erat aliquet neque, sed rutrum tortor tortor eget est.

Vestibulum ultrices auctor odio, in gravida ligula auctor id. Quisque tempor, enim eget interdum tristique, quam erat aliquet neque, sed rutrum tortor tortor eget est.

Y lo haré, en ese orden, colocando el centro al final en el código HTML.

¿Quiero dividirlo en cuatro? También es posible, claro que, quedarán pequeños pero, el criterio es el mismo (100% / 4 =25%):

.fdizquierda1 {float: left; width: 25%;}
.fdizquierda2 {float: left; width: 25%;}
.fdderecha1 {float:right; width: 25%;}
.fdderecha2 {float: left; width: 25%;}

<div class="footerdemo">
  <div class="fdizquierda1">
    <div class="footerdivs">
      ....... aquí irá el contenido de la izquierda .......
    </div>
  </div>
  <div class="fdizquierda2">
    <div class="footerdivs">
      ....... aquí irá el contenido de la izquierda .......
    </div>
  </div>
  <div class="fdderecha1">
    <div class="footerdivs">
      ....... aquí irá el contenido de la derecha .......
    </div>
  </div>
  <div class="fdderecha2">
    <div class="footerdivs">
      ....... aquí irá el contenido de la derecha .......
    </div>
  </div>
</div>
<div style="clear:both;"></div>

Vestibulum ultrices auctor odio, in gravida ligula auctor id. Quisque tempor, enim eget interdum tristique, quam erat aliquet neque, sed rutrum tortor tortor eget est.

Vestibulum ultrices auctor odio, in gravida ligula auctor id. Quisque tempor, enim eget interdum tristique, quam erat aliquet neque, sed rutrum tortor tortor eget est.

Vestibulum ultrices auctor odio, in gravida ligula auctor id. Quisque tempor, enim eget interdum tristique, quam erat aliquet neque, sed rutrum tortor tortor eget est.

Vestibulum ultrices auctor odio, in gravida ligula auctor id. Quisque tempor, enim eget interdum tristique, quam erat aliquet neque, sed rutrum tortor tortor eget est.

Cuando se utilizan los plugins sociales de Facebook, uno puede elegir entre agregarlos como IFRAMEs o como scripts. Ellos recomiendan usar esto último ya que, con un cargador genérico, luego podemos agregar diferentes plugins con sólo una línea de código, usando el lenguaje propio de la red llamado XFBML.

Asi que ponemos esto después de <body> y nos olvidamos del asunto:

<div id='fb-root'/>
<script type='text/javascript'>
//<![CDATA[
window.fbAsyncInit = function() {
FB.init({appId: 'PROFILE_ID', status: true, cookie: true, xfbml: true});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/es_ES/all.js';
document.getElementById('fb-root').appendChild(e);
}());
//]]>
</script>

Allí, cambiamos PROFILE_ID por el número de identificación de nuestra cuenta en Facebook y ya podemos agregar los plugins con sencillez:

El botón Me Gusta:
<fb:like></fb:like>

Like-Box:
<fb:like-box profile_id="APP_ID"></fb:like-box>

Comment Box:
<fb:comments xid="APP_ID"></fb:comments>

Activity Feeds:
<fb:activity site="URL_elegida"></fb:activity>

Recommendations:
<fb:recommendations site="URL_elegida"></fb:recommendations>

Login:
<fb:login-button show-faces="true"></fb:login-button>

Live Stream:
<fb:live-stream event_app_id="APP_ID"></fb:live-stream>

Sin embargo, si optamos por este método, suele surgir un problema sobre el que han consultado y que afecta a Internet Explorer. Es fácil de detectar, lo que ocurre es que, simplemente, no funciona y no se ve nada de nada.

En principio, esto es fácil de solucionar porque en los foros de los desarrolladores de Facebook ya se ha publicado la respuesta. Lo que debemos hacer es modificar una etiqueta de nuestra plantilla; un etiqueta que normalmente, jamás tocamos así que debemos hacerlo con prudencia: la etiqueta HTML.

En una plantilla común, esta etiqueta dice esto:

<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

en una de las nuevas plantillas dice esto otro:

<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

En cualquiera de los dos casos, lo que debemos hacer es agregar lo siguiente:

xmlns:fb='http://www.facebook.com/2008/fbml' xmlns:og='http://opengraph.org/schema/

de tal forma que quedará así:

<html xmlns='http://www.w3.org/1999/xhtml'  xmlns:b='http://www.google.com/2005/gml/b'  xmlns:data='http://www.google.com/2005/gml/data'  xmlns:expr='http://www.google.com/2005/gml/expr'  xmlns:fb='http://www.facebook.com/2008/fbml'  xmlns:og='http://opengraph.org/schema/'>

o así:

<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml'  xmlns:b='http://www.google.com/2005/gml/b'  xmlns:data='http://www.google.com/2005/gml/data'  xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:fb='http://www.facebook.com/2008/fbml'  xmlns:og='http://opengraph.org/schema/'>