Un formulario de inicio de sesión (login) es un componente esencial en muchas aplicaciones web y móviles. Sirve como el primer punto de interacción entre el usuario y el sistema, permitiendo a los usuarios acceder a áreas restringidas de una aplicación o sitio web mediante la verificación de su identidad. Esto se logra a través de credenciales de acceso, comúnmente un nombre de usuario (o dirección de correo electrónico) y una contraseña.
Para Qué Sirve un Formulario de Login
El propósito principal de un formulario de login es la seguridad. Restringe el acceso a recursos y datos sensibles, asegurando que solo los usuarios autorizados puedan acceder a ellos. Además, ayuda a personalizar la experiencia del usuario, manteniendo sus preferencias y permitiendo interacciones personalizadas basadas en la identidad del usuario.
Por Qué Hicimos el Formulario de Esta Manera
La razón para diseñar el formulario de inicio de sesión junto a una descripción del proyecto es doble:
-
Mejora la Experiencia del Usuario: Proporciona contexto sobre el proyecto o la aplicación antes de solicitar al usuario que inicie sesión. Esto puede aumentar el interés y la confianza del usuario, especialmente si es su primera visita.
-
Estética y Funcionalidad: Al combinar información útil con la acción de inicio de sesión, se logra un equilibrio entre estética y funcionalidad. El usuario recibe tanto información valiosa como acceso directo a la aplicación, creando una interfaz limpia y eficiente.
Lenguajes Utilizados y Por Qué
Para este proyecto, utilizamos HTML, CSS (a través de Bootstrap), y un poco de JavaScript (para funcionalidades de Bootstrap).
- HTML: Es el lenguaje de marcado estándar para crear páginas web. Define la estructura y el contenido de la página.
- CSS con Bootstrap: Bootstrap es un framework de CSS que facilita el diseño web responsive y atractivo con menos esfuerzo. Usamos Bootstrap para aprovechar sus componentes predefinidos (como el Jumbotron y la Card), y para garantizar que nuestro formulario sea visualmente atractivo y funcional en diferentes dispositivos.
- JavaScript: Aunque en este caso no escribimos código JavaScript directamente, los scripts de Bootstrap que incluimos utilizan este lenguaje para añadir interactividad y comportamientos dinámicos a los componentes de Bootstrap.
Explicación del Código
El código proporciona una estructura básica para un formulario de inicio de sesión dentro de una interfaz web:
<!DOCTYPE html>: Declara que el documento es HTML5.<html lang="es">: Indica que el contenido del documento está en español.<head>: Contiene metadatos, el título de la página, y enlaces a las hojas de estilo de Bootstrap.<body>: El cuerpo del documento, donde reside la interfaz de usuario.- Contenedor Fluid con Imagen de Fondo: Crea un fondo atractivo para la página completa.
- Fila y Columnas (
rowycol-4): Organiza el contenido en dos columnas centradas, una para la descripción del proyecto y otra para el formulario de inicio de sesión. - Jumbotron para la Descripción del Proyecto: Proporciona un espacio destacado para introducir el proyecto al usuario.
- Card para el Formulario de Inicio de Sesión: Contiene los campos y botones necesarios para que el usuario inicie sesión.
Esta estructura es sencilla pero efectiva para crear una página de inicio de sesión que no solo cumple con su función principal de seguridad, sino que también informa y atrae a los usuarios.
Si te gusta el diseno del formulario aqui te dejo el codigo completo del mismo, podiendo despues cambiarlo a tu gusto
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Formulario de Inicio de Sesión</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="container-fluid d-flex justify-content-center align-items-center bg-image vh-100"
style="background-image: url('https://cdn.pixabay.com/photo/2015/12/04/14/05/code-1076536_1280.jpg');">
<div class="row justify-content-center ">
<!-- La descripción del proyecto -->
<div class="col-4 bg-white">
<div class="jumbotron mt-3">
<h1 class="display-4">Hello, world!</h1>
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra
attention to featured content or information.</p>
<hr class="my-4">
</div>
</div>
<!-- El formulario de inicio de sesión -->
<div class="col-4">
<div class="card h-100">
<div class="card-body">
<h2 class="card-title text-center" style="font-family: Georgia, serif;">Iniciar Sesión</h2>
<img style="width: 150px;" class="mx-auto d-block rounded-circle bg-primary p-1"
src="https://w7.pngwing.com/pngs/247/564/png-transparent-computer-icons-user-profile-user-avatar-blue-heroes-electric-blue-thumbnail.png"
alt="User">
<form>
<div class="form-group">
<label for="username">Usuario:</label>
<input type="text" class="form-control" id="username" name="username" required>
</div>
<div class="form-group">
<label for="password">Contraseña:</label>
<input type="password" class="form-control" id="password" name="password" required>
</div>
<button type="submit" class="btn btn-primary btn-block">Iniciar Sesión</button>
<p class="text-center mt-3"><a href="#">¿Se te olvidó el usuario o la contraseña?</a></p>
<a href="#">Registrar</a>
</form>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
0 Comentarios
Si desea contactar comigo, lo puede hacer atravez deste formulario gracias