Aplicaciones e interfaces web

Aplicaciones web

Una aplicación web es un software al que se accede mediante un navegador web y que permite al usuario realizar determinadas tareas.

Algunos ejemplos son:

• una tienda online;
• una aplicación bancaria;
• una plataforma educativa;
• una red social;
• una aplicación de gestión empresarial.

A diferencia de un sitio web principalmente informativo, en una aplicación web el usuario normalmente interactúa con la información: inicia sesión, consulta datos, crea o modifica elementos, realiza búsquedas, completa formularios, etc.

Interfaces web

La interfaz de usuario (User Interface o UI) es la parte de la aplicación mediante la que el usuario interactúa con ella.

Incluye todos los elementos que el usuario puede ver o utilizar: textos, imágenes, botones, formularios, menús, tablas, enlaces, etc.

INFO

Una misma aplicación puede mantener sus funcionalidades aunque cambiemos completamente su interfaz.

La interfaz actúa como intermediaria entre el usuario y las funcionalidades de la aplicación.

Por ello, una buena interfaz debe permitir que el usuario comprenda:

• dónde se encuentra;
• qué información está viendo;
• qué acciones puede realizar;
• cómo puede desplazarse por la aplicación;
• cuál ha sido el resultado de sus acciones.

Organización de una interfaz

Podemos entender una interfaz web a partir de tres conceptos fundamentales:

Layout

El layout define la estructura general utilizada para distribuir los elementos en pantalla.

Por ejemplo:

• cabecera;
• navegación;
• contenido principal;
• pie de página.

Un mismo layout puede ser utilizado por diferentes partes de la aplicación.

Vistas

Una vista representa una pantalla o parte principal de la aplicación.

Por ejemplo:

• login;
• dashboard;
• listado de productos;
• detalle de un producto;
• formulario de creación de un producto.

Las vistas normalmente se muestran dentro del área de contenido definida por un layout.

Componentes

Las vistas y layouts están formados por componentes, es decir, elementos de interfaz que pueden utilizarse y reutilizarse.

Por ejemplo:

• botones;
• formularios;
• tarjetas;
• tablas;
• menús;
• alertas;
• ventanas modales.

TIP

Podemos pensar inicialmente una aplicación web como una composición:

Aplicación → layouts → vistas → componentes