Interfaces web

¿Qué es una interfaz?

Una interfaz es el punto donde dos cosas se encuentran y se comunican. No hace falta que sea digital: la ventanilla de una mesa de entradas es la interfaz entre el ciudadano y la oficina, y el tablero de un microondas es la interfaz entre la persona y el aparato.

En los tres casos la interfaz cumple el mismo papel: traduce. De un lado muestra lo que la persona necesita ver y acepta lo que puede dar; del otro lado le habla al sistema en el idioma que el sistema entiende. Nadie le explica al microondas la potencia en vatios: se le dice «descongelar» y la traducción la hace la interfaz.

Una interfaz web es la que se usa a través de un navegador. Y tiene una consecuencia práctica enorme, que la conecta directo con el tema de esta unidad: la interfaz es la primera barrera contra los datos mal cargados.

Una tabla define qué tipo de dato se puede guardar, pero recién rechaza el error cuando el dato ya llegó. Una buena interfaz, en cambio, hace que el error no se pueda cometer: pone un calendario donde hay que escribir una fecha, limita a dos opciones lo que solo tiene dos respuestas, y no deja apretar el botón si falta lo obligatorio. Es más barato evitar el error que corregirlo.

¿Por qué el navegador?

Durante décadas los sistemas se instalaban en cada computadora. Si la empresa tenía treinta puestos de trabajo, había treinta programas instalados, y cada actualización significaba recorrer los treinta. Cada máquina podía tener un sistema operativo distinto y, con él, sus propios problemas.

El navegador cambió ese esquema. El programa deja de estar en cada máquina y pasa a estar en un solo lugar: el servidor.

No es gratis: la aplicación depende de la conexión y del servidor. Si se cae la red o se cae el servidor, no hay sistema. Además, por seguridad, el navegador no puede leer archivos del disco ni abrir puertos de la máquina donde corre. Para cargar datos en una base que está en un servidor, esas limitaciones no molestan: son exactamente lo que corresponde.

Cliente y servidor

A ese reparto de tareas se lo llama modelo cliente-servidor, y tiene dos protagonistas:

• El cliente es el navegador que corre en la computadora del usuario. Pide.
• El servidor es la computadora donde viven la aplicación y la base de datos. Responde.

El diálogo entre los dos tiene exactamente dos mensajes: una petición de ida y una respuesta de vuelta. El usuario aprieta un botón, el navegador arma la petición con los datos del formulario, la manda, y espera. El servidor la recibe, hace su trabajo —entre otras cosas, escribir en la base de datos— y devuelve una respuesta, que suele ser otra página.

Qué hay detrás de una pantalla

Lo que el usuario ve como «una pantalla» son en realidad tres lenguajes trabajando juntos, cada uno con una responsabilidad distinta:

La forma más rápida de entender la diferencia es pensarla como una persona: HTML es el cuerpo —el esqueleto, los órganos, la forma de la cara—; CSS es la ropa, el peinado y el maquillaje; JavaScript son los gestos y los movimientos. Cambiar la ropa no cambia el cuerpo, y esa independencia es a propósito: el mismo HTML con otra hoja de estilos da un sitio totalmente distinto, sin tocar una línea del contenido.

Y del lado del servidor hay un cuarto lenguaje, que el usuario nunca ve porque no llega a su navegador: el que corre en el servidor —PHP, Python, Java, el que sea— y que recibe los datos, los valida de nuevo y arma la orden que los guarda en la tabla.

Vale una aclaración que suele generar confusión: HTML y CSS no son lenguajes de programación. No hacen cálculos, no toman decisiones y no recuerdan nada entre una vez y la otra. Describen cómo tiene que verse algo. El que programa de verdad es el del servidor —y JavaScript, del lado del navegador.

Interfaz de carga y de consulta

Las interfaces de un sistema de datos se dividen en dos grandes familias, según lo que hagan con la información:

• De carga (o de alta). Piden datos y los mandan a la base. Son formularios: nuevo socio, registrar préstamo, cargar venta.
• De consulta. Muestran lo que ya está guardado, con o sin filtros. Son listados y fichas: socios con préstamos vencidos, ventas del mes.

Se parecen mucho por fuera —las dos son páginas con campos— pero son opuestas por dentro. La de carga escribe: sus campos se vacían después de enviar y su objetivo es que el dato llegue completo y correcto a la tabla. La de consulta lee: sus campos ya vienen llenos con lo que hay en la base y su objetivo es que el usuario encuentre lo que busca.

Esta unidad trabaja la primera. La Unidad 4 completa el panorama con las de consulta, y con las de modificación y borrado, que son las de carga vistas al revés.

Resumen

• Una interfaz es el punto donde dos cosas se comunican, y su trabajo es traducir en los dos sentidos.
• Una interfaz web se usa desde el navegador, sin instalar nada en la máquina del usuario.
• La interfaz es la primera barrera contra los datos mal cargados: conviene que el error no se pueda cometer.
• En el modelo cliente-servidor, el navegador pide y el servidor responde. Son dos máquinas distintas.
• El navegador nunca accede a la base de datos: por eso todo se valida dos veces, en el navegador y en el servidor.
• Una pantalla web se arma con tres lenguajes: HTML para la estructura, CSS para la presentación y JavaScript para el comportamiento.
• HTML y CSS no son lenguajes de programación: describen, no calculan ni deciden.
• Hay interfaces de carga (escriben) y de consulta (leen). Esta unidad trata las de carga.

Ver los formularios web