Acá les dejo una forma automática de hacerlo, en javascript, por supuesto:

var inputs=$$('#formulario_de_contacto .text','#formulario_de_contacto textarea');
for(i=0;i<inputs.length;i++){
	inputs[i].txtOriginal=inputs[i].value;
	inputs[i].onfocus=function(){
		if(this.value==this.txtOriginal){ this.value=""; }
	}
	inputs[i].onblur=function(){
		if(this.value==""){ this.value=this.txtOriginal; }
	}
}

No hay mucho que explicar de este código: primero selecciona todos los textarea y elementos con la clase “text” (que es la que yo uso para diferenciar los inputs type=”text” de los otros inputs) y luego a cada uno de esos elementos les lee el value original y lo guarda en una variable txtOriginal, para luego decirle que cuando se ponga el cursor sobre ellos revise si tienen el mismo texto que el original o si está vacío para hacer la acción correspondiente.

El código anterior utiliza mootools para optimizar la búsqueda de los inputs de texto y los textarea dentro del código. Si no saben como se utiliza mootools, vean este tutorial.

La Roja Mundial es un proyecto que realizamos junto a Soranji para apoyar a nuestra selección chilena (más conocida como “La Roja”) durante este mundial.

Todo nació a partir de la cuenta de twitter de @la_roja, y toda su interacción en las distintas redes sociales (youtube, twitter, facebook, twitpic y “el famoso” twibbon de La Roja). Este sitio tiene el objetivo de juntar todo en un mismo lugar y de entregar información específica de nuestra selección (nada de lateras notas periodísticas que después de leer dos páginas no dicen nada, o que dicen cosas que ya todos sabemos… para eso mejor veo las noticias o emol).

Además de eso hemos ido publicando información relevante de los próximos partidos y rivales, además del estado de jugadores, junto con wallpapers y alguna otra cosita que se nos ocurra.

Ojalá les guste…. y que salgamos campeones de la copa del mundo!!!

En GEEKBOX estuvimos haciendo las primeras pruebas de registro para el juego Brooks Brothers Mundial, y parte de este proceso correspondía a enviar correos a los usuarios que se registraban para poder validar sus cuentas. Estos correos se autogeneraban vía PHP y se enviaban con la típica funcion mail().

Resulta que extrañamente los correos dirigidos a cuentas de hotmail no llegaban (ni siquiera al spam), pues el sistema interno de hotmail los bloqueaba al ser generados por programación. La duda que le da a este servicio de correo (por la cual no quería aceptar los correos) era que éstos se enviaban desde una dirección IP xxx.xxx.xxx.xxx (la de los servidores del servicio de alojamiento), pero no era necesariamente la misma IP que la que utiliza el sitio en cuestión (que tiene una de las tantas direcciones IP de los servidores). Esto quiere decir que estos correos le producían “desconfianza” porque no sabía con certeza si eran enviados por terceros utilizando una dirección falsa o si eran enviados REALMENTE por el sitio. Asique, “ante la duda abstente” y ellos lo rechazan.

En resumidas cuentas no llegaban los correos y necesitaba una solución.

La solución!

Buscando y buscando logré entender como se tiene que hacer para que esto no ocurra: el concepto principal es asociarle a nuestro servidor un dato que defina cuales son las direcciones IP válidas para enviar correos “autorizados” por el sitio. Este “dato” es un “registro” (como los típicos registros A o CNAME) del tipo TXT que define los valores (IPs) para que los sistemas de correo (como Hotmail) puedan consultarle. Este “dato” es el llamado registro SPF o SPF record (Sender Policy Framework).

En resumidas cuentas, si Hotmail ve que le están enviando un correo desde la IP xxx.xxx.xxx.xxx diciendo que viene desde tusitio.com, se conectará tusitio.com y consultará si dentro de sus registros del tipo TXT hay alguno que tenga la información de los SPF. Si la encuntra, consultará cuales son las direcciones IP autorizadas desde las cuales el sitio enviará correos. Si todo está en orden (la IP desde donde se envía el correo calza con la autorizada por el servidor) recibirá el correo sin problemas; si no, lo rechazará y probablemente asumirá como que el correo nunca existió.

Un ejemplo de registro TXT que contiene esta información es el siguiente (para Dreamhost):

v=spf1 ip4:64.111.100.0/24 ip4:66.33.201.0/24 ip4:66.33.216.0/24 ip4:208.97.132.0/24
ip4:208.97.187.0/24 ip4:208.113.200.0/24 ip4:208.113.244.0/24 ip4:208.113.175.0/24 mx -all

Este dato se le asocia al servidor y listo. Luego de un rato todo debería funcionar normalmente.

Hay que tener en consideración que los SPF son independientes para cada subdominio. Es decir, que si los aplicas en tudominio.com, no van a ser considerados para tusubdominio.tudominio.com. Hotmail no los considera el mismo sitio (pues no lo son).

Para saber si tu servidor tiene asociado algún registro SPF puedes visitar este sitio de microsoft donde revisa los registros A, MX y SPF de tu servidor. Si encuentra algún SPF te lo muestra, sino, te muestra los registros MX para que puedas crear (con su wizard) los registros que necesitas.

The Geek Toolbox es un sitio Web que permite realizar tareas o acciones completamente “geek”, ya sea relacionada a tus sitios Web, o tareas simples como averiguar la hora UTC, cambiar tamaño a imágenes, o “jugar” a codificar y decodificar palabras.

De más está decir que es uno de mis proyectos, y por algo hago este post para explicar algunas de sus funciones poco comunes. Sitios como este hay muchos, pero ninguno tiene todas estas herramientas juntas, y además, multilenguaje.

Estas son algunas de las herramientas disponibles:

Días entre dos fechas: muy simple: ingresa la fecha de inicio (por ejemplo el día de tu nacimiento) y la fecha de término (por ejemplo hoy) y sabrás cuantos días hay entre esas dos fechas.

Generador de favicon: el favicon es el típico ícono que se ve al lado de la URL de algún sitio. Para generarlo solo basta con seleccionar una foto de tu computador y presionar el botón “crear”. Hay que considerar que el ícono que genera esta herramienta no es un simple gif o png, sino un icono en formato .ico, el cual es el formato OFICIAL para los favicon y es el formato que todos los servidores reconocen automáticamente. No te dejes engañar!… no aceptes imitaciones!

Calculadora de proporciones: esta herramienta es muy buena (si entiendes como se usa, claro está). ¿Alguna vez te ha pasado que tienes una imagen de 800 x 600, por ejemplo, y necesitas ponerla en un sitio Web de 500 x “xxx”?. Si no sabes cual es la proporción exacta, solo basta con que uses esta herramienta y voilá!: ingresas el tamaño original y luego el tamaño al que quieres dejar tu nueva imágen y esta herramienta te entrega el resultado. Nada de abrir photoshop y crear una foto de 800 x 600 y luego achicarla. Con la calcuradora de proporciones podrás ¡¡¡calcular proporciones!!! (WOW!!!). En fin. Esto se puede ocupar para embeber un video de youtube, por ejemplo y saber cual será el nuevo tamaño que le darás sin perder las proporciones.

¿Y que se espera para el futuro?

Pronto, se viene un “formateador de textos” (pasar un texto a minúsculas, “Dejarlo En Formato Título”, quitarle los acentos, reemplazar caracteres, etc.), una “calculadora de permisos UNIX” (los famosos CHMOD), y algunas otras sorpresas.

¿Tienes alguna idea más para incluir?… todo aporte es bienvenido!

Para quienes no estén muy familiarizados con todos los conceptos, les describo algunos poco comunes:

Canonicalización: escoger la mejor URL para mostrar una página (o nuestro sitio web).
Googlebot: es el “robot” de Google, que lee nuestras páginas web para agregarlas a su base de datos.

Vía Ayuda WordPress

1. Brasil gano la copa mundial en 1994, antes que eso, ganaron el mundial en 1970.
Sumen 1970 + 1994= 3964

2. Argentina ganó su última copa mundial en 1986, antes que eso ganaron el mundial en 1978.
Sumen 1978 + 1986= 3964

3. Ale mania ganó su última copa mundial en 1990, antes que eso, ganaron el mundial en 1974.
Sumen 1974 + 1990= 3964

4. El mundial 2002 Brasil repitió el campeonato, y es lógico, ya que si sumamos 1962 (donde Brasil fue campeón) + 2002= 3964 , por lo tanto, Brasil debía ser el campeón, y así fue.

5. Y si se quiere pronosticar el campeón para Sudafrica 2010.
Resten 3964 – 2010= 1954… Ese año el campeón mundial fue Alemania, así que se escuchan pronósticos para el 2010…

Y LO MÁS IMPACTANTE

Los fanáticos chilenos tenemos también motivo para alegrarnos, ya que seguramente ganaremos el mundial en el año 3964.
Porque 0 + 3964 = 3964

O sea que ya sólo tenemos que esperar 488 mundiales para ser campeones! Eso equivale a 1958 años. En 1958 Brasil fue campeón del mundo. Así que la final va a ser contra los brasileños… ni se imaginan los pobres huevones la media goleada que les vamos a dar.

¡¡¡Pobrecitos!!!!

Un ejemplo claro de esto lo podemos ver en la frase “el perro ladró”, que claramente significa que “el animal del tipo perro ha realizado el acto de ladrar”, y sea donde sea que mencione eso significará lo mismo. La metainformación entonces está presente en COMO y CUANDO digo esta frase, es decir, en el contexto en que se presenta. Por ejemplo:

• Si deseamos saber quién fue el que despertó al bebé con un sonido de ladrido, puedo decir “EL PERRO ladró”, para “acusarlo” de que él fue quién lo hizo.
• Si el perro es muy pequeño y nunca en su vida había ladrado, y hoy por primera vez lo hizo, puedo decir “el perro ladró!!!” para expresar la emoción del momento.
• Si el perro ladra porque quiere avisarnos algo, podemos decirle a alguien “el perro ladró”, así como contándole que vaya a ver que quiere el perro, pues acaba de ladrar.

Ahí tenemos tres ejemplos distintos de la misma frase, que significa lo mismo, pero que dependiendo del contexto donde se menciona se refiere a distintas cosas. Eso es “metainformación”, pues el contexto me entrega información adicional a la que se ve a simple vista. Lo mismo pasa con las expresiones corporales, por ejemplo, pues una levantada de cejas o una entonación distinta puede variar notoriamente una frase.

Ahora… como aplicamos esto a la Web?

Los sitios Web siempre intentan comunicar algo, y generalmente esta comunicación debe ser transmitida a través de imágenes o palabras. En ambos casos es muy importante escoger bien la manera de comunicarse, porque cada frase o imagen tiene algo de metainformación implícita.

Un ejemplo claro es si quiero hacer un sitio para participar en algo y ganar un premio. Hay que ser muy cuidadoso porque dependiendo de la frase que escoja y la manera de comunicarme con las personas voy a conseguir distintas cosas. Lo que tengo que hacer es invitarlos a participar, pero es muy distinto decir “juega con nosotros” que “participa con nosotros”, aunque en la práctica quiero expresar el mismo concepto. “Juega” es mucho más “diversión”, podría decirse incluso que “para niños”. En cambio “participar” es algo mucho más formal y sobrio. Es algo muy sutil, pero que va a decir mucho de nosotros .

Una foto en blanco y negro y una a color pueden contener exactamente lo mismo, pero por el solo hecho de ser en blanco y negro ya me está diciendo otras cosas que la que a color no hace: habla de arte, talvez de antiguedad, de recuerdos, etc.; al igual que una foto en color sepia me habla de melancolía, desgaste o algún otro concepto similar.

Otro ejemplo está en el código fuente. Yo puedo armar dos sitios que se vean iguales en cualquier navegador, y si veo el código fuente de ambas páginas es igual. Sin embargo lo que los diferencia es que un código está perfectamente ordenado y tabulado y el otro no. Técnicamente ambos dicen lo mismo y cumplen la misma función, pero el código ordenado me va a transmitir que la persona que hizo el sitio hace las cosas bien. El que no es ordenado me va a decir que la persona es desordenada. Tal vez incluso crea que se demoró más en lograr el mismo trabajo porque me da la impresión que no tiene claro lo que hace.

La metainformación es algo de lo que hay que preocuparse mucho, aunque no se vea en una primera mirada.

“True Blood” y “The Vampire Diaries” son dos series de vampiros que veo junto a Soranji. Ambas series son muy buenas y, aunque se traten de vampiros, tratan de dos mundos completamente distintos:

The Vampire Diaries

Esta es una serie de vampiros, tal cual la famosa saga de Twilight: “vampiros adolescentes enamorados”. Es completamente de la onda de la película y “aparentemente” tratan de temas similares.

Aunque sea una serie “taquillera” y “para niñitas”, la trama es bastante entretenida y a medida que avanzan en los capítulos se va poniendo cada vez más compleja e interesante. Se trata de dos hermanos vampiros que vuelven a vivir a Mystic Falls después de mucho tiempo y uno de ellos conoce a una chica que es IGUAL a la mujer que lo convirtió en vampiro. El vuelve para conocera a ella: se conocen y se enamoran. Su hermano vuelve para joderle la vida a él (en un principio). Y a partir de eso se va desarrollando la historia en este pequeño pueblo.

La GRAN diferencia de esta serie con True Blood es la “elegancia”. Esta serie es elegante. Toda la gente es “bonita”. No muestran sexo (sólo lo insinúan) y prácticamente tampoco muestran sangre. Es algo así como “para todo espectador”.

True Blood

True Blood, por su parte, es una serie “para hombres”. Es mucho más cruda que The Vampire Diaries y trata de temas mucho más cotidianos. Tiene mucho más sexo y problemas… tanto así que a mi parecer llega a ser cómico o absurdo aveces. Trata de “drogas” (vampíricas), de gente poseída, y por supuesto, de amor.

El contexto de esta serie es completamente distinto. Acá los vampiros ya forman parte de la sociedad gracias a una bebida que inventaron los japoneses que es un sustituto de la sangre (“True Blood”) y que es lo que toman los vampiros. Por ende se supone que ya no necesitan alimentarse de los humanos y pueden coexistir (aunque no siempre es así). Mientras The Vampire Diaries se trata de que los vampiros deben esconderse de los humanos, en esta serie deben aprender a coexistir.

Esta serie se trata de una chica que trabaja en un bar en un pequeño pueblo. Su “gracia” es que ella puede “escuchar” los pensamientos de todas las demás personas, lo cual la tiene cansada. Hasta que un día entra al bar un vampiro y ella queda encantada. Con el es distinto porque no puede saber lo que piensa. Y a partir de ahí se desarrolla la historia.

A diferencia de The Vampire Diaries, esta serie no es tan elegante. No toda la gente es perfecta ni habla de la estirpe de la familia ni esas cosas. Acá dicen garabatos, muestran sangre, tienen sexo, consumen drogas, pelean, y todas las “cosas malas” que hace la gente común. Acá todo eso lo muestran y no lo insinúan.

Y entonces?

Yo les recomiendo que, si pueden, vean ambas series, pues las dos son muy entretenidas. Y por supuesto que si se van a dar la lata de bajarlas, bájenlas en HD (720p).

Hay veces en que llamo a una función pero en la página donde estoy no he cargado el archivo .js correspondiente y por lo tanto el navegador me tira un error. ¿Cómo solucionarlo?: fácil (siempre digo lo mismo). Tenemos que agregar al final del archivo js una variable cualquiera:

var archivoCargado=1;

Y luego, antes de llamar a la funcion que necesitamos le preguntamos si esa variable existe (sin que nos arroje un error). Si la variable existe es porque se cargó el archivo, y si no existe será “undefined“, osea que no ha sido definida, osea que el archivo no se cargó. Algo así:

if(typeof(archivoCargado)!="undefined"){ ejecutarFuncion(); }

…dudas?

Claro, yo se que existe el famoso firebug y alguna que otra alternativa para ayudarnos a encontrar los errores, pero es mejor prevenir que perder tiempo en guevadas, jajaja.

La cosa es simple: “¿cómo saber si existe una variable en javascript sin recibir un error de vuelta si es que no existe?”. Claro, porque si pregunto simplemente:

if(miVariable){ alert("si existe"); }
else{ alert("no existe"); }

claramente voy a recibir un error diciendo que miVariable no está definida. Osea que teóricamente nunca nos vamos a salvar del error (se supone que estamos consultando si la variable existe o no para no recibir un error más adelante).

Asique la solución es simple. Tendremos que consultar lo siguiente:

if(typeof(miVariable) != "undefined"){ alert("si existe"); }
else{ alert("no existe"); }

…y voilá. No tendremos más el tedioso problema.

Suerte!