Actividad 2 de Octubre 9no 6

-

Plan de Clase: ¡Manos a la Obra con HTML!

Tema: Desafíos de la Inteligencia Artificial Generativa.
Objetivo: Aplicar tus conocimientos de HTML (<p>, <ul>, <table>) y CSS para estructurar y presentar información investigada.
Duración: 60 minutos.
Herramientas: Navegador web y CodePen.io.

Introducción (5 minutos)

¡Hola! Hoy vamos a combinar investigación y desarrollo web. La misión es crear una página informativa simple sobre los desafíos y riesgos de la Inteligencia Artificial generativa, como los Modelos Grandes de Lenguaje (LLMs).

El trabajo se divide en dos partes:

  • Investigación Rápida: Encontrar la información clave.
  • Maquetación con Código: Estructurar esa información en una página web.

¡Empecemos! 🚀

Fase 1: Investigación (15 minutos)

Tu primera tarea es investigar en internet cuáles son los principales desafíos, riesgos y problemas éticos de los modelos de lenguaje generativos.

Abre una nueva pestaña en tu navegador y busca información usando términos como:

  • "Sesgos en la inteligencia artificial"
  • "Alucinaciones de los LLM"
  • "Desinformación y deepfakes con IA"
  • "Impacto ambiental de la IA"
  • "Privacidad de datos en modelos de lenguaje"
  • "Problemas de derechos de autor con IA generativa"

👉 Tu objetivo: Anota en un borrador al menos cuatro desafíos que encuentres, junto a una breve descripción de cada uno. No necesitas un análisis profundo, solo la idea principal.

Fase 2: ¡A Programar en CodePen! (35 minutos)

Es hora de organizar tu investigación en una página web. Abre un nuevo Pen en CodePen.io y sigue esta estructura.

1. Estructura HTML

Usa las siguientes etiquetas para organizar tu contenido:

Título Principal (<h1>):
Escribe un título llamativo como: <h1>Desafíos de la IA Generativa</h1>.

Párrafo Introductorio (<p>):
Debajo del título, añade un párrafo <p> que explique brevemente qué son los LLMs y por qué es importante conocer sus desafíos.

Subtítulo para la Lista (<h2>):
Crea un subtítulo que diga: <h2>Principales Riesgos y Desafíos</h2>.

Lista de Desafíos (<ul>):
Usa una lista no ordenada (<ul>) para nombrar los cuatro desafíos que investigaste. Cada desafío debe ser un elemento de la lista (<li>).

Ejemplo:

<ul>
  <li>Sesgos y Discriminación</li>
  <li>Alucinaciones y Datos Falsos</li>
</ul>

Tabla de Detalles (<table>):
Ahora, elige dos de los desafíos de tu lista para detallarlos en una tabla. Crea una tabla (<table>) con un encabezado (<thead>) y un cuerpo (<tbody>).
El encabezado debe tener una fila (<tr>) con dos celdas de encabezado (<th>): "Desafío" y "Breve Descripción".
El cuerpo debe tener dos filas (<tr>), una por cada desafío que elegiste. Cada fila tendrá dos celdas (<td>): una con el nombre del desafío y otra con la descripción que encontraste.

Ejemplo de la estructura:

<table>
  <thead>
    <tr>
      <th>Desafío</th>
      <th>Breve Descripción</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Sesgos y Discriminación</td>
      <td>La IA puede aprender y repetir prejuicios presentes en los datos con los que fue entrenada...</td>
    </tr>
    <tr>
      <td>Impacto Ambiental</td>
      <td>Entrenar estos modelos requiere una enorme cantidad de energía y recursos computacionales...</td>
    </tr>
  </tbody>
</table>

Párrafo de Conclusión (<p>):
Para finalizar, escribe un <p> con una breve reflexión sobre la importancia de usar estas tecnologías de forma responsable.

2. Estilo con CSS (Si te queda tiempo)

¡Dale un toque personal a tu página! Ve a la pestaña de CSS en CodePen y prueba algunas de estas ideas:

/* Estilos para todo el cuerpo de la página */
body {
  font-family: sans-serif;
  background-color: #f0f4f8;
  color: #333;
  line-height: 1.6; /* Mejora la legibilidad */
}

/* Centrar los títulos */
h1, h2 {
  text-align: center;
  color: #005a9c;
}

/* Estilos para la tabla */
table {
  width: 80%;
  margin: 20px auto; /* Centra la tabla */
  border-collapse: collapse; /* Une los bordes */
}

/* Estilos para las celdas y encabezados de la tabla */
th, td {
  border: 1px solid #ccc;
  padding: 10px;
  text-align: left;
}

/* Color de fondo para el encabezado de la tabla */
thead {
  background-color: #005a9c;
  color: white;
}

Cierre y Entrega (5 minutos)

  • Guarda tu Pen: Asegúrate de que tu trabajo esté guardado.
  • Comparte tu Enlace: Copia el enlace de tu Pen para compartirlo.
  • Reflexiona: Piensa un momento, ¿cómo te ayudaron las etiquetas <table>, <ul> y <p> a organizar la información de una manera más clara que si fuera solo un texto plano?

¡Excelente trabajo! Has practicado tus habilidades de HTML y CSS mientras aprendías sobre un tema muy actual. ✨

Entradas populares de este blog