Tarjeta de Login

Resumen general

• Este proyecto consiste en la construcción de una tarjeta de inicio de sesión (login card) completamente responsiva.
• Incluye un mensaje de bienvenida, dos botones de acción (inicio de sesión por email y por Facebook) y un aviso legal final.
• El foco principal está en consolidar habilidades de estructura HTML semántica y aplicación de estilos modernos con CSS.

Tecnologías utilizadas:

• HTML5 semántico
• CSS3 moderno (Flexbox, Box Model, fuentes externas, unidades relativas)

Conceptos aplicados

Modelo de Caja (Box Model)

Cada elemento respeta márgenes, padding y borde, permitiendo un control claro sobre el espacio ocupado. El uso global de box-sizing: border-box simplifica el cálculo del tamaño de los elementos.

Flexbox

Se utiliza para centrar y distribuir los elementos de forma eficiente tanto horizontal como verticalmente. Se aplican propiedades como justify-content: space-between y align-items: center para organizar la distribución interna de los botones y del contenido general.

Jerarquía de componentes

La estructura sigue una progresión lógica: contenedor principal, cabecera, acciones (botones) y pie legal. Esto permite que el proyecto sea escalable y entendible de un vistazo.

Organización de clases (BEM)

Aunque no se aplica BEM de manera estricta, se percibe una separación clara entre bloques principales (card, action) y modificadores (button--facebook). Esto ayuda a mantener el CSS organizado y escalable.

Tipografía externa

Se integran fuentes de Google Fonts, permitiendo personalizar la identidad visual de la tarjeta de login sin depender de fuentes estándar del navegador.

Uso de unidades de viewport (vh)

Se emplea min-height: 100vh para asegurar que la tarjeta ocupe al menos el alto completo de la pantalla, facilitando su centrado vertical.

Puntos de atención

Semántica correcta

El uso de elementos como article y nav ayuda a definir correctamente las secciones del contenido, pero es importante revisar que los encabezados sigan una jerarquía coherente (h4, h5). En un proyecto mayor podría ser preferible mantener un flujo semántico más consistente.

Accesibilidad

Aunque los botones incluyen imágenes con atributo alt, sería recomendable que estos alt describan la acción que representan ("Iniciar sesión con email", "Iniciar sesión con Facebook") en vez de usar textos genéricos o muy breves. Esto mejora la experiencia de usuarios que utilizan lectores de pantalla.

Estandarización de nombres de clases

Algunos nombres de clases como card_legal-text no siguen estrictamente la convención de BEM (__ para elementos internos). Aunque funcionalmente no impacta, una nomenclatura estricta facilita la escalabilidad y mantenimiento en proyectos más grandes.

Adaptabilidad

Aunque la estructura general es responsiva por la naturaleza de Flexbox y el uso de vh, no se han añadido Media Queries específicas para mejorar el comportamiento en pantallas pequeñas. Sería recomendable considerar cómo se reestructuran los botones o textos en dispositivos móviles.

Mejoras sugeridas

Añadir efectos de interacción

Aplicar efectos :hover sobre los botones, como ligeras transiciones en el color de fondo o sombra (box-shadow), para enriquecer la experiencia de usuario.

Optimizar imágenes

Reemplazar los íconos de imágenes actuales por versiones SVG inline permitiría reducir la carga de recursos y mejorar la calidad visual en pantallas de alta densidad (retina).

Responsividad avanzada

Incorporar Media Queries que adapten el tamaño de los botones o cambien su disposición a vertical en móviles pequeños (< 480px) para mejorar la usabilidad.

Suavizar la interacción visual

Añadir transiciones CSS suaves (transition: all 0.3s ease) en cambios de color, sombra o escalado para crear una experiencia visual más fluida.