Menus jQuery con animaciones

menues usando jqueryCada vez le estamos prestando más atención a Javascript. En los últimos años Javascript ha ganado mucho terreno con nuevas “engines” ejecutando código a velocidades comparables con C, han aparecido nuevas areas como Server-side, bases de datos controladas por Javascript, HTML5 APIs, frameworks para móbiles. Dentro de todo ésto cae jQuery, una librearia que no hace la vida más fácil y soluciona la forma de seleccionar dentro del DOM en distintas plataformas. Por todo ésto dejo una recopilación de libreris en jQuery/CSS o CSS3 que generan menúes que no tienen nada que envidiarle a la interactividad, que hasta hace muy poco, era posible sólo si se utilizaba Flash.

fan page facebook contenidos diferentes para usuarios

Este es un pequeño tipo de como hacer para mostrar dos contenidos distintos a los usuarios de nuestra fan page en facebook.
La idea es que generamos una tab en nuestra fan page y queremos generar la mayor cantidad de “me gusta” posible. Para esto lo que hacemos es una pestaña con un contenido pidiendo que hagan click en “Me gusta”, y una vez que hicieron click en “Me gusta” mostramos el contenido real.
La forma que hacemos esto es:

1
2
3
4
5
6
7
8
9
10
11
12
13
<fb:visible -to-connection>
 
<p>
Lo que queramos poner que se verá hasta que hagan click en "Me gusta"
</p>
 
 
<fb:else>
<p style="margin-top: -30px; ">
Esto es lo que se verá si han hecho click en "Me gusta"
<img src="http://tuurl.com/images/imagen.jpg" /></p>
</fb:else>
</fb:visible>

Arduino | El Documental

arduino el documental

He hecho un par de post sobre Arduino, pero para aquellos que se los perdieron: Arduino es una plaqueta pensada para artistas que quieren hacer cosas con electronica pero que no saben de programacion. La plaqueta cuenta con varias entradas/salidas digitales y otro tanto (aunque menor cantidad) análogas, se puede conectar a una pc usando un cable usb y la programación es súper sencilla. Arduino ha tomado mucha fuerza en los últimos meses y la he visto ser utilizada en varios lados. Tal es así que un grupo de arstistas han creado un documental sobre Arduino. Esta muy interesante y se encuentra en dos versiones, inglés y castellano. No dejen de verlo.
Pueden bajarlo desde: http://arduinothedocumentary.org/

O simplemente verlo aquí:

Como comenzar un nuevo proyecto en HTML5

Me parece súper importante estar al tanto con las nuevas tecnologías para ir incorporandolas de poco y no quedarse atrás. El problema es que con algunas tecnologías como HTML hay que pensar que pasa con navegadores/clientes viejos que no soportan éstas nuevas técnicas.
Haciendo un poco de investigación me encontré con un par de librerías que te permiten empezar el nuevo proyecto en html5 y importar un par de archivos que permitirán detectar si el navegador soporta o no el recurso utilizado y en caso de no soportarlo elegir un método alternativo. Por ejemplo si utilizamos alguna de la nuevas etiquetas proporcionadas por HTML5 y entramos a ese sitio con IE6 o IE7, éstos navegadores no sabrás como interpretarlas por lo que la librería Modernizr se encargará de reemplazar las nuevas etiquetas con simples DIVs.

Modernizr se puede baja desde aquí

Pero recomiendo empezar todos los proyectos en HTML5 de forma que te vayas acostumbrando y para hacerlo esto fácil dejo éste el link a initializr un herramienta que te ayuda a empezar un proyecto utilizando HTML. Initializr utiliza modernizr y otros recursos y te arma una plantilla que uno puede empezar a modificar para adecuarla a las necesidades del proyecto real. Pruebenlo desde su sitio web:
http://initializr.com/

ocultar email

El ocultar emails en pagina web es todo un tema. El problema es que si ponemos nuestro email simple y llanamente un robot cosechador de direcciones de email va a encontrarlo y luego agregado a una base de datos para que nos envíen email basura.

Entonces como hacemos?

hay varias soluciones la que veo más comúnmente es la de incluir la dirección del email como una imagen ya que lo cosechadores sólo ven texto. y aunque es un método bastante efectivo tiene dos problemas: primero que el usuario no puede copiar y pegar por lo que va a tener que memorizar la dirección, y el segundo problema es que puede pasar que aparezca un cosechador con reconocimiento de texto.

Que otras alternativas?

CSS Codedirection
<span style=”unicode-bidi:bidi-override; direction: rtl;”>
moc.olpmeje@zyx
</span>

CSS display:none
xyz<span style=”display:none”>foo</span>@ejemplo.com

Encryptacion ROT13
klm@rknzcyr.pbz

Usar ATs y DOTs
xyz AT ejemplo DOT com

Building with Javascript
var m = ‘xyz’; // podes crear algo ingenioso
m += ‘@’; // y luego agregarlo al DOM usando jquery
m += ‘ejemplo.com’;
$(‘.email).append(m);

Reemplazando ‘@’ y ‘.’ con Entities
xyz&#64;example&#46;com

separando la dirección de email con comentarios
xyz<!– eat this spam –><!– yeah! –>example<!– shoo –>com

Urlencode
xyz%40example.com

Plain Text
xyz@example.com

Acá hay un gráfico con estadísticas de resultados usando estas diferentes opciones:

El grafico anterior fue creado por Silvan Mühlemann