Artículos
CSS

Resaltar los enlaces con CSS

Creado: 27/Feb/2007 Actualizado: 11/Oct/2021

Los enlaces son los elementos que ayudaron a construir la red que conocemos a día de hoy. Parece que ahora otras tecnologías son las que están ayudando a crecer a «la red», como las peticiones de datos asíncronas estilo AJAX, los mashup de aplicaciones,… Si bien en el fondo siempre seguiremos teniendo enlaces. Y todo este rollo, ¿para qué? Bueno, la verdad es que tampoco sabía cómo introducir a los enlaces. La idea de este ejemplo es resaltar los enlaces con CSS. Para hacerles más visibles.

Para ello nos vamos a apoyar en las hojas de estilo y más concretamente en la propiedad background-color, la cual podemos aplicarla a casi cualquier elemento de la página.

En nuestro caso aplicaremos el estilo sobre el elemento a, el cual representa a los enlaces. De esta forma tendremos el siguiente estilo CSS:

a {
  background-color:#ff0
}

El código utilizado #ffff00 es el color amarillo. Este código es el RGB donde los dos primeros valores hexadecimales reflejan el color rojo, el segundo el color verde y el último el color azul. Su mezcla genera un color.

Hay que tener en cuenta, que a el elemento a se le conocen varios comportamientos:

  • link, cuando el enlace no ha sido todavía visitado
  • hover, cuando estamos encima del enlace
  • visited, cuando el enlace ha sido visitado

Entonces, para nuestro ejemplo de resaltar los enlaces con CSS asignaremos un color de resaltado cuándo pasemos sobre el enlace. Aunque podríamos hacerlo con los otros dos comportamientos.

El código para resaltar los enlaces con CSS quedaría finalmente de la siguiente guisa:

a:hover {
  background-color:#ff0;
}

El código del elemento style de las CSS irá dentro de la cabecera de la página HTML.

Código Fuente

Descárgate el código fuente de Resaltar los enlaces con CSS
Y si te ha gustado nuestro código fuente puedes regalarnos una estrella Star

Test CSS

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

Test CSS
Artículos
HTML

Abreviaturas en HTML

Creado: 26/Feb/2007 Actualizado: 15/May/2015

Mediante el lenguaje HTML podemos indicar, de una forma sencilla, que cierta parte de nuestro texto es una abreviatura. Y, ¿qué es una abreviatura? En estos casos nada mejor que remitirnos al Diccionario de la Real Academia de la Lengua Española y ver que una abreviatura es…

(Del lat. abbreviatura).
1. f. Tipo de abreviación que consiste en la representación gráfica reducida de una palabra mediante la supresión de letras finales o centrales, y que suele cerrarse con punto; p. ej., afmo. por afectísimo; Dir.a por directora; íd. por ídem; SS. MM. por Sus Majestades; D. por don.

Yo creo que si lo hubiera tenido que definir habría dicho que es la contracción de una palabra…

En el caso de que queramos demarcar una abreviatura en una de nuestras páginas web lo único que tendremos que hacer será utilizar la etiqueta ABBR.

En dicha etiqueta contamos con el atributo title en el cual pondremos el texto largo de nuestra abreviatura.

Abreviatura

Y, ¿Qué efecto tiene esto en los navegadores?

Pues en FireFox y en Opera se subraya con una línea punteada la abreviatura y cuando pasamos con el ratón por encima nos sale una etiqueta emergente que nos informa de la titulo asociado a la abreviatura. En el caso del Internet Explorer no sucede nada. Por lo menos hasta la versión 6.0 en la cual lo he testado.

Algunos ejemplos:

Dir. Juan de la Espina
SS. MM. los Reyes de España
C. del Pez nº40

Código Fuente

Descárgate el código fuente de Abreviaturas en HTML
Y si te ha gustado nuestro código fuente puedes regalarnos una estrella Star

Vídeos sobre HTML

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

Test HTML

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

Test HTML
Artículos
Noticias Web

JSR 310 – API Date y Time

Creado: Actualizado: 03/Jun/2015

La petición de especificación JSR 310 sobre el API de Fechas y Horas ha pasado la primera criba. La especificación es co-liderada por Stephen Colebourne y Michael Nascimento Santos.

El propósito de esta nueva especificación es buscar un nuevo API Java para fechas y hora. Aprendiendo las dos ideas que se han tenido en los API’s actuales: la clase Date en su primera versión y su mezcla con Calendar en un segundo intento. Con la idea de tener un API mucho más comprensivo y fácil de manejar. La implementación estará basada en el estándar ISO8601.

La idea es intentar que el trabajo sea acogido dentro del futuro Java SE 7.

Ahora vía TheServerSide podéis aportar vuestras ideas sobre lo que este nuevo API debería de llevar.

Artículos
Java

Calcular la hipotenusa con Java

Creado: 25/Feb/2007 Actualizado: 03/Jun/2015

La hipotenusa es el lado del triangulo opuesto al angulo recto. Dados los valores de los catetos podemos aplicar el Teorema de Pitágoras para realizar el cálculo del valor de la hipotenusa.

El Teorema de Pitágoras dice que «la suma de los cuadrados de los catetos es igual al cuadrado de la hipotenusa». Es por ello que esta formula matemática la podemos expresar de una forma sencilla en Java.

Lo primero que tenemos que hacer es definir la variables que almacenaran los valores de la hipotenusa (vacía inicialmente) y de sus respectivos catetos.

double hypo = 0;
double cateto1 = 2;
double cateto2 = 3;

Si despejamos el valor de la hipotenusa de la formula del Teorema de Pitágoras veremos que la hipotenusa es igual a la raíz cuadrada de la suma del cuadrado de los catetos.

Es por ello que nos podemos apoyar en los método .pow(double, double) y .sqrt(double) para representar esta formula.

Por un lado .pow(double, double).sqrt(double) calcula la raiz cuadrara del valor pasado como parámetro.

El código sería la siguiente línea de código:

hypo = Math.sqrt(Math.pow(cateto1, 2) + Math.pow(cateto2, 2));

Java nos proporciona un método mediante el cual nos calculará el valor de una hipotenusa dado el valor de sus catetos, sin la necesidad de conocer el Teorema de Pitágoras. El método es .hypot(double,double)

La línea de código a utilizar en este caso es la siguiente:

Math.hypot(cateto1, cateto2);

Código Fuente

Descárgate el código fuente de Calcular la hipotenusa con Java
Y si te ha gustado nuestro código fuente puedes regalarnos una estrella Star

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
Prototype

Modificar el contenido de una capa con Prototype

Creado: Actualizado: 09/Ene/2025

En los últimos años de la web estamos tendiendo a interfaces de usuario con muchísima funcionalidad y mayor dinamismo. En todo este flujo de información, los elementos se van modificando y actualizando. Normalmente en forma asíncrona.

Es por ello que es bueno que sepamos como podemos hacer esto vía código y utilizando el framework Prototype. Prototype nos ayudará mediante sus funciones a llevar a cabo nuestro cometido.

Lo primero que tenemos que saber es como acceder a una capa (asumimos que ya existe la capa). Para ello utilizaremos la función $() pasándole el id de la capa como parámetro.

$('idcapa');

Como queremos reaprovechar el código vamos a crear una función JavaScript que reciba el texto a poner en la capa y actualice el contenido de la misma. El contenido de una capa se puede modificar mediante el atributo .innerHTML. De esta forma nos quedaría la siguiente función:

<script type="text/javascript">
function modificarCapa(texto){
  $('micapa').innerHTML=texto;
}
</script>

Ahora solo nos quedará utilizar esta función desde alguna parte de la página. En nuestro caso hemos utilizado unos simples botones. Los cuales, mediante el evento onClick lanzarán dicho método:

<form action="#"><input type="button" value="Texto Uno"> <input type="button" value="Texto Dos"> <input type="button" value="Texto Tres"> <input type="button" value="Texto Cuatro"></form>

Todo muy sencillo. Y recordar el instanciar el framework Prototype al principio:

<script type="text/JavaScript" src="https://lineadecodigo.com/wp-content/uploads/2007/02/prototype.js"></script>
Prototype

Obtener el contenido de una capa con Prototype

Creado: Actualizado: 25/Ago/2021

Como ya sabemos, el framework Prototype nos permite manejar las páginas HTML dinámicamente de una forma muy sencilla. Para ello evita que tengamos que conocer todos los detalles del lenguaje JavaScript y las complejidades de los modelos DOM de las páginas.

Uno de sus ejemplos será el obtener el contenido de una capa de la página. Las capas en HTML se pueden definir mediante el elemento <DIV>. De esta forma podríamos definir una capa en HTML de la siguiente forma:

<div id="micapa">
Contenido de mi capa<br>
para lineadecodigo.com
</div>

Es muy importante el identificador que le demos a la capa. Es decir, el valor de su atributo id. Ya que dicho valor será el que utilicemos para acceder a la capa desde Prototype.

En Prototype nos apoyaremos en el método de utilidad $(). Este método recibe como parámetro el identificador del elemento de la página a acceder. En nuestro ejemplo sería ‘micapa’.

$('micapa');

Este código solo nos devolverá el elemento tal cual, es decir, la capa. Si lo que queremos es acceder a su contenido deberemos de acceder al atributo innerHTML de la capa. El cual nos dará el contenido de dicha capa. Veamos como sería dicho código:

alert($('micapa').innerHTML);

Nos hemos apoyado en el método alert de JavaScript para mostrarlo en una ventana emergente.

Acuérdate que para cargar el framework Prototype simplemente nos apoyamos en la etiqueta <SCRIPT> mediante la cual indicaremos la librería prototype.js.

Visualizar el ejemplo | Descargar el código

Prototype

Eliminar etiquetas HTML

Creado: 20/Feb/2007 Actualizado: 16/Dic/2025

En ciertas situaciones manejamos contenidos de texto que van mezclados con etiquetas HTML. Los cuales nos interesa que sean procesados sin dichas etiquetas.

Un claro ejemplo sería para evitar que introduzcan texto HTML en los comentarios de una página. Evitando el efecto no deseado. Aunque también sería util para otros casos.

El framework de Prototype nos proporciona un método sencillo para hacer esta limpieza de código. El método es stripTags(). Simplemente habrá que aplicar dicho método sobre una cadena de texto. Así podríamos tener la siguiente línea de código:

"<div>Este es <br/>mi texto</div>".stripTags();

La idea en este ejemplo es tener un área de texto donde podramos poner el texto que queramos (etiquetas HTML incluidas) y utilizar el método stripTags() para eliminar dichos códigos.

Lo primero será el crear el textarea:

<form>
<textarea rows="10" cols="20" id="texto">
Texto por defecto
</textarea><br/>
</form>

Ahora la idea será el tener un botón que nos ayude a realizar nuestra «limpieza de HTML«. Para ello lo primero que hay que hacer es obtener la información del textarea.

En este caso nos apoyaremos en otra función de Prototype. Esta será $F(‘elementoFormulario’). Esta función devolverá el contenido del elemento cuyo nombre pasemos como parámetro.

De esta manera el código del botón quedará de la siguiente forma dentro del formulario:

<input type="button" value="Eliminar HTML" onClick="alert($F('texto').stripTags());"/>

Se me olvidaba. Para cargar el framework Prototype simplemente nos apoyamos en la etiqueta <SCRIPT> mediante la cual indicaremos la librería prototype.js.

Artículos
CSS

Eliminar el subrayado de los enlaces

Creado: 19/Feb/2007 Actualizado: 11/Oct/2021

Por defecto los navegadores suelen mostrar los enlaces de una página HTML de forma subrayada. Dependiendo del estilo que le estemos dando a la página, esto, puede ser más o menos un inconveniente. Mediante CSS tenemos una forma muy sencilla de hacer que los enlaces no aparezcan subrayados, es decir, vamos a eliminar el subrayado de los enlaces.

Para ello simplemente tenemos que manipular las propiedades del elemento anchor, es decir, del elemento A. Dicho elemento es el que representa los enlaces en el lenguaje HTML.

Lo primero que tenemos que hacer es crear un enlace en nuetra página web mediante el elemento A.

<html>
<head>
 <title>Enlaces no subrayados</title>
</head>
<body>
  <a href="https://lineadecodigo.com">Línea de Código</a>
</body>
</html>

Lo siguiente que haremos para eliminar el subrayado de los enlaces es crear un código CSS para acceder a dicho elemento. Para ello, dentro de la cabecera de la página crearemos una sección para manejar estilo. Esto lo hacemos mediante el elemento style. Veamos el código:

<html>
<head>
 <title>Enlaces no subrayados</title>
 <style>...</style>
</head>
<body>
  <a href="https://lineadecodigo.com">Línea de Código</a>
</body>
</html>

Dentro de esta sección manipularemos las comportamientos del elemento A. En concreto vamos a manipular los comportamientos link y visited. El primero representa al enlace en su estado inicial y el segundo al enlace cuando ha sido visitado.

La idea es que en ambos casos no aparezca el subrayado. Para ello hay que modificar la propiedad text-decoration e indicar que no tiene ninguna. Es decir, asignarle el valor de none.

El código CSS para eliminar el subrayado de los enlaces quedaría de la siguiente manera:

a:link{
  text-decoration:none
}

a:visited{
  text-decoration:none
}

Si lo insertamos dentro de la página web quedará de la siguiente manera:

<html>
<head>
 <title>Enlaces no subrayados</title>
 <style> 
   a:link{
     text-decoration:none
   }
   a:visited{
     text-decoration:none
   }
</style>
</head>
<body>
  <a href="https://lineadecodigo.com">Línea de Código</a>
</body>
</html>

Con este código ya habremos conseguido eliminar el subrayado de los enlaces mediante código CSS.

Código Fuente

Descárgate el código fuente de Eliminar el subrayado de los enlaces
Y si te ha gustado nuestro código fuente puedes regalarnos una estrella Star

Test CSS

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

Test CSS
Artículos
Java

Año bisiesto en Java

Creado: 18/Feb/2007 Actualizado: 20/Ene/2025

En este artículo vamos a calcular qué es un año bisiesto en Java. Para ello veremos que dentro de Java tendremos la posibilidad de calcularlo de dos formas. Por un lado podremos hacerlo mediante el cálculo de una serie de fórmulas que nos ayudan a conocer si un año es bisiesto o no. Y en una segunda forma lo podremos hacer con la clase GregorianCalendar que nos ofrece el lenguaje de programación Java.

¿Qué es un año bisiesto?

Pero lo primero será saber qué es un año bisiesto antes de programar el cálculo de si tenemos un año bisiesto en Java.

Los años bisiestos son aquellos que duran 366 días en vez de los 365 normales. El día de más que tiene el año es el 29 de febrero. Esto sucede para corregir el desfase real de la duración de un año, que es de 365 días y 6 horas. Y es por ello que los años bisiestos se producen cada 4 años.

Para saber si un año es bisiesto se puede aplicar una simple fórmula, la cual dice que un año es bisiesto si es divisible por cuatro, excepto los principios de año (los divisibles por 100), que para ser bisiestos deben de ser divisibles también por 400.

Calcular un año bisiesto en Java mediante la fórmula.

Si tenemos que resolver esto con el lenguaje de programación Java solo nos harían falta unas pequeñas líneas de código para llevar a cabo la definición anterior. Sería algo así como:

if ((anio % 4 == 0) && ((anio % 100 != 0) || (anio % 400 == 0)))
	System.out.println("El año es bisiesto");
else
	System.out.println("El año no es bisiesto");

En este código vemos que recurrimos al operador aritmético Java de resto que es representado por el tanto por ciento (%). Para saber si un número es divisible por otro, simplemente deberemos de comprobar que el resto es igual a 0.

Es por ello que si queremos saber si es divisible por 4, hacemos el cálculo del resto mediante el operador módulo, validando que el resultado sea 0.

(anio % 4 == 0)

Pero tenemos que obviar los que sean principio de año. Es decir, que son los divisibles por 100. Aquí es cuando añadimos con el operador condicional AND en Java (&&) seguido de la validación de resto, que es este caso; como queremos que no se cumpla, ponemos el !=.

(anio % 4 == 0) && (anio % 100 !=0)

Como puede ser otra situación que el año sea divisible por 400, tendremos que recurrir en este caso al operador condicional OR en Java (||)

((anio % 4 == 0) && ((anio % 100 != 0) || (anio % 400 == 0)))

Con esto ya tendremos calculado si lo que tenemos es un año bisiesto en Java.

Calcular un año bisiesto en Java mediante GregorianCalendar.

Pero Java nos ofrece una forma todavía más sencilla de resolver si un año es bisiesto. Y es que nos proporciona la clase GregorianCalendar y, en concreto, el método .isLeapYear().

Si vemos la sintaxis del método .isLeapYear() veremos lo siguiente:

public boolean isLeapYear(int year)

Es decir, recibe el año del cual queremos comprobar si es un año bisiesto en Java o no y, para ello, nos devuelve true o false.

Para poder utilizar la clase GregorianCalendar ⁣tendremos que instanciarla mediante un operador new. Y luego ya llamar al método .isLeapYear() para realizar la validación.

El código nos quedaría de la siguiente manera:

GregorianCalendar calendar = new GregorianCalendar();

if (calendar.isLeapYear(anio))
	System.out.println("El año es bisiesto");
else
	System.out.println("El año no es bisiesto");

Ya hemos visto las dos formas que tenemos de poder calcular un año bisiesto en Java, bien sea mediante el uso de fórmulas matemáticas controlando los restos mediante el operador aritmético módulo (%) o bien sea utilizando el método .isLeapYear() de la clase GregorianCalendar.

¿Cuál te gusta más de los dos? Déjanos tu opinión en comentarios.

Código Fuente

Descárgate el código fuente de Año bisiesto en Java
Y si te ha gustado nuestro código fuente puedes regalarnos una estrella Star
Año bisiesto en Java

Ejecuta el Código

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

Área de un triangulo con Java

Creado: 11/Feb/2007 Actualizado: 03/Jun/2015

No es que este programa tenga mucha dificultad. Pero dos cosas me han llevado a explicarle. La primera que es la petición de una persona en los comentarios de otro artículo (y la verdad es que no cuesta mucho explicarlo). La segunda es que sirve para explicar el manejo de los tipos de datos y como saber cual utilizar.

Los conocimientos para llevarle a cabo son mínimos. A si que pongámonos manos a la obra. Lo primero es saber la fórmula del área del triangulo. Que es la siguiente:

area = (base*altura)/2

Si queremos resolver esto con el lenguaje Java, deberemos de crearnos una clase. Dentro de esta clase pondremos un método main. Este método es el que se ejecuta en primer lugar a la hora de ejecutar la clase. Veamos como sería ese esqueleto:

public class AreaTriangulo {

	public static void main(String[] args) {
           // Código principal
	}

}

Es importante saber que el fichero se tiene que llamar igual que hemos llamado a la clase. La extensión será .java. Es por ello que en nuestro ejemplo el fichero será AreaTriuangulo.java.

El nombre del fichero tiene que ser igual que el de la clase seguido de .java

Ahora declaramos todas las variables que necesitamos: base, altura y área. El tipo que les asignemos a las variables dependerá de los valores que vayan a poder almacenar. Así:

  • int, será para números enteros
  • float, será para números decimales

Este paso es muy importante. Si decidimos que las tres variables son decimales no habría ningún problema, ya que tras aplicar la formula el resultado será también un decimal.

Pero si decidimos que el área y la altura son números enteros, el resultado tiene posibilidades de ser decimal. Es por ello que si también le definimos como entero, perderemos información.

Por ejemplo si la base es igual a 5 (entero) y la altura es 3 (otro entero), el área será 7,5 (decimal).

Las variables quedarán definidas de la siguiente forma:

float area_triangulo = 0;
int base = 5;
int altura = 3;

Ahora solo nos quedará aplicar la formula:

area_triangulo = (base*altura)/2

Lo último que nos queda por resolver es otro tema de tipos de datos. Ya que aunque la variable de la izquierda sea un decimal, se asume que la operación de la derecha es entera, ya que todas sus variables son enteras.

Es por ello que habrá que hacer una operación de casting. ¿Y esto que significa? Pues que aunque las variables sean enteras, el resultado se podrá comportar como decimal.

Veamos como quedaría la línea de código:

area_triangulo = (float)(base*altura)/2

Código Fuente

Descárgate el código fuente de Área de un triangulo con Java
Y si te ha gustado nuestro código fuente puedes regalarnos una estrella Star

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