Cuestionario Técnico de Desarrollo Web

Una interfaz de captura de datos es el componente de software y diseño visual mediante el cual un usuario introduce información en un sistema informático. En el ecosistema web, se traduce en formularios, cuadros de diálogo, botones, controles deslizantes y elementos interactivos que traducen las intenciones humanas en datos estructurados que una aplicación puede procesar, almacenar o transformar.

El diseño de estas interfaces es un pilar fundamental de la Experiencia de Usuario (UX) y la Accesibilidad (A11y). Una buena interfaz no solo debe ser atractiva, sino intuitiva y clara, guiando al usuario paso a paso para minimizar errores durante la digitación y asegurando que la recolección de información sea fluida y libre de fricciones.

Garantizar la calidad de los datos en tiempo real requiere una estrategia combinada de restricciones nativas del navegador, lógica de validación del lado del cliente (Frontend) y reglas en el servidor (Backend). El primer paso consiste en usar los atributos y tipos de entrada correctos en HTML5, forzando campos obligatorios con required, limitando rangos numéricos con min y max, o guiando los formatos de entrada mediante máscaras de texto.

El segundo filtro se ejecuta mediante JavaScript, aplicando validaciones dinámicas basadas en expresiones regulares o librerías especializadas. Esto permite retroalimentar de inmediato al usuario con mensajes claros de error cuando ingresa un formato inválido (por ejemplo, un correo mal escrito o una contraseña débil), evitando que el formulario sea enviado con datos corruptos y optimizando el tráfico del servidor.

Las expresiones regulares (también conocidas como RegEx) son patrones de búsqueda definidos mediante una secuencia de caracteres especiales. En JavaScript, son objetos que permiten buscar, extraer, reemplazar y validar combinaciones específicas de caracteres dentro de cadenas de texto de una forma increíblemente potente y eficiente.

Se utilizan principalmente para validar si los datos introducidos por un usuario cumplen con un formato estándar obligatorio. Por ejemplo, son la herramienta estándar para verificar la estructura de un correo electrónico, un número telefónico regional, códigos postales o para forzar políticas de seguridad en contraseñas (exigir mayúsculas, números y caracteres especiales).

// Ejemplo: Validación de un formato de correo electrónico en JS
const regexCorreo = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
const correoUsuario = "ejemplo@correo.com";

if (regexCorreo.test(correoUsuario)) {
    console.log("El formato del correo es válido.");
} else {
    console.log("Correo no válido.");
}

El estándar HTML5 provee un conjunto completo de etiquetas semánticas dedicadas a la creación de formularios. El contenedor principal siempre es la etiqueta <form>, dentro de la cual se agrupan elementos esenciales como <label> (para etiquetar de forma accesible cada campo), <input> (la etiqueta más versátil que cambia según su atributo type: text, email, number, date, password, etc.), y <button> para enviar o resetear la información.

Para capturas de datos más específicas se emplean etiquetas como <textarea> para textos largos de múltiples líneas, y <select> en combinación con <option> para construir menús desplegables de opciones cerradas. También existen etiquetas estructurales como <fieldset> y <legend> para agrupar visual y lógicamente secciones grandes dentro de un formulario complejo.

<!-- Ejemplo de formulario estructurado en HTML -->
<form id="registro">
    <label for="nombre">Nombre Completo:</label>
    <input type="text" id="nombre" name="nombre" required>

    <label for="pais">País:</label>
    <select id="pais" name="pais">
        <option value="co">Colombia</option>
        <option value="mx">México</option>
    </select>
    
    <button type="submit">Registrar</button>
</form>

La persistencia de datos hace referencia a la capacidad de una aplicación para conservar la información a lo largo del tiempo, incluso si el usuario refresca la página, cierra la pestaña o apaga el dispositivo. Desde JavaScript del lado del cliente, podemos lograr esto a través de las APIs nativas de almacenamiento web: LocalStorage para almacenamiento indefinido, y SessionStorage si deseamos que los datos se borren al cerrar la pestaña.

Para escenarios de aplicaciones web avanzadas o que manejen volúmenes masivos de información estructurada, se utiliza IndexedDB, una base de datos no relacional integrada en el navegador. Por último, para lograr persistencia global y permanente, JavaScript se conecta mediante peticiones HTTP asíncronas (usando fetch() o librerías como Axios) a un servidor Backend que procesa y guarda la información en bases de datos externas como PostgreSQL, MySQL o MongoDB.

JSON significa JavaScript Object Notation (Notación de Objetos de JavaScript). Es un formato ligero de intercambio de datos, basado íntegramente en texto plano, estructurado bajo el principio de pares clave-valor. A pesar de haber nacido directamente de la sintaxis de JavaScript, JSON es completamente independiente del lenguaje, lo que significa que prácticamente cualquier lenguaje de programación moderno tiene soporte nativo para interpretarlo y generarlo.

En el desarrollo de aplicaciones web, JSON es el estándar absoluto e indiscutible para transferir información. Se utiliza para enviar datos desde una API en un servidor web hacia el navegador, permitiendo pintar información de forma dinámica. Gracias a los métodos nativos JSON.stringify() (que convierte un objeto de JS a texto plano JSON) y JSON.parse() (que realiza el proceso inverso), la manipulación de datos estructurados es inmediata y eficiente.

// Ejemplo de un string estructurado en formato JSON
const jsonTexto = '{"usuario": "Eyder", "rol": "Desarrollador", "nivel": 3}';

// Convertir cadena de texto JSON a un Objeto de JavaScript operable
const objetoJS = JSON.parse(jsonTexto);
console.log(objetoJS.usuario); // Salida: Eyder

LocalStorage es una propiedad de la Web Storage API del navegador que permite almacenar datos de manera local en el computador del usuario. A diferencia de las cookies tradicionales, tiene una capacidad significativamente mayor (alrededor de 5MB por dominio) y la información almacenada nunca se envía automáticamente al servidor en las peticiones HTTP, mejorando la velocidad y la seguridad de la navegación.

Se utiliza habitualmente para mejorar la experiencia del usuario reteniendo estados y configuraciones de la interfaz. Los casos de uso más comunes incluyen recordar si el usuario prefiere el modo oscuro o claro, guardar de manera provisional artículos en un carrito de compras sin iniciar sesión, o almacenar en caché datos técnicos para acelerar la carga de la aplicación en visitas posteriores.

// Guardar un dato en LocalStorage
localStorage.setItem('temaPreferido', 'oscuro');

// Recuperar el dato en cualquier momento (incluso tras cerrar el navegador)
const tema = localStorage.getItem('temaPreferido');
console.log(tema); // Salida: oscuro

Las animaciones dinámicas se logran utilizando CSS para definir los estilos visuales del movimiento y JavaScript para controlar la interactividad o detonar los eventos basados en acciones del usuario. En CSS se emplean las propiedades transition para cambios suaves de estado, transform para alterar geometrías (escalar, rotar, trasladar o inclinar)