Vía anieto2k, encuentro un script realizado por Marcos Fernández, para cargar Google Analytics una vez finalizada la carga de toda nuestra página.

Realizandolo de esta forma, la ventaja es que si por alguna razón, Analytics tarda mucho en responder, o llega a fallar, nuestra página estará cargada al 100%, y lo único que perderemos será esa visita en el contador de Google Analytics.

Bien, al grano. Marcos se ayuda de jQuery para retrasar la llamada a Analytics hasta el final. Justo antes del cierre de la etiqueta BODY, insertamos el siguiente código:

Como podeis ver, el código es muy simple. Tan solo hacemos uso del evento ready() de jQuery para entonces, hacer las llamadas correspondientes a los scripts de Analytics.
Acordaos de que debeis modificar ID_GOOGLE_ANALYTICS por tu ID de Google Analytics real.

Script y ejemplo | marcosdev.com

Para dar consistencía a nuestras páginas web, durante la programación debemos tener en cuenta muchos detalles que pueden fallar en un momento determinado.

Uno de ellos surge a la hora de trabajar con imágenes subidas por los usuarios. Cuando necesitamos mostrarlas, debemos asegurarnos antes de que realmente la imágen existe y que no ha habido ningún error durante la subida.

La primera idea que se nos viene a la cabeza es usar la función file_exists:

Según su descripción, file_exists verifica si un archivo o directorio existe, devolviendo true o false. El gran problema de la función file_exists es que no funciona correctamente cuando le pasamos como parámetro una url donde teóricamente debe estar la imágen.

En este ejemplo, siempre obtendremos NO existe la imagen, ya que como hemos comentado, la función file_exists no funciona correctamente para con direcciones remotas.

Por lo tanto, debemos utilizar otra forma para comprobar si realmente existe una imagen. Existen varias formas, algunas de ellas usando la función fopen(), sin embargo para mi es mucho más intuitivo y supondrá una menor carga para el servidor utilizar la función GetImageSize().

La función getImageSize() determinará el tamaño de cualquier archivo de imagen dado y devuelve las dimensiones junto con el tipo de archivo y una cadena de texto de altura/ancho a ser usada en una etiqueta HTML IMG corriente y el tipo de contenido HTTP correspondiente.

Utilizando getImageSize(), el script quedaría muy parecido a esto:

De esta forma, si la imagen existe, PHP devolverá correctamente Existe la imagen, funcionando tal y como se espera.

Para mantener simple el código (KISS), no dudeis en crear una función (existe_imagen($url), por ejemplo) en la cual se comprobará si existe la imágen o no utilizando getImageSize(), y devolverá true o false dependiendo del resultado.

Pero eso, ya os lo dejo a vueltra elección.

El código utilizando la función getImageSize extraido de: tutores.org

Autotab es un plugin para jQuery que nos permite realizar la tabulación entre los campos de un formulario de contacto automáticamente, además de servir como filtro a la hora de introducir caracteres en el campo.

Su funcionamiento es muy simple: una vez que se han escrito el número máximo de caracteres en el campo de texto, el foco salta automáticamente al siguiente caampo. También incluye un filtro que da formato (mayúsculas o minúsculas) al texto, y que permite configurar que caracteres debemos introducir (númerico, alfabético, etc…)

Su implementación es sencilla:

Descarga, demo y documentación | jQuery-autotab

QuickSearch es un plugin para jQuery, que pesa tan solo 4,6Kb en su versión comprimida, capaz de filtrar datos de tablas, listas y párrafos.

Para implementarlo en nuestro código, tan solo tendremos que añadir este código:

QuickSearch se encarga de añadir campo para introducir el campo de búsqueda, ejecutándola al vuelo en cuanto comenzamos a escribir. Es sorprendente su velocidad de filtrado de datos, la verdad.

Demo y documentación | http://rikrikrik.com/jquery/quicksearch/

Via | webappers.com

Los tooltips son una herramienta visual de ayuda al usuario que funciona al situar el ratón sobre un elemento, mostrando una ayuda adicional.

Desde designreviver.com nos ofrecen un tutorial para personalizar los tooltips de nuestra web usando jQuery y CSS.

El tutorial, aunque en inglés, proporciona el código necesario para que podamos implementar esta técnica en nuestras páginas sin mayor problema.

Un recurso interesante, para hacer más homogéneo nuestros diseños.

Enlace | jquery css tooltip example

En devsnippets.com encontramos una recopilación de 20 plugins para jQuery con los que mejorar la experienia del usuario en nuestra web.

En esta recopilación de plugins para jQuery encontraremos soluciones para:

• Resaltar una área de nuestra web (una imagen, un párrafo, un enlace…).
• Lightbox para nuestras galerías.
• Intercambiar el tema (skin) de nuestra web.
• Auto-relleno de selectbox.
• Crear menús estilo iPod.
• Asignar la misma altura a distintas capas.
• Asignar enlaces a otros elementos que no sean <a>.
• Añadir backgrounds animados.
• Crear caruseles.
• Cambiar la hoja de estilos CSS de nuestra web.
• Etc…

Como veis, una extensa recopilación de plugins para jQuery, que al menos se merece que le echemos un vistazo. Estas cosas nunca se sabe cuando las vamos a necesitar.

Enlace: 20 jquery plugins for unforgettable user experience

Haciendo unas modificaciones en el theme, decidimos añadir la imagen Gravatar a los comentarios del blog.

Gravatar (globally recognized avatar) es un avatar que va asociado a vuestra cuenta de email. Así, cada vez que posteas en un blog usando esa cuenta, aparece tu avatar sin tener que registrarte en ese blog en concreto.

Para añadir gravatar a tu blog, si el theme que usas no lo trae por defecto, tan solo tienes que seguir estos pasos:

1. Descargar el plugin de gravatar. Puedes conseguirlo desde aqui.

2. Sube el plugin a la carpeta wp-content/plugins.

3. Editamos el archivo comments.php de nuestro theme. Lo podemos hacer directamente desde el panel de control, en Diseño > Editor de Temas.

4. Buscamos la lista de los comentarios (<ol class=”commentlist”>)

5. Justo encima del elemento cite, insertamos la llamada al plugin:

Insertamos una imagen, cuya ruta nos la proporcionará la funcion gravatar, la cual recibe 4 parámetros (ninguno de ellos es obligatorio):

gravatar({rating{, size{, default{, border}}}})

rating: Determina la calificación de las imágenes, incluyendo la del parámetro. Soporta los valores [ G | PG | R | X ]. En el ejemplo, tan solo aceptaremos los avatares clasificados como R, PG y G.
size: Tamaño en pixeles de la imagen. En nuestro caso, será de 40×40.
default: Imagen por defecto que se muestra si no hay avatar asociado a esa cuenta de correo.
border: color en hexadecimal (sin el #), para el borde de la imagen.

Ahora tan solo tenéis que guardar los cambios en el archivo comments.php para comprobar que la función se realiza correctamente, y que la maquetación no se rompe por ningún lado. En caso de que necesitéis arreglar algo, recordad que la imagen del gravatar tiene asociada la clase gravatar.

Podéis encontrar más información sobre este plugin en su web: Wordpress Gravatar Plugin

Pushup es un script creado en javascript que avisa a los usuarios de tu web de que existe una versión más reciente del navegador que está utilizando.

Actualmente, pushup soporta los siguientes navegadores:

• Internet Explorer 7+
• Firefox 3+
• Safari 3+
• Opera 9.5+

El funcionamiento es muy básico: al acceder un usuario a nuestra web con una versión desactualizada del navegador, aparecerá una alerta en la parte superior derecha de nuestra web avisando al usuario de que existe una nueva actualización.
Se ofrecen dos enlaces en esa alerta, uno para ir a la web desde donde descargaremos la actualización, y otro para posponer el mensaje un número determinado de horas que nosotros previamente habremos modificado.

La instalación es tan sencilla como añadir en nuestro código el enlace a la hoja de estilos CSS y a la librería javascript correspondientes. Nada más. Si deseamos modificar, por ejemplo, la ruta de las imágenes, deberemos cambiarlo directamente en el archivo javascript.

Actualmente, existen plugins para dos frameworks de javascript: jQuery y Dojo

Para descargar Pushup, consultar la documentación o incluso hacer alguna donación al autor, visitad su página web: www.pushuptheweb.com

Hace un tiemp os explicábamos como obtener el año actual en PHP. Hoy vamos a ver como podemos obtener una fecha en castellano con PHP, al estilo de:

viernes, 19 de septiembre de 2008

Como explica la documentación de PHP, la función strftime()

Devuelve una cadena con formato de acuerdo a la cadena de formato dada usando la marca_de_tiempo dada o la hora local si no se entrega una marca de tiempo. Los nombres de mes y día de la semana y otras cadenas dependientes del idioma respetan la localidad actual definida con setlocale().

¿Y que quiere decir todo esto? Vamos a ver un ejemplo.

La función strftime() recibe dos parametros.
El parámetro $formato es una cadena de texto donde estableceremos el formato en el que la función nos devolverá la fecha.
$marca_de_tiempo es un integer con la fecha en formato UNIX.

Para nuestro ejemplo, necesitamos obtener el nombre completo día, el número del día, nombre completo del mes y el año usando 4 cifras, y todo esto, por supuesto, en perfecto castellano.

Así, el parámetros $formato sería así:

Para obtener la fecha deseada, podremos usar varias funciones:
strtotime() si obtenemos la fecha de una base de datos
time() para obtener la fecha actual
O cualquier otra función que devuelva una fecha en formato UNIX.

 
Así, la llamada completa a la función strftime() quedaría así:

Bien, hasta aqui facil, ¿verdad? Pero, ¿cómo definimos en qué idioma queremos que devuelva la fecha?
Para ello usaremos la función setlocale(), que se encarga de fijar la localización de la página web, es decir, establece el idioma.

Para establecer como idioma el español de España, la función setlocale() debe ser esta:

Una vez hemos establecido que el idioma de la página es el castellano, la función strftime() devolverá la fecha en el idioma esperado.

Como veis, es muy fácil obtener fechas en castellano con PHP, ahorrándonos los típicos arrays con los nombres de los meses.

Dejo el código completo, para que sea más fácil el copy&paste

Si te ha sido útil este código, alégranos el día y deja un comentario

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!!