ejer2




 


Aquí tienes ambos módulos completos con documentación exhaustiva línea por línea en el CSS, más una explicación detallada de cómo funcionan y una guía de aprendizaje y memorización.

📄 MÓDULO 1: Formulario de Ingreso Secretaria

html
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ingreso Secretaria</title>
    
    <style>
        /* ============================================================ */
        /* DOCUMENTACIÓN COMPLETA - CADA LÍNEA DE CSS EXPLICADA        */
        /* ============================================================ */
        
        /* ===== CONTENEDOR PRINCIPAL (centra la tarjeta en pantalla) ===== */
        .cont-secre {
            padding-top: 10px;                  /* Espacio superior de 10px antes de la tarjeta */
            border: 1px solid red;              /* Borde rojo (útil para depuración/ver límites) */
            display: flex;                      /* Activa Flexbox para centrar horizontalmente */
            justify-content: center;            /* Centra el contenido hijo (.card-secre) horizontalmente */
        }

        /* ===== TARJETA PRINCIPAL (card) ===== */
        .card-secre {
            border: 1px solid #ddd;             /* Borde gris claro alrededor de toda la tarjeta */
            background-color: white;            /* Fondo blanco para la tarjeta */
            display: flex;                      /* Activa Flexbox para organizar el contenido interno */
            flex-direction: column;             /* Apila los elementos VERTICALMENTE: header → body → footer */
            border-radius: 8px;                 /* Bordes redondeados (esquinas suaves) */
            box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Sombra sutil: 0px horizontal, 4px vertical, 8px difuminado */
                                                /* rgba(0,0,0,0.1) = negro con 10% de opacidad */
        }

        /* ===== ENCABEZADO DE LA TARJETA ===== */
        .secre-header {
            background-color: #f8f9fa;          /* Fondo gris muy claro para diferenciar el encabezado */
            border-bottom: 1px solid #dee2e6;   /* Línea divisoria gris debajo del encabezado */
            padding: 20px;                      /* Espacio interno de 20px en todos los lados */
            text-align: center;                 /* Centra el texto horizontalmente */
            border-radius: 8px 8px 0 0;         /* Bordes redondeados SOLO arriba: arriba-izq, arriba-der, abajo-izq, abajo-der */
                                                /* Así el encabezado se funde con el borde redondeado de la tarjeta */
        }

        /* ===== CUERPO DE LA TARJETA (contiene el formulario) ===== */
        .secre-body {
            padding: 30px 20px;                 /* Relleno: 30px arriba/abajo, 20px izquierda/derecha */
            text-align: center;                 /* Centra el texto horizontalmente */
        }

        /* ===== PIE DE LA TARJETA (contiene el enlace "Volver") ===== */
        .secre-footer {
            padding: 20px;                      /* Espacio interno de 20px en todos los lados */
            border-top: 1px solid #dee2e6;      /* Línea divisoria gris encima del pie */
            text-align: center;                 /* Centra el contenido horizontalmente */
        }

        /* ===== CONTENEDOR DE CADA CAMPO DEL FORMULARIO ===== */
        .form-group {
            margin-bottom: 20px;                /* Separación inferior de 20px entre campos */
            text-align: left;                   /* Alinea las etiquetas y campos a la izquierda */
        }

        /* Estilo de las etiquetas (labels) de los campos */
        .form-group label {
            display: block;                     /* La etiqueta ocupa toda la línea (apila arriba del input) */
            margin-bottom: 8px;                 /* Separación inferior entre la etiqueta y el input */
            font-weight: bold;                  /* Texto en negrita para destacar */
            color: #333;                        /* Color gris oscuro (casi negro) */
        }

        /* Estilo de los campos de entrada (input) */
        .form-group input {
            width: 100%;                        /* El input ocupa el 100% del ancho disponible */
            padding: 10px;                      /* Espacio interno para hacer el campo más cómodo */
            border: 1px solid #ddd;             /* Borde gris claro por defecto */
            border-radius: 4px;                 /* Bordes ligeramente redondeados */
            font-size: 14px;                    /* Tamaño de fuente estándar */
            box-sizing: border-box;             /* Incluye padding y borde en el width:100% */
                                                /* Sin esto, el input sería más ancho que su contenedor */
        }

        /* Efecto visual cuando el usuario hace clic en un campo (focus) */
        .form-group input:focus {
            outline: none;                      /* Elimina el borde azul predeterminado del navegador */
            border-color: #007bff;              /* Cambia el borde a azul cuando el campo está activo */
        }

        /* ===== BOTÓN DE INGRESO ===== */
        .btn-ingreso {
            background-color: #007bff;          /* Fondo azul (color corporativo de Bootstrap) */
            color: white;                       /* Texto blanco para contraste */
            border: none;                       /* Sin borde (el color de fondo ya define el botón) */
            padding: 12px 30px;                 /* Relleno: 12px arriba/abajo, 30px izquierda/derecha */
            border-radius: 4px;                 /* Bordes ligeramente redondeados */
            cursor: pointer;                    /* Cambia el cursor a "mano" al pasar sobre el botón */
            font-size: 16px;                    /* Tamaño de fuente ligeramente mayor */
            width: 100%;                        /* El botón ocupa todo el ancho disponible */
        }

        /* Efecto hover (cuando el mouse pasa por encima) */
        .btn-ingreso:hover {
            background-color: #0056b3;          /* Oscurece el azul para feedback visual */
        }

        /* ===== TÍTULO DEL ENCABEZADO ===== */
        .secre-header h1 {
            margin: 0;                          /* Elimina el margen por defecto del h1 */
            font-size: 24px;                    /* Tamaño de fuente específico */
            color: #333;                        /* Color gris oscuro */
        }

        /* ===== PÁRRAFO DEL CUERPO ===== */
        .secre-body p {
            color: #666;                        /* Color gris más claro para texto secundario */
            margin-bottom: 20px;                /* Separación inferior antes del formulario */
        }
        /* ============================================================ */
        /* RESUMEN DEL FUNCIONAMIENTO:                                 */
        /* - .cont-secre: contenedor flex que centra la tarjeta        */
        /* - .card-secre: tarjeta blanca con sombra y bordes redondeados */
        /* - Flexbox layout vertical: header → body → footer           */
        /* - Formulario con campos estilizados y botón de envío        */
        /* - El formulario envía datos a "ingresoSecretaria.php"       */
        /* ============================================================ */
    </style>
</head>
<body>

    <!-- CONTENEDOR PRINCIPAL: centra toda la tarjeta en la pantalla -->
    <div class="cont-secre">
        
        <!-- TARJETA PRINCIPAL: contiene todo el formulario -->
        <div class="card-secre">
            
            <!-- ENCABEZADO: título de la sección -->
            <div class="secre-header">
                <h1>INGRESO SECRETARIA</h1>
            </div>
            
            <!-- CUERPO: formulario de ingreso -->
            <div class="secre-body">
                <p>Ingrese sus credenciales</p>
                
                <!-- Formulario que envía datos a ingresoSecretaria.php mediante método POST -->
                <form action="ingresoSecretaria.php" method="POST">
                    
                    <!-- Campo de usuario -->
                    <div class="form-group">
                        <label for="usuario">Usuario:</label>
                        <input type="text" id="usuario" name="usuario" required>
                        <!-- required: el navegador exige que se complete este campo -->
                    </div>
                    
                    <!-- Campo de contraseña -->
                    <div class="form-group">
                        <label for="password">Contraseña:</label>
                        <input type="password" id="password" name="password" required>
                        <!-- type="password" oculta los caracteres escritos -->
                    </div>
                    
                    <!-- Botón de envío -->
                    <button type="submit" class="btn-ingreso">Ingresar</button>
                </form>
            </div>
            
            <!-- PIE: enlace para volver al inicio -->
            <div class="secre-footer">
                <a href="index.php">Volver al inicio</a>
            </div>
            
        </div>
    </div>

</body>
</html>

📄 MÓDULO 2: Menú de Selección

html
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Seleccionar · Menú Principal</title>
    
    <style>
        /* ============================================================ */
        /* DOCUMENTACIÓN COMPLETA - CADA LÍNEA DE CSS EXPLICADA        */
        /* ============================================================ */
        
        /* ===== CONTENEDOR PRINCIPAL (centra la tarjeta) ===== */
        .cont-selec {
            padding-top: 10px;                  /* Espacio superior de 10px antes de la tarjeta */
            border: 1px solid red;              /* Borde rojo (útil para depuración/ver límites) */
            display: flex;                      /* Activa Flexbox para centrar horizontalmente */
            justify-content: center;            /* Centra el contenido hijo (.card-selec) horizontalmente */
        }

        /* ===== TARJETA PRINCIPAL ===== */
        .card-selec {
            border: 5px solid green;            /* Borde verde de 5px de grosor (más grueso que la otra tarjeta) */
                                                /* Esto la hace visualmente diferente */
            background-color: white;            /* Fondo blanco para la tarjeta */
            display: flex;                      /* Activa Flexbox para organización interna */
            flex-direction: column;             /* Apila elementos verticalmente: header → body → footer */
            border-radius: 8px;                 /* Bordes redondeados de 8px */
        }

        /* ===== ENCABEZADO DE LA TARJETA ===== */
        .selec-header {
            background-color: #f8f9fa;          /* Fondo gris muy claro */
            border-bottom: 1px slid #dee2e6;    /* ¡ERROR TYPO! "slid" debería ser "solid" */
                                                /* Como está mal escrito, NO se aplica la línea inferior */
                                                /* En una corrección sería: border-bottom: 1px solid #dee2e6; */
        }

        /* ===== CUERPO DE LA TARJETA ===== */
        .selec-body {
            text-align: center;                 /* Centra el texto horizontalmente */
            /* NOTA: No tiene padding, el texto queda pegado a los bordes */
        }

        /* ===== PIE DE LA TARJETA (contiene el botón) ===== */
        .selec-footer {
            padding: 20px 20px 0 20px;          /* Relleno: 20px arriba, 20px derecha, 0px abajo, 20px izquierda */
                                                /* Abajo tiene 0px para que no haya espacio extra después del botón */
        }
        
        /* ===== NOTA SOBRE ESTILOS FALTANTES ===== */
        /* Este módulo NO tiene estilos para:                             */
        /* - Título h1 (usa estilos del navegador por defecto)            */
        /* - Párrafo p (usa estilos del navegador por defecto)            */
        /* - Botón (usa estilos del navegador por defecto)                */
        /* - Enlaces (usa estilos del navegador por defecto)              */
        /*                                                               */
        /* Para mejor apariencia, se recomienda añadir:                   */
        /* .selec-header h1 { margin: 15px; font-size: 24px; }           */
        /* .selec-body p { color: #666; padding: 20px; }                 */
        /* button { background-color: #007bff; color: white; ... }       */
        /* ============================================================ */
    </style>
</head>
<body>

    <!-- CONTENEDOR PRINCIPAL: centra la tarjeta horizontalmente -->
    <div class="cont-selec">
        
        <!-- TARJETA PRINCIPAL -->
        <div class="card-selec">

            <!-- ENCABEZADO: título de selección -->
            <div class="selec-header">
                <h1>SELECCIONAR</h1>
                <!-- NOTA: Este h1 usa los estilos por defecto del navegador -->
            </div>

            <!-- CUERPO: mensaje de bienvenida -->
            <div class="selec-body">
                <p>Bienvenido al menú principal</p>
                <!-- NOTA: Este párrafo usa los estilos por defecto del navegador -->
            </div>

            <!-- PIE: botón para navegar a otra página -->
            <div class="selec-footer">
                <!-- Enlace que envuelve un botón -->
                <a href="index.php?action=ingresoS">
                    <button>Ir a otra página</button>
                    <!-- NOTA: Este botón usa los estilos por defecto del navegador -->
                </a>
            </div>

        </div>

    </div>

</body>
</html>

📖 EXPLICACIÓN DETALLADA DE CÓMO FUNCIONAN

Comparativa de los dos módulos

CaracterísticaMódulo 1: Ingreso SecretariaMódulo 2: Selección
PropósitoFormulario de autenticaciónMenú de navegación simple
EstructuraHeader + Body + FooterHeader + Body + Footer
Contenido BodyFormulario (2 campos + botón)Texto de bienvenida
Contenido FooterEnlace "Volver al inicio"Botón "Ir a otra página"
EstilosCompletos y detalladosMínimos (casi por defecto)
Borde tarjeta1px sólido gris (#ddd)5px sólido verde
SombraSí (box-shadow)No
InteractividadHover en botón, focus en inputsSin estilos interactivos

Arquitectura visual de cada módulo

text
MÓDULO 1 (Ingreso)                    MÓDULO 2 (Selección)
┌─────────────────────────┐          ┌─────────────────────────┐
│  ┌───────────────────┐  │          │  ┌───────────────────┐  │
│  │   HEADER          │  │          │  │   HEADER          │  │
│  │ "INGRESO SECRETARIA"│          │  │ "SELECCIONAR"     │  │
│  └───────────────────┘  │          │  └───────────────────┘  │
│  ┌───────────────────┐  │          │  ┌───────────────────┐  │
│  │   BODY            │  │          │  │   BODY            │  │
│  │ • Texto instruc.  │  │          │  │ "Bienvenido..."   │  │
│  │ • Campo Usuario   │  │          │  └───────────────────┘  │
│  │ • Campo Password  │  │          │  ┌───────────────────┐  │
│  │ • Botón Ingresar  │  │          │  │   FOOTER          │  │
│  └───────────────────┘  │          │  │ [Botón]           │  │
│  ┌───────────────────┐  │          │  └───────────────────┘  │
│  │   FOOTER          │  │          └─────────────────────────┘
│  │ "Volver al inicio"│  │          
│  └───────────────────┘  │          
└─────────────────────────┘

🧠 CÓMO APRENDER Y MEMORIZAR ESTA TÉCNICA

1. Patrón común: Tarjeta (Card) con Flexbox vertical

Ambos módulos siguen el mismo PATRÓN DE DISEÑO:

css
/* PLANTILLA DE TARJETA REUTILIZABLE */
.contenedor-externo {
    display: flex;              /* Para centrar */
    justify-content: center;    /* Centrado horizontal */
}

.tarjeta {
    display: flex;              /* Para organización interna */
    flex-direction: column;     /* Apilar verticalmente */
    background-color: white;
    border-radius: 8px;
}

.header { /* estilos del encabezado */ }
.body { /* estilos del cuerpo */ }
.footer { /* estilos del pie */ }

Regla mnemotécnica: "C-T-H-B-F"

  • Contenedor (centra)

  • Tarjeta (el rectángulo blanco)

  • Header (título)

  • Body (contenido principal)

  • Footer (acciones al final)

2. Propiedades clave que debes memorizar

PropiedadValorQué haceCuándo usarla
display: flex-Activa FlexboxEn cualquier contenedor que quieras alinear
justify-contentcenterCentra horizontalmentePara centrar tarjetas o elementos
flex-directioncolumnApila verticalmentePara organizar header/body/footer
box-shadow0 4px 8px rgba(0,0,0,0.1)Añade profundidadPara que la tarjeta "flote"
border-radius8pxEsquinas redondeadasPara diseño moderno y amigable
box-sizing: border-box-Incluye padding en width¡Siempre en inputs para que quepan!

3. Analogías para recordar

Analogía de la tarjeta postal

Imagina una tarjeta postal:

  • El sobre (.cont-secre) es lo que la contiene y la centra

  • La tarjeta en sí (.card-secre) tiene borde y fondo blanco

  • La parte superior (.secre-header) tiene el título como el encabezado de una carta

  • El cuerpo (.secre-body) es donde escribes el mensaje (o formulario)

  • El pie (.secre-footer) es donde pones la despedida o acciones

Analogía del edificio

  • .cont-secre = el terreno donde se construye

  • .card-secre = el edificio (estructura principal)

  • flex-direction: column = los pisos (uno arriba del otro)

  • header = recepcion (primer piso)

  • body = oficinas (segundo piso - contenido)

  • footer = estacionamiento (último piso - acciones)

4. Ejercicios prácticos para memorizar

📝 Ejercicio 1 (5 min) - Crea una tarjeta desde cero

Escribe SOLO la estructura mínima:

html
<style>
    .container { display: flex; justify-content: center; }
    .card { display: flex; flex-direction: column; border: 1px solid #ddd; border-radius: 8px; }
    .header { padding: 20px; background: #f8f9fa; }
    .body { padding: 30px; }
    .footer { padding: 20px; border-top: 1px solid #ddd; text-align: center; }
</style>

<div class="container">
    <div class="card">
        <div class="header">Título</div>
        <div class="body">Contenido</div>
        <div class="footer">Acciones</div>
    </div>
</div>

🎯 Ejercicio 2 (10 min) - Mejora el Módulo 2

El Módulo 2 tiene estilos incompletos. Complétalo:

css
/* Agrega estos estilos al Módulo 2 */
.selec-header h1 {
    margin: 15px 0;
    font-size: 24px;
    text-align: center;
}

.selec-body p {
    padding: 20px;
    color: #666;
}

.selec-footer button {
    background-color: #28a745;  /* Verde en lugar de azul */
    color: white;
    border: none;
    padding: 12px 30px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    width: 100%;
}

.selec-footer button:hover {
    background-color: #218838;
}

🔄 Ejercicio 3 (15 min) - Crea un tercer módulo

Crea una "Tarjeta de Perfil de Usuario" con:

  • Header: foto de perfil y nombre

  • Body: datos de contacto (email, teléfono)

  • Footer: botones "Editar" y "Eliminar"

5. Errores comunes que debes memorizar

❌ Error✅ Solución¿Por qué pasa?
Olvidar box-sizing: border-box en inputsAñadirlo al input o al reset universal *El width:100% no incluye padding por defecto
Poner border: 1px slid (typo)border: 1px solid"slid" no es una palabra clave válida
No poner justify-content: centerAñadirlo al contenedor flexLos hijos se quedan a la izquierda
Usar <a><button></button></a>Usar solo <button> o estilizar el <a> como botónEl botón dentro de enlace es HTML inválido
Olvidar cursor: pointer en botonesAñadirloEl cursor no cambia a "mano"

6. Diferencias clave entre módulos para recordar

ElementoMódulo 1 (Completo)Módulo 2 (Simple)
Borde tarjeta1px solid #ddd (sutil)5px solid green (llamativo)
SombraSí (box-shadow)No
Padding en body30px 20pxNinguno
Estilo de inputsSí (border, focus, padding)No hay inputs
Estilo de botonesSí (hover, colores)No (usa estilo por defecto)

7. Checklist de verificación rápida

Para crear una tarjeta correctamente:

  • ¿El contenedor externo tiene display: flex y justify-content: center?

  • ¿La tarjeta tiene display: flex y flex-direction: column?

  • ¿La tarjeta tiene border-radius para esquinas redondeadas?

  • ¿Header, Body y Footer están en el orden correcto?

  • ¿Los inputs tienen box-sizing: border-box?

  • ¿Los botones tienen cursor: pointer y efecto :hover?

8. Resumen final en 4 líneas (para memorizar)

css
/* Contenedor centrador */
.container { display: flex; justify-content: center; }

/* Tarjeta apilada */
.card { display: flex; flex-direction: column; border-radius: 8px; background: white; }

/* Partes de la tarjeta */
.header { padding: 20px; background: #f8f9fa; }
.body { padding: 30px 20px; }
.footer { padding: 20px; border-top: 1px solid #ddd; text-align: center; }

🎓 Plan de estudio para dominar tarjetas en 3 días

DíaActividadTiempo
Día 1Copia el Módulo 1, modifica colores y texto15 min
Día 2Mejora el Módulo 2 (agrega los estilos faltantes)10 min
Día 3Crea una tarjeta nueva para "Registro de Usuario"15 min

La clave está en reconocer el patrón: contenedor centrador → tarjeta apilada → header/body/footer

Comentarios

Publicar un comentario

Entradas más populares de este blog

Tutorial de CSS: De Cero a Estilizar tu Primera Página Web

1. ¿Qué es CSS? CSS son las siglas de  Cascading Style Sheets  (Hojas de Estilo en Cascada). Es un lenguaje que usamos para describir la  presentación  de un documento escrito en HTML. Mientras que HTML se encarga de la estructura y el contenido (títulos, párrafos, imágenes), CSS se encarga de cómo se ve ese contenido (colores, fuentes, tamaños, posición). 2. ¿Cómo se integra CSS con HTML? Hay tres formas principales de incluir CSS en tu proyecto: CSS en línea (Inline):  Se aplica directamente a una etiqueta HTML usando el atributo  style . Es el método menos recomendado porque mezcla contenido con presentación y es difícil de mantener. html < p style = " color : blue ; font-size : 18px ; " > Este es un párrafo azul. </ p > CSS interno (Internal):  Se escribe dentro de la etiqueta  <style>  en la sección  <head>  del documento HTML. Es útil para páginas individuales o para hacer pruebas rápidas. html <...
Leer más

layouts

   "Explica el siguiente código HTML y CSS poniendo especial énfasis en: La maquetación de cajas : cómo se estructuran visualmente cada uno de los elementos (body, tarjeta, imagen, textos, botón). El flujo natural de las cajas : cómo se comportan los elementos en el flujo por defecto (elementos de bloque vs. en línea) y cómo se van posicionando unos respecto a otros. La agrupación de elementos : cómo se relacionan visualmente los elementos que están dentro de un mismo contenedor. La jerarquía padre-hijo : cómo afectan las propiedades del elemento padre a sus hijos directos e indirectos (herencia, contención, y cómo el espacio del padre condiciona el espacio de los hijos). f Tutorial: Creando una Plantilla de Registro HTML/CSS Objetivo del Proyecto Vamos a crear la estructura básica de una página web que contiene: Un menú de navegación con 4 opciones. Un formulario de registro de usuario. Estilos CSS para que todo se vea ordenado y profesional. Paso 1: Entendiendo la Estructura...
Leer más

Proyecto Práctico: Tarjeta de Perfil

"Explica el siguiente código HTML y CSS poniendo especial énfasis en: La maquetación de cajas : cómo se estructuran visualmente cada uno de los elementos (body, tarjeta, imagen, textos, botón). El flujo natural de las cajas : cómo se comportan los elementos en el flujo por defecto (elementos de bloque vs. en línea) y cómo se van posicionando unos respecto a otros. La agrupación de elementos : cómo se relacionan visualmente los elementos que están dentro de un mismo contenedor. La jerarquía padre-hijo : cómo afectan las propiedades del elemento padre a sus hijos directos e indirectos (herencia, contención, y cómo el espacio del padre condiciona el espacio de los hijos).    Creando una Tarjeta de Perfil con HTML y CSS Descripción del Proyecto Vamos a crear una tarjeta de perfil profesional que contiene: Foto de perfil circular Nombre de la persona Descripción breve Ubicación Botón interactivo con efectos Al final, tendremos una tarjeta moderna y responsive que se centra en la pa...
Leer más