Introducción al proyecto (20 minutos)
Explicación:
El proyecto final consiste en crear una página web estática para un portafolio personal que muestre tus habilidades y personalidad. La página tendrá tres secciones:
- Inicio: Una bienvenida breve con tu nombre o un título impactante.
- Sobre mí: Información sobre ti (habilidades, intereses, experiencia).
- Contacto: Un formulario para que los visitantes puedan enviarte un mensaje.
Conceptos a usar:
- HTML semántico: <header>, <nav>, <main>, <section>, <footer>, <form>, etc. (Lección 4).
- CSS estilizado: Colores, fuentes, márgenes, y diseño atractivo (Lecciones 3-4).
- Diseño responsive: Media queries, unidades relativas (%, vw, rem), Flexbox (Lección 3).
- Accesibilidad: <label>, alt, contraste legible, navegación por teclado (Lección 4).
- Formularios: <input>, <button> para el contacto (Lección 2).
Estructura sugerida:
- Una sola página (index.html) con un menú de navegación que enlace a las secciones (usando anclas #).
- CSS interno (<style>) o externo (estilos.css) para estilizar.
- Secciones claras, separadas visualmente, que se adapten a móviles y escritorios.
Analogía: Tu portafolio es como una tarjeta de presentación digital: debe ser clara, atractiva y funcional en cualquier dispositivo, como una vista de Laravel que muestra datos de un usuario.
Punto clave: Este proyecto te prepara para Laravel, donde crearás vistas Blade con HTML/CSS similar, pero con datos dinámicos (por ejemplo, un formulario que envía datos a un controlador).
Actividad rápida (5 minutos):
En papel o VS Code, escribe un esquema de tu portafolio. Incluye:
- ¿Qué pondrás en cada sección? (Ejemplo: Inicio con nombre, Sobre mí con hobbies, Contacto con formulario).
- ¿Qué colores o estilo prefieres? (Ejemplo: Minimalista, color azul).
Solución sugerida: - Inicio: Título con mi nombre, fondo claro.
- Sobre mí: Foto, lista de habilidades, texto personal.
- Contacto: Formulario con nombre, email, mensaje.
- Estilo: Colores azul y blanco, fuente sans-serif, diseño limpio.
Diseño del portafolio (30 minutos)
Explicación:
Antes de escribir código, planifiquemos la estructura HTML y el diseño CSS para evitar errores y ahorrar tiempo.
Requisitos del portafolio:
- HTML semántico:
- <header>: Menú de navegación y título/logo.
- <main>: Contiene las secciones Inicio, Sobre mí, Contacto (usando <section> o <article>).
- <footer>: Información adicional (por ejemplo, copyright).
- Formulario en Contacto con al menos 3 campos (nombre, email, mensaje).
- CSS estilizado:
- Fuentes legibles, colores con buen contraste.
- Diseño limpio con márgenes/padding adecuados.
- Navegación fija o clara.
- Responsive:
- Usa Flexbox para alinear secciones.
- Media queries para ajustar el diseño en móviles (por ejemplo, apilar secciones, reducir tamaños).
- Unidades relativas (%, rem) para escalabilidad.
- Accesibilidad:
- <label> con for en formularios.
- alt en imágenes.
- Contraste legible y navegación por teclado.
Esqueleto HTML inicial:
<!DOCTYPE html>
<html lang="es">
<head>
<title>Mi Portafolio</title>
<style>
/* CSS se añadirá aquí */
</style>
</head>
<body>
<header>
<nav>
<a href="#inicio">Inicio</a>
<a href="#sobre-mi">Sobre mí</a>
<a href="#contacto">Contacto</a>
</nav>
</header>
<main>
<section id="inicio">
<h1>Bienvenido a mi portafolio</h1>
</section>
<section id="sobre-mi">
<h2>Sobre mí</h2>
</section>
<section id="contacto">
<h2>Contacto</h2>
<form>
<!-- Formulario aquí -->
</form>
</section>
</main>
<footer>
<p>© 2023 Mi Nombre</p>
</footer>
</body>
</html>
Plan de CSS:
- Header: Fondo fijo, menú horizontal (Flexbox), centrado.
- Secciones: Ancho máximo (por ejemplo, 800px), centradas, con padding.
- Formulario: Campos apilados, bordes claros, botón estilizado.
- Responsive: En móviles, menú vertical, secciones al 95% del ancho.
Punto clave: Planificar la estructura y el diseño primero es una práctica que usarás en Laravel para organizar vistas y estilos antes de añadir lógica.
Actividad rápida (5 minutos):
En papel o VS Code, escribe el HTML de la sección Inicio con un título y un párrafo corto. Solución sugerida:
<section id="inicio">
<h1>Hola, soy [Tu Nombre]</h1>
<p>Bienvenido a mi portafolio personal.</p>
</section>
Implementación del portafolio (1 hora 30 minutos)
Explicación:
Ahora escribiremos el código completo, integrando HTML semántico, CSS estilizado, diseño responsive y accesibilidad. Dividiremos el trabajo en partes: estructura HTML, CSS base, y ajustes responsive.
Paso 1: HTML semántico completo
Creamos la estructura con todas las secciones:
<!DOCTYPE html>
<html lang="es">
<head>
<title>Mi Portafolio Personal</title>
<style>
/* CSS se añadirá en el siguiente paso */
</style>
</head>
<body>
<header>
<h1>Mi Portafolio</h1>
<nav>
<a href="#inicio">Inicio</a>
<a href="#sobre-mi">Sobre mí</a>
<a href="#contacto">Contacto</a>
</nav>
</header>
<main>
<section id="inicio">
<h2>Hola, soy [Tu Nombre]</h2>
<p>Bienvenido a mi portafolio personal, donde comparto mis proyectos y habilidades.</p>
</section>
<section id="sobre-mi">
<h2>Sobre mí</h2>
<img src="https://via.placeholder.com/150" alt="Foto de perfil de [Tu Nombre]">
<p>Soy un apasionado del desarrollo web, con experiencia en HTML y CSS. Me gusta aprender y crear proyectos innovadores.</p>
<ul>
<li>Habilidad: Desarrollo frontend</li>
<li>Habilidad: Diseño responsive</li>
<li>Interés: Laravel y JavaScript</li>
</ul>
</section>
<section id="contacto">
<h2>Contacto</h2>
<form action="/enviar" method="post">
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre" placeholder="Tu nombre" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Tu correo" required>
<label for="mensaje">Mensaje:</label>
<textarea id="mensaje" name="mensaje" placeholder="Tu mensaje" rows="4" required></textarea>
<button type="submit">Enviar</button>
</form>
</section>
</main>
<footer>
<p>© 2023 [Tu Nombre]. Todos los derechos reservados.</p>
</footer>
</body>
</html>
Cómo funciona:
- <header>: Título y menú con enlaces ancla (#inicio, etc.).
- <main>: Contiene tres <section> para Inicio, Sobre mí, Contacto.
- Inicio: Título y párrafo breve.
- Sobre mí: Imagen (placeholder), texto, lista de habilidades/intereses.
- Contacto: Formulario con <textarea> para mensajes largos, <label> para accesibilidad, required para campos obligatorios.
- <footer>: Copyright simple.
Paso 2: CSS estilizado y responsive
Añadimos estilos para hacer la página atractiva y adaptable:
/* Dentro de <style> o en estilos.css */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
line-height: 1.6;
color: #333;
}
header {
background-color: #2c3e50;
color: white;
padding: 1rem;
text-align: center;
position: sticky;
top: 0;
}
header h1 {
font-size: 2rem;
margin-bottom: 0.5rem;
}
nav a {
color: white;
text-decoration: none;
margin: 0 1rem;
font-size: 1.1rem;
}
nav a:hover {
text-decoration: underline;
}
main {
max-width: 800px;
margin: 0 auto;
padding: 1rem;
}
section {
margin-bottom: 2rem;
}
#inicio, #sobre-mi, #contacto {
padding: 2rem;
background-color: #f9f9f9;
border-radius: 8px;
}
#inicio h2 {
font-size: 2.5rem;
color: #2c3e50;
}
#sobre-mi img {
max-width: 150px;
border-radius: 50%;
margin-bottom: 1rem;
}
#sobre-mi ul {
list-style: disc;
margin-left: 2rem;
}
form {
display: flex;
flex-direction: column;
}
label {
font-weight: bold;
margin-bottom: 0.3rem;
}
input, textarea {
margin-bottom: 1rem;
padding: 0.5rem;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 1rem;
}
button {
background-color: #2c3e50;
color: white;
padding: 0.7rem;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 1rem;
}
button:hover {
background-color: #34495e;
}
footer {
background-color: #2c3e50;
color: white;
text-align: center;
padding: 1rem;
margin-top: 2rem;
}
/* Responsive */
@media (max-width: 600px) {
header {
padding: 0.5rem;
}
header h1 {
font-size: 1.5rem;
}
nav a {
display: block;
margin: 0.5rem 0;
}
main {
padding: 0.5rem;
}
section {
padding: 1rem;
}
#inicio h2 {
font-size: 1.8rem;
}
#sobre-mi img {
max-width: 100px;
}
input, textarea, button {
font-size: 0.9rem;
}
}
Cómo funciona:
- General: box-sizing: border-box evita desbordes, fuente legible (Arial), colores oscuros con buen contraste.
- Header: Fondo azul oscuro, menú horizontal (Flexbox implícito), fijo con position: sticky.
- Main: Contenedor centrado (max-width: 800px), secciones con fondo claro y bordes redondeados.
- Formulario: Campos apilados (flex-direction: column), accesibles con <label> y bordes claros.
- Footer: Simple, con fondo oscuro.
- Responsive: En móviles (max-width: 600px), menú vertical, secciones más compactas, fuentes e imágenes más pequeñas.
Cómo probarlo:
- Crea un archivo index.html en VS Code.
- Copia el HTML y CSS (dentro de <style> o en estilos.css con <link rel="stylesheet" href="estilos.css">).
- Ábrelo en un navegador.
- Usa las herramientas de desarrollo (F12 > modo dispositivo) para simular móviles (por ejemplo, 320px o "iPhone SE").
- Prueba la accesibilidad: navega con Tab/Enter, verifica que los <label> funcionen, y usa la pestaña "Accessibility" en las herramientas de desarrollo.
- Alternativa: Pega en CodePen y ajusta el ancho de la vista previa.
Resultado esperado:
- Pantallas grandes (>600px): Menú horizontal, secciones centradas, formulario claro, imagen de perfil redonda.
- Pantallas móviles (≤600px): Menú vertical, secciones al 95% del ancho, elementos más compactos, todo legible.
- Accesibilidad: Formulario navegable por teclado, imagen con alt, texto con buen contraste.
Punto clave: Este diseño es similar a una vista Blade estática en Laravel, donde añadirías @yield o datos dinámicos.
Personalización y pruebas (30 minutos)
Explicación:
Con el código base funcionando, dedica tiempo a personalizar y probar:
- Personalización:
- Cambia el nombre, texto, y colores (por ejemplo, usa #e74c3c para rojo).
- Añade una imagen local en Sobre mí (guarda perfil.jpg en la misma carpeta y usa src="perfil.jpg").
- Modifica el formulario (por ejemplo, añade un campo para teléfono).
- Pruebas:
- Verifica responsividad en diferentes tamaños (320px, 768px, 1200px).
- Prueba accesibilidad: usa Tab para navegar, verifica <label> con clic, y revisa contraste.
- Abre en varios navegadores (Chrome, Firefox, Edge) para compatibilidad.
Ejemplo de personalización:
Cambiar colores y añadir una imagen local:
<img src="perfil.jpg" alt="Foto de [Tu Nombre]">
<style>
header, footer {
background-color: #e74c3c; /* Rojo */
}
button {
background-color: #e74c3c;
}
button:hover {
background-color: #c0392b;
}
</style>
Punto clave: Personalizar te ayuda a practicar CSS y a hacer el proyecto tuyo, una habilidad útil para diseñar vistas únicas en Laravel.
Actividad rápida (5 minutos):
Añade un campo extra al formulario de Contacto (por ejemplo, teléfono). Solución sugerida:
<label for="telefono">Teléfono:</label>
<input type="tel" id="telefono" name="telefono" placeholder="Tu teléfono">
Reflexión y mejoras (10 minutos)
Explicación:
Reflexionemos sobre lo aprendido y posibles mejoras:
- Logros:
- Usaste HTML semántico para estructurar un portafolio claro.
- Aplicaste CSS para estilizar y hacer el diseño responsive con Flexbox y media queries.
- Aseguraste accesibilidad con <label>, alt, y contraste.
- Creaste un proyecto completo, similar a una vista estática de Laravel.
- Mejoras posibles:
- Añadir un carrusel de proyectos con imágenes.
- Usar Google Fonts para tipografías personalizadas.
- Implementar animaciones CSS (por ejemplo, transiciones en el botón).
- Estas mejoras se explorarán en módulos futuros con JavaScript o frameworks como Bootstrap.
Actividad final (5 minutos):
Piensa en una mejora para tu portafolio (por ejemplo, un enlace a redes sociales). Escribe en papel o VS Code el código para añadirla. Ejemplo:
<footer>
<p>© 2025 [Tu Nombre]</p>
<a href="https://twitter.com/tu_usuario">Twitter</a>
</footer>
Entregable: Página responsive con HTML semántico y CSS estilizado
Requisitos:
- Un archivo index.html (y opcionalmente estilos.css) que contenga:
- HTML semántico:
- <header> con menú de navegación (<nav>).
- <main> con tres secciones: Inicio, Sobre mí, Contacto (usando <section>).
- <footer> con información básica.
- Formulario en Contacto con al menos 3 campos (nombre, email, mensaje), usando <label>, id, y required.
- CSS estilizado:
- Diseño atractivo (colores, fuentes legibles, márgenes/padding).
- Uso de Flexbox para alinear elementos (por ejemplo, menú o formulario).
- Contraste legible y bordes claros.
- Responsive:
- Media query para pantallas móviles (≤600px).
- Unidades relativas (%, rem) para escalabilidad.
- Secciones apiladas y legibles en móviles.
- Accesibilidad:
- <label> vinculadas con for e id.
- alt en imágenes.
- Navegación por teclado funcional.
- HTML semántico:
- La página debe verse bien en navegadores modernos y simular un portafolio profesional.
Instrucciones para completar:
- Usa el código proporcionado como base o crea tu propia versión.
- Personaliza el contenido:
- Añade tu nombre, texto real en Sobre mí, y colores de tu elección.
- Opcional: Incluye una imagen personal (con alt descriptivo).
- Prueba exhaustivamente:
- Verifica responsividad en móviles y escritorios.
- Navega el formulario con teclado.
- Revisa la estructura HTML con "Inspeccionar" (F12).
- Guarda el proyecto en una carpeta (por ejemplo, portafolio/) con index.html y, si usas CSS externo, estilos.css.
- Opcional: Añade una mejora creativa (por ejemplo, un enlace a GitHub, un fondo degradado).
Tiempo estimado: 2 horas dentro de la lección (implementación y pruebas) + 1 hora adicional para personalización o depuración.
Entregable: Archivo index.html (y opcionalmente estilos.css) funcional. Puedes compartir el código o describirlo para que lo revise.
Ejemplo de uso:
- En navegador: Una página con un menú clickable, un título atractivo en Inicio, una sección Sobre mí con imagen y lista, un formulario funcional en Contacto, y un pie de página.
- En móvil: Menú apilado, secciones ajustadas, formulario fácil de usar.
Consejo: Guarda copias de tu código (index_v1.html, index_v2.html) para experimentar sin miedo a romper algo.