Objetivo General
Comprender y aplicar conceptos técnicos del desarrollo Front-End mediante la creación de un prototipo interactivo basado en un caso real del entorno laboral.
Caso Práctico: Desarrollador/a Junior Front-End en una empresa de servicios
Contexto:
Trabajas como Desarrollador/a Junior Front-End en una empresa que ofrece soluciones digitales para pequeñas empresas. El equipo de diseño ha entregado un boceto en Figma para una página de inicio de sesión de clientes. Tu tarea es convertir ese diseño en una interfaz funcional usando tecnologías básicas de Front-End.
Prototipo Interactivo a Desarrollar: Página de Inicio de Sesión (Login)
Requisitos técnicos:
HTML: estructura de la página con campos de usuario y contraseña.
CSS: estilos para el formulario, botones, colores institucionales.
JavaScript: validación básica de campos (que no estén vacíos, y que la contraseña tenga al menos 6 caracteres).
Opcional: guardar el usuario en localStorage si se marca “Recordarme”.
Tareas a realizar:
Crear una carpeta de proyecto con archivos index.html, style.css y script.js.
Construir el formulario con campos para correo electrónico y contraseña.
Estilizar la interfaz usando Flexbox para centrar el formulario.
Programar la validación en JavaScript al hacer clic en “Iniciar sesión”.
Probar distintos casos reales, como dejar campos vacíos, contraseña corta, etc.
(Opcional avanzado): mostrar un mensaje de bienvenida con el nombre del usuario tras iniciar sesión correctamente.
Resultado Esperado
Un prototipo funcional y visualmente presentable de una página de inicio de sesión, que simule el proceso de autenticación de un sistema real. Esto permite aplicar conocimientos técnicos concretos y ganar experiencia práctica como lo harías en un entorno profesional.
Plazo estimado de ejecución del prototipo
4 días hábiles, distribuidos así:
Día Actividad
1 Crear estructura HTML y CSS básica
2 Agregar validaciones con JavaScript
3 Revisar errores y probar distintos casos
4 Mejoras visuales + validación final del prototipo
