El mejor método para combatir el SPAM (una de las grandes lacras del correo electrónico), es tan sencilla como no publicar nuestra cuenta de email en páginas web, y asegurarnos de que no nos registramos en webs que pueden vender nuestros emails a terceros (en este caso, lo mejor es crearnos una cuenta solo para registros en webs “sospechosas”).

Si por alguna extraña razón (o porque eres un cazurro que no tienes ni idea de esto), es vital que tu cuenta de correo aparezca en tu web, al menos podemos ponerselo “dificil” a los spiders que recorren internet a la caza de emails.

Una buena solución es ofuscar nuestro email para que cuando sea acceda a la web sin javascript instalado (como suele pasar con los spiders), no se muestre la dirección de correo tal cual es, sino algo parecido a esto:

quierotenermiemailenlaweb ( at ) soyunpaleto.com

Uno de los mejores sistemas que he encontrado, es el plugin para jquery email defuscator.

Con email defuscator la ventaja es que el email será accesible tanto para los que tengan javascript activado como para los que no. Si está desactivado, la dirección de correo aparecerá como os hemos indicado arriba. Cuando javascript está activado, la cuenta de correo aparece normalmente.

La forma de utilizar este plugin para jQuery es muy sencilla:

Como podeis ver, es tan fácil como cargar los archivos jquery.js y jquery.defuscate.js y llamar a la función defuscate para aquellos elementos que lo necesiten. En nuestro caso, hemos creado un elemento p cuya clase “ofuscar” nos servirá para ocultar todos los mails que tengamos en la página.

Como veis, usando jQuery y su plugin Email Defuscator es muy sencillo poner una barrera más entre nuestro email y los spiders recoge-mails.

Como el autor comenta en su página, este script no es a prueba de balas… con lo que si quereis estar un poco más seguros… utilizad los formularios de contacto.

¿Conoceis alguna otra técnica para ocultar los emails con javascript? No te cortes y coméntanosla!!

Una útil propiedad de CSS, y puede que desconocida por algunos es text-transform.

Con text-transform podemos controlar las letras de un elemento. Los posibles valores que puede tomar text-transform son:

El valor none dejará el texto tal cual lo hayamos escrito.
Con capitalize, cada letra del texto empezará con mayúsculas.
uppercase convierte todo el texto en mayúsculas.
lowercase convierte todo el texto en minúsculas.

Como veis, text-transform es una propiedad sencilla y facil de utilizar, pero que puede ayudarnos sobre todo cuando trabajamos con varios idiomas, y recojemos los textos de un fichero externo. Supongamos que tenemos el título de una sección (contacto). En la barra de navegación principal queremos tenerlo en mayúsculas, para que resalte más; mientras que en el resto del documento nos interesa que esté en minúsculas. Con un simple text-transform: uppercase ó text-transform: lowercase solucionamos el problema, sin tener que duplicar la entrada en el fichero donde recogemos los datos.

Y vosotros, ¿que otros usos le dais a la propiedad CSS text-transform?

Hace algunos días que ya os hablamos de la estupenda propiedad de CSS3 border-radius.

Bien, me ha parecido interesante dar un repaso más amplio a esta propiedad por las amplias posibilidades que tiene.

Antes de empezar, dejemos clara una cosa: border-radius tan solo funciona en los navegadores más avanzados que han empezado ya a implementar en sus motores características del nuevo estándar para las hojas de estilo en cascada CSS3. Esto quiere decir que solo Firefox con su motor Gecko, Safari con Webkit  y Konqueror con khtml (por citar los más conocidos) son los únicos navegadores en los que funcionará la propiedad border-radius. Ni Opera, ni por supuesto Internet Explorer la soportan todavía.

Como comentamos en la entrada anterior, podemos aplicar bordes redondeados a un elemento haciendo uso de:

-moz-border-radius para Firefox.

-webkit-border-radius para Safari.

-khtml-border-radius para Konqueror.

Pero, ¿que pasa si queremos que tan solo las esquinas inferiores del elemento sean redondeadas, y las superiores rectangulares?

En ese caso, debemos especificar que esquina es la que queremos redondear, y con cuantos pixeles. Sería así:

Para Firefox (Gecko):

Para Safari (Webkit):

Para Konqueror (khtml):

Como podeis ver, Webkit y khtml usan la misma nomenclatura, mientras que Gecko crea la suya propia.
Con esto, podemos aplicar diferentes radios a las esquinas de cada capa.

¿Las posibilidades? Infinitas. Ahora tan solo queda esperar a que todos los navegadores implementen estas propiedades, para dar un paso adelante en temas de maquetación, y olvidarnos de muchos problemas con imágenes, javascripts y demás…

Sin embargo, no dudes en usar estas propiedades si realmente las necesitas, siempre que la versión resultante para los navegadores “no tan avanzados”, sea igualmente accesible y usable. Es simplemente, mejorar la experiencia del usuario que utilice el navegador adecuado.

Y vosotros, ¿ya usais -border-radius en vuestros proyectos? ¿No? ¿Y a qué esperáis?

Una característica muy común en los pies de página de las webs, es la aparición del copyright, donde solemos ver algo así:

© 2008 Weblimite.com

Bien, para no tener que estár actualizando el pie de página de todas nuestras webs, sería interesante que el año se mostrara con PHP, para que estuviera actualizado en cualquier momento.

Y, ¿como mostrar el año actual el PHP?

Fácil, muy facil. Tan solo debemos usar la función date. La función DATE recibe una cadena, donde se le especifica con que formato nos debe devolver la fecha que recibe como segundo parámetro, o bien la fecha actual en caso de que no reciba un según parámetro.

Es más fácil verlo:

Las opciones de esta función son bastante amplias, pero para el caso que nos ocupa, utilizaremos tan solo la cadena “Y”.

Insertando este código en nuestro pie de página, obtendremos el año actual, en formato número de 4 dígitos: 2008.

El código completo, sería este:

A través de anieto2k (blog totalmente recomendado) nos enteramos que Firebug, la mejor extensión de Firefox para desarrolladores, pasa a formar parte del Proyecto Mozilla. De esta forma, Firefox obtiene su  propia herramienta de debug, que de tantos problemas nos saca. Es de suponer que la integrarán en el sistema (ya que el inspector DOM que venia por defecto en Firefox 2, actualmente está disponible como una extensión mas)…

Personalmente, Firebug es la extensión que más uso con diferencia, y la más importante a la hora de maquetar una web, tanto en proyectos personales como profesionales, de hecho, fue la primera extensión que instalé en el Firefox del ordenador en mi nuevo trabajo.

Si aún no la has probado, ¿a que esperas?

Vía: anieto2k

Vía noupe.com, nos ha llamado la atención una magnífica recopilación de más de 47 formularios de contacto realizados en CSS, utilizando Ajax.

Como comenta el autor del post, con AJAX es posible informar al usuario en tiempo real de los posibles errores ocurridos durante el envío del formulario de contacto.

Esto es un gran avance, sin duda, pero siempre tenemos que tener presente a la hora de crear estos formularios que AJAX es un recurso para ayudar, y que no debe monopolizar el formulario de contacto.

¿Que quiero decir con esto? Pues que debemos pensar también en aquellos usuarios que no tienen javascript activado (bien por el dispositivo que usan para acceder a la red, o bien por el tipo de navegador), y que nuestro formulario tenga más cualidades usando AJAX, pero que siga siendo accesible y usable sin él. Así de fácil.

La inspiración, la podeis encontrar aquí: 47 excellent ajax css forms

La nueva versión de Wordpress, la 2.6, ya ha sido liberada. Después de dejar pasar un tiempo prudencial, para comprobar que no existen problemas con la actualización, es hora de dejar paso a esta nueva versión.

Algunas de sus mejoras son:

• Soporte completo de SSL para mejorar la seguridad.
• Mejoras en la galería de imágenes.
• Soporte para Google Gears, y así poder postear offline.
• Mejoras en la sugestión de tags
• jQuery UI 1.5.1
• etc.

La pregunta que nos hacemos todos a la hora de actualizar a la versión 2.6 de Wordpress es: ¿que archivos tengo que sobreescribir en el servidor?

Para hacernos la vida un poco más fácil, existe un plugin para Wordpress llamado Wordpress Automatic Upgrade.

Gracias a este plugin, tan solo tenemos que facilitarle los datos de nuestro FTP, y él se encargará de actualizarnos, automáticamente, a la nueva versión sin tener que hacer otra cosa que ir confirmando los pasos. Nos realiza copia de seguridad de los archivos importantes, así como de la base de datos, por si hubiera algún fallo durante la actualización.

De esta forma, no hay excusa para no tener nuestro blog actualizado con Wordpress 2.6.

Hace un tiempo os ofrecimos una fuente de inspiración para crear formularios de contacto. Ahora, para completar esa entrada, os recomendamos un artículo escrito hace ya algún tiempo por Olga Carreras, uno de los referentes españoles en temas de usabilidad y accesibilidad.

En su artículo 60 Directrices para realizar formularios usables, nos recuerda los puntos básicos que deberiamos tener en cuenta a la hora de crear nuestros formularios de contacto.

Paso a paso, va desgregando los puntos más importantes a tener en cuenta en los textos, en la organización de los campos, en el tipo de campos, el funcionamiento del formulario de contacto, los botones, la gestión de los errores, la respuesta al usuario, etc.

Un artículo de muy recomendable lectura, para ponernos un poco al día en temas de usabilidad.

Todos conocemos esos brushes para photoshop de cinta adhesiva, tan de moda últimamente. Pero ¿que pasa si no disponemos de Photoshop? ¿o si nos gusta mucho más Fireworks para crear nuestros diseños web?

Con este tutorial, aprenderemos a crear ese efecto de cinta adhesiva con Fireworks. El tutorial está hecho con Fireworks CS3, pero a partir de Fireworks 8 puedo asegurar que es perfectamente posible hacerlo.

Read More »

Para todos aquellos que trabajan con Firworks a la hora de diseñar sus webs, hoy os ofrecemos una recopilación de 131 estilos de capa al más puro estilo web 2.0.

Un recurso estupendo, que nos ahorrará bastante tiempo intentando dar a nuestras capas ese degradado que buscamos.

Podeis descargar el archivo .stl desde la página del creador: 131 web 2.0 layer styles for fireworks