Cargar Google Analytics al finalizar la carga de la web con jQuery.

Noviembre 3rd, 2008 por alwaison

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:

  1.  
  2. <script src="jquery.js" type="text/javascript"></script>
  3. <script type="text/javascript">
  4.    $(document).ready(function(){
  5.       $.getScript(‘http://www.google-analytics.com/ga.js’,function(){
  6.          if (typeof(_gat) == ‘object’){
  7.             var pageTracker = _gat._getTracker(‘ID_GOOGLE_ANALYTICS’);
  8.             pageTracker._initData();
  9.             pageTracker._trackPageView();
  10.          }
  11.       });
  12.    });
  13. </script>
  14.  

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

Visto en Javascript, scripts Sin comentarios »

Autotab. Plugin de jQuery para tablulación automática de formularios.

Octubre 27th, 2008 por alwaison

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:

  1.  
  2. // añadimos la llamada al javascript dentro del HEAD
  3. <script type="text/javascript" src="jquery.autotab.js"></script>
  4.  
  5. // creamos el formulario, estableciendo el tamaño y el número máximo de caracteres permitidos
  6. <form>
  7. <div><strong>Phone Number:</strong></div>
  8. <input type="text" name="area_code" id="area_code" maxlength="3" size="3" /> -
  9. <input type="text" name="number1" id="number1" maxlength="3" size="3" /> -
  10. <input type="text" name="number2" id="number2" maxlength="4" size="5" />
  11. </form>
  12.  
  13. // inicializamos el script, definiendo el formato, y los campos anteriores
  14. <script type="text/javascript">
  15. $(document).ready(function() {
  16. $(‘#area_code’).autotab({ target: ‘number1′, format: ‘numeric’ });
  17. $(‘#number1′).autotab({ target: ‘number2′, format: ‘numeric’, previous: ‘area_code’ });
  18. $(‘#number2′).autotab({ previous: ‘number1′, format: ‘numeric’ });
  19. });
  20. </script>
  21.  

Descarga, demo y documentación | jQuery-autotab

Visto en Javascript, scripts Sin comentarios »

QuickSearch v2.0. Filtrando información con jQuery.

Octubre 24th, 2008 por alwaison

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.

quicksearch-plugin-jquery

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

  1. $(elemento_donde_se_busca).quicksearch(opciones);

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

Visto en Javascript, scripts Sin comentarios »

Personaliza tooltips con jQuery y CSS. Tutorial.

Octubre 22nd, 2008 por alwaison

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.

tooltips-jquery-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

Visto en Javascript, Tutoriales, scripts Sin comentarios »

20 plugins jQuery para mejorar la experiencia del usuario.

Octubre 15th, 2008 por alwaison

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

Visto en Javascript, Webmasters, scripts Sin comentarios »
-->

Pushup. Ayuda a que tus visitas tengan actualizado su navegador.

Octubre 7th, 2008 por alwaison

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.

pushup-firefox
pushup-safari
pushup-opera
pushup-ie

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

Visto en Javascript, Recursos, Webmasters, scripts 1 Comment »

Tutorial y screencast de jFlow. Un slider para jQuery.

Septiembre 25th, 2008 por alwaison
jFlow. Plugin para jQuery

Vía nettuts encuentro un excelente tutorial, acompañado por su correspondiente screencast para utilizar el plugin para jQuery jFlow.

jFlow, un plugin que tan solo pesa 4KB, y con el que se pueden crear efectos tan interesantes como el que se muestra en el tutorial.

Aquí os dejo los enlaces:

Tutorial
Demo

Visto en Enlaces, Javascript, Tutoriales, Videotutoriales Sin comentarios »

Ocultar email con javascript. Email Defuscator.

Julio 31st, 2008 por alwaison

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:

  1. <!–
  2. <mce:script src="/js/jquery.js" mce_src="/js/jquery.js" type="text/javascript"></mce:script>
  3. <mce:script src="/js/jquery.defuscate.js" mce_src="/js/jquery.defuscate.js" type="text/javascript"></mce:script>
  4.  <mce:script type="text/javascript"><!
  5. $(’p.ofuscar’).defuscate();
  6. // –>
  7.  
  8. micuenta ( at ) correo.com
  9.  
  10. –>

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

Visto en Developers, Javascript, Noticias, scripts 2 Comments »