■ HTML CSS & JS

Hoy en día los sitios web para funcionar de la forma en que lo hacen emplean en su construcción un conjunto diverso de herramientas que, dependiendo de la complejidad del sitio, puede ser muy amplio.

Pero de entre ese conjunto de herramientas hay algunas que son las básicas para que un sitio cumpla con los requerimientos actuales para ser funcional y estas herramientas son:

• HTML
• CSS
• JavaScript

Escribir el sitio solo utilizando HTML no es suficiente, ya que aunque si bien se le podría dar estilo desde el mismo HTML no sería una forma muy viable de hacer puesto que muchos estilos se usan repetidamente a lo largo del sitio y hacerlo de esta forma nos obligaría a estar reescribiendolos cada que los necesitáramos, cosa que no pasaría si nos apoyamos de CSS.

■ ¿Qué es CSS?

Mientras que HTML es el "lenguaje" que nos permite estructurar el sitio web, CSS es un lenguaje que se centra en el estilo de esa web, significa "Cascading Style Sheets" o en español "Hojas de Estilo en Cascada". Este lenguaje trabaja directamente con HTML, CSS nos permite dictar las reglas de cómo queremos que luzcan los elementos de HTML en pantalla, ya sea un div, un button, una table, etc.; y es completamente reutilizable.

Por ejemplo si en nuestra página web tenemos varios div, podemos definir el tamaño de ellos, la forma en que se acomodan, el color, cuántos serán visibles, entre muchas otras características mediante CSS, estas características solo se definen una vez y se pueden aplicar a todos o determinados div según nosotros le digamos.

■ ¿Qué es JavaScript?

JS es un lenguaje de programación orientado a sitios web, ahora construir un sitio con HTML y CSS no es suficiente ya que dichas herramientas solo nos permiten configurar la estructura del sitio y la apariencia del mismo, hasta cierto punto estática; JS por otro lado ayuda a que el sitio web se vuelva dinámico e interactivo como por ejemplo controlando el contenido que se muestra, incrustando animaciones, agregando acciones que el usuario puede realizar, conectarse con un servidor, una base de datos, etc., por lo que integrar JS a nuestras páginas web es casi necesario.

■ ¿Cómo se integran estas dos herramientas al sitio web?

Dentro de la estructura HTML del sitio web, hay una sección llamada "head", esta se encuentra en la parte superior, el head aunque no es una sección visible contiene información que es muy importante para la página web como lo son los metadatos (palabras clave, información del autor, idioma del sitio, conjunto de caracteres, entre otros) y todos los enlaces a hojas de estilo CSS y scripts que la página utilice para funcionar correctamente.

Dado que tanto el código de CSS como el de JS se debe manejar en archivos independientes al HTML, estos deben ser enlazados para que HTML sepa que existen y pueda utilizarlos, dentro del head esto se hace de la siguiente forma:

• Archivos CSS

<link type="text/css" rel="stylesheet" href="<ruta y nombre del archivo"/>

• Archivos JS

<script src="ruta y nombre del archivo"></script>

■ Java ► BorderLayout

BorderLayout

Es un mecanismo de Java para organizar los elementos que queremos mostrar en la pantalla, ya sea en una ventana o en un panel.

Un panel es un área determinada que puede contener elementos, dependiendo del layout utilizado el panel puede tener un tamaño en pixeles o ajustarse a la ventana, en el caso de borderLayout si los elementos que se agregan son paneles estos se ajustarán de la siguiente forma:

• El panel que quede al norte o al sur, solo se le podrá dar un alto en pixeles y el ancho será el que tenga la ventana.
• Los paneles que queden al oeste y al este, solo se les podrá dar un ancho en pixeles y el alto será el sobrante que reste en la venta si tiene paneles al norte o sur con altura determinada.
• El panel central será de las dimensiones sobrantes cuando hay paneles al norte o sur y al oeste y este.

Por ejemplo en la siguiente imagen:

Es una ventana conformada por 5 paneles, el gris al norte, el naranja al sur, el rojo al oeste, el azul al este y el blanco al centro.

• El panel gris tiene una altura de 150 pixeles y su ancho por default es el mismo que la ventana.
• El panel naranja tiene una altura de 150 pixeles y su ancho es el mismo que el de la ventana.
• Los paneles centrales tienen una altura por default que es el sobrante que dejan los paneles norte (gris) y sur (naranja) respecto al alto de la ventana.
• Los paneles rojo y azul tienen un ancho de 200 pixeles.
• Y el panel blanco tiene un ancho y alto por default que viene siendo el espacio sobrante que dejan los demás paneles.

■ Estructura

Para poder organizar los elementos en la pantalla mediante borderLayout primero se le debe indicar a la ventana o al panel contenedor que el mecanismo de organización sera borderLayout, esto es de la siguiente forma:

<ventana o panel>.setLayout(new BorderLayout);

Hecho esto solo basta indicar en qué punto se situará el elemento al agregarlo a dicho contenedor, ya sea la propia ventana o un panel, esto es así:

<ventana o panel>.add(elemento, BorderLayout.<ZONA>);

Donde:

"elemento" es el componente que se va agregar.

"ZONA" es el punto de borderLayout en el que se situará dicho elemento, los puntos pueden ser: NORTH, CENTER, SOUTH, WEST o EAST.

■ Código

El código de la imagen superior es el siguiente:

import javax.swing.*;

import java.awt.*;

import java.awt.event.*;

class Panel extends JPanel {

    public Panel(Color _color) {

        setBackground(_color);

        setPreferredSize(new Dimension(200, 150));

    }

}

class Ventana extends JFrame {

    // Se crean los paneles a partir de la clase Panel

    Panel panelNorte = new Panel(Color.GRAY);

    Panel panelOeste = new Panel(Color.RED);

    Panel panelCentro = new Panel(Color.WHITE);

    Panel panelEste = new Panel(Color.BLUE);

    Panel panelSur = new Panel(Color.ORANGE);

    public Ventana() {

        this.setSize(800, 600);

        this.setTitle("Ventana en Java");

        this.setLocationRelativeTo(null);

        this.setResizable(false);

        this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

        // Se le indica a la ventana que se usará BorderLayout

        this.setLayout(new BorderLayout());

    
        // Se agregan los paneles en cada una de las zonas

        this.add(panelNorte, BorderLayout.NORTH);

        this.add(panelOeste, BorderLayout.WEST);

        this.add(panelCentro, BorderLayout.CENTER);

        this.add(panelEste, BorderLayout.EAST);

        this.add(panelSur, BorderLayout.SOUTH);

    }

}

public class Main {

    public static void main (String args[]) {

        // Se crea la ventana

        Ventana ventana = new Ventana();

        // Se muestra en pantalla

        ventana.setVisible(true);

    }

}

■ Explicación

La clase "Panel" hereda de JPanel y que hace es crear un panel con el color y dimensiones dadas, cada que se crea un objeto de esta clase se crea un panel diferente.

La clase "Ventana" hereda de JFrame y es la encargada de crear la ventana con los parámetros dados (dimensiones, título, etc.); en la misma clase se crean los paneles mostrados usando la clase "Panel".

En el método constructor de ventana se agregan los paneles uno por uno indicando la zona en la que se localizarán.

En la clase principal se crea un objeto de "Ventana" y se muestra.

■ Java ► Elementos y Áreas (Layouts)

Cuando se trabaja con ventanas en Java dependiendo de lo que haga nuestro programa es necesario colocar elementos con los que interactuará el usuario, estos pueden ser botones, etiquetas, campos de texto, etc., y para acomodar estos elementos se usan los "layouts".

■ Layouts

Los layouts son formas de posicionar elementos en una ventana o panel, los paneles o la propia ventana son recipientes que pueden contener cualquier elemento que queramos mostrar en pantalla, incluso otro panel, es decir, un panel puede contener elementos y a su vez ese panel puede estar contenido en otro panel.

En la siguiente imagen se observan 2 paneles (rectángulos grises) contenidos en la ventana, uno tiene un texto que dice "NORTH" y el otro dice "SOUTH":

Una forma de acomodar elementos en la ventana es usando la característica "borderLayout" la cual permite acomodar elementos en la ventana o en un panel mediante tipo "puntos cardinales", donde "NORTH" es la parte superior, "SOUTH" es la parte inferior, "WEST" es la parte izquierda, "EAST" es la parte derecha y "CENTER" el centro de la ventana, en la imagen de arriba los paneles grises están situados en los puntos NORTH y SOUTH de la ventana.

Si agregáramos un tercer panel al centro, es decir, en la posición "CENTER", la ventana luciría así:

■ Tipos de Layouts

• BorderLayout

Una de las formas que nos permite acomodar elementos en la pantalla es borderLayout, como ya se mencionó en el ejemplo de arriba la forma de distribuir los elementos en la pantalla mediante borderLayout es indicando la posición del elemento de acuerdo a un punto en la pantalla, estos puntos solo pueden ser NORTH, SOUTH, WEST, EAST o CENTER, siendo la distribución de la siguiente forma:

Y a su vez dentro de cada panel, al agregar elementos se pueden distribuir de la misma manera, es decir, cada panel tiene un norte, sur, oeste, este y centro.

• BoxLayout

Este layout nos permite acomodar los elementos en forma lineal ya sea sobre el eje X o sobre el eje Y, es decir de forma vertical uno bajo el otro o de forma horizontal uno al lado del otro como se aprecia a continuación:

Eje X

Eje Y

• FlowLayout

Este tipo de layout lo que hace es colocar los elementos seguidos uno de otro de izquierda a derecha y el cómo se vean los elementos dependerá de su tamaño y de la distribución elegida, en este caso solo tiene tres opciones: CENTER, LEFT y RIGHT.

Por ejemplo si elegimos CENTER y los elementos son pequeños y caben varios a lo ancho de la ventana se centrarán así:

Y si los elementos miden de ancho lo mismo que la ventana entonces se acomodarán uno abajo del otro así:

Si elegimos LEFT y los elementos son pequeños se alinearán a la izquierda así:

Finalmente si elegimos RIGHT se alinearán a la derecha:

• GridLayout

Este tipo de layout sirve para acomodar los elementos como si se tratara de una tabla, es decir, en filas y columnas, al crearlo se le pasan dos parámetros, el primero es el número de filas y el segundo son las columnas, por ejemplo si le dijéramos que queremos los elementos en 3 filas por 2 columnas, se verían así:

Y si fuera al revés, 2 filas por 3 columnas, los elementos quedarían así:

■ ¿Cuál elegir?

Eso dependerá de cómo queramos distribuír los elementos en pantalla, dependiendo de nuestra necesidad uno podría ser mejor que otro, también está la posibilidad de combinarlos, por ejemplo crear 3 paneles al norte, centro y sur con borderLayout y los elementos de cada uno de esos paneles distribuirlos horizontalmente sobre X con boxLayout.