SVG

Gradiente lineal vertical

Creado: 28/Ene/2008 Actualizado: 16/Dic/2025

Un gradiente lineal es una transición de colores a lo largo de un vector. Normalmente de dos colores, aunque puede ser de tantos como queramos.

Cuando dibujamos gradientes lineales, estos, pueden ser de tres formas:

  • Horizontales
  • Verticales
  • Angulares

La etiqueta SVG que nos sirve para definir gradientes es linearGradient. La cual, mediante coordenadas x1,y1 y x2,y2 identifica el inicio y el fin del vector que coordina el gradiente.





En el caso que nos consta, gradiente lineal vertical, el «truco» está en el manejo de las coordenadas del gradiente. Mediante estas coordenadas lo que definimos es donde va a iniciar y donde va a terminar el gradiente.

A si que lo que tenemos que hacer es que las coordenadas x1 y x2 deben de ser iguales, mientras que las coordenadas y1 e y2 deben de ser diferentes.





Además a la etiqueta linearGradient le podemos anidar la etiqueta stop. Esta etiqueta nos ayuda a definir con que color iniciamos y con cual acabamos el gradiente. Para ello utiliza un atributo offset de posicionamiento de inicio del color y otro atributo denominado stop-color para indicar el color que se utiliza.





En este código indicaríamos que al 20% del vector se empieza a utilizar el color rojo (#f00) y que al 80% del vector pasamos al color amarillo (#ff0).

Veamos como quedaría todo el código de nuestro gradiente lineal vertical:

   
   

Visualizar el ejemplo | Descargar el código

Artículos
Java

Scrollbars y Elipse

Creado: 23/Ene/2008 Actualizado: 10/Ene/2015

Por los emails recibidos parece que este ejemplo es solicitado en muchas Universidades y centros de enseñanza para el manejo de eventos y scrollbars en Java y con AWT.

Este ejercicio consiste en crear un Applet que contenga dos barras de desplazamiento (una vertical y otra horizontal) y una elipse en el área gráfica. Dependiendo del movimiento de las scrollbars, la elipse irá cambiando de tamaño. El cambio de su tamaño será directamente proporcional con el valor de las scrollbars.

Para poder realizar esto deberemos de seguir los siguientes pasos:

En primer lugar deberemos de crear un Applet. Para ello nuestra clase deberá de heredar de la clase Applet. Los métodos que utilizaremos en el applet serán paint(Graphics g) encargado de gestionar el área gráfica y el método init() para configurar los parametros generales.

En la inicialización del Applet añadiremos las barras de scroll. Una vertical (Scrollbar.VERTICAL) y otra horizontal (Scrollbar.HORIZONTAL). Una vez cerradas las añadiremos al Applet mediante el método add(Sitio, Componente).

Scrollbar v,h;

v = new Scrollbar(Scrollbar.VERTICAL,0,0,0,200);
add("East",v);
   
h = new Scrollbar(Scrollbar.HORIZONTAL,0,0,0,200);
add("South",h);

Una vez que tenemos las barras de desplazamiento añadiremos la elipse al área gráfica (Graphics). El área gráfica solamente la tenemos disponible en el método paint. Para añadir ea elipse utilizamos el método drawOval (origenX, origenY, tamañoX, tamañoY).

paint (Graphics g) {
  ...
  g.drawOval(10,10,ancho,alto); 
  ...
}

Ahora que tenemos todo montado nos queda la parte más importante. Como hacer que cuando se pulse sobre una barra de desplazamiento cambien el tamaño de la elipse. Lo primero será declarar unas variables globales que contengan el alto y ancho de la elipse. Dichas variables se inicializan en el método init().

int ancho;
int alto;

Lo segundo es gestionar los eventos. Java tiene un modelo de eventos por delegación. Para explicarlo en pocas palabras podríamos decir que consiste en crear una clase que escuche los posibles eventos de un componente (frame, applet, button… y claro, nuestras scrollbars). Esta clase que escucha los eventos de un componente deberá de heredar de una clase adaptador o implementar un interface escuchador (que mal suena la traducción de adapter y listener). La única diferencia es que con el interface nos vemos obligados a implementar todos los métodos, mientras que con la clase podemos heredar los métodos y sobrescribir los que necesitemos.

Estas clases de las que debemos de heredar estan previstas para atender eventos de todo tipo. Por ejemplo los eventos del ratón son manejados por MouseListener y MouseMotionListener, los eventos de las teclas son manejados por KeyListener,… y sus respectivos adaptadores.

Para las barras de scroll nuestra clase manejadora de eventos debe implementar el interface AdjustmentListener. debemos de señalar que no existe la clase AdjustmentAdapter ya que el interface solo maneja un evento (un solo método).

adjustmentValueChanged (AdjustmentEvent evt)

Este método atenderá a cualquier evento donde un srollbar cambie de valor. Nuestra clase quedará como sigue:

class manejadorEventos implements AdjustmentListener {

  Applet ventana;
   
  manejadorEventos (Applet a) {
    this.ventana = a;
  }
   
  public void adjustmentValueChanged (AdjustmentEvent evt)    {

    if (evt.getAdjustable().getOrientation() == Adjustable.HORIZONTAL)
      ancho = evt.getValue(); 
    else
      alto = evt.getValue();
   
    ventana.repaint();
  }
}

Nos quedará es indicar que los eventos de nuestros scrollbars (v y h) son manejados por dicha clase. Para ello usamos la clase addAdjustmentListener(manejador) sobre la scrollbar.

v.addAdjustmentListener(manejador);
h.addAdjustmentListener(manejador);

Lo último que nos queda por comentar es que no hará falta el tener una clase que maneje los eventos por cada scrollbar, sino que tendremos una sola clase que identificará si la scrollbar que genero el evento es horizontal (cambiaremos el ancho) o vertical (cambiaremos el alto). La orientación de la scrollbar nos la dará el método .getOrientation() que nos devolverá un valor entero. Este valor lo podemos identificar mediante las constantes Adjustable.HORIZONTAL y Adjustable.VERTICAL.

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
Google

Abrir una ventana de información en Google Maps

Creado: 22/Ene/2008 Actualizado: 26/Dic/2024

Una de las cosas que podemos hacer sobre los mapas de Google Maps es abrir una ventana de información. Esta nos servirá para dar información adicional sobre el punto localizado.

Para ello el propio objeto GMap2 nos ofrece un método llamado openInfoWindow. Lo primero que tenemos que hacer es cargar el API de Google Maps. Para ello utilizamos el siguiente código JavaScript:

<script type="text/javascript" data-rocket-defer="" defer="" src="http://maps.google.com/maps? file=api&amp;v=2.x&amp;key=CLAVE" data-rocket-status="failed-network"></script>

Tendremos que sustituir la palabra clave por la clave que nos proporcione Google.

Lo siguiente será empezar cargando el mapa. Para ello utilizamos el objeto GMap2. Este objeto necesita el elemento HTML donde se cargará el mapa. Normalmente en una capa.

var map = new GMap2(document.getElementById("mapa"));

El elemento de nuestra página web, la capa, se tiene que llamar «mapa».

Ahora empezamos utilizando el método openInfoWindow. Este método recibe tres parámetros:

  • punto, representa el punto del mapa donde se abrirá la ventana. Este punto lo podemos abrir mediante un punto relativo al mapa GPoint o mediante un punto geográfico GLatLng.
  • nodo, representa el nodo DOM que se abrirá en la ventana de información.
  • opciones, opciones adicionales para la ventana de información

En el caso de crear un objeto GLatLang, los parámetros que se le pasaran será la longitud y latitud.

var punto = new GLatLng(40.381351,-5.764591);

Para el nodo vamos a crear un objeto de texto. En este caso nos apoyamos en el método document.createTextNode, el cual crea un simple elemento de texto.

document.createTextNode("Casa Rural Los Tejos");

El código quedará finalmente de la siguiente forma:

map.openInfoWindow(new GLatLng(40.381351,-5.764591), document.createTextNode("Casa Rural Los Tejos"));

Visualizar el ejemplo | Descargar el código

Artículos
Javascript

Crear estilos CSS on-line

Creado: 21/Ene/2008 Actualizado: 25/Ago/2021

En un procedimiento de diseño estándar lo más normal es que al mismo tiempo que definimos cómo será nuestra página vamos creando nuestras hojas de estilo CSS. De tal manera, cada vez que se realice una petición sobre la página, se descargue la hoja de estilos asociada.

Si bien, manipulando el DOM de la página podemos conseguir unos efectos interesantes, ya que podemos crear estilos CSS on-line.

La idea es crear un elemento style y dotarle de contenido. Es decir, de los estilos que queremos crear online.

Para crear el elemento style utilizamos el método document.createElement. Además indicaremos que el tipo de elemento es un «text/css»

estilo = document.createElement("style");
estilo.type = "text/css";

Una vez creado el elemento, deberemos de añadirle el estilo hojas de estilo CSS que queremos crear on-line. En este punto tenemos dos formas de hacerlo, dependiendo de los navegadores (como no). En el caso del Internet Explorer al crear un elemento style, se dispone del objeto styleSheet y de su propiedad cssText donde podemos asignar el código hojas de estilo CSS.

codigo = "body{background: red;}";
estilos.styleSheet.cssText = codigo;

Vemos que el código hojas de estilo CSS añadido es muy sencillo, ya que simplemente pone el fondo de la página a rojo. Podemos poner el código hojas de estilo CSS que queramos.

En el caso estándar lo que hacemos es crear un nodo hijo sobre el elemento. Es decir, manipularmos el DOM.

codigo = "body{background: red;}";
estilos.appendChild(document.createTextNode(codigo)); 

El código con la decisión será algo así:

codigo = "body{background: red;}";
  
if (estilos.styleSheet){
   estilos.styleSheet.cssText = codigo;
} else {
   estilos.appendChild(document.createTextNode(codigo)); 
}

Ahora solo nos quedará el añadir el elemento style al DOM de nuestra página. Y nos preguntaremos, ¿en que parte del DOM? y la respuesta es ¿donde ponemos los estilos CSS normalmente? En la cabecera.

Pues añadimos el elemento style sobre el elemento HEAD del DOM.

document.getElementsByTagName("head")[0].appendChild(estilos);

Ahora solo nos quedará lanzar este código en algún punto de la página.

Vía: Intenta

Código Fuente

Descárgate el código fuente de Crear estilos CSS on-line
Y si te ha gustado nuestro código fuente puedes regalarnos una estrella Star

Vídeos sobre Javascript

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

Test Javascript

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

Test Javascript
Artículos
Javascript

getElementsByName

Creado: 20/Ene/2008 Actualizado: 25/Ago/2021

Junto con getElementById, posiblemente getElementsByName sea uno de los métodos más utilizados para manipular un árbol DOM dentro de JavaScript. El método getElementsByName nos permite el acceder una lista de elementos, los cuales tengan el nombre pasado por parámetro.

Aquí nos preguntaremos acerca de que elementos dentro de una página web pueden tener el mismo nombre. Ya que hay que recordar que los ID son únicos y por lo tanto hacen referencia a un único elemento. La verdad es que, por poder, podemos tener los elementos que queramos: capas, botones, formularios,… Si bien, un ejemplo de uso podría ser una lista de checkbox. Podemos tener un conjunto de elementos seleccionables, con diferente ID, pero con el mismo nombre. Esto nos permitirá acceder a dicha lista.

Es por ello que lo primero que vamos a hacer es crear la lista de checkbox:

Es importante apreciar que el nombre (atributo name) que le hemos puesto a los checkbox es el mismo, ‘opcion1’.

Lo siguiente que vamos a hacer es crear un método getElementById que acceda a los elementos ‘opcion1’ mediante el método .getElemementsByName. Este método necesitará que le pasemos como parámetro el valor que hayamos dado al atributo name.

var elementos = document.getElementsByName("opcion1");

El método getElementsByName devuelve un array de NodeList con los elementos que cumplen la condición. Es por ello que deberemos de recorrer el array para acceder a los elementos y su valor. Todo el código de nuestro método quedará de la siguiente forma:

Ahora solo nos quedará lanzar este método en algún sitio. Por ejemplo, en un botón:

Código Fuente

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

Vídeos sobre Javascript

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

Test Javascript

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

Test Javascript
Artículos
Javascript

Quitar el foco de un elemento

Creado: 19/Ene/2008 Actualizado: 27/May/2015

Si revisamos los eventos Javascript que se pueden producir en un navegador comprobamos que existe el onBlur. El evento onBlur se produce cuando se pierde el foco sobre algún elemento. Es decir, si por ejemplo estamos en un campo de un formulario y nos movemos a otro campo, en ese momento, el campo del formulario lanza el evento onBlur.

Una vez que se produce el evento onBlur, podemos capturarle y ejecutar el código que necesitemos.

En este caso lo que vamos a hacer, vía Javascript, es quitar el foco de un elemento. En este caso lo que vamos a hacer es ejecutar el método .blur() sobre el elemento en el que tengamos el foco.

elemento.blur();

Para acceder al elemento sobre el que queremos quitar el foco podemos utilizar el método .getElementById().

elemento = document.getElementById("campo");
elemento.blur();

Solo nos quedará el lanzar este código desde algún sitio. Para ello lo ponemos dentro de un método que se llame QuitarFoco.

function QuitarFoco(){
  elemento = document.getElementById("campo");
  elemento.blur();
}

Y los lanzaremos desde un botón, en su evento onClick:

Una de las cosas que nos tenemos que asegurarnos es que el campo sobre el que queramos quitar el foco, tiene el cursor sobre el. :-)

Código Fuente

Descárgate el código fuente de Quitar el foco de un elemento
Y si te ha gustado nuestro código fuente puedes regalarnos una estrella Star

Vídeos sobre Javascript

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

Test Javascript

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

Test Javascript
Artículos
Javascript

Obtener el dominio de la URL con Javascript

Creado: 18/Ene/2008 Actualizado: 27/May/2015

Dentro de la URL es Host suele estar compuesto por el nombre del dominio, el servicio y el tipo de dominio que es. Así si tomamos como ejemplo a «http://www.lineadecodigo.com» veremos que el servicio es «www», el nombre «lineadecodigo» y el tipo de dominio «.com».

Mediante Javascript podemos obtener la información del dominio de una forma muy sencilla. Para ello utilizaremos el objeto document y su propiedad domain.

document.domain;

Ahora solo tenemos que volcarlo a la pantalla mediante un document.write, el cual situaremos en una isla de código Javascript dentro de nuestra página web.

El código de toda nuestra página web será el siguiente:




El nombre de dominio de este documento es 



Código Fuente

Descárgate el código fuente de Obtener el dominio de la URL con Javascript
Y si te ha gustado nuestro código fuente puedes regalarnos una estrella Star

Vídeos sobre Javascript

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

Test Javascript

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

Test Javascript
SVG

Circulo con gradiente lineal

Creado: 17/Ene/2008 Actualizado: 16/Dic/2025

Un gradiente lineal es una variación de color entre dos puntos de forma linear. Aunque, estoy seguro que la palabra gradiente tendrá múltiples interpretaciones dependiendo del área donde lo apliquemos, aquí vamos a ver como lo trata el lenguaje SVG.

Pongámonos manos a la obra. El ejemplo intenta mostrar como hacer un gradiente linear que pase del rojo al naranja dentro de un circulo.

Lo primero de todo y la clave de nuestro ejemplo será definir el gradiente que vamos a utilizar. Ya que posteriormente, dicho gradiente, lo aplicaremos sobre el circulo.

Para definir el gradiente lineal utilizamos la etiqueta linearGradient. Entre los atributos de esta etiqueta encontramos el vector que define el gradiente linear. Dichos atributos son x1, y1, x2, y2. Este vector indica los puntos de inicio y fin donde el gradiente empezará y acabará. Los valores que podemos aplicar a dichos atributos pueden ser o bien número o bien porcentajes.





Como etiquetas hijo dentro de linearGradient encontraremos el control de los colores mediante la etiqueta stop. Dicha etiqueta nos permitirá el definir el color con el que iniciamos y acabamos el gradiente.

  
  

La etiqueta stop tiene dos atributos significativos. El primero es offset, el cual indica, en que tanto por ciento del vector vamos a empezar a aplicar el gradiente. El segundo es stop-color, el cual indica el color a utilizar.

Toda esta declaración del gradiente, con el fin de poder ser utilizada, deberá de definirse dentro de las etiquetas de definición defs.

 
   
   
 

Una vez completo nuestro gradiente linear. Solo quedará definir la figura a utilizar y sobre la cual aplicaremos el gradiente. En nuestro ejemplo será un circulo. Para aplicar el gradiente utilizamos el ID que le hayamos dado al mismo. En este caso «rojo_naranja». El ID será utilizado como relleno mediante la propiedad fill.

El código del circulo nos quedaría algo así:

 

Visualizar el ejemplo | Descargar el código

Artículos
Java

Obtener la fecha en un JSP

Creado: 16/Ene/2008 Actualizado: 16/Dic/2025

Una de las cosas más frecuentes de las páginas dinámicas es que te muestren la fecha actual. Algunas incluso te muestran un saludo dependiendo del día de la semana o el mes en el que te encuentres. Todo un derroche de ingenio ;-)

En las primeras versiones el manejo de fechas pasaba exclusivamente por el uso de la clase java.util.Date, pero a partir de la versión JDK 1.1 fueron añadidas nuevas funcionalidades en otras clases de apoyo como Calendar, TimeZone, Locale y DateFormat y descargando de funcionalidad a la clase Date, si bien, sigue siendo la clase base para el uso de fechas.

Para marcar un limite entre las dos clases podríamos decir que Date representa un momento especifico del tiempo en milisegundos, mientras que Calendar nos permite obtener número enteros que especifican el dia, mes, año, hora,… de dicha fecha. Es decir, lo que eran los antiguos metodos de .getDay(), .getMonth(),….

Para llevar a buen puerto nuestro ejemplo, una página JSP que nos muestre la fecha y hora, lo primero que vamos a realizar es obtener una instancia de la clase Calendar mediante el método .getInstance(). Esto nos devolverá un calendario con los valores por defecto establecidos en nuestra maquina en cuanto a hora y formato.

Una vez que tengo la instancia del calendario me bastara con ir obteniendo los valores que me interesen mediante el método get(). Dicho método admite como parámetros una serie de constantes definidas en la clase Calendar que representar el día, mes, año,… Estas constantes son Calendar.DATE, Calendar.MONTH, Calendar.YEAR, ….

Ademas tenemos otra serie de constantes que nos permiten saber si la fecha que manejamos es un día u otro, un mes u otro. Estas constantes son Calendar.FRIDAY,Calendar.MONDAY,… para los días, Calendar.JUNE,Calendar.NOVEMBER,… para los meses,…

java.util.Calendar fecha = java.util.Calendar.getInstance();
out.println(fecha.get(java.util.Calendar.DATE) + "/"
  + fecha.get(java.util.Calendar.MONTH)    + "/"
  + fecha.get(java.util.Calendar.YEAR));

Como hemos podido comprobar, mediante la clase Calendar, únicamente podemos mostrar los valores enteros del dia, mes y año. Si queremos mostrar las fechas en otro formato como 18-Nov-2002, 18 de noviembre de 2002,… deberemos de usar un formateador de fechas mediante la clase DateFormat.

A si que los pasos a seguir son: primero obtener una instancia del calendario, como acabamos de ver. Segundo obtener la fecha actual del calendario. Esto lo hacemos mediante el método getTime.

Date fecha = calendario.getTime();

Una vez tenemos la fecha actual deberemos de instanciarnos el formateador. La instancia la obtendremos de la misma forma que obtuvimos la instancia del calendario, mediante un método getInstance().

DateFormat formateador = DateFormar.getInstance();

Este método nos permite pasarle un estilo de formato. Dentro de los estilos tenemos:

  • SHORT, totalmente numérico (18/11/02 O 9:01).
  • MEDIUM, formato largo (18-nov-02 O 9:00:20).
  • LONG, otro formato largo (18 de noviembre de 2002 O 9:02:12 GMT+01:00).
  • FULL, con la especificación completa (lunes 18 de noviembre de 2002 O 09H03′ GMT+01:00).

Solo nos quedará volcar toda esta información dentro de la JSP. Para ello las páginas JSP nos ofrecen el objeto out, el cual, mediante su método println, nos permite volcar información a la página.

El código sería el siguiente:

out.println(formateadorFecha.format(date));
out.println(formateadorHora.format(date));

Visualizar el ejemplo | Descargar 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
SVG

Transparencia y Opacidad en SVG

Creado: 15/Ene/2008 Actualizado: 16/Dic/2025

El objetivo de este ejemplo es ver cómo podemos definir objetos que sean transparentes en SVG. Para ello crearemos tres círculos y una línea que los atraviese.Dichos círculos irán aumentando su nivel de transparencia. Es decir, el primero será el más opaco y el último circulo será el más transparente.

Lo primero es recordar cómo se define un circulo. Para ello, es recomendable la lectura del ejemplo Dibujar un Circulo en SVG. Pero, básicamente, consiste en utilizar la etiqueta <CIRCLE/> con más o menos atributos.

 

Para definir la transparencia del circulo utilizaremos el atributo opacity dentro de los estilos. Dicho atributo podrá tomar los valores de 0 a 1. Los decimales los utilizaremos con el separador de punto decimal. Por ejemplo 0.4. El valor de 1 hace que el elemento sea totalmente opaco, mientras que el valor de 0 hace que el elemento sea totalmente transparente.

Nos quedaría un código parecido a este:

 

Si ponemos 3 circulos, incrementando el valor de la opacidad, y desplazando su centro dentro del lienzos sería:





Lo siguiente será poner una línea atravesando a los círculos. Para ello deberemos de utilizar la etiqueta <LINE/> con sus atributos de coordenadas x1,y1 x2,y2.

 

Y se me olvidaba otra cosa. El orden del pintado lo establece el orden en el que aparezca el código. A si que si queremos poner la línea debajo de los círculos, habrá que escribirla primero.

Visualizar el ejemplo | Descargar el código