Artículos
HTML5

Autocompletar formularios con HTML5

Creado: 19/Abr/2012 Actualizado: 09/Ene/2025

Seguro que cuando estás rellenando un formulario muchas de las veces te empieza a ofrecer opciones de autocompletado de los datos. Empiezas a escribir tu nombre y ya te ofrece varias opciones. E incluso, introduciendo un solo campo te rellena varios del formulario.

No en vano el autocompletar de los formularios es una de las cosas que más está potenciando los navegadores.

Ahora con HTML5 vamos a poder controlar el aspecto de autocompletar los formularios. Así mediante código podremos decir si queremos que el formulario sea autocompletable o no.

Para controlar el autocompletar de los formularios con HTML5 tenemos el atributo autocomplete. Atributo al cual deberemos de pasar un valor booleano.

Así podemos tener un formulario con el autocompletar del formulario activado. Es decir con el atributo autocomplete a «on»:

<h2>Formulario con Autocompletar Activado</h2>
Al insertar datos en los campos es muy probable que se muestren opciones de autocompletado.
<form action="enviar.php" autocomplete="on">
<label for="nombre">Nombre: </label><input type="text" id="nombre"><br>
<label for="city">Ciudad: </label><input type="text" id="city"><br>
</form>

O un formulario con el autocompletar del formulario desactivado. Es decir, con el atributo autocomplete a «off»:

<h2>Formulario con Autocompletar Desactivado</h2>
Al insertar datos en los campos no se te mostraran opciones de autocompletado.
<form action="enviar.php" autocomplete="off">
<label for="nombre2">Nombre: </label><input type="text" id="nombre2"><br>
<label for="city2">Ciudad: </label><input type="text" id="city2"><br>
</form>

Un simple atributo en HTML5 con mucha capacidad de control.

Vídeos sobre HTML5

Disfruta también de nuestros artículos sobre HTML5 en formato vídeo. Aprovecha y suscribete a nuestro canal.

Test HTML5

¿Te atreves a probar tus habilidades y conocimiento en HTML5 con nuestro test?

Test HTML5
Artículos
Java

Usando las clases HashSet y HashMap

Creado: 11/Abr/2012 Actualizado: 25/Ago/2021

Antes de iniciar a explicar el codigo, tengo que señalar que tanto la clase HashSet como la clase HashMap tienen una ventaja la cual es, que los valores que se van insertando en la coleccion internamente no tendran un orden especifico, esto se debe a que estas clases realizan un ordenamiento interno mediante el hashcode de el elemento(Objeto), por lo cual no sabremos que elemento traerá.

Esto nos da una ventaja para nosotros que es poder sobrescribir el metodo .hashCode() y .equals() para asi, si tenemos un objeto que tienen sus mismas caracteristicas y mismo hashcode no se agregue a la colección , una de las principales ventajas de este metodo es la rapidez en la insercion de los elemento si tenemos cientos de elementosque agregar, esta coleccion es la indicada para este trabajo.

El algoritmo de busqueda de un elemento en la colecion es el siguiente

  1. Encuentra el elemento (Objeto) mediante el hashcode. Imagínense varios personas en un salon con la misma edad.
  2. Ya que encontro el elemento mediante el hashcode se realiza la comparacion si el objeto es igual mediante el método .equals(). Imaginen que en ese mismo salon se esta buscando a una persona con un nombre y apellido especifico.

Lo primero será definir un objeto de tipo Alumnos.

public class Alumnos {
    private int age;
    private String name;

    Alumnos(String name, int age){
    	this.name = name;
    	this.age = age;   
    }
}

Las variables age y name serán las necesarias para que se comparen los objetos y su hashcode.

Lo siguiente que haremos será insertar los objetos Alumnos en un HashSet.

Alumnos person1 = new Alumnos("Juan",18);
Alumnos person2 = new Alumnos("Miguel",25);
Alumnos person3 = new Alumnos("Luis",18);
Alumnos person4 = new Alumnos("Luis",18);
        
HashSet personas = new HashSet();
personas.add(person1);
personas.add(person2);
personas.add(person3);
personas.add(person4);

Si verificamos el tamaño del HashSet alumnos veremos que nos devuelve «4», ya que por defecto el HashSet no realiza ninguna comparación.

System.out.println(personas.size());

Ahora agregamos 4 objetos alumno a un HashMap.

Map m = new HashMap();
   
m.put(person1, "valor1");
m.put(person2, "valor2");
m.put(person3, "valor1");
m.put(person4, "mi valor");

El método .size() nos devolvera un tamaño de «4» ya que el HashMap tampoco realiza ninguna comparación. De igual manerá el método .keySet() devuelve todos los elementos del HashMap.

System.out.println(m.keySet());
System.out.println(m.size());

Ahora vamos a cambiar el comportamiento de la clase Alumnos para que al insertarlo en un HashMap o en un HashSet se valide si el elemento insertado ya existe.

Sobrescribimos el método .equals() de tal manera que dos objetos Alumno serán iguales si coinciden sus nombres.

@Override
public boolean equals(Object o) {
  if (o instanceof Alumnos) {
    Alumnos p = (Alumnos)o;
    return this.name.equals(p.name);
  } else {
    return false;
  }
}

De igual manera sobrescribimos el método .hashCode(). Para generar el hascode utilizamos la variable edad y la longitud del String, consiguiendo así un entero.

@Override
public int hashCode() {
  return age * this.name.length();
}

Ahora, una vez sobrescritos los métodos .hashCode() y .equals(), si verificamos el tamaño del HashSet alumnos veremos que nos devuelve «3» ya que, si hay un elemento igual, el metodo .add() devolvera false.

Map m = new HashMap();

De igual manera el método .size() sobre el HashMap.keySet() los nombres de 3 alumnos ya que el método .put() habrá devuelto false al insertar objetos iguales.

System.out.println(m.keySet());
System.out.println(m.size());

Una cosa que hay que tener en cuenta es que si se sobreescribe solo uno de sus metodos ya sea .hashCode() o .equals() no tendremos el comportamiento deseado. Hay que sobrescribir los dos.

Vídeos sobre Java

Disfruta también de nuestros artículos sobre Java en formato vídeo. Aprovecha y suscribete a nuestro canal.

Test Java

¿Te atreves a probar tus habilidades y conocimiento en Java con nuestro test?

Test Java
Artículos
Java

Como ejecutar un comando del sistema desde Java

Creado: 09/Abr/2012 Actualizado: 25/Ago/2021

Hoy les traigo una forma de poder ejecutar un comando de consola en Java. La clave para ejecutar un comando en Java esta en los métodos exec(String command) y exec(String[] cmdarray).

La diferencia entre estos dos métodos Java es que el primero esta destinado a ejecutar comandos sin argumentos:

try {
	String cmd = "halt"; //Comando de apagado en linux
	Runtime.getRuntime().exec(cmd); 
} catch (IOException ioe) {
	System.out.println (ioe);
}

Y el segundo si, solo que deben poner cada ‘palabra’ en un índice distinto en el arreglo Java:

try {
	String [] cmd = {"shutdown","-s","-t", "10"}; //Comando de apagado en windows
	Runtime.getRuntime().exec(cmd);
} catch (IOException ioe) {
	System.out.println (ioe);
}

Recordar que el comando se va a ejecutar en un proceso Java aparte.

Otra cosa a tener en cuenta es el retorno que brindan estos métodos. Para ello tenemos el objeto de tipo Process.

La clase Process posee algunos métodos interesantes, en especial el metodo public abstract InputStream getInputStream(), ya que con él podemos obtener un Stream para poder leer lo que el comando que ejecutamos escribío en la consola.

Process process = Runtime.getRuntime().exec("lsb_release -a");
InputStream inputstream = process.getInputStream();
BufferedInputStream bufferedinputstream = new BufferedInputStream(inputstream);

En mi caso, obtuve el siguiente texto al leer las lineas del buffer.

Distributor ID:	Ubuntu
Description:	Ubuntu 11.10
Release:	11.10
Codename:	oneiric

Espero que les haya gustado el artículo.

Vídeos sobre Java

Disfruta también de nuestros artículos sobre Java en formato vídeo. Aprovecha y suscribete a nuestro canal.

Test Java

¿Te atreves a probar tus habilidades y conocimiento en Java con nuestro test?

Test Java
Artículos
Java

Convertir un número a texto con Java

Creado: 08/Abr/2012 Actualizado: 29/Dic/2014

Vamos a ver como construir un método con Java al cual le pasemos un número de tres dígitos: unidades, decenas y centenas y nos lo transforme a texto. Es decir, el 534 nos lo transforme en «quinientos treinta y cuatro», es el proceso de convertir un número a texto con Java.

Lo primero para convertir un número a texto con Java será crear métodos de apoyo. El primer método de apoyo es el que dado una unidad nos la transforma en texto.

public static String unidadEnTexto(int iNumero){
// Método que dado un número me lo devuelve en texto		
 switch(iNumero){
	case 1:
		return "uno";
	case 2:
		return "dos";
	case 3:
		return "tres";
	case 4:
		return "cuatro";
	case 5:
		return "cinco";
	case 6:
		return "seis";
	case 7:
		return "siete";
	case 8:
		return "ocho";
	case 9:
		return "nueve";
	case 0:
		return "cero";
	default:
		return "";
 }
}

El siguiente será el de las decenas. Es decir, le pasaremos un número que represente las decenas y nos devolverá el texto. Si le pasamos un 2 nos devolverá «veinte».

public static String decenaEnTexto(int iDecena){
  switch (iDecena){
	case 1:
		return "diez";
	case 2:
		return "veinte";
	case 3:
		return "treinta";
	case 4:
		return "cuarenta";
	case 5:
		return "cincuenta";
	case 6:
		return "sesenta";
	case 7:
		return "setenta";
	case 8:
		return "ochenta";
	case 9:
		return "noventa";		
	default:
		return "";
  }
}

Todas las decenas las podemos montar con el texto de la decena y el texto de la unidad, añadiendo un «y» en medio. Así 22 sería «veinte y dos». Hay un caso especial a tener en cuenta y este es el de las decenas del diez. Así que para ese caso nos montamos otro método de apoyo.

public static String decenas(int iDecena){
  switch (iDecena){
	case 11:
		return "once";
	case 12:
		return "doce";
	case 13:
		return "trece";
	case 14:
		return "catorce";
	case 15:
		return "quince";
	case 16:
		return "dieciseis";
	case 17:
		return "diecisiete";
	case 18:
		return "dieciocho";
	case 19:
		return "diecinueve";		
	default:
		return "";
  }
}

Y lo último igual para las centenas. Si bien es verdad que aquí solo se nos devolverá el relativo a los cientos, quinientos y novecientos. Ya que para el testo de centenas lo podemos montar mediante la unidad y añadiendo el sufijo cientos. Así tendremos dos-cientos, tres-cientos,…

public static String centenaEnTexto(int iCentena){
  switch (iCentena){
	case 1:
		return "ciento";
	case 5:
		return "quinientos";
	case 9:
		return "novecientos";				
	default:
		return "";
  }
}

Ahora solo nos queda desmontar el número e ir llamando a las funciones de apoyo necesarias. Para ir obteniendo por dígitos nos apoyamos en el módulo y división de 10. Ya que el módulo nos deja el dígito y la división el resto del número.

Así, para las unidades sería:

int iUnidad = iNumero%10;
iNumero = iNumero/10;		
sTexto = unidadEnTexto(iUnidad);

La conversión de la unidad ha sido sencilla ya que solo hemos tenido que llamar al método unidadEnTexto.

Vamos con las decenas, para obtener la decena el mismo mecanismo que antes.

int iDecena = iNumero%10;
iNumero = iNumero/10;
		
if ((iUnidad==0) && (iDecena>0))
	sTexto = decenaEnTexto(iDecena);
else if (iDecena==1)
	sTexto = decenas(10+iUnidad);
else if (iDecena > 1)
	sTexto = decenaEnTexto(iDecena) + " y " + sTexto;

Aqui tenemos tres casos.

  • Si la unidad era un cero, pedimos la decena y será el texto único.
  • Si la decena empieza por uno, caso especial y por lo tantto llamamos al método de las decenas.
  • Otros casos componemos con la decena y la unidad juntas con un «y».

El último caso, las centenas.

int iCentena = iNumero%10;

if ((iCentena!=1) && (iCentena!=5) && (iCentena!=9) && (iCentena!=0))
	sTexto = unidadEnTexto(iCentena) + "cientos" + " " + sTexto;
else if ((iCentena==1) || (iCentena==5) || (iCentena==9))
	sTexto = centenaEnTexto(iCentena) + " " + sTexto;

En este caso solo hay el dilema del 1, 5 y 9. Así que un if y solucionado. El resto de las centenas las montamos con la unidad en texto más el texto «cientos».

Así, finalmente, hemos dejado en sTexto el resultado de convertir un número a texto con Java

Vídeos sobre Java

Disfruta también de nuestros artículos sobre Java en formato vídeo. Aprovecha y suscribete a nuestro canal.

Test Java

¿Te atreves a probar tus habilidades y conocimiento en Java con nuestro test?

Test Java
Artículos
jQuery

Aplicar opacidad con jQuery

Creado: 02/Abr/2012 Actualizado: 06/Feb/2025

jQuery nos permite modificar la opacidad de los elementos con una gran facilidad. Ya lo vimos haciendo un efecto de Fade.

Pero ahora vamos a algo más sencillo; simplemente vamos a aplicar un cambio de opacidad de una imagen con jQuery. La idea será partir de una imagen y un enlace que nos permita aplicar la opacidad.

<img src="contenido.png" alt="logo" id="logo"/>
<br>
<a href="#" id="opacidad">Opacidad</a>

Lo siguiente será capturar el evento click sobre ese enlace:

$(document).ready(function(){
	$("#opacidad").click(function(e){				
		//Código de cambio de opacidad		
	});	
});

Y es que será en el evento click donde aplicaremos el cambio de opacidad. El cambio de opacidad se consigue modificando la propiedad opacity de CSS. Para ello vamos a utilizar el método .css de jQuery.

$("#logo").css("opacity", 0.2);

Es importante saber que los valores de la opacidad varían entre 0.0 y 1.0.

Ahora, cuando pulsemos sobre el enlace, aplicaremos la opacidad sobre la imagen habiendo utilizado jQuery.

Código Fuente

Descárgate el código fuente de Aplicar opacidad con jQuery
Y si te ha gustado nuestro código fuente puedes regalarnos una estrella Star