📝 EVALUACIÓN TEÓRICO-PRÁCTICA – UNIDAD II

INSTITUTO UNIVERSITARIO DE TECNOLOGÍA INDUSTRIAL
RODOLFO LOERO ARISMENDI
ASIGNATURA: Desarrollo de la Web
UNIDAD: II – Construcción y Organización de Contenidos Web con HTML5
PONDERACIÓN: 15%
MODALIDAD: Escrita a mano en hoja blanca + participación en clase.

INSTRUCCIONES GENERALES

1. Esta evaluación se realizará en hoja blanca tamaño carta, escrita a mano con bolígrafo azul o negro.

2. Lea cada ejercicio completamente antes de comenzar a escribir.

3. Use solo las etiquetas y conceptos vistos en la Guía Práctica de la Unidad II.

4. Si desea profundizar, puede investigar, pero la base debe estar en la guía proporcionada.

5. Tiempo estimado: 45 minutos para la parte escrita + 5 minutos para la pregunta en clase.

6. Entregue la hoja firmada al finalizar.

PARTE ESCRITA (10% de la nota final)

Instrucciones: Resuelva los siguientes 3 ejercicios analíticos. Cada ejercicio debe incluir:

• Código HTML escrito a mano

• Breve explicación de la lógica aplicada (2-3 líneas)

• Validación mental de que el código funcionaría en un navegador

EJERCICIO 1: ESTRUCTURA SEMÁNTICA DE ARTÍCULO (4 puntos)

Enunciado:
Diseñe la estructura HTML para un artículo de blog que cumpla con:

• Uso de etiquetas semánticas: <article>, <header>, <section>, <footer>

• Dentro del <header>: título del artículo (<h1>) y metadata con fecha y autor usando <small>

• Dentro de <section>: dos párrafos, uno con énfasis importante (<strong>) y otro con cita externa (<blockquote>)

• Dentro del <footer>: lista de etiquetas (tags) del artículo usando <ul> con 3 elementos

Requisito analítico:
Explique por qué usó <article> en lugar de <div> para contener el contenido principal.

Espacio para respuesta:

<!-- EJERCICIO 1 -->

Explicación: _________________________________________________

______________________________________________________________

EJERCICIO 2: FORMULARIO CON VALIDACIÓN HTML5 (3 puntos)

Enunciado:
Cree un formulario de registro de estudiantes que incluya:

• Campo de texto para "Cédula" con patrón de validación (investigar atributo pattern)

• Campo de email obligatorio

• Lista desplegable para "Sección" con 3 opciones

• Checkbox para aceptar términos y condiciones (obligatorio)

• Botón de envío

Requisito analítico:
Describa cómo el atributo required mejora la experiencia del usuario sin usar JavaScript.

Espacio para respuesta:

<!-- EJERCICIO 2 -->

Explicación: _________________________________________________

______________________________________________________________

EJERCICIO 3: TABLA RESPONSIVA CON MULTIMEDIA (3 puntos)

Enunciado:
Diseñe una tabla que muestre productos de una tienda con:

• Encabezados: Imagen, Nombre, Precio, Disponibilidad

• 2 filas de datos de ejemplo

• En la columna "Imagen": usar <img> con alt y ancho máximo de 100px (atributo HTML, no CSS)

• En la columna "Disponibilidad": mostrar "✓ Disponible" o "✗ Agotado" con <strong>

• Envolver la tabla en un <section> con título "Catálogo de Productos"

Requisito analítico:
Explique por qué es importante el atributo alt en imágenes para usuarios con discapacidad visual.

Espacio para respuesta:

<!-- EJERCICIO 3 -->

Explicación: _________________________________________________

______________________________________________________________

PARTE EN CLASE (5% de la nota final)

Instrucciones:
Al finalizar la parte escrita, el docente realizará una pregunta oral aleatoria basada en los ejercicios anteriores. El estudiante deberá responder de forma concisa (máximo 1 minuto).

Ejemplos de preguntas posibles:

• ¿Qué diferencia hay entre una ruta relativa y una absoluta en un enlace?

• ¿Por qué es importante usar <label> en los formularios?

• ¿Cómo se vincula un <label> con un <input>?

• ¿Qué atributo permite que un video se reproduzca automáticamente?

Nota: La participación en esta pregunta es obligatoria para obtener el 5% correspondiente.

CRITERIOS DE EVALUACIÓN

Parte      | Criterio                                                                  | Puntos

-----------|---------------------------------------------------------------------------|--------

Escrita    | Ejercicio 1: Estructura semántica correcta + explicación válida           | 4 pts

(10%)      | Ejercicio 2: Formulario con validación HTML5 + explicación clara          | 3 pts

           | Ejercicio 3: Tabla con multimedia + justificación de accesibilidad        | 3 pts

En Clase   | Respuesta oral coherente, precisa y fundamentada                          | 5 pts

(5%)       |                                                                           |

**TOTAL**  |                                                                           | **15 pts**

Escala de conversión a nota final (0-20):
La nota obtenida sobre 15 puntos se reporta directamente como aporte a la calificación acumulativa de la asignatura.

RECOMENDACIONES PARA EL ESTUDIANTE

✅ Antes de escribir:

• Repase la Guía Práctica de la Unidad II

• Identifique las etiquetas clave para cada ejercicio

• Planifique la estructura en borrador antes de pasar a limpio

✅ Durante la evaluación:

• Escriba con letra clara y legible

• Use sangría en el código para visualizar la jerarquía

• No borre excesivamente; si se equivoca, tache con una línea y continúe

✅ Para la pregunta en clase:

• Escuche atentamente la pregunta

• Responda con seguridad, aunque sea breve

• Si no recuerda, explique su razonamiento lógico

NOTA IMPORTANTE

Esta evaluación busca medir su capacidad para analizar y aplicar los conceptos de HTML5, no solo memorizar etiquetas. Los ejercicios están diseñados para que, con la guía práctica y su razonamiento, pueda resolverlos exitosamente.

"La práctica deliberada con propósito es la clave del dominio técnico."

Esta evaluación sustituye la entrega de proyecto práctico por razones de cumplimiento académico. Su aprobación es requisito para avanzar a la Unidad III (CSS).