Ejercicio Final de HTML y CSS para el Curso de Lenguajes de Marcas (DAW)

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 meta para 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 queries para 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 ::before y ::after para añadir detalles estéticos, y pseudoclases como :hover para 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 aria donde 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:

  1. Organización y Semántica HTML (20%)
  2. Estructura y Responsividad CSS (25%)
  3. Estética y Usabilidad (20%)
  4. Accesibilidad y Buenas Prácticas (15%)
  5. Comentarios y Legibilidad del Código (10%)
  6. 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!

white notebook
Photo by Tracy Adams on Desempaquetar

Deja un comentario

Información básica sobre protección de datos Ver más

  • Responsable: Tomas Gonzalez.
  • Finalidad:  Moderar los comentarios.
  • Legitimación:  Por consentimiento del interesado.
  • Destinatarios y encargados de tratamiento:  No se ceden o comunican datos a terceros para prestar este servicio.
  • Derechos: Acceder, rectificar y suprimir los datos.
  • Información Adicional: Puede consultar la información detallada en la Política de Privacidad.

error: Content is protected !!

Descubre más desde Tomás González: Formador y Desarrollador Web

Suscríbete ahora para seguir leyendo y obtener acceso al archivo completo.

Seguir leyendo

Este sitio web utiliza cookies, si necesitas más información puedes visitar nuestra política de privacidad    Ver
Privacidad