Miguel Manchego » formulario

XHTML: registro al estilo facebook

admin — Wed, 01 Sep 2010 16:17:38 +0000

Esta de moda el Facebook y claro también lo está hacer formularios, íconos, efectos a ese estilo. En este tutorial te explican detalladamente como crear tu propio formulario de registro a ese estilo usando XHTML y CSS.

El resultado queda como esta imagen:

Pueden el tutorial AQUI y la demo AQUI

Posts Similares:

Jquery: Plugin para validar al estilo HTML5

admin — Thu, 19 Aug 2010 16:56:32 +0000

Anteriormente había hablado de un plugin de Bassistance para validar, pero esta opción me parece muy interesante ya que usa las propiedades nativas de HTML5, aunque hay algunas caracteristicas que se hacen extrañar de las que hablaré más adelante.

¿Cómo usarlo?

Lo primero es incluir el script y luego indicar que formulario debe afectar, personalmente creo que mejor es colocar un id.

1
2
3
4
5

La forma de realizar la validación es usando las propiedades HTML5, es decir algo similar a:

1	<input type="email" name="email" id="email"/>

¿Por qué usarlo?

Hay varios motivos:

Nos vamos acostumbrando a la sintaxis de HTML5
Incluye ciertas validaciones que no tiene el plugin de bassistance además de funciones tipo texto por defecto
El envío asíncrono de datos viene incluido

Puntos por pulir

Cuando se pega del portapapeles un texto a un textarea con un número máximo de caracteres este no se corta para validarlo
Los mensajes de error no son personalizables, aunque incluye por defecto mensajes en español e inglés modificables directamente sobre el código del script

Puedes ver más sobre este plugin AQUI, yo tuve problemas para acceder a dicha dirección, si no funciona en tu país usa un proxy anónimo como por ejemplo www.hidemyass.com

Posts Similares:

Creando grupos de opciones con combos html

admin — Fri, 26 Mar 2010 00:59:39 +0000

En este post voy a hablar de un tema muy básico nada de ajax ni trucos extraños pero aunque es una función muy simple rara vez se usa pese a lo tremendamente util que es en los comboBox, supongamos que tengo varias categorias y subcategorias y me gustaría que los usuarios puedan elegir sólo la subcategoría(se supone que en la base de datos la subcategoria tiene un parent asi que no requerimos el id de la categoria) pero además que mantenga un orden el combo para que el usuario sepa que categoria va a que subcategoría y obtener algo como lo de la imagen.

El código es muy sencillo, basta usar la etiqueta optgroup en nuestra categoría y etiquetas select para nuestras subcategorias

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<select name="categorias">
<optgroup label="fruta">
<option value="1">naranja</option>
<option value="2">fresas</option>
<option value="3">peras</option>
</optgroup>
<optgroup label="verduras">
<option value="1">zapallo</option>
<option value="2">habas</option>
</optgroup>
<optgroup label="carnes">
<option value="1">pollo</option>
<option value="2">pescado</option>
<option value="3">cerdo</option>
</optgroup>
</select>

Hasta ahi muy bien, pero podemos darle algo de estilo a nuestro combo para que quede así:

Para eso aplicamos los siguientes estilos:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

select {
border:1px solid #999;
background-color:#000;
color:#FFF;
}
optgroup {
background-color:#900;
color:#FFF;
background-image:url(flecha.png);
background-repeat:no-repeat;
background-position:right top;
}
option {
background-color:#000;
}

Lo mejor de todo es que funciona hasta en IE6 excepto colocar una imagen como fondo del optgroup pero creo que es un detalle pequeño que podemos obviar.

Posts Similares:

Seguridad, ataques y spam en la web

admin — Thu, 18 Mar 2010 02:13:41 +0000

Desde que empecé a postear en mi blog he sufrido múltiples ataques afortundamente he podido repelerlos todos gracias a una serie de plugins para WordPress sin embargo estas mismas funciones es posible incluirlas en nuestros scripts, veamos algunas formas:

No permitir HTML

Nada más molesto que ser bombardeado por cientos de mensajes llenos de código basura, con links para comprar viagra (creo que no lo necesito), ofertas de mil cosas he incluso mensajes en árabe que llenan de links y código malicioso en los peores casos añaden javascript que invocan banners de propaganda o intentan descargarla algún troyano a nuestros visitantes lo mejor para prevenirlos es no permitir el uso de código HTML para eso podemos usar una muy útil función de PHP que es strip_tags y se usa de la siguiente forma:

1
2
3
4
5

//// Para eliminar todo rastro de html seria
$text = '

mi codigo html

Other text';
echo strip_tags($text);
//// Para permitir el uso solo de

y
echo strip_tags($text, '

');

Existen formas más elaborados usando PHP purifier por ejemplo pero por lo general no requerimos un script tan pesado y con strip_tags basta.

Usar un código de seguridad

Más conocido como captcha podemos colocar nuestra letras como si fueran un gráfico un poco distorcionado y así prevenir que robots posteen, hay algunos detalles que debemos tomar en cuenta primero que el código se debe verificar al momento de enviar el formulario y al recibir los datos ya que los robots suelen no usar el formulario y saltarse toda validación javascript, hay muchas opciones de captcha basta buscar en google pero siempre tomando en cuenta que el código sea lo suficientemente comprensible para un humano.

Bloquear IP

Esta es una de las formas más radicales de prevenir spam ya que los robots suelen venir de algunos ip que no varían al bloquearlos se disminuye el spam pero cuidado porque podriamos estar bloqueando a todo un grupo de usuarios que estén bajo un mismo IP público.
Para esto en PHP verificamos el IP de nuestro visitante

1
2
3
4
5
6
7
8

$ip = $_SERVER['REMOTE_ADDR'];
//// Hacemos un array de ips baneadas
$ips_baneadas = array('10.0.0.1',’192.0.0.1’);
$contador = count($ips_baneadas);
//// Verificamos si el visitante esta baneado
for ($i=0; $i<$contador; $i++) {
if($ip == $ips_baneadas[$i]) { die("Lo sentimos, estas baneado . $ip"); } } ?>
?>

Y bueno esas son las formas más usuales de prevenir spam aunque les aseguro que no son 100% seguras digamos que son un 99% seguras combinadas asi que siempre quedará algo que debamos borrar manualmente por lo que no esta demás poner alguna opción que diga “denunciar” para eliminar algún comentario malicioso.

Posts Similares:

Elementos de interfaz(UI) para web

admin — Mon, 08 Feb 2010 14:48:29 +0000

Siempre ando buscando recursos para web y me encontré con esta interesante colección de elementos de interfaz totalmente gratis lista para usar en algún proyectos con ajax. Incluye botones, avisos, barras de desplazamientos, menus, combos, etc.

Pueden bajarla AQUI

Ni bien publiqué este post me encontré con otras opciones muy interesantes que incluyen no sólo botones, también cursores e incluso elementos de interfaz, pueden verlo AQUI