Los experimentos de GMail

Para utilizar las características experimentales de Gmail en español, deberemos esperar que Google se de cuenta que el mundo existe más allá del Rio Bravo pero, mientras tanto, podemos jugar un poco, "engañándolo". Basta ingresar en la Configuración y, temporalmente, cambiar el idioma a inglés, establecer nuestras opciones y luego, restaurar el idioma. Extrañamente, los cambios se mantendrán e incluso, algunos aprecerán "traducidos".

Es importante saber que estos agregados de Gmail Labs son opciones de prueba, experimentos que con el tiempo, se pueden o no incorporar a las opciones normales y, algunas de ellas pueden no funcionar correctamente; nada grave, por cierto (más información) Eventualmente, basta ir a https://mail.google.com/mail/?labs=0 para deshabilitarlas todas y restablecer GMail.

Hay muchas y estas son algunas de las que estoy probando:

Quick Links agrega una caja en al columna izquierda que nos permite marcar determinadas direcciones dentro de GMail y guardarlas para tener un acceso rápido (filtros, búsquedas frecuentes, mensajes de ciertas personas, etc). Realmente muy útil.

Superstars agrega íconos adicionales a los resaltados. Una vez habilitado, se establecen las preferencias en la primera pantalla de Configuración; allí las ordenamos para que vayan rotando cuando hacemos click al marcar un mensaje. También podemos buscar según diferentes tipo de destacados usando el operador has: (por ejemplo, has:blue-star).

Signature tweaks coloca nuestra firma al final de los mensajes eliminando los caracteres "--"

Navbar drag and drop nos permite reordenar la columa izquierda arrarastrando y soltando elementos. Muy útil.

Custom Label Colors amplia las posibilidades para colorear etiquetas, permite combinar colores de fondos y textos.

Mark as Read Button agrega un botón Marcar como leido para que no tengamos la necesidad de abrir los mensajes; muy cómodo para manejar los comentarios de Blogger.

Google Docs gadget agrega una caja donde se nos muestra los documentos que tengamos en Google Docs. Desde allí podemos crear nuevos, marcarlos o buscarlos.

Add any gadget by URL nos permite agregar cualquier gadget de Google a la columa izquierda de GMail. Lo hacemos desde Configuración donde veremos una nueva solapa con las opciones y allí ingrasermoas colocaremos la URL correspondiente.

Otras posibilidades para explorar: Pictures in chat (muestra las iágenes de los contactos en el chat), Custom keyboard shortcuts, Mouse gestures, Random Signature, Custom date formats, Muzzle, Old Snakey, Email Addict, Right-side chat, Right-side labels, Hide Unread Counts, Advanced IMAP Controls, Canned Responses, Default 'Reply to all', Quote selected text, Mail Goggles, Vacation Time!, Go to label, Google Calendar gadget, Fixed width font, Forgotten Attachment Detector y se siguen agregando ...

Una monada.

La libertad siempre tiene un precio.

Maniobras de distracción.

El que mucho abarca poco aprieta.

Interesante información de La Brujula Verde que nos permitirá mantener la dirección original de nuestro blog en los feeds de Feedburner.

Es que, muchas veces, lo que muestran los lectores de feeds o enlaces en diferentes sitios, no es nuestra dirección de tipo:

http://vagabundia.blogspot.com/

sino algo como:

http://feeds.feedburner.com/Vagabundia

Peor aún, en las entradas individuales suelen verse cosas así:

http://feeds.feedburner.com/~r/Vagabundia/~3/437568548/y-otras-diez-plantillas-ms.html

Tal como explican, esto puede ser engorroso porque para acceder a la URL real hay que hacer click y abrir la página en el navegador y peor aún, un enlace externo al feed no tiene valor para sitios como Technorati ni es considera un backlink por Google.

Para hacer que las URLs de los feeds apunten al blog y no a Feedburner hay que ir a nuestra cuenta y en la primera pestaña Analize hay que hacer click en la última opción llamada Configure Stats (PRO) lo que nos abrirá una ventana como esta:

Alli, debemos desmarcar la opción Item Link Clicks que está tildada por defecto y luego guardar.

Haciendo esto, cambiamos las URLs y ambas coincidirán aunque perderemos el contador de clicks en los items de los feeds (nada es gratuito) aunque, este tipo de estadísticas no suele ser importante y difícilmente la hayamos mirado alguna vez

Butterfly

Descargar

Astro

Descargar

Florascent

Descargar

Sad Fish

Descargar

Field of dreams

Descargar

Flowers

Descargar

Charcoal

Descargar

Spiderman 3

Descargar

DFire

Descargar

Nite Life

Descargar

REFERENCIAS:

Blogger-Templates

El diseñador gráfico Román Cortés ha realizado un dibujo muy complejo usando sólo CSS.

Este Homero Simpson se crea con 307 líneas de código (14135 caracteres) y puede ser visualizado correctamente en casi todas las versiones de Internet Explorer, Opera, Firefox y Safari siempre que la fuente Verdana esté disponible.

¿Una pequeña muestra de ese código?

<div style="position: absolute; padding-left: 1.47em; padding-top: 5.4em;">
  <div style="font-size: 0.66em; color: #000;">C</div>
</div>
<div style="position: absolute; padding-left: 1.62em; padding-top: 5.53em;">
  <div style="font-size: 10px">
    <div style="width: 2.2em; height: 2.2em; background-color: #FED90E;"></div>
  </div>
</div>

o

o

o

o

(

O

O

O

\

L

(

O

O

O

O

O

\

L

(

O

|

|

\

\

|

|

\

\

\

\

(

(

8

o

o

o

(

(

8

o

o

o

o

)

)

b

o

O

o

o

o

o

o

o

)

b

o

O

o

o

o

o

o

o

o

o

o

/

/

/

•

•

•

•

•

_

_

_

•

•

•

C

C

O

(

-

Para quien quiera curiosear, su blog es muy interesante y el comic llamado El Progreso, también realizado íntegramente en DHTML es una buena muestra de las capacidades de estas técnicas.

Book Flip Slideshow es un script de DyamicDrive que crea un slideshow de imágenes con un efecto similar a "dar vuelta una página".

El efecto puede ser definido como horizontal o vertical y cada imagen puede tener un enlace asociado. Para detener el slideshow basta colocar el puntero del ratón encima de una imagen.

<script type='text/javascript'>
// <![CDATA[

var Book_Image_Width = 250; // el ancho de las imágenes a utilizar
var Book_Image_Height = 350; // el alto de las imágenes a utilizar
var Book_Border = false; // si las imágenes tienen borde, ponemos true
var Book_Border_Color = "gray";  // es el color del borde
var Book_Speed = 15;  // la velocidad del efecto
var Book_NextPage_Delay = 1500; // 1 segundo=1000
var Book_Vertical_Turn = 0;  // si queremos que sea vertical, colocamos el valor de 1

// esta es la lista de las imágenes a ser mostradas (mínimo cuatro)
Book_Image_Sources=new Array(
// si no se quiere agregar un enlace, se deja en blanco ""
"URL_imagen1","URL_enlace1",
"URL_imagen2","",
"URL_imagen3","",
"URL_imagen4","URL_enlace4"
// la última imagen no debe terminar con una coma
);

var B_CrImg=Book_Image_Sources.length/2;

var B_LI, B_MI, B_RI, B_TI;
var B_Angle=0;
var B_MaxW;
var B_Direction=1;
var B_MSz;
var B_Stppd=false;
B_Pre_Img=new Array(Book_Image_Sources.length);

function ImageBook() {
if(document.getElementById) {
for(i=0;i
B_Pre_Img[i]=new Image();
B_Pre_Img[i].src=Book_Image_Sources[i];
}
Book_Div=document.getElementById("Book");
B_LI=document.createElement("img");Book_Div.appendChild(B_LI); 
B_RI=document.createElement("img");Book_Div.appendChild(B_RI);
B_MI=document.createElement("img");Book_Div.appendChild(B_MI); 
B_LI.style.position=B_MI.style.position=B_RI.style.position="absolute";
B_LI.style.zIndex=B_RI.style.zIndex=0;B_MI.style.zIndex=1;
B_LI.style.top=(Book_Vertical_Turn?Book_Image_Height+1:0)+"px";
B_LI.style.left=0+"px";
B_MI.style.top=0+"px";
B_MI.style.left=(Book_Vertical_Turn?0:Book_Image_Width+1)+"px";
B_RI.style.top=0+"px";
B_RI.style.left=(Book_Vertical_Turn?0:Book_Image_Width+1)+"px";
B_LI.style.height=Book_Image_Height+"px";
B_MI.style.height=Book_Image_Height+"px";
B_RI.style.height=Book_Image_Height+"px";
B_LI.style.width=Book_Image_Width+"px";
B_MI.style.width=Book_Image_Width+"px";
B_RI.style.width=Book_Image_Width+"px";
if(Book_Border) {
B_LI.style.borderStyle=B_MI.style.borderStyle=B_RI.style.borderStyle="solid";
B_LI.style.borderWidth=1+"px";
B_MI.style.borderWidth=1+"px";
B_RI.style.borderWidth=1+"px";
B_LI.style.borderColor=B_MI.style.borderColor=B_RI.style.borderColor=Book_Border_Color;
}

B_LI.src=B_Pre_Img[0].src;
B_LI.lnk=Book_Image_Sources[1];
B_MI.src=B_Pre_Img[2].src;
B_MI.lnk=Book_Image_Sources[3];
B_RI.src=B_Pre_Img[4].src;
B_RI.lnk=Book_Image_Sources[5];

B_LI.onclick=B_MI.onclick=B_RI.onclick=B_LdLnk;
B_LI.onmouseover=B_MI.onmouseover=B_RI.onmouseover=B_Stp;
B_LI.onmouseout=B_MI.onmouseout=B_RI.onmouseout=B_Rstrt;
BookImages();
}
}

function BookImages(){
if(!B_Stppd) {
if(Book_Vertical_Turn) {
B_MSz=Math.abs(Math.round(Math.cos(B_Angle)*Book_Image_Height));
MidOffset=!B_Direction?Book_Image_Height+1:Book_Image_Height-B_MSz;
B_MI.style.top=MidOffset+"px";
B_MI.style.height=B_MSz+"px"
} else {
B_MSz=Math.abs(Math.round(Math.cos(B_Angle)*Book_Image_Width));
MidOffset=B_Direction?Book_Image_Width+1:Book_Image_Width-B_MSz;
B_MI.style.left=MidOffset+"px";
B_MI.style.width=B_MSz+"px"}
B_Angle+=Book_Speed/720*Math.PI;
if(B_Angle>=Math.PI/2&&B_Direction) {
B_Direction=0;
if(B_CrImg==Book_Image_Sources.length)B_CrImg=0;
B_MI.src=B_Pre_Img[B_CrImg].src;
B_MI.lnk=Book_Image_Sources[B_CrImg+1];
B_CrImg+=2
}
if(B_Angle>=Math.PI) {
B_Direction=1;
B_TI=B_LI;
B_LI=B_MI;
B_MI=B_TI;
if(Book_Vertical_Turn)B_MI.style.top=0+"px";
else B_MI.style.left=Book_Image_Width+1+"px";   
B_MI.src=B_RI.src;
B_MI.lnk=B_RI.lnk;
setTimeout("Book_Next_Delay()",Book_NextPage_Delay);
} else setTimeout("BookImages()",50);
} else setTimeout("BookImages()",50);
}

function Book_Next_Delay() {
if(B_CrImg==Book_Image_Sources.length)B_CrImg=0;
B_RI.src=B_Pre_Img[B_CrImg].src;
B_RI.lnk=Book_Image_Sources[B_CrImg+1];
B_MI.style.zIndex=2;
B_LI.style.zIndex=1;
B_Angle=0;
B_CrImg+=2;
setTimeout("BookImages()",50);
}

function B_LdLnk() {
if(this.lnk)window.location.href=this.lnk;
}

function B_Stp() {
B_Stppd=true;this.style.cursor=this.lnk?"pointer":"default";
}

function B_Rstrt() {
B_Stppd=false;
}

// ]]>
</script>

Para insertar un slideshow, lo que necesitamos es una imagen auxiliar llamada placeholder.gif que podemos alojar en Blogger o donde nos guste.

El código HTML es muy sencillo, donde queremos mostrarlo, colocamos lo siguiente (todo en una línea si se trata de un post):

<div id="Book" style="position:relative;">
<img src="URL_placeholder.gif" width="elAncho" height="elAlto">
</div>
<script type="text/javascript">ImageBook();</script>

Para un slideshow horizontal:
elAncho es igual al doble del ancho de la imagen más cuatro
elAlto es igual al alto de la imagen más dos

Para un slideshow vertical:
elAncho es igual al alto de la imagen más dos
elAlto es igual al doble del alto de la imagen más cuatro