Evitar spam en formularios mediante Javascript

ByLuis

Buen método para evitar spam en los formularios sin la necesidad de CAPTCHA. Se trata de añadir mediante javascript eventos al formulario que detectan el uso por parte de humanos: focus y click.
Cuando un usuario quiere rellenar el formulario, uno de esos eventos debe lanzarse, por lo que mediante javascrip se añade un valor específico a un input tipo hidden que es el que usaremos para saber si el usuario es un robot o una persona.
En el caso de no tener javascript habilitado (navegadores de algún móvil o lectores de texto para invidentes), mediante la etiqueta NOSCRIPT añadiremos un campo que añada una pregunta tipo: “cuanto son dos más siete”, que sustituirá al captcha.
Invisible Human Check for Web Form Validation
Gracias Gerardo por el aviso

Similar Posts

Paginación mediante Javascript

ByLuis

Sencillo pero efectivo método para paginar contenidos mediante Javascript. Puede ser muy útil cuando el diseño no permite grandes espacios para contenidos.
El funcionamiento es muy sencillo, se ocultan los contenidos y mediante los botones de paginación se van mostrando. La verdad es que no sería necesaria esta librería, porque como ya he dicho el método es muy sencillo y nosotros mismos lo podríamos implementar, incluso mejorar, porque usa la librería cssQuery unicamente para obtener los elementos, mientras que podríamos hacerlo nosotros mismos con un getElementsByTagName, si es que nuestras necesidades no son obtener elementos mediante sus estilos, rel u otras cosas.
Javascript pagination in yer face

|

Optimizing Search Functionality with Large JavaScript Arrays

ByLuis

Processing arrays can take quite a few bit of time, this is something that can directly impacts the loading speed of your page and depend of the computer and the browser your users use. When you think that a typical users can load your website with a netbook , or an iphone for that matter, speeding up search in large arrays can be a good way to optimize your code …

Post original

Tutorial para crear un plugin jQuery

ByLuis

En varias ocasiones he mencionado plugins para jQuery, pero en esta ocasión se trata de cómo hacer un plugin para jQuery.

Independientemente de la complejidad propia del plugin, crear un plugin para jQuery es bastante sencillo, y en el tutorial nos indican paso a paso cómo desarrollarlo:

  • Primeros pasos
  • Propiedades de configuración
  • Constructor
  • Métodos adicionales

The Definitive Guide to Creating a Practical jQuery Plugin

|

Evitar el caché en las hojas de estilo

ByLuis

Algo que suele ocurrir con frecuencia es que al realizar cambios en la hoja de estilos, estos no se vean reflejados en la página por el caché del navegador.

Para evitar esto, tan solo es necesario un script que cargue los estilos y que le añada un parámetro GET que sea único para que el navegador lo entienda como un fichero nuevo. En este caso el parámetro es la fecha.

function loadStyleSheets(stylelist) {
var head = $$("head")[0];
var date = new Date();
var dateString = Date.parse(date.toString());
for(var i = 0; i < stylelist.length; i++) {
var link = document.createElement("link");
link.href="style/" + styleList[i] + "?" + dateString;
link.type = "text/css";
link.rel = "stylesheet";
head.appendChild(link);
}
}

En este caso el autor hace uso de la función de Prototype $$, pero se podría hacer sin el uso de este framework.

Como consejos sobre el mismo tema yo añadiría dos:

  • si estás trabajando en local y no ves los cambios, carga en el navegador directamente el fichero .css que hayas modificado, así los cambios aparecerán, luego los podrás ver en la página.
  • si la página se crea mediante PHP le puedes añadir a la etiqueta link el parametro GET directamente:
<link rel="stylesheet" href="estilos.css?refresh=<?php echo time(); ?>" />

How to avoid caching and dynamic load of stylesheets

Laboratorio: eliminar HTML en cajas de texto con jQuery

ByLuis

Trasteando un poco con jQuery me ha dado por hacer una función que elimina las etiquetas HTML de una caja de texto de un formulario. Esto puede ser necesario cuando no se quiere que se introduzca HTML en un campo. Lógicamente, esto es la parte cliente, en el servidor debería haber una función similar que lo hiciera.

La función es sencilla, en cada input:text añadimos el evento change para que cuando se modifique el contenido, se ejecute la función de strip_tag, la cual crea un elemento DIV auxiliar, hago que su contenido sea el valor de la caja de texto, me quedo son con el texto e inserto este valor en el input:

$('document').ready(function() {
$(':text').change(function() {
$(this).attr('value', $('document').add('<div></div>').html($(this).attr('value')).text());
});
});

¿Dudas?, alguna. Si entre el texto pongo un <script>alert(1);</script> me ejecuta el script, algo no muy elegante. ¿Qué pasa con el elemento DIV creado?, ¿se queda en el limbo o se destruye?.

Bueno, para mis primeras pruebas con jQuery no está mal del todo.

Añadir estilos y scripts a la administración de plugins en WordPress

ByLuis

Cuando estamos desarrollando un plugin para WordPress y queremos que la administración del plugin tenga estilos y scripts propios, ya sea para darle cierta interactividad o diseño, o bien podremos incluir los estilos o librerías a pelo en la página del plugin, o bien podremos hacer que WordPress añada lo estilos y los scripts en el head del HTML. Para realizar esto, deberemos utilizar las acciones admin_print_styles y admin_print_scripts:

add_action('admin_print_styles', 'incluir_css');
add_action('admin_print_scripts', 'incluir_script');

function incluir_css() {
  echo '';
}

function incluir_script() {
  echo '';
}

Así de sencillo.