Feliz Navidad y próspero Año Nuevo 2009!

A todos ustedes, les deseo una FELIZ NAVIDAD y un PRÓSPERO AÑO NUEVO!!.
Espero que la pasen fantástico en estas fiestas, mis mejores deseos!.

PD. Me voy de vacaciones desde el día de Hoy hasta el 8 de Enero 2009!. Hasta pronto!.

Crear Tooltips con CSS

Los tooltips son herramientas de ayuda visual las cuales funcionan al situar o pulsar con el mouse sobre algún elemento gráfico, mostrando una ayuda adicional para informar al usuario de la finalidad del elemento sobre el que se encuentra.
por ejemplo:
Si deseamos hacerlo sobre Web, un ejemplo seria el alt en imágenes o el title en enlaces , pero si queremos personalizar Tooltips, podemos hacerlo através de JavaScript o CSS, la cual dependerá el gusto de cada quien, para mi, se me hizo más sencillo crear tooltips por medio de CSS.

Los pasos para crear tu propio tooltip con CSS + HTML son:

Hoja de Estilo:

Definir los colores de los enlaces por default:

a{font:15px Geneva, Arial, Helvetica, sans-serif; color:#CCCCCC; text-decoration:none;}
a:hover{border-bottom: 1px dashed #CCCCCC;}

Nuesto tooltip tiene el siguiente diseño:

a.tooltip:hover {text-decoration:none;}
a.tooltip span {display:none; margin:0 0 0 10px; padding:5px 5px; }
a.tooltip:hover span{display:inline; position:absolute; border:1px solid #cccccc; background:#ffffff; color:#666666;}

HTML

Para que funcione nuestro tooltip, nuestros enlaces deben lucir de esta forma:

<a href="#" class="tooltip">EJEMPLO<span>Esto se mostrará al pasar el mouse sobre EJEMPLO</span></a>

¿Cual es el truco?

El truco es en que en la clase tooltip, declaramos el span como no visible, hasta que el mouse se posicione arriba, este se mostrará en línea, además le asignamos el diseño del dicho tooltip en el hover de la clase tooltip, no antes. Para poder posicionar en donde quieran el tooltip, lo hacen por medio del tooltip span el cual yo le asigne un margin y padding a mi gusto, ustedes pueden personalizar más este tooltip.

VER DEMO EN ACCIÓN >>

Acordiones (Cheat Sheets) para Desarrolladores Web

No cabe duda que es complicado acordarse de todas las sintaxis, elementos, y demás en cada lenguaje de programación web, ahora acordarse para todos es aun más complicado, es por eso que tuve la tarea de buscar algunos acordiones (cheat sheets) que nos simplificarán el trabajo a la hora de desarrollar.

HTML

CSS

MYSQL

Microsoft
SQL SERVER

PHP

ASP

RUBY
ON RAILS

JAVASCRIPT

JQUERY

MOD_REWRITE

¿Quieres ver tu sitio web en diferentes navegadores?

En la entrada pasada (Cambiar la hoja de estilo (CSS) dependiendo el navegador) comentaba sobre como en distintos navegadores se ve diferente nuestro sitio web. ¿Pero cómo cambia mi diseño en los diferentes navegadores, si no los tengo instalados en mi computadora?. Esa pregunta me llego por un seguidor del blog a mi correo electrónico, y tiene razón.

Existen 2 maravillosas aplicaciones en línea para verificar la compatibilidad de cualquier sitio web en diferentes navegadores, las cuales yo uso.

1. BrowserShots: de fácil uso, múltiples navegadores en sus diferentes versiones, así como en distintos Sistemas Operativos, muy recomendado. Lo único, que no te desesperes, tarda un poco en mostrarte los screenshots del sitio.

2. BrowserCam: funcionalidades parecidas al BrowserShots, solo que este verifica JavaScripts, HTML dinámico, etc. Lo malo, es que no lo tienes tan a la mano, tienes que inscribirte, y hacer una serie de pasos para llegar a ver tus screenshots.

Cambiar la hoja de estilo (CSS) dependiendo el navegador

La precupación y el terror de muchos desarrolladores y diseñadores web (que debemos tener todos!), es el navegador del visitante. Que si el viejo Internet Explorer 6, que si con el Internet Explorer 7, Opera, Chrome, Mozilla Firefox, y en cada uno de ellos sucede de que nuestro sitio se ve diferente. Por ejemplo, las transparencias de PNG no son soportadas por Internet Explorer 6, entonces da como resultado, una imagen con bordes blancos bastante feos. A su vez, el acomodo de los elementos suelen moverse, unos más arriba, abajo, lado izquierdo, etc.

Internet Explorer no respeta estándares, en comparación con Firefox, supuestamente para la versión 8, Internet Explorer va orientado hacia el desarrollador web , pero antes de que todos nuestros visitantes se muden a Firefox, Internet Explorer 8 u otro, tenemos que solucionar los problemas que ocurren para distintos navegadores.

La solución es: Crear diferentes hojas de estilo (CSS) para nuestra página web. Estas deben de proporcionar diferentes medidas, márgenes, etc., claro dependiendo el navegador. ¿Pero como se que navegador esta usando el visitante?, y cuando ya lo se, ¿como cambiar la hoja de estilo (css)?.

CSS proporciona comentarios condicionales, los cuales nos ayudarán a conocer los distintos navegadores y sus versiones:

Internet Explorer:

Compruebo si es Internet Explorer:

<!--[if IE]> <link rel="stylesheet" href="ie-style.css" type="text/css" />
<[end if]-->

Compruebo con gte si tiene la version 6 de Internet Explorer, es lo mismo, si cambio el 6 por el 7:

<!--[if IE 6]><link rel="stylesheet" href="ie6-style.css" type="text/css" /> <![endif]-->

Compruebo si el usuario usa versiones anteriores con lt :

<!--[if lt IE 6]><link rel="stylesheet" href="ieoldies-style.css" type="text/css" /> <![endif]-->

Otros condicionales: lte: anteriores o iguales a el. gte: igual o versiones arriba de el. gt: arriba de la version establecida (p.e. 6, sería arriba de esa versión).

Para los demás navegadores:

FIREFOX
<!--[if FF]> <link rel="stylesheet" href="ff-style.css" type="text/css" /> <[end if]-->

OPERA
<!--[if Opera]> <link rel="stylesheet" href="opera-style.css" type="text/css" /> <[end if]-->

SAFARI
<!--[if Safari]> <link rel="stylesheet" href="safari-style.css" type="text/css" /> <[end if]-->
<!--[if Konquerer]> <link rel="stylesheet" href="konquerer-style.css" type="text/css" /> <[end if]-->

iCAB
<!--[if iCab]> <link rel="stylesheet" href="icab-style.css" type="text/css" /> <[end if]-->

FLOCK
<!--[if Flock]> <link rel="stylesheet" href="flock-style.css" type="text/css" /> <[end if]-->>

Steve Ballmer también nos quiere

Recuerdan aquel video donde Steve Ballmer (CEO de Microsoft) grita aforicamente "Developers, Developers, Developers..". Se le ve muy entusiasmado, se ve que quiere mucho a sus desarrolladores XD!, si no lo viste:



Pues si pensaste que solo quiere a los desarrolladores de software estas equivocado, también ama a los desarrolladores web, aquí la prueba:



Solo falta que diga: "Bitches, Bitches, Bitches" XD jaja!

Evitar SPAM en emails

En ocaciones dejamos nuestro email (correo electrónico) publicado en alguna página web propia o en cualquier otro foro, y a veces eso llega a tener repercusiones. Por ejemplo, ¿cuantos de ustedes despues de hacer eso, les ha llegado docenas de correos basura (SPAM)?. Esto ocurre gracias a los ROBOTS SPAMERS, que toman nuestro email y lo añaden a su lista de correos, la cual, nos estarán enviando su dichosa publicidad (SPAM).

Hay distintas formas de solucionar esto, desde crear un Formulario con Captcha hasta convertir un email en imagen para que este no sea tomado por los Robots.

1. Formulario con Captcha: Si tienes un formulario en el cual te esta llegando mucho SPAM, incluye un Captcha (Prueba de Turing pública y automática para diferenciar a máquinas y humanos), lo cual a través de captcha.net, se puede incluir un plugin a nuestro sitio web de manera rápida y eficiente (esta disponible para Wordpress, PHP, Python, MediaWiki, entre otros).


2. Transformar email a imagen: Otra forma de evitar el spam en nuestro sitio web, es incluir solamente una imagen con nuestro correo electrónico, por ejemplo:

y para ello, no ocupas realmente hacer gran cosa. Ya que existen sitios webs generan estas imagen dependiendo la cuenta y servidor de tu correo electrónico, por nombrar algunos:

E-Mail Icon Generator
G-Mail Signature
Need a Sig
Spam Proof E-Mail Generator

3. La protección de tu email a través de otras apliaciones: hay sitios web que te proporcionan una especie de protección, gerando ya sea un email encriptado o una dirección corta (no completa), la cual al dar click sobre esta, te pedirá una serie de requerimientos para poder ver el email completo. por ejemplo:

Tiny Email.me proporciona esta clase de ayuda, dandote la posibilidad de crear un email corto con enlace, al dar click sobre el, te abrirá una página con captcha, tecleas el captcha, y verás completo el email. Este mismo incluye una API para aquellos desarrolladores que desean agregarlo en su sitio web.