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:
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.
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"/> |
Hay varios motivos:
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
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.
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:
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 = '<p>mi codigo html</p><a href="#fragment">Other text</a>'; echo strip_tags($text); //// Para permitir el uso solo de <p> y <b> echo strip_tags($text, '<p><b>'); |
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.
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.
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 | <?php $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.
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
Últimos Comentarios