Y ya llega el fin de otro año

Y la tierra habrá completado su giro alrededor del sol una vez más.

Y pensaremos en los deseos que no se han hecho realidad
en los buenos propósitos que no hemos cumplido
en eso que dejamos atrás para no recuperar nunca
en lo que fuimos
en los ausentes
en los que se han ido
en quienes nos abandonaron.

Y se brindará con lágrimas fingiendo sonrisas.


Y la tierra habrá completado su giro alrededor del sol ... su millonésimo giro imperturbable.

Y pensaremos en lo que hemos aprendido
en lo que cambiamos
en lo que mejoramos
en que esta vez, las utopías se harán realidad
en todo lo que queda por delante
en quienes están al lado
en quienes se quedaron.

Y se brindará con sonrisas hasta las lágrimas.


Y eso es un año viejo y eso es un año nuevo ...
una mezcla de ayeres y mañanas
un inestable equilibrio entre lo que ya no podemos cambiar y eso que tenemos la obligación de cambiar.


Ojala, esta vez, sea cierto y si no, bueno ... sólo será otro año más.

Que tengan un muy feliz comienzo de año

Esta es una forma muy simple de mostrar los backlinks, es decir, quién nos enlaza (enlaces de retroceso) en Blogger (más información sobre Blogger y los vínculos de retroceso 1 | 2).

Lo que debemos hacer es agregar un elemento Feed en la sidebar o donde querramos mostrarlo y allí, escribir la siguiente dirección:

http://search.blogger.com/blogsearch?q=link:miblog.blogspot.com

Cambiando el texto de miblog por el de nuestro sitio.

Eso es todo, una vez guardado, el diseño se adaptara de manera automática.

REFERENCIAS:Blogtecnia

Horizontal Panel Sliding es un script para JQuery muy interesante que generara un panel con enlaces que podemos desplegar y contraer con un efecto de animación.

Primero, vamos a agregar la librería antes de </head>:

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

Y como requiere un plugin extra llamado jQuery Easing, lo descargamos y lo alojamos en un servidor externo:

<script type='text/javascript' src='URL_jquery.easing.1.3.js' />

o lo agregamos copiando y pegando su contenido:

<script type='text/javascript'>
//<![CDATA[
  ... aquí pegamos el contenido del archivo ...
//]]>
</script>

y luego, el script del panel:

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
  $("a#controlbtn").click(function(e) {
    e.preventDefault();
    var slidepx=$("div#linkblock").width() + 10;
    if ( !$("div#maincontent").is(':animated') ) { 
      if (parseInt($("div#maincontent").css('marginLeft'), 10) < slidepx) {
        $(this).removeClass('close').html('Ocultar');
        margin = "+=" + slidepx;
      } else {
        $(this).addClass('close').html('Mostrar');
        margin = "-=" + slidepx;
      }
      $("div#maincontent").animate({ 
        marginLeft: margin
      }, {
        duration: 'slow',
        easing: 'easeOutQuint'
      });
    } 
  }); 
});
//]]>
</script>

El CSS es lo que nos permitirá personalizarlo:

<style type='text/css'>
div#wrap { /* es el rectángulo conteendor */
  margin: 0 auto;
  overflow: hidden; /* esta propeidad es importante */
  position: relative;
  width: 100%;
}
#controlbtn { /* el área superior con Mostrar/Ocultar */
-moz-border-radius-bottomright: 20px;
-moz-border-radius-topright: 20px;
background-color: #345;
padding: 2px 10px;
}
a#controlbtn { /* el texto del enlace Mostrar/Ocultar */
  color: #DEF;
  display: inline-block;
  padding-left: 25px;
  text-decoration: none;
}
a#controlbtn.open { /* la imagen para Mostrar */
  background: transparent url(URL_imagen_MENOS) no-repeat left center;
}
a#controlbtn.close { /* la imagen para Ocultar */
  background: transparent url(URL_imagen_MAS) no-repeat left center;
}
div#maincontent { /* el rectángulo inferior */
  margin-left: 145px;
  position: relative;
}
div#linkblock { /* el rectángulo izquierdo con los enlaces */
  border-right: 1px solid #345;
  float: left;
  margin-left: -145px; /* el valor negativo del margen de div#maincontent */
  width: 125px; /* el ancho contmplando cierto margen */
}
h4 { /* el título */
  clear: none;
  color: #667788;
  font-family: Century Gothic;
  font-size: 22px;
  font-weight: normal;
  letter-spacing: -1px;
  line-height: 1.5;
  margin: 0;
}
#yourlist { /* la lista con las referencias */
  list-style: none;
  margin: 0;
  padding: 0;
}
#yourlist li { /* cada item de la lista */
  margin: 0 0 2px 0;
  padding: 3px 0 3px 10px;
  position: relative;
}
#yourlist li a { /* cada item es un enlace */
  color: #ABC;
  font-family: Tahoma;
  font-size: 17px;
}
#yourlist li a:hover { /* efecto hover */
  color: #BCD;
}
#maincontent p { /* el contenido del rectángulo derecho */
  color: #999;
  font-family: Arial
  font-size: 12px;
}
</style>

¿Cómo funcionan los DIVs? ¿Qué son?

Pués, nada más simple; los DIVs son rectángulos que, por defecto, no tienen ninguna propiedad; es lo que suele llamarse una etiqueta contenedora es decir, un lugar donde podemos agregar cosas. En realidad, cuando digo que no tiene propiedades, me refiero a propiedades extras ya que estas etiquetas tienen algunas características especiales, se "separan" de lo que está arriba y de lo que está debajo de ellas (por eso las llamamos etiquetas de bloque) y tienen un ancho que es igual al ancho total y una altura que depende de su contenido.

Este dato es importante ¿qué es el ancho total? El ancho básico es el de la pantalla del monitor, el BODY de nuestro sitio pero, como podemos poner una etiqueta dentro de otra, el ancho de cada rectángulo depende del ancho del rectángulo que lo contiene.

Si escribimos esto:

<div>
  <div>
    <div>
      <div>
        <div> ....... el contenido ....... </div>
      </div>
    </div>
  </div>
</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tincidunt, lacus eu ultrices faucibus, nulla augue tempus turpis, eu ullamcorper leo urna vel nibh.

No veremos nada distinto a si escribimos esto:

<div> ....... el contenido ....... </div>

Ya que los rectángulos (los DIVs) no tienen propiedades y los tamaños no están definidos así que podemos tener cientos y cientos entrelazados sin que eso cambie absolutamente nada.

Ahora, vamos a darles propiedades. Lo podemos hacer de manera directa, poniendo en cada uno ellos el atributo style:

<div style="....... las propiedades .......">

agregándoles una clase con el atributo class (cosa que es útil cuando tenemos varios elementos con las mismas características y queremos repetirlos):

<div class="miClase">

o dándoles un nombre único con el atributo id si se trata de bloques exclusivos:

<div id="miElemento">

Por ejemplo:

<div style="width:600px;">
  <div style="width:550px;">
    <div style="width:500px;">
      <div style="width:450px;">
        <div style="width:400px;"> ....... el contenido ....... </div>
      </div>
    </div>
  </div>
</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tincidunt, lacus eu ultrices faucibus, nulla augue tempus turpis, eu ullamcorper leo urna vel nibh.

En este ejemplo, no veremos demasiada diferencia salvo que el texto ocupa más líneas porque se encuentra en un DIV más angosto. Pongamosle un color de fondo diferente a cada uno de ellos para verlos mejor:

<div style="background-color:#888;width:600px;">
  <div style="background-color:#666;width:550px;">
    <div style="background-color:#444;width:500px;">
      <div style="background-color:#222;width:450px;">
        <div style="background-color:#000;width:400px;"> ....... el contenido ....... </div>
      </div>
    </div>
  </div>
</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tincidunt, lacus eu ultrices faucibus, nulla augue tempus turpis, eu ullamcorper leo urna vel nibh.

Y padding para separarlos entre si (lo que aumentará sus anchos); en todos ellos, agregaremos padding:10px;:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tincidunt, lacus eu ultrices faucibus, nulla augue tempus turpis, eu ullamcorper leo urna vel nibh.

Y centraremos los rectángulos agregando margin:0 auto; en todos ellos:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tincidunt, lacus eu ultrices faucibus, nulla augue tempus turpis, eu ullamcorper leo urna vel nibh.

Como se ve, el DIV interior está centrado igual que los otros pero su contenido no, el contenido se centra con text-align:center; sin importar si ese contenido es un texto o una imagen:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tincidunt, lacus eu ultrices faucibus, nulla augue tempus turpis, eu ullamcorper leo urna vel nibh.

Salvo casos especiales, las propiedades del contenido, se heredan es decir si el DIV externo dice que la fuente de texto es de 20 pixeles (font-size:20px;) el DIV interior mostrará una fuente de 20 pixeles a menos que alguno de los DIVs intermedios diga lo contrario. En resumen, las propiedades del DIV interior (el que en este caso contiene un texto) dependerán de las propiedades del primer DIV que las defina, mirando siempre desde adentro hacia afuera.

Una plantilla funciona de esa manera, hay muchos DIVs con nombres únicos o clases, metidos unos dentro de los otros y entender este funcionameinto es esencial cuando nos encontramos con un problema.

Si estás vivo, respiras,
si respiras, hablas,
si hablas, preguntas,
si preguntas, piensas,
si piensas, buscas,
si buscas, experimentas,
si experimentas, aprendes,
si aprendes, creces,
si creces, deseas,
si deseas, encuentras,
si encuentras, dudas,
si dudas, haces preguntas,
si preguntas, entiendes,
si entiendes, sabes,
si sabes, quieres saber más.

Y si quieres saber más, es que estás vivo ...

REFERENCIAS:Manejara en Twitter

Me ha gusta el sitio WolfgangsVault sugerido por arturogoga. Es fácil de usar y basta registrarse para acceder a una inmensa cantidad de coniertos en vivo, que podemos escuchar de manera gratuita y sin necesidad de instalar nada.

Podemos buscar en la lista completa o bien por intérprete, dejar comentarios, crear listas, etc. Impresiona la cantidad y variedad que hay disponible.

Se ejecutan en una página tipo pop-up donde se incluye un reproductor con todos los temas.

Algunos de ellos es posible descargarlos aunque, en la mayoría de los casos, esa descarga debe pagarase; sin embargo, algunos pocos son gratuitos. Por el contrario, todos pueden ser insertados en una página web aunque sólo un tema a la vez, copiando el código que nos proveen.

                                                    $f  dF   ,
                .,,,...                            :$L ;$  ,dP
            ,!!!!!!!',cd$$$$$c,                 q  4$f,$$,z$"
          ,!!!!!!!',c$$$$$$$$$$$$c              `$o`$$kuC3$$ .zf
        ,!!!!!!!',c$$$$$$???"""??$c              R$beeF?$$$$$"
       ;!!!!!!! c$$$$$$",eed$$F"?t'               "$$$$bd$$$"
      ;!!!!!!!.d$$$$$F j"j$3$bf""?b?c,             '$$$$$$P"
     !!!!!!:  $$$$$$P J,f  d$$bccbdc`$c          .$k<?????>'$b
     !!!!!!!> $$$$F".$$".,J$??P}"""' ?$$c.       d$$$$$dd$$$$$>
      `!!!!!  ?L e$$ $$$$$P'zee`"$$$$boc"$$,     R$$$$$$$$$$$$
       '!!!   z$$$$$c,"$P'J$$F'zdbeereee$$$$$eu    "??$$$$PF"
Mn      !!   d$$$$$$$$ee z$P",d$$$$$$c?$$$$$$$$C  '!!!::::!!!>
MMM   ,cec, '^$$$$$$$$$c,",e$$C?$$$$$$bc?$$$$$$$k !!!!!!!!!!!!
MMM'.$$$$$$$, ?$$$$$$$$P$$$$$$$bc?T$$$$$$d$$$$$$$ . -.`!!!!!!!
nMM d$$$$$$$F  $$P???",e4$$$$$$$$bcc?$$$$$$$$$$$$ "h..!!!!!!!!!
n.  "$$$$$$$'   ::,"??e,.-.?$$$$$$$$$$$$$$$$$$$$F.,"m.`!!!!!!!'
M":!:`"""""   :!!!!!!;;."?o._"? ?$$$??$$$"$$F"$P<$$$b"?.`!!!!
: !!!!!;     <!!!!!!!!!!:  .,,." .zeElu. : ?eb o$$$$$$c"?c'`
  '`'!!'.ud !!````'!''``zd$$$$$`d$$$CuuJ" !: 4$$$$$$$$$$c"$c
." !'`z$$$":!!!~`..:!!! d$$$$$$$`$$$$FCCJ" !!!: ?$$$$$$$$$h`$L
$$"z$$$$$":!!! :!!!!!'4$$$$$$$$`$$$$$" "" !!!!!:`$$$$$$$$$$ "
?o$$$$$$F !!!!!!!!!!! 4$$$$$$$$;?$P": JL h.`!!!!; $$$$P?",.u-
$$$$$$$$'!!!!!!!!!!!!:'R$$$$$$$E.:! $.$$c3$h.`!!! .l==7Cuec` )
$$$$$$$$ !!!!!!!!!!!!!; ?$$$$P"<!!! ?$`$$$$h.     Rk`$$$$$$r?
$$$$$$$$L`!!!!!!!!!!!!!!! .:::!!!''`   $$$$$$      $c"??"7u+? !
$$$$$$$$$ !!!!!!!!!!!'` :!!''`         '""        .'?b",.;d$ !!!:
$$$$$$$$$b `!!!'''`.. '''`               ...:::!!!!!! $$$.?$b'!!!>
$$$$$$$$$$$bcccd$$$$$$$$        ..:::!!!!!!!!!!!!!!!! 3$$b ?$c`!!!
$$$$$$$$$$$$$$$$$$$$$$$f .::!!!!!!!!!!!!!!!!!!!!!!!!! d$$$$`$$b !!!
$$$$$$$$$$$"3$$$$$$$$$":!!!!!!!!!!!!!!!!!!!!!!!!!!!!! $$$$$,$$$k !!!
$$$$$$$$$P,d$$$$$$$$F !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! 3$$$$$ $$$i`!!! 3>
$$$$$$F$Fz$$$$$$$$$$ !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! d$$$$$h`$$$,!!! $&
$$$$$FJFx$$$$$$$$$$ !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!';$$$$$$$ 9$$$.'.$$$L
$$$$$ F.$$$$$$$$F.r !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! $$$$$$$F  ?$$$e$$$$F
$$$$F .$$$$$$$$"d$$bu,,.```''!!!!!!!!!!!!!!!!'''''`,d$$$$$$$F.! ?$$$$$$F
$$$$F d$$$$$$$$ $$$$$$$$$$$bc,,,,,,,,,,,,,,,,ccd$$$$$$$$$$$$ !!! ?$$$$"
 "$$$e$$$$$$$$&'$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ !!>  $P"
   `"?$$$$$$$$$e`?$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ !!'
      `?$$$$$$$$$$e `""?????$$$$$$$$$$$$$$$$$$$$$$$????""..:!!'
         "?$$$$$$$$k`!!!!!!;;;;;;::,,,...... ,,,,,;;!!!!!!!!!!
             ""???"" !!!!!!!!!!!!!!!!!!!!!!  !!!!!!!!!!!!!!!!!:
                      !!!!!!!!!!!!!!!!!!!'   !!!!!!!!!!!!!!!!!!
                       !!!!!!!!!!!!!!!!.>    `!!!!!!!!!'''!!!!'
                     :; !!!!!!!!!!!!!!!!>    .``''`.,cc,,.```.
                     !!!!!!!!!!!!!!!!!~`    d$$$$$$$$$$$$$$$$$>
                    c.`'''''!!!!!:..        $$$$$$$$$$$$$$$$$$
                    $$$$$eeeeeeeuuuee$      $$$$$$$$$$$$$$$$$"
                    $$$$$$$$$$$$$$$$$$       """"...........
                    ?$$$$$$$$$$$$$$$P"       '!!!!!!!!!!!!!!
                      .."""""""""".:          !!!!!!!!!!!!!
                     :!!!!!!!!!!!!!!          `!!!!!!!!!!!'
                     !!!!!!!!!!!!!!'          !!!!!!!!!!!'::
                     :!!!!!!!!!!!!!           !!!!!!!!!!:!!:.
                     !!!!!!!!!!'!!!           . `!!!!!!!!!!!!`...
                     `!!!!!!!! -'``           !!!!!!!!!!!!!!!!!!!!!;:
                      !!!!!!!!!i!!!:           `'''''```'''''''''''''
                      !!!!!!!!!!!!!!!.
                        ```'!!!!!!!'``::..
                              `!!!!!!!!!!!'
                                 `````

REFERENCIAS:arkworld.com

Feliz Navidad

Click para ver la galería de imágenes.

6800 millones de personas y una sola voz contra el cambio climático ...

REFERENCIAS:Hopenhagen.org

Las URLs cortas se pusieron de moda con Twitter pero existen desde mucho antes que las descubriéramos o que tuviérmos que utilizarlas para que 140 caracteres no fueran demasiado escasos.

¿Qué son estas cosas? Pués, imaginen que una dirección como esta:

http://vagabundia.blogspot.com/2009/12/googl-enviar-los-posts-twitter-usando.html

tiene más de 80 caracteres y eso, dependiendo del servicio que usemos, pude ser reducido.

Por ejemplo, utilizando gaigalas la convertimos en esto: http://goo.gl/1ntC
con bit.ly en esto http://bit.ly/5frSqH
y con tinyurl http://tinyurl.com/yd7blja

Las tres, son la misma dirección codificada de manera diferente así que todas ellas, abren la misma página:

http://goo.gl/1ntC | http://bit.ly/5frSqH | http://tinyurl.com/yd7blja

¿Sirve esto?

Es importante decir que no todos los servicios sirven y no porque la página se abra mal sino por la forma en que nos redirigen; es decir, todos esos servicios, lo que hacen es decodificar esa URL y enviarnos al sitio original pero, para que los buscadores "entiendan" esa dirección e indexen la página real y no la codificada, esos servicios deben hacerlo utilizando algo llamado redirección 301 y, aparentemente, no todos lo hacen (más información).

Es por eso que algunos afirman que el acortar URLs "debilita" la efectividad de los hipervinculos y hay muchas críticas a su uso pero, pese a todo, siguen existiendo y desde el lanzamiento de goo.gl, el servicio de acortameinto de URLs de Google), la cosa se ha vuelto, quizás, un poco más accesible ya que, imagino que ellos harán las cosas bien y las redirecciones serán correctas.

Al principio, este servicio sólo estaba disponible para usar en Chorme o con la Google Toolbar pero, en pocos días, ya han aparecido sitios como el de Alexandre Gaigalas, un bookmarklet y hasta una extensión para Firefox como goo.gl lite.

Con el tiempo, es evidente que esto se extenderá; los códigos están a la vista así que es fácil manipularlos. Tan fácil que podríamos agregar la opción al mismo Blogger, sólo con un par de líneas y de este modo, crear una URL corta para cada entrada de nuestro sitio.

Para eso, necesitamos agregar la función correspondiente antes de </head>:

<script type='text/javascript'>
//<![CDATA[
window.googl_callback=function(response) {
  if(response.error_message) {
    document.getElementById("urlCORTA").innerHTML = ""; // es un error asi que no mostramos nada
  } else {
    respuesta = response.short_url;
    salida = "shortURL: <a rel='nofollow' href='" + respuesta + "' target='_blank'>" + respuesta + "</a>";
   document.getElementById("urlCORTA").innerHTML = salida;
  }
}
//]]>
</script>

La función le solicitará a goo.gle que cree una URL corta para la página actual y esta, se mostrará en una etiqueta con un cierto formato y cuyo ID será urlCORTA; en este caso, será un texto:

shortURL: xxxxxxxxxxxx

que a la vez, será un enlace a abrir en otra ventana (target='_blank') y no indexable (rel='nofollow') para no repetirlo.

Faltaría entonces, agregar esa etiqueta y allí hay muchas variantes; puede estar debajo de los títulos de cada post (como en el ejemplo de este blog); debajo de ellos, en el footer, etc.

Sea como sea, podemos agregarla de este modo, condicionándola para que sólo se muestre en las páginas individuales:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <span id='urlCORTA'/>
  <script expr:src='&quot;http://ggl-shortener.appspot.com/?url=&quot; + data:blog.url + &quot;&amp;jsonp=googl_callback&quot;' type='text/javascript'/>
</b:if>

Y eso es todo. Llegado el caso, si queremos darle alguna clase de estilo, lo agregamos tambien antes de </head>:

<style type='text/css'>
  #urlCORTA {  /* el bloque donde se mostrará */ }
  #urlCORTA a { /* el enlace en si mismo */ }
  #urlCORTA a:hover { /* efecto hover sobre el enlace */ }
</style>

iPhone by bigkobe

Contiene 9 íconos de 128×128 256x256 y 512x512 en formato PNG.descargar

Antique
	Contiene 7 íconos en formato PNG.descargar

Journal by ShrunkenJedi

Contiene 6 íconos de 512×512, en formato PNG.descargar

EcoType by SneakyTomato
	Contiene 32 íconos de 512×512, en formato PNG.descargar

Starbucks by benedik

Contiene 4 íconos de 512×512, en formato PNG.descargar

Este es el modelo de un menú desplegable que sólo requiere CSS y fue publicado por aex.net. Allí, podemos descargar los archivos necesarios para reproducir el demo online.

Con muy pocas modificaciones, podemos adaptarlo a cualquier página; por ejemplo, en este caso, le he quitado la parte de las transparencias para que sea más visible:

• Enlace Simple
• Mis Enlaces 
  • Submeú 1
  • Submeú 2
  • Submeú 3
  • Submeú 4
  • Submeú 5
• Otros enlaces 
  • Submeú 6
  • Submeú 7
  • Submeú 8

Como en la mayoría de los casos, hay dos partes; el HTML es muy simple y se basa en una serie de listas donde, los items con la clase drop son desplegables:

<ul class="menu">

  <!-- este es un item simple -->
  <li><a href="URL_enlace">ITEM SIMPLE</a></li>

  <!-- así, construimos un item desplegable -->
  <li class="drop">
    <a href="#">ITEM DESPLEGABLE</a>

      <!-- este es el ícono que puede ser cualquiera -->
      <span class="toggle">&nbsp;</span>
       
      <!-- el submenú que se despliega -->
      <ul>
        <li><a href="URL_enlace1">TEXTO ENLACE 1</a></li>
        <li><a href="URL_enlace2">TEXTO ENLACE 2</a></li>
        <li><a href="URL_enlace3">TEXTO ENLACE 3</a></li>
      </ul>
  </li>

</ul>

EL CSS tampoco es complicado aunque es un poco engorroso y es la clave de todo:

ul.menu { /* es la lista principal */
  background-color: #A9A9A9;
  float: left;
  list-style-type: none;
  margin: 0;
  padding: 0 20px;
}

ul.menu li { /* cada item de la lista principal */
  border: 2px solid #A9A9A9;
  display: block;
  float: left;
  height: 30px;
  margin: 0;
  padding: 0;
  position: relative;
}
ul.menu li:hover { /* efecto hover sobre los items de la lista principal */
  -moz-border-radius: 4px;
  background-color: #000;
  border:2px solid  #A9A9A9;
}
ul.menu li a { /* cada item de la lista principal es un enlace */
  color: #FFF;
  display: block;
  float: left;
  font-weight: bold;
  line-height: 18px;
  padding: 6px 15px 5px;
  text-decoration: none;
}

/* el ícono para desplegar el menú */
ul.menu li a span {
  font-weight: normal;
  padding-left: 3px;
}
ul.menu li.drop a {
  padding-right: 7px;
}
ul.menu li.drop:hover li {
  border: none;
}
ul.menu li.drop span.toggle {
  background: transparent url(URL_toggle.png) no-repeat scroll 0 -20px;
  display: block;
  float: left;
  height: 26px;
  margin: 0 5px;
  padding: 0;
  width: 20px;
}

/* los efectos al pasar el ratón que desplegarán el submenú */
ul.menu li.drop:hover {
  -moz-border-radius-bottomleft: 0;
  -moz-border-radius-bottomright: 0;
  -moz-border-radius-topleft: 4px;
  -moz-border-radius-topright: 4px;
}
ul.menu li.drop:hover ul {
  display: block;
  padding: 0 0 10px 0;
  z-index: 1;
}

ul.menu li ul { /* la lista con el submenú */
  background-color: #555;
 display: none;
  left: 0;
  list-style-type: none;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 30px;
  width: 100%;
}
ul.menu li ul li { /* cada item del submenú */
  border: none;
  float: none;
  height: auto;
  margin: 0;
  padding: 0;
}
ul.menu li ul li a { /* cada item del submenú es un enlace */
  background-color: transparent;
  color: #DDD !important;
  display: block;
  float: none;
  font-size: 13px;
  font-weight: normal;
  height: auto;
  margin: 0;
  padding: 5px 15px;
}

/* efectos sobre los items del submenú */
ul.menu li:hover ul {
  -moz-border-radius-bottomleft: 4px;
  -moz-border-radius-bottomright: 4px;
  border: none;
  background-color: #555;
}
ul.menu li:hover ul * {
  -moz-border-radius: 0;
  background-color: transparent;
}
ul.menu li ul li:hover {
  background-color: #000;
}

Click para ampliar la imagen.

REFERENCIAS:El blog de Jabba

A veces, suele aparecer un mensaje en nuestra cuenta de GMail diciendo algo asi:

"Hey, this is important: we don't have a password recovery email address or phone number for your account. If you lose your access, we may not be able to help you."

Tanto en inglés como en español nos están informando que no tenemos una cuenta de mail alternativa asociada con nuestra cuenta principal y nos sugieren que la agreguemos.

¿Deberíamos hacerlo? ¿Por qué? Creo que sí, que es una buena idea ya que eso nos permitirá, en caso de no poder acceder con nuestra cuenta principal, hacerlo con esa o solicitar que se nos restablezca una contraseña perdida, por ejemplo.

Lo mejor, entonces, es ir directamente a las opciones de nuestra cuenta de Google y allí, en Dirección de correo electrónico principal hay un enlace que dice Editar donde veremos un campo a llenar: Añade una dirección de correo electrónico adicional.

Colocamos esa otra dirección y nos enviarán un mail a esa cuenta para confirmarla. Eso es todo. Si entramos otra vez, la veremos agregada.

En principio, esas cuentas asociadas pueden ser tantas como se nos ocurra y todas ellas pueden ser eliminadas o modificadas en cualquier momento.

REFERENCIAS:The Real Blogger Status

Como muchos no usan JQuery, me han preguntado si es posible usar algo similar al código para que nos enlacen sin librerías o con cualquier librería, es decir, sólo con JavaScript.

Como la idea es muy simple y está muy bien armada, es fácil convertirla. Bastaría usar este otro script:

<script type='text/javascript'>
//<![CDATA[
function misBanners() {
lista = document.getElementById("listaBanners");
codigo = document.getElementById("codigoBanner");
ejemplo = document.getElementById("ejemploBanner");
var graphicFileName = lista.options[lista.selectedIndex].getAttribute("rel");
var newCode = '<a href="http://miBlog.blogspot.com/"><img src="' + graphicFileName + '" title="Agregar banner" alt="Agregar banner" /></a>';
codigo.value = newCode;
ejemplo.innerHTML = newCode;
}
//]]>
</script>

El código HTML es prácticamente igual, sólo agregamos el evento onChange en la etiqueta SELECT:

<form action="#" id="misBanners">
<div>
<span>Tamaño:</span>
<select onChange="misBanners();" name="listaBanners" id="listaBanners">
<option selected="selected" rel="URL_imagen_1">texto a mostrar</option>
<option rel="URL_imagen_2">texto a mostrar</option>
<option rel="URL_imagen_3">texto a mostrar</option>
<!-- seguimos agregando todas las imágenes que se nos de la gana -->
</select>
</div>
<div>
<span>Código:</span>
<textarea rows="10" cols="25" id="codigoBanner">&lt;a href="http://miBlog.blogspot.com/"&gt;&lt;img src="URL_imagen_1" title="nuestro texto" alt="nuestro texto" /&gt;&lt;/a&gt;</textarea>
<p>Copie y pegue el código en su sitio.</p>
</div>
</form>
<div id="ejemploBanner">
<a href="http://miSitio.blogspot.com/"><img src="URL_imagen_1" title="nuestro texto" alt="nuestro texto" /></a>
</div>

Aunque esta es información repetida en muchos sitios, son de esas cosas que nunca están de más.

A partir de ayer, Google ha agregado una opción extra a Feedburner. Se trata de un servicio que podemos activar y que nos permitiría reemplazar a TwitterFeed; es decir, enviar las entradas publicadas de nuestros sitios a Twitter e, imagino yo, en el futuro, a otras redes sociales.

Para utilizarlo, entramos en la cuenta de Feedburner y en la solapa Publicize, hacemos click en Socialize.

Las opciones que nos muestra son varias pero lo elemental es lo que ya viene configurado por defecto y, en todos los casos, debemos agregar nuestra cuenta de Twitter y autorizar a la aplicación a acceder a ella.

Post Content nos permite enviar sólo el título (que es lo lógico) o incluir el contenido, siempre limitado a 140 caracteres.

Si se marca Include link, el enlace se msotrará como URL corta de tipo http://goo.gl/fb/xxxx

Si se marca Leave room for retweets, el tweet será recortado (si es necesario) para que pueda ser retweeteado fácilmente.

Por defecto, no se agregan hash tags (#palabra) pero si se marca la opción Create hash tags from item categories, estas se incluirán en el tweet (en Blogger serán las etiquetas del post). En lo personal, no lo recomiento porque el uso de esaos hashs suele ser abusivo y molesto.

Additional Text es el texto optativo adicional que aparecerá en el tweet, por ejemplo, antes del título: "Nuevo Post: Este es el título del post".

Item Selection es donde le indicamos la cantidad máxima de tweets a enviar por día (máximo 8). La demora máxima entre la publicación y la aparición del tweet es de unos 30 minutos pero, esto puede variar.

Con Keyword Filter podemos crear algún tipo de filtro como por ejemplo, sólo enviar tweets de cierta categoría o que contengan ciertas palabras

Una vez que indicamos nustras preferencias, debemos Hacer click en Guardar y el servicio ya está activo.

Esta es una forma novedosa e interesante de Agregar un elemento para que nos enlacen con un click Gem@ . Requiere el uso de la librería JQuery y fue publicado por CSS Tricks

Si no la usamos, incorporamos la librería desde el mismo Google, poniendo esto antes de </head>:

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

O bien así:;

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

El resultado, será un formulario con opciones donde los visitantes podrán seleccionar entre diferentes banners:

La función que debemos agregar a la plantilla es muy simple:

<script type='text/javascript'>
//<![CDATA[
$(function() {
  $("#listaBanners").change(function() {
    var graphicFileName = $("#listaBanners option:selected").attr("rel");
    var newCode = '<a href="http://miBlog.blogspot.com/"><img src="' + graphicFileName + '" title="Agregar banner" alt="Agregar banner" /></a>';
    $("#codigoBanner").text(newCode);
    $("#ejemploBanner").html(newCode);
  });
});
//]]>
</script>

donde:

listaBanners será el ID de la etiqueta donde listaremos nuestros banners
codigoBanner será el ID de la etiqueta donde se postrará el códiogo a copiar y pegar
ejemploBanner será el ID de la etiqueta donde mostraremos esos banners a medida que se van seleccionando

En esa función, sólo debemos cambiar la URL por la de nuestro sitio y agregar los textos en alt y title.

El código HTML lo agregaremos en donde querramos mostrarlo, por ejemplo, en un elemento HTML de la sidebar:

<form action="#" id="misBanners">
  <div>
    <span>Tamaño:</span>
    <select name="listaBanners" id="listaBanners">
      <option selected="selected" rel="URL_imagen_1">texto a mostrar</option>
      <option rel="URL_imagen_2">texto a mostrar</option>
      <option rel="URL_imagen_3">texto a mostrar</option>
      <!-- seguimos agregando todas las imágenes que se nos de la gana -->
    </select>
  </div>
  <div>
    <span>Código:</span>
    <textarea rows="10" cols="25" id="codigoBanner">&lt;a href="http://miBlog.blogspot.com/"&gt;&lt;img src="URL_imagen_1" title="nuestro texto" alt="nuestro texto" /&gt;&lt;/a&gt;</textarea>
    <p>Copie y pegue el código en su sitio.</p>
  </div>
</form>
<div id="ejemploBanner">
  <a href="http://miSitio.blogspot.com/"><img src="URL_imagen_1" titlr="nuestro texto" alt="nuestro texto" /></a>
</div>

La personalización es sencilla y estas son las definiciones elementales:

<style type='text/css'>
  #misBanners div { /* definimos el ancho del formulario y lo centramos */
    margin: 0 auto 10px auto;
    width: 250px;
  }
  #misBanners span {
    /* los texto Tamaño y Código */
  }
  #misBanners select { /* la etiqueta SELECT */
    border: 2px solid #BCD;
    padding: 2px 2px 2px 6px;
    width: 125px;
  }
  #misBanners option { /* la etiqueta SELECT */
    padding: 0 10px;
  }
  #misBanners textarea { /* la etiqueta TEXTAREA */
    border: 2px solid #BCD;
    height: 75px;
    padding: 5px;
    width: 236px;
  }
  #misBanners p {
    /* el texto Copie y pegue ... */
  }
  #ejemploBanner { /* el DIV donde se mostrarán los ejemplos */
    border: 2px solid #567;
    margin:0 auto;
    padding: 5px 5px 0;
    text-align: center;
    width: 236px; /* ancho menos bordes */
  }
</style>

Tal vez, lo más interesante de las API de YouTube sea la posibilidad de usar un reproductor sin bordes. El uso es prácticamente igual al mostrado anteriormente pero, el hecho de no tener bordes nos obliga a usar nuestros propios botones como enlaces.

Comenzamos siempre con la librería SWFObject que podemos cargar directamente desde Google:

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

Y también cesitamos las funciones del script; lo mejor es empezar con las funciones tal como las muestra el ejemplo online:

<script type='text/javascript'>
function updateHTML(elmId, value) {
document.getElementById(elmId).innerHTML = value;
}

function setytplayerState(newState) {
updateHTML("playerstate", newState);
}

function onYouTubePlayerReady(playerId) {
ytplayer = document.getElementById("myytplayer");
setInterval(updateytplayerInfo, 250);
updateytplayerInfo();
ytplayer.addEventListener("onStateChange", "onytplayerStateChange");
ytplayer.addEventListener("onError", "onPlayerError");
}

function onytplayerStateChange(newState) {
setytplayerState(newState);
}

function onPlayerError(errorCode) {
alert("An error occured: " + errorCode);
}

function updateytplayerInfo() {
updateHTML("bytesloaded", getBytesLoaded());
updateHTML("bytestotal", getBytesTotal());
updateHTML("videoduration", getDuration());
updateHTML("videotime", getCurrentTime());
updateHTML("startbytes", getStartBytes());
updateHTML("volume", getVolume());
}

// functions for the api calls
function loadNewVideo(id, startSeconds) {
if (ytplayer) {
ytplayer.loadVideoById(id, parseInt(startSeconds));
}
}

function cueNewVideo(id, startSeconds) {
if (ytplayer) {
ytplayer.cueVideoById(id, startSeconds);
}
}

function play() {
if (ytplayer) {
ytplayer.playVideo();
}
}

function pause() {
if (ytplayer) {
ytplayer.pauseVideo();
}
}

function stop() {
if (ytplayer) {
ytplayer.stopVideo();
}
}

function getPlayerState() {
if (ytplayer) {
return ytplayer.getPlayerState();
}
}

function seekTo(seconds) {
if (ytplayer) {
ytplayer.seekTo(seconds, true);
}
}

function getBytesLoaded() {
if (ytplayer) {
return ytplayer.getVideoBytesLoaded();
}
}

function getBytesTotal() {
if (ytplayer) {
return ytplayer.getVideoBytesTotal();
}
}

function getCurrentTime() {
if (ytplayer) {
return ytplayer.getCurrentTime();
}
}

function getDuration() {
if (ytplayer) {
return ytplayer.getDuration();
}
}

function getStartBytes() {
if (ytplayer) {
return ytplayer.getVideoStartBytes();
}
}

function mute() {
if (ytplayer) {
ytplayer.mute();
}
}

function unMute() {
if (ytplayer) {
ytplayer.unMute();
}
}

function getEmbedCode() {
alert(ytplayer.getVideoEmbedCode());
}

function getVideoUrl() {
alert(ytplayer.getVideoUrl());
}

function setVolume(newVolume) {
if (ytplayer) {
ytplayer.setVolume(newVolume);
}
}

function getVolume() {
if (ytplayer) {
return ytplayer.getVolume();
}
}

function clearVideo() {
if (ytplayer) {
ytplayer.clearVideo();
}
}
</script>

Y ahora, donde queremos mostrar los videos agregamos lo siguiente:

<div id="ytapiplayer"> Cargando ... </div>
<script type="text/javascript">
var params = { allowScriptAccess: "always", bgcolor: "#000000" };
var atts = { id: "myytplayer" }; swfobject.embedSWF("http://www.youtube.com/apiplayer?enablejsapi=1&playerapiid=ytplayer", "ytapiplayer", "560", "420", "8", null, null, params, atts);
</script>

Las funciones permiten controlar la carga y reproducción del video, además de darnos información. Algunos ejemplos:

CARGAR VIDEO <a href="javascript:void(0);" onclick="play();"><img src="URL_BOTON_PLAY" /></a>

PAUSAR VIDEO <a href="javascript:void(0);" onclick="pause();"><img src="URL_BOTON_PAUSE" /></a>

STOP VIDEO <a href="javascript:void(0);" onclick="stop();"><img src="URL_BOTON_STOP" /></a>

SILENCIAR  <a href="javascript:void(0);" onclick="mute();"><img src="URL_BOTON_MUTE" /></a>

SONIDO  <a href="javascript:void(0);" onclick="unMute();"><img src="URL_BOTON_NOMUTE" /></a>

Los videos se cargan indicando su ID con dos funciones diferentes, con la primera se autoejecutan y con la segundan se cargan y se espera que se haga click en play:

<a href="javascript:void(0)" onclick="loadNewVideo('ID_VIDEO', 0)">Cargar</a>

<a href="javascript:void(0)" onclick="cueNewVideo(document.getElementById('cuevideoid').value, 0)">Precargar</a>

Todo esto sólo es una muestra simple de esas funciones pero son lo suficientemente interesantes como para que quien quiera, pueda exerimentar con ellas y crear sus propios reproductores.

Aunque uno supone que internet es "grande" y que se mueve mucha información constantemenete, esta imagen que vi en Cosas Sencillas me llamó poderosamente la atención.

Click para ampliar la imagen.

De manera gráfica, muestra el volumen de esos datos, comparándolos con otros.

En un día en internet:

• se envian 210 mil millones de emails; mucho más que todo el correo enviado en un año en USA
• se suben 3 millones de fotos a Flickr; suficente como para llenar 375 mil páginas de un album de fotos
• se transmiten 43 millones de GB a través de móviles; lo que equivale a 9 millones de DVDs o 64 trillones de diskettes
• se gastan 145 millones de dólares usando teléfonos móviles; 13 millones se gastan en juegos
• se crean 700 mil nuevos perfiles en Facebook; que equivale casi a toda la población de Guyana
• se escribe 5 millones de tweets y se publican 900 mil entradas en blogs; tantos, como para llenar el New York Times durante 19 años completos

La imagen original pertenece a onlineeducation.net; un sitio bastante extraño que se presenta como "las cosas que no te enseñan en la escuela".

REFERENCIAS:On Line

Hace más de un mes, SpamLoco hablaba del nuevo "juguetito" de Google, la barra traductora que podía insertarse directamente en cualquier sitio, incluyendo blogs. En este tiempo, algunos me han preguntado sobre ello y siempre respondí que, como aún no estaba disponible en español y por lo tanto, era poco razonable tratar de utilizarla.

Bueno, pués ahora ya esta en español y quien quiera puede agregarla con bastante facilidad.

Si entramos en la parte de Herramientas de Traducción de Google (que, por cierto, no está traducida), marcamos el lenguaje de nuestra página (lo detectará automáticamente), seleccionamos si queremos que haya opciones para traducir a todos los idiomas o sólo a algunos y nos mostrará un código que deberemos copiar y pegar en nuestro sitio.

<div id="google_translate_element"></div>
<script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'es'
}, 'google_translate_element');
}
</script>
<script src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

Lo pondremos, por ejemplo, en un elemento HTML de la sidebar y allí, nos mostrará un control desplegable:

Select LanguageEnglishAfrikaansAlbanianArabicBelarusianBulgarianCatalanChinese (Simplified)Chinese (Traditional)CroatianCzechDanishDutchEstonianFilipinoFinnishFrenchGalicianGermanGreekHebrewHindiHungarianIcelandicIndonesianIrishItalianJapaneseKoreanLatvianLithuanianMacedonianMalayMalteseNorwegianPersianPolishPortugueseRomanianRussianSerbianSlovakSlovenianSwahiliSwedishThaiTurkishUkrainianVietnameseWelshYiddish

Powered by Translate

Además, en la parte superior de la página, veremos la barra de traducción que ocupará todo el ancho de la pantalla y que realiza traducciones bastante rápidas y sin cambiar salir del sitio.

Hasta ahí, salvo el tamaño excesivo, no parecería haber problemas pero, hay que tener en cuenta que la idea de la barra es que, sólo se muestre cuando se detecta que el lenguaje del navegador no es el mismo que el lenguaje de la página y eso, no funciona. Mejor dicho, sólo he visto que funciona en Chrome y en Opera. En Firefox permanece siempre visible y en nternet Explorer la barra que se muestra es la del buscador. Pese a esto, la traducción funciona en todos los navegadores.

A la pregunta de ¿cómo centrar algo? uno debería repreguntar: ¿qué queremos centrar? ¿el contenedor o el contenido? Y esta pregunta debería resultar bastante sencilla de responder si entendemos sus diferencias.

leer artículo actualizado

Click para ampliar las imágenes.

Un blog de Blogger puede ser privado o público. Esa es una opción que podemos definir en Configuración | Permisos

Lectores del blog
¿Quién puede ver este blog?
Cualquiera Sólo a los usuarios que yo elija Únicamente autores del blog

Se nos advierte que si es privado o de aceso limitado, otros usuarios no podrán leer ninguna entrada y recibirán un mensaje indicándoles que no puede ser mostrado.

Esto es cierto pero no del todo. Depende de cómo interpretemos el mensaje.

Si un blog es público y posteriormente se lo hace privado, todo aquello que se haya publicado con aneterioridad, será visible para cualquiera ya que esas páginas han sido indexadas y por lo tanto, permanecerán en la caché de los buscadores por un largo tiempo; sólo las nuevas entradas no serán indexadas. En ese sentido, es lo mismo que ocurre si eliminamos un blog, su contenido permanecerá dando vueltas en la web durante un tiempo indefinido..

Aún más. En The Real Blogger Status y en algunas consultas de los Grupos de Ayuda de Blogger se dice que en ciertos casos, aún siendo privados, ciertas páginas (sobre todo el home) son accesibles; no es común pero puede ocurrir.

Por eso, es importante que el Perfil de Blogger sea claro y verificar la opción:

Mostrar mis blogs Selecciona los blogs que deseas mostrar

Allí, podremos marcar o desmarcar los blogs que aparecerán en nuestro perfil de usuario.

Esto es algo que, de alguna manera, es similar a las opciones que nos muestra Configuración | Básico:

¿Deseas añadir tu blog a nuestras listas? Sí No
Es posible que se haya vinculado un blog de la lista desde Blogger.com como, por ejemplo, la página principal de Blogger, Blogger Play y Siguiente blog. Si seleccionas "No", tu blog no aparecerá en estas ubicaciones, aunque seguirá estando disponible en Internet. Este blog seguirá apareciendo en tu perfil a menos que lo ocultes.

¿Deseas permitir que los motores de búsqueda encuentren tu blog? Sí No
Si seleccionas "Sí", incluiremos tu blog en la Búsqueda de blogs de Google y haremos ping a Weblogs.com. Si seleccionas "No", todo el mundo podrá ver tu blog, pero se indicará a los motores de búsqueda que no lo rastreen.

Ya que la primera, determina si su blog aparecerá en blogger.com y en la lista de blogs que se muestra en el perfil y la segunda si el blog será indexado o no.

Así como en Google Code hay una referencia bastante completa de los parámetros del reproductor de YouTube, también hay otras para quienes quieran crear los suyos propios utilizando Flash y otra para utilizar las API de YouTube. Si bien, algunas de esas funciones requieren que nos registremos para obtener una clave, hay otras que son accesibles de forma pública y que podemos usar en cualquier proyecto.

Estas últimas se manejan con JavaScript y, a simple vista, no parecen gran cosa ya que sólo hacen más o menos lo mismo que el reproductor en si mismo pero no es así, el poder manejar el reproductor con códigos, abre una serie de posibilidades que serán parte de otra entrada.

La forma más sencilla de probar estas funciones es usar la librería SWFObject que podemos cargar directamente desde Google:

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

Y un video lo cargamos de este modo:

<div id="contenedorPlayer"> Cargando ... </div>
<script type="text/javascript">
var params = { allowScriptAccess: "always", bgcolor: "#cccccc" };
var atts = { id: "objetoPlayer" };swfobject.embedSWF("http://www.youtube.com/v/XXXXXXXXXXX?border=0&amp;enablejsapi=1&amp;playerapiid=YTplayerDemo","contenedorPlayer", "425", "344", "8", null, null, params, atts);
</script>

Un conjunto de funciones permiten controlar su reproducción, leer los datos que envia y modificar algunos de ellos.

// los controles
function play() {
if (YTplayerDemo) { YTplayerDemo.playVideo(); }
}
function pause() {
if (YTplayerDemo) { YTplayerDemo.pauseVideo(); }
}
function stop() {
if (YTplayerDemo) { YTplayerDemo.stopVideo(); }
}
function mute() {
if (YTplayerDemo) { YTplayerDemo.mute(); }
}
function unMute() {
if (YTplayerDemo) { YTplayerDemo.unMute(); }
}

// cargar y ejecutar el video
function loadNewVideo(id, inicio) {
if (YTplayerDemo) { YTplayerDemo.loadVideoById(id, parseInt(inicio)); }
}
// cargar el video y no ejecutarlo
function cueNewVideo(id, inicio) {
if (YTplayerDemo) { YTplayerDemo.cueVideoById(id, inicio); }
}
// eliminar el video
function clearVideo() {
if (YTplayerDemo) { YTplayerDemo.clearVideo(); }
}

// extraer información del video
function getBytesLoaded() {
if (YTplayerDemo) { return YTplayerDemo.getVideoBytesLoaded(); }
}
function getBytesTotal() {
if (YTplayerDemo) { return YTplayerDemo.getVideoBytesTotal(); }
}
function getCurrentTime() {
if (YTplayerDemo) { return YTplayerDemo.getCurrentTime(); }
}
function getDuration() {
if (YTplayerDemo) { return YTplayerDemo.getDuration(); }
}
function getStartBytes() {
if (YTplayerDemo) { return YTplayerDemo.getVideoStartBytes(); }
}
function getVolume() {
if (YTplayerDemo) { return YTplayerDemo.getVolume(); }
}
function getPlayerState() {
if (YTplayerDemo) {r eturn YTplayerDemo.getPlayerState(); }
}

// mostrar información del video
function getEmbedCode() {
alert(YTplayerDemo.getVideoEmbedCode());
}
function getVideoUrl() {
alert(YTplayerDemo.getVideoUrl());
}
function setYTplayerDemoState(newState) {
mostrarINFO("salidaStatus", newState);
}
function mostrarINFO(donde, valor) {
document.getElementById(donde).innerHTML = valor;
}
function actualizarINFO() {
mostrarINFO("salidaCargado", getBytesLoaded());
mostrarINFO("salidaBytes", getBytesTotal());
mostrarINFO("salidaDuracion", getDuration());
mostrarINFO("salidaTiempo", getCurrentTime());
mostrarINFO("salidaInicial", getStartBytes());
mostrarINFO("salidaVolumen", getVolume());
}

// establecer funciones varias
function seekTo(seconds) {
if (YTplayerDemo) { YTplayerDemo.seekTo(seconds, true); }
}
function setVolume(newVolume) {
if (YTplayerDemo) { YTplayerDemo.setVolume(newVolume); }
}

// manejo del API
function onYouTubePlayerReady(playerId) {
YTplayerDemo = document.getElementById("objetoPlayer");
setInterval(actualizarINFO, 250);actualizarINFO();
YTplayerDemo.addEventListener("onStateChange", "onYTplayerDemoStateChange");
YTplayerDemo.addEventListener("onError", "onPlayerError");
}
function onPlayerError(errorCode) {
alert("ERROR al cargar el video " + errorCode);
}
function onYTplayerDemoStateChange(newState) {
setYTplayerDemoState(newState);
}

SodaFans me preguntaba acerca de un widget que utiliza JQuery para mostrar tweets de manera dinámica. Ni idea del tema pero, por suerte, apareció todoTwitter al rescate así que veamos como funciona.

Se trata de Monitter y lo que permite es "monitorear" Twitter y mostrar cualquier tipo de conversación, basándose en la búsqueda de ciertas palabras clave.

Lo primero, por supuesto, es tener incluido JQuery en nuestra plantilla, así que lo agregamos utilizando las AJAX Libraries API de Google. Antes de </head> colocamos esto:

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

Inmediatamente después de eso, habría que colocar el script de Monitter. Para eso, descargamos el ZIP donde nos encontarremos con el archivo monitter.min.js. Copiaremos su contenido e inmediatamente después, lo pegamos entre estas etiquetas:

<script type='text/javascript'>
//<![CDATA[
....... aquí colocamos el contenido del archivo .......
//]]>
</script>

El último detalle antes de usarlo es el CSS, lo colocamos debajo y es lo que nos permitirá personalizar la salida; los valores elementales son estos:

<style type="text/css">
.monitter { /* este es el rectángulo general */
background-color: #000;
border: 4px solid #666;
color: #AAA;
font-size: 12px;
height: 300px; /* es la altura del rectángulo */
margin: 0 auto; /* centrado */
overflow-y: scroll; // para no cortar el contenido */
width: 500px; /* es el ancho del rectángulo */
}
.tweet { /* cada uno de los tweets mostrados */
display: block;
background-color: #333;
clear: both;
overflow: hidden;
padding: 5px;
margin: 5px;
}
.tweet img { /*la imagen con el avatar */
border: 2px solid #222;
float: left;
}
.tweet p.text { /* el texto de cada tweet */
line-height: normal;
margin: 0;
padding: 0 0 0 60px;
}
.tweet p.text a { /* los enlaces entro de los tweets */ }
.tweet p.text b { /* la  fecha */ }
.tweet p.text b a { /* el nombre del usuario */ }
}
</style>

Para mostrar el widget, sólo es necesario escribir un enlace con esta sintaxis:

<div class="monitter" id="tweets" title="CLAVES" lang="es"></div>

donde lang="es" mostrará resultados en español pero puede usarse cualquier otro idioma.

El punto importante es definir las claves que se colocan en el parámetro title; son esas las que definirán que cosas mostrar y la lista completa de operadores la podemos encontrar en la Ayuda de Twitter. Algunos ejemplos:

title="hogar" mostrará aquellos que incluyan la palabra "hogar"
title="blog scripts" mostrará aquellos que incluyan las palabras "blog" y "scripts"
title="blog OR scripts" mostrará aquellos que incluyan las palabras "blog" o bien "scripts", cualquiera de ellas
title="blog -scripts" mostrará aquellos que incluyan las palabras "blog" pero no la palabra "scripts"
title="#blogger" mostrará aquellos que contengan el hashtag #blogger
title="from:nombreUsuario" mostrará los enviados por el usuario definido
title="to:nombreUsuario" mostrará los enviados al usuario definido
title="@nombreUsuario" mostrará las referencias al usuario definido

Lo más interesante del widget es lo que define su nombre, "monitorea" ciertas búsquedas y por lo tanto, los resultados cambian de manera dinámica.

Pedro Villa y Josefina están prontos a ligar,
pero Laura la vecina los ha visto desertar,
Juan Ruja renuncia y lo hace publicar
Leonora su esposa pronto lo va a borrar.

Amanda y Miranda acaban de rastrear
a Lina su amiga que les dejó de hablar
tantean, husmean, no hay nada que indagar
es fácil, muy fácil, sólo opriman pokear

No no te metas a mi Facebook, no te metas por favor
cada vez que tengo un inbox me provoca poner close.
No te metas a mi Facebook, no te metas por favor
cuando escribas melodramas no me lo hagas por el wall.

De 620 amigos te relacionas con 10
90 desconocidos más 60 friend requests
te buscan, rebuscan, pronto te van a ver
juntitos, toditos, apuéstenle a la red.

200 eventos, a los que debes ir
aceptas a todos aunque no quieras ir
tu vida es difícil, tienes que decidir
aplica la regla, ponle a todos maybe.

No no te metas a mi Facebook, no te metas por favor
cada vez que tengo un inbox me provoca poner close.
No te metas a mi Facebook, no te metas por favor
cuando escribas melodramas no me lo hagas por el wall.

No me digas que no tienes que ir al baño
cuando, te miro te la pasas Facebookeando
y luego suspiro, te vas a quedar un rato
y mucho más.

No me digas que tienes otro cumpleaños,
del que hace un año ni te hubieras enterado
será que ahora es moda festejar con los extraños
y brindar por brindar

REFERENCIAS:Esteman Music

Dina Goldstein's Fallen Princesses

REFERENCIAS:Ariane en Twitter

Una vez más, Google Analytics propone un cambio en su código. Todavía hay muchos que utilzan el original y no lo han cambiado al modelo más reciente pero, ya se anuncia otra modificación que, por ahora, no es obligatoria sino opcional.

El cambio se anuncia como una mejora en algo que es bastante molesto y evidente, los scripts de Google Analytics son lentos en si mismos y eso afecta la carga de las páginas y es por eso que se sugiere que sea colocado al final de la página, antes de </body>.

El nuevo código se supone que será mucho más rápido, mejorará la performance y evitará los errores en caso de no poder ser cargada totalmente.

Este nuevo código llamado Asynchronous Tracking no debe ser utilizado junto con el anterior, quien quiera probarlo, debe eliminar el código "viejo" y copiar y pegar lo siguiente, justo antes de </head> y no al final de la página:

<script type="text/javascript">
<!--
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-XXXXX-X']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script');
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    ga.setAttribute('async', 'true');
    document.documentElement.firstChild.appendChild(ga);
  })();
-->
</script>

donde debemos reemplazar UA-XXXXX-X por el ID de nuestra cuenta.

Advierte que, pese a las mejoras, es posible que algún otro script interfiera así que insisten reiteramente que debe ser colocado entre <head> y </head> y debería ser el último en ser cargado (más información).