2.1 Diseño de interfaz de usuario (UI)#

El diseño de interfaz de usuario es la disciplina de diseñar la capa de presentación visual e interactiva de una aplicación web. Es el punto de contacto tangible entre el usuario y la lógica del backend.

• Principios básicos: el diseño de la interfaz de usuario se guía por principios establecidos de HCI destinados a reducir la carga cognitiva y mejorar la usabilidad. Estos incluyen:

TIP

{title=“Key UI Principles”}

• Claridad: La interfaz debe ser inequívoca. Los íconos, etiquetas y diseños deben comunicar claramente su propósito y función.
• Consistencia: Un lenguaje de diseño consistente (por ejemplo, estilos de botones, patrones de navegación) en toda la aplicación permite a los usuarios transferir conocimientos de una parte del sistema a otra, acelerando el aprendizaje.
• Comentarios: El sistema debe proporcionar comentarios inmediatos y claros sobre las acciones del usuario (por ejemplo, un control giratorio de carga para una solicitud asincrónica, un mensaje de éxito al enviar el formulario).
• Jerarquía visual: La disposición y el estilo de los elementos deben guiar la atención del usuario hacia la información y las acciones más importantes de una página. :::* Ingeniería de una interfaz: Desde una perspectiva de ingeniería de software, el diseño de la interfaz de usuario se implementa a través de arquitecturas basadas en componentes (por ejemplo, React, Vue, Angular). A menudo se desarrolla un Sistema de diseño, que actúa como un depósito centralizado de componentes de interfaz de usuario reutilizables, patrones de diseño y pautas de estilo. Esto impone coherencia programáticamente y desacopla el diseño de la lógica empresarial subyacente, promoviendo la modularidad y la mantenibilidad.

2.2 Diseño de experiencia de usuario (UX)#

El diseño de la experiencia del usuario es una disciplina más amplia y estratégica que abarca todo el recorrido del usuario. Mientras que la UI se preocupa por la apariencia de la interfaz, la UX se preocupa por la sensación general de la experiencia.

• El proceso UX: El diseño de UX es un proceso sistemático basado en datos que es paralelo a la fase de ingeniería de requisitos de software.

1. Investigación: Comprender al usuario final a través de técnicas como entrevistas, encuestas y análisis competitivo.
2. Definición: Sintetizar la investigación en artefactos como personas de usuario (perfiles de usuario arquetípicos) y mapas de viaje del usuario (visualizar la interacción del usuario con el sistema).
3. Ideación y diseño: Creación de estructuras alámbricas (planos estructurales) de baja fidelidad y prototipos de alta fidelidad (maquetas interactivas) para explorar y validar soluciones de diseño.
4. Pruebas: Realizar sesiones de pruebas de usabilidad con usuarios reales para identificar puntos débiles y áreas de mejora en el diseño propuesto.

• UX y requisitos: Los artefactos producidos durante el proceso de UX son insumos invaluables para el desarrollo de software. Un mapa de recorrido del usuario informa directamente la creación de historias de usuario en un flujo de trabajo ágil. Los resultados de las pruebas de usabilidad proporcionan requisitos no funcionales relacionados con la eficiencia y la capacidad de aprendizaje. UX cierra la brecha entre las necesidades del usuario y las especificaciones técnicas.

3.0 The Engineering Foundation: Ingeniería de software en desarrollo web#

La traducción de diseños UI/UX en una aplicación funcional es el dominio del desarrollo web, que es en sí mismo una aplicación especializada de los principios de la ingeniería de software. Por lo general, se divide en desarrollo frontend y backend.

3.1 Desarrollo front-end#

La interfaz es el lado cliente de la aplicación: el código que se ejecuta en el navegador web del usuario. Su principal responsabilidad es representar la interfaz de usuario y gestionar las interacciones del usuario.

• Tecnologías principales: La base de la web se basa en tres lenguajes:
• HTML (Lenguaje de marcado de hipertexto): Define la estructura semántica y el contenido de la página web.
• CSS (hojas de estilo en cascada): Especifica la presentación, el estilo y el diseño del contenido HTML.
• JavaScript: Proporciona interactividad, permitiendo actualizaciones dinámicas de contenido, manejo de eventos y comunicación con el servidor.

NOTE

{title=“Example: Basic HTML Structure”}

1
<!DOCTYPE html>
2
<html lan g="es">
3
<cabeza>
4
<meta juego de caractere s="UTF-8">
5
<title>Ejemplo de diseño web</title>
6
<enlace re l="hoja de estilo" hre f="estilos.css">
7
</cabeza>
8
<cuerpo>
9
<h1>¡Hola, diseño web!</h1>
10
<p>Esta es una estructura de página web simple.</p>
11
<script sr c="script.js"></script>
12
</cuerpo>
13
</html>

:::* Marcos modernos: Para gestionar la complejidad de las aplicaciones modernas, el desarrollo frontend depende en gran medida de marcos y bibliotecas de JavaScript como React, Angular y Vue.js. Estas herramientas promueven un paradigma declarativo basado en componentes, que permite a los desarrolladores crear interfaces de usuario escalables y mantenibles. Los conceptos clave de ingeniería incluyen administración de estado, el ciclo de vida de los componentes y el uso de herramientas de compilación (por ejemplo, Webpack, Vite) para transpilar y agrupar código para producción.

3.2 Desarrollo de back-end#

El backend es el lado del servidor de la aplicación. Es responsable de la lógica empresarial, la persistencia de los datos, la autenticación y el suministro de datos al frontend a través de una API.

• Responsabilidades: Las preocupaciones clave del backend incluyen:
• Lógica del lado del servidor: Implementación de las funciones principales de la aplicación.
• Administración de bases de datos: Interactuar con bases de datos (por ejemplo, SQL como PostgreSQL, NoSQL como MongoDB) para almacenar y recuperar datos.
• API (Interfaz de programación de aplicaciones): Definición de un contrato sobre cómo la interfaz puede solicitar y manipular datos. REST (Transferencia de estado representacional) y GraphQL son dos estilos arquitectónicos dominantes para diseñar estas API.
• Pila de tecnología: El desarrollo backend implica una amplia variedad de lenguajes de programación (por ejemplo, Node.js, Python, Java, Go, PHP) y marcos (por ejemplo, Express.js, Django, Spring Boot).

4.0 Imperativos no funcionales: seguridad y rendimiento#

Una aplicación web que es funcional pero insegura o lenta es un sistema fallido. La seguridad y el rendimiento son requisitos no funcionales críticos que deben integrarse durante todo el proceso de diseño y desarrollo.

4.1 Seguridad web#

La seguridad de las aplicaciones web es la práctica de proteger los sitios web y los servicios web de ataques maliciosos, accesos no autorizados y violaciones de datos. Es fundamental adoptar una mentalidad de seguridad “Shift-Left” (integrar consideraciones de seguridad desde las primeras etapas del diseño).

• Vulnerabilidades comunes: El OWASP (Proyecto de seguridad de aplicaciones web abiertas) Top 10 proporciona una lista de los riesgos de seguridad web más críticos.

CAUTION

{title=“Critical Security Risks”}

• Ataques de inyección (por ejemplo, inyección SQL): Se envían datos maliciosos a un intérprete como parte de un comando o consulta, lo que lleva a una ejecución no deseada.
• Secuencias de comandos entre sitios (XSS): Se inyectan secuencias de comandos maliciosas en sitios web confiables y se ejecutan en el navegador de la víctima.
• Autenticación rota: Las fallas en la autenticación o la lógica de administración de sesiones permiten a los atacantes comprometer las cuentas de los usuarios. :::* Estrategias de mitigación: La codificación defensiva y los patrones arquitectónicos son esenciales. Estos incluyen una validación de entrada estricta, codificación de salida, consultas parametrizadas (para evitar SQLi), la implementación de una Política de seguridad de contenido (CSP) sólida y el uso de protocolos de autenticación seguros como OAuth 2.0. Toda la transmisión de datos debe cifrarse mediante HTTPS (HTTP sobre TLS).

4.2 Optimización del rendimiento web#

El rendimiento web se refiere a la medición objetiva y la experiencia percibida por el usuario de la velocidad y la capacidad de respuesta de un sitio web. Un rendimiento deficiente se correlaciona directamente con altas tasas de abandono de usuarios y malas clasificaciones en los motores de búsqueda.

• Métricas clave: Core Web Vitals de Google proporciona un conjunto estandarizado de métricas para medir la experiencia del usuario:
• Pintura con contenido más grande (LCP): Mide el rendimiento de carga.
• Retraso de la primera entrada (FID): Mide la interactividad.
• Cambio de diseño acumulativo (CLS): Mide la estabilidad visual.
• Técnicas de optimización: El rendimiento se diseña mediante una combinación de estrategias de frontend y backend:

TIP

{title=“Performance Best Practices”}

• Optimización de activos: Minimizar CSS/JavaScript, comprimir imágenes y utilizar formatos modernos (por ejemplo, WebP).
• Almacenamiento en caché: Aprovechar el almacenamiento en caché del navegador y las Redes de entrega de contenido (CDN) para almacenar activos más cerca del usuario.
• Optimización de código: Implementación de técnicas como carga diferida para activos fuera de la pantalla y reducción de la complejidad de tareas de JavaScript de larga duración.
• Optimización del servidor: Minimizar el tiempo de respuesta del servidor (Tiempo hasta el primer byte - TTFB) a través de consultas eficientes a la base de datos y lógica de backend.