Artículos
Blog

Programación por tecnología

Creado: 15/Dic/2007 Actualizado: 28/Ene/2025

Como escribía en mi primer artículo del blog, este se iría definiendo por sí solo y que mi intención era la de hablar sobre los lenguajes, software, códigos,… que nos ayudan a construir la arquitectura de Internet.

Si bien el subtitulo que le puse al blog, «Tecnología en la red», no refleja fielmente el contenido del mismo. Aunque tecnología es un concepto amplio que podría dar cabida a muchas cosas.

Línea de Código, lo que alberga en su mayoría es programación o temas relacionados con ella. Es por ello que he decidido cambiar el subtítulo del blog a «Programación en la red».

Espero que os guste.

Artículos
Java

Área de un rectángulo con Java

Creado: 13/Dic/2007 Actualizado: 10/Ene/2015

El calcular el área de un rectángulo con Java es un código muy sencillo, pero el cual nos sirve para resolver dos cosas: por un lado ver como hacer un programa básico en Java y otro, el resolver una formula matemática.

Lo primero es conocer como calcular el área de un rectángulo. La formula es la siguiente:

area_rectangulo = base * altura

Dónde el área del rectángulo es igual a la multiplicación de la base del rectángulo por la altura del mismo.

A la hora de codificarlo en Java, lo primero que tenemos que hacer es definir una clase AreaRectangulo, la cual tendrá el código de nuestro programa. Veamos la estructura de la clase:

public class AreaRectangulo {

 public static void main(String[] args) {...}

}

En ella encontramos el método main, el cual contiene el código que se ejecuta en primer lugar cuando ejecutemos el programa.

Hay que recordar que el nombre de la clase y el nombre del fichero con extensión .java tienen que ser el mismo.

Lo primero que haremos será declarar tres variables base y altura, las cuales contendrán los valores de los lados del rectángulo y una tercera que será area_rectangulo, donde almacenaremos el valor del área. Inicialmente esta tendrá un valor de 0.

int area_rectangulo = 0;
int base = 10;
int altura = 20;

La siguiente línea de código será la que multiplique la base por la altura y deje el resultado en la variable area_rectangulo.

area_rectangulo = base*altura;

Ya solo nos quedará mostrar el resultado por pantalla. Para ello nos apoyamos en el objeto Java del sistema y el el método println.

System.out.println("El area de un rectangulo de base "+base+" y altura "+altura+" es igual a "+area_rectangulo);

Por último compilaremos y ejecutaremos el programa.

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
Google

Generando lineas geodésicas en Google Maps

Creado: 12/Dic/2007 Actualizado: 16/Dic/2025

Una línea de geodésica es la línea de menor longitud entre dos puntos dados. Podríamos hablar de la distancia menor entre dos puntos terrestres.

Y es que si vemos un mapa del mundo aplanado, la distancia más corta entre dos puntos no es una linea recta, sino que será la línea geodésica.

En el artículo base de este original, el autor habla de un viaje Londres-San Francisco, en el cual la ruta que se sigue no es la línea recta que atravesaría todo Estados Unidos, sino que el avión sube hasta Groelandia y entra por la frontera de Canada, siguiendo la línea geodésica.

Si alguna vez voláis desde Europa a la costa oeste de los Estados Unidos (San Francisco, Seattle,…) podréis comprobar esta ruta y si tenéis suerte, disfrutar de unos bellos paisajes. Pero volvamos al código, que nos desviamos.

Google Maps, nos permite el trazar una línea geodésica entre dos puntos dados. Para ello nos apoyaremos en la clase GPolyline. La misma que nos sirve para crear un polígono definiendo sus vertices mediante longitudes-latitudes.

La estructura general de GPolyline es la siguiente:

GPolyline(latlngs,  color?,  weight?,  opacity?,  opts?)

Los parámetros son los siguientes:

  • latlngs, es un array de longitudes-latitudes. Las cuales representamos ayudándonos de la clase GLatLng.
  • color?, es el color de la línea que dibujará el polígono. La interrogación demarca su opcionalidad.
  • weight?, el ancho de la línea en pixeles.
  • opacity?, opacidad de la línea. Que se indicara con un valor entre 0 y 1.
  • opts?, las opciones del polígono. Para nuestro ejemplo el campo más importante.

Decimos que el parámetro opts es el más importante, ya que dentro de las opciones que se le pueden pasar a la clase GPolyline, una de ellas es geodesic. Esta propiedad indicará si la línea a pintar es una línea geodésica, valor true o línea normal, valor false.

A si que lo primero definimos esta propiedad.

var lineageodesica={geodesic:true};
var linearecta={geodesic:false};

Ahora inicializamos la clase GPolyline:

var geodesica = new GPolyline([
      new GLatLng(51.5002, -0.1262),  // Londres
      new GLatLng(47.6801, -122.3300)  // Seattle
], "#ff0000", 5, 0.7, lineageodesica);

Y solo nos quedará añadirla al mapa que hayamos cargado:

map.addOverlay(geodesica);

Ya tendremos cargada la línea geodésica en el mapa.

Una cosa interesante es que la clase GPolyline, nos devuelve la distancia entre los dos puntos con el método .getLength(). Así podremos saber la distancia entre los dos puntos marcados.

Visualizar el ejemplo | Descargar el código

Vía: Programa con Google.

wForms

Posicionar el lugar de error en wForms

Creado: 11/Dic/2007 Actualizado: 16/Dic/2025

Si utilizamos wForms veremos que los mensajes de error siempre se posicionan debajo del campo del formulario que ha generado el error. Si bien, de una forma muy sencilla podremos definir donde queremos que salga el error.

Lo más normal es que el error se muestre cerca del campo que ha generado el error para, de esta forma, ayudar al usuario a localizar el campo y corregir el error. Si bien, en ciertos casos, piden a los programadores que los errores se sitúen en sitios insospechados.

Por ejemplo, si tenemos un formulario que pida un nombre y una edad, podríamos querer mostrar el error, siempre, en la parte inferior, entre el último campo y el botón de envío.

Tendríamos el siguiente formulario:

<form>
<label for="nombre">Nombre:</label><input type="text" id="nombre" class="validate-alpha required"><br>
<label for="edad">Edad:</label><input type="text" id="edad" class="validate-integer required"><br>
<input type="submit" value="Enviar">
</form>

Para posicionar la zona del error tendremos que posicionar una estructura SPAN o DIV cuyo id sea el nombre del campo asociado al error seguido de un guión y E.

Así los id de estos campos para nuestro caso serían

nombre-E
edad-E

A si que tendríamos que poner el siguiente código donde queramos que salga el error:

<span id="nombre-E"></span>
<span id="edad-E"></span>

El formulario completo, dejando el campo del error entre los campos de texto y el botón de envío sería el siguiente:

<form>
<label for="nombre">Nombre:</label><input type="text" id="nombre" class="validate-alpha required"><br>
<label for="edad">Edad:</label><input type="text" id="edad" class="validate-integer required"><br>
<span id="nombre-E"></span><span id="edad-E"></span><br>
<input type="submit" value="Enviar">
</form>

Visualizar el ejemplo | Descargar el código

Artículos
Java

Convertir una cadena a mayúsculas en Java

Creado: 10/Dic/2007 Actualizado: 31/Mar/2024

Hay códigos que son realmente sencillos, como convertir una cadena a mayúsculas en Java, pero que cuando estamos aprendiendo un lenguaje de programación, en este caso Java, nos pueden dar más de un quebradero de cabeza, debido a que no nos acordemos de los métodos que nos permiten hacer cosas básicas.

Este es el caso de las manipulaciones y conversiones de cadenas de texto en mayúsculas y en minúsculas. Si en la entrada Convertir una cadena a minúsculas en Java veíamos cómo hacer la conversión de una cadena de texto a minúsculas, aquí veremos cómo hacer la conversión a mayúsculas con Java.

En este caso, el método Java que tenemos que utilizar es .toUpperCase(), el cual deberemos aplicar directamente sobre la cadena que contenga el texto a convertir.

Lo primero definimos la cadena:

String miCadena = "Esto es una cadena a convertir";
System.out.println(miCadena);

Para volcar el contenido por consola utilizamos el método println() de la clase System.out, al cual le pasamos la cadena como parámetro.

Por consola veremos directamente la cadena.

💻 Esto es una cadena a convertir

Ahora, para convertir la cadena en mayúsculas, solo nos quedará aplicarle el método .toUpperCase(). Este valor lo aguardaremos en una nueva cadena de tipo String, la cual, solo nos quedará, volcar nuevamente por consola.

String miCadenaMayusculas = miCadena.toUpperCase();
System.out.println(miCadenaMayusculas);

Lo que veremos ahora por consola será lo siguiente

💻 ESTO ES UNA CADENA A CONVERTIR

De esta forma ya habremos conseguido convertir una cadena a mayúsculas en Java de una forma muy sencilla.

Código Fuente

Descárgate el código fuente de Convertir una cadena a mayúsculas en Java
Y si te ha gustado nuestro código fuente puedes regalarnos una estrella Star
Convertir una cadena a mayúsculas en 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
wForms

Personalizar mensajes de error en wForms

Creado: 09/Dic/2007 Actualizado: 16/Dic/2025

Si no configuramos nada de wForms, los mensajes tienen un comportamiento predeterminado. Este comportamiento es que los mensajes salen justamente debajo del elemento del formulario que ha generado el error y un popup que indica el número de errores que hay en total.

Además el texto de los mensajes es en inglés.

Pero mediante código JavaScript podemos personalizar el comportamiento de los mensajes de error. Para ello podemos alterar tres cosas:

  • El texto
  • La apariencia
  • La posición dentro del formulario

El texto

El texto se encuentra dentro del objeto wFORMS.behaviors[‘validation’]. En él encontramos las diferentes propiedades que podemos modificar. Cada una de las propiedades hace referencia a un tipo diferente de error. Así tenemos las siguientes:

  • .errMsg_required, para los campos obligatorios.
  • .errMsg_alpha, para los errores alfabéticos.
  • .errMsg_email, para las validaciones del formato del email.
  • .errMsg_integer, para las validaciones de numeros enteros.
  • .errMsg_float, para validar numeros decimales.
  • .errMsg_alphanum, para validaciones alfanuméricas.
  • .errMsg_date, validaciones de fechas.
  • .errMsg_custom, mensajes personalizados.
  • .errMsg_notification, es el error del mensaje popup.

Solo tendremos que incluir un pequeño código JavaScript sobrescribiendo el valor de estas propiedades, por ejemplo.

<script type="text/javascript">
wFORMS.behaviors['validation'].errMsg_required = "Campo obligatorio";
wFORMS.behaviors['validation'].errMsg_alpha = "El campo tiene que ser alfabético";
wFORMS.behaviors['validation'].errMsg_email = "El campo tiene que ser un email";
wFORMS.behaviors['validation'].errMsg_integer = "El campo tiene que ser un numero entero";
wFORMS.behaviors['validation'].errMsg_float = "El campo tiene que ser un numero decimal";
wFORMS.behaviors['validation'].errMsg_alphanum =" El campo tienen que ser alfanumérico";
wFORMS.behaviors['validation'].errMsg_date = "El campo tiene que ser una fecha";
wFORMS.behaviors['validation'].errMsg_custom = "Mensaje personalizado";
wFORMS.behaviors['validation'].errMsg_notification = "%% error(s) detectado(s). El formulario no se enviará.\nPor favor, chequea la información suministrada.";
</script>

 

La apariencia

A la hora de modificar la apariencia de los mensajes de error, vía CSS podemos modificar dos elementos. El primero será el campo del formulario que contiene error (.errFld) y el segundo es el texto de error asociado (.errMsg).

Simplemente tendremos que redefinir estas clases CSS modificando el valor de sus atributos:

<style type="text/css">
  .errFld {border: 1px solid #F00; background: #FF6347;}
  .errMsg { color: #C33; }
</style>

Este código lo podemos añadir de igual forma en la cabecera de la página.

La posición dentro del formulario

Lo último que podemos personalizar en los mensajes de error de wForms, es la zona donde queremos que salgan.

Para ello, tendremos que crear un elemento DIV o SPAN cuyo identificador siga la siguiente nomenclatura:

idcampoformulario-E

De esta manera, si tenemos un campo de formulario llamado fechadenacimiento, tendremos que crear el siguiente elemento:

<span id="fechadenacimiento-E"></span>

Y posicionarlo donde queramos que salga el error.

Visualizar el ejemplo | Descargar el código

Artículos
CSS

Definir el tamaño de una imagen con CSS

Creado: Actualizado: 24/Oct/2023

En las primeras versiones del lenguaje HTML cuando se mezclaba el contenido como el diseño lo más normal es apoyarnos en el lenguaje HTML para definir el tamaño de una imagen. Si bien, una vez que se separa el diseño del contenido y aparece CSS como lenguaje de definición de estilos la idea es utilizar estilos CSS para definir el alto y ancho de una imagen. En este artículo vamos a ver cómo podemos definir el tamaño de una imagen con CSS.

Lo que vamos a hacer es definir un conjunto de clases CSS, la cual aplicaremos dependiendo de las necesidades de tamaño que tengamos para las imágenes dentro de nuestra página web en el código HTML.

Para poder dar el estilo utilizaremos las propiedades width y height, de igual manera que los utiliza el lenguaje HTML como atributos del elemento img, pero en este caso los asignaremos a una clase.

De esta manera generaremos el siguiente código en CSS que incluiremos dentro de nuestra definición de estilos:

img.pequeña{
  width: 50px;
  height: 50px;
}
img.mediana{
  width: 100px;
  height: 100px;
}
img.grande{
  width: 200px;
  height: 200px;
}

Como se puede ver se han definido tres clases: pequeña, mediana y grande. Las cuales solo funcionaran sobre elementos img, si no hubiésemos antepuesto este elemento en la definición del estilo, podríamos haber utilizado las clases para cualquier tipo de elemento HTML.

Solo nos quedará el asignar la clase a un elemento img. Para ello utilizamos el atributo class. Así tendremos el siguiente código:

<img class="pequeña" src="lineadecodigo.jpg" />
<img class="mediana" src="lineadecodigo.jpg" />
<img class="grande" src="lineadecodigo.jpg" />

Así la página HTML completa nos quedará de la siguiente forma:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Tamaño de una imagen con CSS</title>
  <style type="text/css">
    img.pequeña{width: 50px; height: 50px;}
    img.mediana{width: 100px; height: 100px;}
    img.grande{width: 200px; height: 200px;}
  </style>
</head>
<body>

<h1>Tamaño de una imagen con CSS</h1>

<img class="pequeña" src="lineadecodigo.jpg"/>
<img class="mediana" src="lineadecodigo.jpg"/>
<img class="grande" src="lineadecodigo.jpg"/>

</body>
</html>

Vemos que hemos añadido el código CSS dentro del elemento style en la cabecera o head de la página.

Con estos pasos tan sencillos habremos conseguido definir el tamaño de una imagen con CSS. ¿Cómo haces tú para poder definir el tamaño de una imagen, ya que existen más alternativas? ¿Creas una clase? ¿Lo asignas directamente a un elemento? Cuéntanos en los comentarios ya que estaremos encantados de saberlo.

Código Fuente

Descárgate el código fuente de Definir el tamaño de una imagen con CSS
Y si te ha gustado nuestro código fuente puedes regalarnos una estrella Star
Definir el tamaño de una imagen con CSS

Test CSS

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

Test CSS
Artículos
Google

Mi primera gráfica Google Chart

Creado: 08/Dic/2007 Actualizado: 06/Jun/2015

Google nos ofrece un servicio para poder generar gráficas en tiempo real llamado Google Chart, el cual podemos utilizar en nuestras páginas web.

Su funcionamiento es muy sencillo, ya que simplemente tendremos que hacer invocaciones al servidor de Google Chart, para que este, mediante una petición GET nos componga las gráficas en tiempo real.

De esta forma bastará con insertar una URL en la barra de navegación para ver el resultado:

http://chart.apis.google.com/chart?
            cht=p3&chd=s:hW&chs=250x100&chl=Hello|World

En el caso que queramos añadirlo a nuestra página web, podemos utilizar la etiqueta HTML IMG, y en el atributo src indicar la URL.

<img src="http://chart.apis.google.com/chart?
      cht=p3&chd=s:hW&chs=250x100&chl=Hello|World" alt="Mi primera grafica">

Esto funciona ya que el resultado de la petición GET es una imagen PNG.

Hay que tener en cuenta que hay un límite de 50.000 peticiones diarias. Es por ello que si queremos usarlo de forma masiva, sería bueno el realizar algún tipo de cache de las imágenes.

Vía: TuFunción

Visualizar el ejemplo | Descargar el código

Artículos
CSS

Poner un color de fondo a nuestra web

Creado: 07/Dic/2007 Actualizado: 12/Nov/2021

Si queremos poner un color de fondo a nuestra web tendremos que utilizar los estilos CSS. Antiguamente, aunque funciona por compatibilidad, no era necesario utilizar hojas de estilo ya que el lenguaje HTML nos permitía hacerlo de una forma muy sencilla mediante el atributo background del elemento body. Pero esto ya ha quedado obsoleto y ahora debe de utilizarse CSS.

La verdad que hacerlo con CSS, tampoco es muy complicado. Los colores en CSS se especifican mediante una única propiedad, que es la propiedad background, la cual admite o colores o referencias a imágenes para utilizarlas como fondo en nuestra página web.

Si nos ponemos manos a la obra lo primero que tenemos que hacer es insertar el elemento style del lenguaje HTML, el cual nos permiten definir estilos CSS en nuestra página web. Estos elementos irán dentro de la cabecera de la página, delimitada por los elementos head.

El código que nos quedará será similar a lo siguiente:

<html>
  <head>
    <title>Color de Fondo de la página</title>
    <style>// Estilos</style>
  </head>
  <body>
  </body>
</htm>

Ahora, dentro del código CSS utilizaremos la propiedad background que nos va a demarcar el estilo. Esta propiedad background la utilizaremos sobre el selector body. De esta manera afectará a toda la página. Nos quedaría el siguiente código:

body{ 
  background:red; 
}

El valor del color puede ir mediante el nombre en ingles (red, yellow, blue, pink,…) o en formato RGB (#f00, #fa0, #00f,…). En el segundo caso hay que tener cuidado ya que antes del valor RGB hay que incluir una almohadilla.

Así, el color rojo se puede especificar con «red» o con «#f00».

El código final tanto de nuestra página HTML como del código CSS para poner color de fondo a nuestra web será el siguiente:

<html>
  <head>
    <title>Color de Fondo de la página</title>
    <style>
      body{
        background:red;
      }
    </style>
  </head>
  <body>
    <h1>Página Web con Color de Fondo Rojo</h1>
  </body>
</html>

Código Fuente

Descárgate el código fuente de Poner un color de fondo a nuestra web
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
wForms

Deshabilitar el popup de error en wForms

Creado: 06/Dic/2007 Actualizado: 16/Dic/2025

Si habéis trabajado con wForms para las validaciones en formularios, habréis visto que por defecto, al realizar la validación muestra un popup con los errores que se han producido, o bien con el mensaje de error que le hayamos definido en la propiedad errMsg_notification.

wFORMS.behaviors['validation'].errMsg_notification = "texto del mensaje de error";

En ciertos casos, este mensaje puede llegar a ser molesto o bien innecesario. Es por ello que querremos deshabilitar el popup de error en wForms.

Para ello tenemos la propiedad wFORMS.showAlertOnError a la cual podremos dar el valor de true o false, dependiendo del comportamiento que busquemos. En el caso de que queramos deshabilitar le asignaremos el valor de false.

wFORMS.showAlertOnError = false;

Este código habrá que incluirle en la cabecera de la página.

Visualizar el ejemplo | Descargar el código