Codificar dirección de correo electrónico (email) para evitar spam

Cuando colocamos una dirección de correo en un sitio público y que puede ser leído por los spam bot (robots generadores de spam) nos arriesgamos justo a eso, a sufrir las consecuencias de entrar en sus listas y de esta forma coparnos la bandeja de correo no deseado.

Spam

Una solución es dejar de usar enlaces en sitios web del tipo mailto y colocar una imagen con la dirección. El problema de esta solución es que pierde interactividad, no podemos hacer clic directamente.

Una solución es transformar los caracteres en entidades HTML: el bot no lo reconoce tan fácilmente (tiene que estar programado para eso), pero la funcionalidad para nosotros sigue siendo la misma.

Publicado: 21 septiembre 2012
Por: F. Javier Carazo Gil
Leer más » 1 Comentario

Comprobar si un botón radio está seleccionado y cuál seleccionado dentro de un grupo con jQuery

Comprobar si un botón radio está seleccionado con jQuery

Será tan simple como hacer un selector que nos lleve al elemento, vamos a usar el identificador directamente para el ejemplo, y usar la función is() con el argumento checked. Veamos:

$('#mielemento').is(':checked');

Devolverá true o false. Es útil para obtener datos en un formulario.

¿Qué elemento radio está seleccionado dentro de un grupo?

Si lo que queremos es seleccionar directamente al elemento dentro de un grupo que está elegido haremos lo siguiente:

$("input[name='grupo']:checked").val();

Esta sentencia nos devolverá qué elemento dentro del grupo está seleccionado. Recordad que para agrupar botones de este tipo, en HTML usamos el atributo name.

Ejemplo de uso

Os dejo un ejemplo de cómo se manejan los botones radio en HTML que siempre viene bien recordarlo:

Publicado: 2 agosto 2012
Por: F. Javier Carazo Gil
Leer más » 4 Comentarios

Desactivar autocompletado en formularios HTML

Cuando estamos trabajando con formularios en la web, es muy común que por comodidad del usuario, el navegador incorpore algunos datos que son repetitivos entre ellos: nombre, apellidos, dirección de correo electrónico, etc. La idea es facilitarle la vida al usuario y hacer más rápido el uso del formulario.

Sin embargo, en ocasiones, desearemos que no se produzca dicho autocompletado. Por ejemplo, la web de un banco, un nombre de usuario en una plataforma, o algo susceptible de ser usado de forma malintencionada.

Para desactivar el autocompletado, disponemos del atributo autocomplete. Veamos un ejemplo de uso, lo incorporamos directamente en el formulario:

<form autocomplete="off">

O más concretamente al input en cuestión si queremos afinar en cada entrada de texto:

<input autocomplete="off">

Sin embargo hay un problema: no valida en los test del W3C. Para solventarlo, tenemos varios métodos, el más sencillo es el siguiente que lo he implementado usando jQuery:

Publicado: 15 abril 2012
Por: F. Javier Carazo Gil
Leer más » 5 Comentarios

Manejo de listas select con jQuery (ComboBox/DropDownList)

jQuery es un framework cuyo uso se hace casi inevitable para todos aquellos que usamos de forma intensiva JavaScript. El manejo de las listas de elementos en un sitio web, con la etiqueta <select>, es algo básico en el manejo de datos presentados en formularios.

De cara a validar, gestionar, editar, insertar… es decir, hacer todo tipo de operaciones con los datos en el cliente, necesitamos de JavaScript pero su uso es tedioso. jQuery lo hace simple e inmediato. Veamos el caso concreto del manejo del <select>.

Veamos, tenemos el siguiente listado en un sitio, vemos el código directamente en HTML:

<select id="miselect">
 <option value="1">Ubuntu</option>
 <option value="2">Fedora</option>
 <option value="3">Red Hat</option>
 <option value="4">Debian</option>
</select>

Para cada elemento tenemos dos datos:

  • El texto que se muestra: suele ser algo visible para el humano, un nombre de distribución en este caso
  • El valor: suele ser un identificador único, en este caso es una referencia ficticia a una tabla de distribuciones

Comencemos a tratarlo.

Seleccionar el elemento

La sintaxis de los selectores de jQuery está basada en la de CSS. En este caso elegir el <select> dentro del DOM del documento sería como sigue:

$("#miselect")

Obtener el valor del ítem seleccionado

Sobre el selector aplicamos la función val():

Publicado: 9 abril 2012
Por: F. Javier Carazo Gil
Leer más » 35 Comentarios

Activar compresión GZIP en servidores Apache para aumentar la velocidad de nuestros sitios web

Logo servidor web ApacheA día de hoy, prácticamente todos nuestros potenciales usuarios soportarán a través de sus navegadores páginas web servidas de forma comprimida. ¿Por qué es importante comprimir el código HTML resultante que enviamos? Para mejorar el rendimiento del sitio.

Ya hemos comentado otros métodos que tenemos a nuestro alcance para optimizar la velocidad de nuestro sitio como el uso de Minify, en concreto hablamos en el caso particular de WordPress y su plugin WP-Minify.

Hoy os traemos una optimización de la parte del servidor. La idea es enviar comprimido las partes que mejor ratio de compresión obtienen. La estructura central de una página, sea cual sea la tecnología del lado del servidor que usemos (PHP, Python, Ruby, etc) va a ser siempre código HTML. Este código al comprimirse reducirá su peso enormemente, en unas ratios que fácilmente llegan y superan al 90%. Igual ocurre con otros ficheros tipo texto: CSS y JavaScript por ejemplo.

Otro tipo de contenido que servimos desde nuestro sitio no obtiene ratios tan favorable y es hasta contraproducente comprimirlo por el coste en recursos que se tiene para luego no obtener un beneficio. Hablo de imágenes, ficheros PDF, contenido multimedia…

Por lo tanto, veamos rápidamente cómo activar la compresión usando gzip en nuestro servidor Apache y a la vez configurarlo, de forma que tengamos el rendimiento óptimo.

Publicado: 21 marzo 2012
Por: F. Javier Carazo Gil
Leer más » 15 Comentarios

Elementos que desaparecerán en breve de HTML

Logo HTML5Si te dedicas al mundo del desarrollo web, sabrás que con cada versión nueva de HTML, al igual que ocurren en otras tecnologías, hay elementos que aparecen y otros que desaparecen o se marcan como deprecated para avisar de que deseparecerán en breve.

Con el tránsito definitivo a HTML5 del que tantísimo se lleva hablando, algunos elementos dejarán de existir. Aquí os traigo un listado de ellos, cuál era su función y cómo debemos sustituir su funcionalidad.

<acronym>

Se usaba para describir acrónimos (por ejemplo NASA) en HTML4, sin embargo ahora deberemos usar la etiqueta <abbr>.

Publicado: 23 febrero 2012
Por: F. Javier Carazo Gil
Leer más » 45 Comentarios

Karoshi en HTML y Javascript

Cada vez más los juegos se están pasando de Flash a la tecnología HTML y Javascript. Ya publiqué en su momento juegos como Biolab Disaster o un juego propio, como Milokoban.

El juego que presento hoy es Karoshi HTML5, donde el objetivo del juego es suicidarse en vez de sobrevivir. El juego está desarrollado con la herramienta Game Maker HTML5, si bien no es libre sí que permite desarrollar juegos con la tecnología HTML y Javascript.

Enlace: Karoshi HTML5.

Publicado: 26 octubre 2011
Por: Manuel Ignacio López Quintero
Leer más » 2 Comentarios

Impact JS, un motor de Javascript para hacer videojuegos

Cuando di a conocer el videojuego Biolab Disaster, se me olvidó hacer referencia al motor de JavaScript con el que estaba hecho: Impact JS. En su momento probé el motor e hice algunas pruebas y me gustó mucho, es por eso que me gustaría que lo conocieráis.

Impact JS es un motor de JavaScript específico para crear videojuegos. Usando la API de este motor te despreocuparás del navegador que vaya a funcionar, ya que está preparado para que ande en todos los navegadores, incluso en los de los móviles. Además cuenta con un editor de niveles y un depurador para que el desarrollo de tu videojuego sea mucho más fácil y sencillo. read more

Publicado: 18 septiembre 2011
Por: Manuel Ignacio López Quintero
Leer más » 1 Comentario

Modificar el inicio de una lista ordenada en HTML

Siempre que usamos listas ordenadas en HTML (ordered lists definidas por el tag: <ol>), tenemos una serie de elementos ordenados por número (o por letra en función del CSS). Por ejemplo:

  1. Primer elemento
  2. Segundo elemento
  3. Tercer elemento

Si por cualquier razón queremos empezar por un elemento diferente a uno (por ejemplo porque queramos continuar la lista anterior en otro punto del documento HTML), tenemos el atributo “start“, veamos un ejemplo de su uso: read more

Publicado: 25 agosto 2011
Por: F. Javier Carazo Gil
Leer más » 3 Comentarios

W3Schools, portal con tutoriales sobre HTML, CSS y Javascript

Si buscas un portal para aprender los estándares web, W3Schools es tu sitio. No sólo contiene excelentes tutoriales paso a paso de HTML, CSS y Javascript, sino que también dispone de sus correspondientes referencias, completas y actualizadas.

También existen tutoriales sobre otras tecnologías como XML, SQL, PHP, etc. Eso sí, en mi opinión se pueden encontrar mejores tutoriales.

El único fallo es que está inglés, pero el nivel es muy sencillo y fácil de comprender.

Enlace: W3Schools.

Publicado: 18 julio 2011
Por: Manuel Ignacio López Quintero
Leer más » 9 Comentarios

Suscríbete

RSS de Linux Hispano

Síguenos

Twitter
Facebook

Contacta

email

Páginas

Entradas recientes

Categorías

Meta

Linux Hispano 2020
Tema de WordPress Vega por LyraThemes