En este artículo, te propondré un ejercicio práctico de HTML y CSS para que puedas evaluar los conocimientos adquiridos a lo largo del curso de Lenguajes de Marcas en el desarrollo de aplicaciones web (DAW). Este ejercicio está diseñado para poner a prueba tanto tus habilidades de estructuración en HTML como de diseño en CSS, mediante la creación de una página web funcional y estéticamente atractiva.
Objetivo del Ejercicio
El objetivo es desarrollar una página web completa que represente un portfolio personal. La estructura y diseño deben reflejar un nivel avanzado de HTML y CSS, demostrando comprensión de etiquetas semánticas, estructuras flexibles, y estilos responsivos.
Instrucciones del Ejercicio
A continuación, se detallan los requisitos que debe cumplir la página web. Es importante que cada aspecto esté bien implementado, ya que la evaluación se basará en los detalles técnicos, la estructura del código, la estética visual y la funcionalidad de la página.
1. Estructura HTML
- La página debe tener las siguientes secciones:
- Cabecera: Incluye el nombre del portafolio y un menú de navegación.
- Sobre Mí: Un breve párrafo que explique quién eres, tus intereses y tus habilidades.
- Portafolio: Una galería con al menos cuatro proyectos, cada uno con un nombre, una imagen y una breve descripción.
- Contacto: Un formulario con campos para el nombre, el correo electrónico y un mensaje.
- Etiquetas Semánticas: Utiliza etiquetas como
<header>,<nav>,<main>,<section>,<article>,<footer>para hacer que el HTML sea más comprensible y semántico. - SEO: Añade etiquetas
metapara descripción, palabras clave y autor en el<head>, además de un título descriptivo para la página.
2. Estilos CSS
- Diseño Responsivo: La página debe ser completamente responsiva, adaptándose a pantallas de móviles, tabletas y escritorios. Utiliza
@media queriespara ajustar los estilos según el tamaño de pantalla. - Flexbox y/o Grid: Aplica Flexbox o CSS Grid para crear un diseño moderno y bien organizado en la disposición de los elementos.
- Animaciones: Añade una animación simple en el botón de envío del formulario o en las imágenes del portafolio.
- Paleta de Colores y Tipografía: Utiliza una paleta de colores equilibrada y fuentes compatibles para mejorar la experiencia visual. Puedes emplear Google Fonts para tipografías.
3. Código CSS Avanzado
- Variables CSS: Define y usa variables CSS (
--color-primario,--color-secundario,--fuente-principal, etc.) para gestionar los colores y las fuentes. - Pseudoelementos y Pseudoclases: Emplea pseudoelementos como
::beforey::afterpara añadir detalles estéticos, y pseudoclases como:hoverpara mejorar la interactividad. - Sombra y Transiciones: Usa sombras y transiciones suaves en elementos interactivos, como botones e imágenes, para darle un toque más profesional.
4. Requisitos Adicionales
- Validación de Formulario: Asegúrate de que el formulario de contacto incluya validación en los campos de nombre y correo electrónico.
- Accesibilidad: Agrega atributos
ariadonde sea necesario para mejorar la accesibilidad de la página. - Comentarios en el Código: Incluye comentarios en HTML y CSS para explicar ciertas secciones del código, especialmente aquellas que pueden parecer avanzadas o específicas para ciertos dispositivos.
Ejemplo de Estructura HTML y CSS
HTML Básico
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="description" content="Portafolio de desarrollo web">
<meta name="keywords" content="HTML, CSS, Portafolio, DAW">
<meta name="author" content="Tu Nombre">
<title>Portafolio de Desarrollo Web</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Portafolio de [Tu Nombre]</h1>
<nav>
<ul>
<li><a href="#sobre-mi">Sobre Mí</a></li>
<li><a href="#portafolio">Portafolio</a></li>
<li><a href="#contacto">Contacto</a></li>
</ul>
</nav>
</header>
<!-- Agrega las demás secciones aquí -->
</body>
</html>CSS Básico
:root {
--color-primario: #3498db;
--color-secundario: #2ecc71;
--fuente-principal: 'Roboto', sans-serif;
}
body {
font-family: var(--fuente-principal);
margin: 0;
padding: 0;
color: #333;
}
header {
background-color: var(--color-primario);
color: white;
padding: 1em;
text-align: center;
}
/* Añadir media queries y otras clases para el diseño responsive */Criterios de Evaluación
El examen final será evaluado con los siguientes criterios:
- Organización y Semántica HTML (20%)
- Estructura y Responsividad CSS (25%)
- Estética y Usabilidad (20%)
- Accesibilidad y Buenas Prácticas (15%)
- Comentarios y Legibilidad del Código (10%)
- Creatividad y Animación (10%)
Este ejercicio es una excelente oportunidad para demostrar tu capacidad de crear una página web profesional utilizando solo HTML y CSS. ¡Buena suerte!
Gracias por visitar mi blog de informática, mi nombre es Tomás y soy formador y desarrollador web. Si quiere usted dejarme alguna sugerencia, ayuda o quiere un servicio de formación estoy escuchando ofertas en tomas.gonzalez@infogonzalez.com, en Facebook a https://www.facebook.com/Infogonzalez estoy deseando escucharle. Su duda o sugerencia NO molesta.