¿Qué es CSS y el diseño responsive? (10 minutos)
Explicación:
CSS (Cascading Style Sheets) es el lenguaje que estiliza páginas HTML, controlando colores, tamaños, posiciones y más. Diseño responsive significa que una página se adapta automáticamente al tamaño de la pantalla (móvil, tableta, escritorio), mejorando la experiencia del usuario.
Por qué es importante:
- Los usuarios acceden a sitios web desde dispositivos variados (teléfonos, laptops, etc.).
- En Laravel, las vistas Blade usan CSS para estilizar formularios, tablas y otros elementos, asegurando que sean funcionales y atractivos en cualquier dispositivo.
Conceptos clave de esta lección:
- Media queries: Reglas CSS que aplican estilos según el tamaño de la pantalla.
- Unidades relativas: Tamaños que se ajustan al contexto (% para porcentaje, vw para ancho de ventana, rem para tamaño relativo a la fuente base).
- Flexbox: Sistema de diseño para alinear y distribuir elementos en un contenedor.
Cómo vincular CSS a HTML:
- Usa la etiqueta <style> dentro de <head> para CSS interno.
- O usa un archivo externo con <link>:
<link rel="stylesheet" href="estilos.css">
Analogía: Si HTML es el esqueleto y los músculos de una página, CSS es la ropa y el maquillaje: hace que todo se vea bien y se ajuste al contexto.
Punto clave: El diseño responsive es esencial para las vistas de Laravel, donde los usuarios esperan interfaces que funcionen en cualquier dispositivo.
Actividad rápida (2 minutos):
Piensa en una página web que uses en tu teléfono y en tu computadora (por ejemplo, una tienda online). Escribe en papel cómo cambia su diseño entre dispositivos. Ejemplo:
- En móvil: Menú compacto, imágenes más pequeñas.
- En escritorio: Menú desplegado, columnas múltiples.
Media queries y unidades relativas (15 minutes)
Explicación:
Media queries permiten aplicar estilos según condiciones, como el ancho de la pantalla. Unidades relativas hacen los tamaños flexibles, adaptándose al dispositivo.
Media queries:
- Sintaxis:
@media (max-width: 600px) { /* Estilos para pantallas de 600px o menos */ } - max-width: Aplica estilos si la pantalla es menor o igual al valor.
- min-width: Aplica si es mayor o igual.
Unidades relativas:
- %: Porcentaje del contenedor padre (por ejemplo, width: 50% es la mitad del ancho del padre).
- vw: Porcentaje del ancho de la ventana (1vw = 1% del ancho del viewport).
- rem: Múltiplo del tamaño de fuente base (por ejemplo, si la fuente base es 16px, 1rem = 16px).
Ejemplo práctico (como pide la lección):
Hacer que un contenedor se ajuste a pantallas pequeñas:
<!DOCTYPE html>
<html lang="es">
<head>
<title>Contenedor Responsive</title>
<style>
.contenedor {
width: 80%; /* 80% del ancho del padre */
max-width: 800px; /* No más ancho que 800px */
margin: 0 auto; /* Centrado */
background-color: lightblue;
padding: 1rem; /* 1rem = tamaño relativo a fuente base */
}
@media (max-width: 600px) {
.contenedor {
width: 95%; /* Más ancho en pantallas pequeñas */
padding: 0.5rem; /* Menos espacio */
background-color: lightgreen;
}
}
</style>
</head>
<body>
<div class="contenedor">
<h1>Mi Contenedor</h1>
<p>Este contenedor se ajusta a diferentes pantallas.</p>
</div>
</body>
</html>
Cómo funciona:
- .contenedor: Clase CSS para el <div>, con width: 80% y max-width: 800px para pantallas grandes.
- margin: 0 auto centra el contenedor.
- padding: 1rem usa una unidad relativa para el espacio interno.
- @media (max-width: 600px): En pantallas de 600px o menos, el contenedor usa width: 95%, menos padding, y cambia de color para mostrar el cambio.
Cómo probarlo:
- Crea un archivo responsive.html en VS Code.
- Copia el código y guárdalo.
- Ábrelo en un navegador.
- Usa las herramientas de desarrollo (F12 > icono de dispositivo o "Toggle Device Toolbar" en Chrome) para simular un móvil (por ejemplo, 320px).
- Alternativa: Pega en CodePen y ajusta el ancho de la vista previa.
Resultado esperado:
- En pantallas grandes (>600px): Contenedor azul claro, ocupa 80% del ancho (máximo 800px).
- En pantallas pequeñas (≤600px): Contenedor verde claro, ocupa 95% del ancho, con menos padding.
Punto clave: Media queries y unidades relativas son esenciales en Laravel para estilizar vistas que se adapten a cualquier dispositivo.
Actividad rápida (3 minutos):
Modifica el ejemplo (en papel o editor) para que el fondo sea rosa en pantallas de 400px o menos. Solución sugerida:
@media (max-width: 400px) {
.contenedor {
background-color: pink;
}
}
Flexbox básico (15 minutos)
Explicación:
Flexbox es un sistema de diseño CSS que organiza elementos en un contenedor, alineándolos fácilmente en filas o columnas. Es ideal para layouts responsive.
Propiedades clave:
- En el contenedor:
- display: flex;: Activa Flexbox.
- flex-direction: row | column;: Define si los elementos se apilan horizontal o verticalmente.
- justify-content: Alinea elementos en el eje principal (por ejemplo, space-between, center).
- align-items: Alinea en el eje secundario (por ejemplo, center, stretch).
- En los elementos hijos:
- flex: 1;: Hace que los elementos crezcan/reduzcan proporcionalmente.
Ejemplo con Flexbox:
Añadimos Flexbox al contenedor anterior para alinear elementos hijos:
<!DOCTYPE html>
<html lang="es">
<head>
<title>Flexbox Responsive</title>
<style>
.contenedor {
width: 80%;
max-width: 800px;
margin: 0 auto;
background-color: lightblue;
padding: 1rem;
display: flex; /* Activa Flexbox */
flex-direction: row; /* Elementos en fila */
justify-content: space-between; /* Espacio entre elementos */
align-items: center; /* Centrado vertical */
}
.item {
background-color: white;
padding: 0.5rem;
}
@media (max-width: 600px) {
.contenedor {
width: 95%;
flex-direction: column; /* Cambia a columna en móviles */
align-items: stretch; /* Estira elementos */
}
.item {
margin-bottom: 0.5rem; /* Espacio entre elementos */
}
}
</style>
</head>
<body>
<div class="contenedor">
<div class="item">Elemento 1</div>
<div class="item">Elemento 2</div>
<div class="item">Elemento 3</div>
</div>
</body>
</html>
Cómo funciona:
- display: flex hace que los <div class="item"> se alineen en una fila.
- justify-content: space-between distribuye espacio entre ellos.
- En pantallas pequeñas (max-width: 600px), flex-direction: column apila los elementos verticalmente.
Cómo probarlo:
- Guarda como flexbox.html y ábrelo en un navegador.
- Usa las herramientas de desarrollo para simular pantallas pequeñas.
- En CodePen, ajusta el ancho de la vista previa.
Resultado esperado:
- Pantallas grandes: Tres elementos en fila, espaciados uniformemente.
- Pantallas pequeñas: Elementos apilados verticalmente, ocupando todo el ancho.
Punto clave: Flexbox simplifica layouts responsive, y lo usarás en Laravel para alinear formularios, menús o secciones.
Actividad rápida (3 minutos):
Modifica el ejemplo (en papel o editor) para centrar los elementos horizontalmente en pantallas grandes. Solución sugerida:
.contenedor {
justify-content: center;
}
Resumen y preparación para la tarea (20 minutos)
Resumen:
- CSS responsive: Usa media queries (@media) para estilos condicionales.
- Unidades relativas: %, vw, rem hacen los diseños flexibles.
- Flexbox: display: flex, flex-direction, justify-content, align-items para alinear elementos.
- Estos conceptos aseguran que las vistas de Laravel se vean bien en cualquier dispositivo.
Preparación para la tarea:
La tarea pide hacer que el formulario de registro de la Lección 2 (con 4 campos) sea responsive en móviles. Recordemos el formulario base:
<!DOCTYPE html>
<html lang="es">
<head>
<title>Formulario de Registro</title>
</head>
<body>
<h1>Regístrate</h1>
<form action="/registro" method="post">
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre" placeholder="Tu nombre">
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Tu correo">
<label for="contrasena">Contraseña:</label>
<input type="password" id="contrasena" name="contrasena" placeholder="Tu contraseña">
<label for="edad">Edad:</label>
<input type="number" id="edad" name="edad" placeholder="Tu edad">
<button type="submit">Registrarse</button>
</form>
</body>
</html>
Objetivo de la tarea:
- Usar CSS para que el formulario sea legible y funcional en móviles (por ejemplo, campos más anchos, apilados verticalmente).
- Aplicar media queries, unidades relativas, y opcionalmente Flexbox.
Estrategia sugerida:
- Envolver el formulario en un contenedor con width: 80% y max-width.
- Usar display: flex y flex-direction: column para apilar campos.
- En móviles (max-width: 600px), hacer que los campos ocupen el 100% del ancho.
- Ajustar el tamaño de fuente o padding con rem.
Tarea práctica: Haz que tu formulario sea responsive en móviles
Instrucciones:
- Toma el formulario de la Lección 2 (registro.html) con 4 campos (por ejemplo, nombre, email, contraseña, edad).
- Añade CSS para hacerlo responsive, asegurando que:
- En pantallas grandes, el formulario sea centrado y compacto (por ejemplo, ancho del 50-80%).
- En pantallas móviles (≤600px), los campos se apilen verticalmente y ocupen casi todo el ancho.
- Usa al menos una media query, unidades relativas (% o rem), y opcionalmente Flexbox.
- Usa el siguiente código como guía:
<!DOCTYPE html>
<html lang="es">
<head>
<title>Formulario de Registro</title>
<style>
.contenedor {
width: 80%;
max-width: 600px;
margin: 0 auto;
padding: 1rem;
display: flex;
flex-direction: column;
}
label, input, button {
margin-bottom: 0.5rem;
font-size: 1rem;
}
input, button {
width: 100%;
padding: 0.5rem;
box-sizing: border-box; /* Evita desbordes */
}
@media (max-width: 600px) {
.contenedor {
width: 95%;
padding: 0.5rem;
}
input, button {
font-size: 0.9rem;
}
}
</style>
</head>
<body>
<div class="contenedor">
<h1>Regístrate</h1>
<form action="/registro" method="post">
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre" placeholder="Tu nombre">
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Tu correo">
<label for="contrasena">Contraseña:</label>
<input type="password" id="contrasena" name="contrasena" placeholder="Tu contraseña">
<label for="edad">Edad:</label>
<input type="number" id="edad" name="edad" placeholder="Tu edad">
<button type="submit">Registrarse</button>
</form>
</div>
</body>
</html>
- Prueba el archivo:
- Guarda como registro_responsive.html.
- Ábrelo en un navegador.
- Usa las herramientas de desarrollo (F12 > modo dispositivo) para simular un móvil (por ejemplo, 320px o "iPhone SE").
- Verifica que los campos sean legibles, apilados y ocupen el ancho adecuado.
- Alternativa: Pega en CodePen y ajusta el ancho de la vista previa.
Ejemplo de solución esperada:
El código anterior es funcional. En el navegador:
- Pantallas grandes (>600px): Formulario centrado, ocupa ~80% del ancho, campos apilados con espacio claro.
- Pantallas móviles (≤600px): Formulario ocupa 95% del ancho, campos más compactos, fuente ligeramente más pequeña para mejor legibilidad.
Tiempo estimado: 30-40 minutos (puedes hacerlo después de la lección).
Entregable: Archivo registro_responsive.html con un formulario responsive. Puedes compartir el código o describirlo para que lo revise.
Consejo: Usa las herramientas de desarrollo del navegador para probar diferentes anchos (400px, 768px, etc.) y asegúrate de que el formulario sea usable en todos.