Actividad 9no 6 - 9 de Octubre

-

 Actividad: ¡Crea tu Página Web con un Asistente de IA!

¡Hola! Prepárate para un desafío de velocidad y creatividad. Tu misión de hoy es crear una página web funcional y con un estilo increíble en tiempo récord. No estarás solo: contarás con un copiloto de Inteligencia Artificial que te ayudará a escribir el código inicial.

Tu Tema: El Perfil de una Criatura Fantástica (¡inventada por ti!).

¡Vamos a empezar!

Fase 1: Preparación (5 Minutos)

  1. Abre tus herramientas:

    • Abre tu editor de código (Notepad++).

    • En otra pestaña, abre la herramienta de Inteligencia Artificial que te indique tu profesor. (Gemini o ChatGPT)

  2. Crea tu archivo:

    • En tu editor de código, crea un nuevo archivo y guárdalo como index.html.

Fase 2: ¡Manos a la Obra con tu Asistente de IA! 

Paso 1: La Instrucción Mágica (El "Prompt")

Vamos a darle a la IA una instrucción súper clara para que nos genere el esqueleto de nuestra página HTML.

👉 Copia el siguiente texto COMPLETO y pégalo en el chat de la IA:

Actúa como un desarrollador web experto. Escribe el código para un único archivo index.html.

Dentro de ese archivo, incluye todo el CSS necesario dentro de una etiqueta <style> en el <head>.

Contenido HTML: La página debe tener un título principal, una imagen de placeholder, un subtítulo "Descripción" con un párrafo, y una lista de "Habilidades".

Estilos CSS: El fondo debe ser de un color oscuro (#2c3e50) y el texto de color claro (#ecf0f1). Centra todo el contenido de la página. La imagen debe tener bordes redondeados.

Paso 2: ¡Recibe y Pega el Código!

La IA te responderá con un bloque de código.

👉 Copia TODO el código que te dio la IA y pégalo en tu archivo index.html. ¡Guarda los cambios!

Si abres el archivo en tu navegador, ¡ya deberías ver una página web funcional! Ahora viene la parte más divertida: hacerla tuya.

Paso 3: Personaliza el Contenido (HTML)

Ahora te toca darle vida a tu criatura. Dentro de tu código, busca y modifica lo siguiente:

  • ✍️ El Título: Busca la etiqueta <h1> y escribe adentro el nombre que inventaste para tu criatura.

  • ✍️ La Descripción: Encuentra el párrafo <p> y escribe una descripción corta y genial sobre dónde vive, qué come o cómo es.

  • ✍️ Las Habilidades: Ve a la lista <ul>. Edita el texto dentro de cada <li> para listar las habilidades especiales de tu criatura (Ej: "Vuelo silencioso", "Ojos que brillan en la oscuridad", "Rugido sónico").

Paso 4: Dale tu Propio Estilo (CSS)

Sube a la parte de arriba del código, hasta encontrar la etiqueta <style>. Esa es la zona de diseño. ¡Vamos a experimentar!

  • 🎨 Cambia el color de fondo: Busca la línea background-color: #2c3e50; y cambia ese código de color por otro que te guste. Puedes probar con #34495e (un gris azulado) o #4a235a (un morado oscuro).

  • 🖼️ Haz la imagen circular: Busca el selector img y dentro, la propiedad border-radius. Cambia su valor a 50%. ¡Guarda y mira el resultado!

  • ✨ Desafío de Estilo: Busca el selector h1 en tu CSS y agrégale esta nueva línea de código para que el título se vea más imponente en mayúsculas: text-transform: uppercase;

Fase 3: ¡Misión Cumplida! 

¡Muestra tu Creación! 🚀

¡Lo lograste! Creaste una página web personalizada con la ayuda de un asistente de IA. Prepárate para mostrarle a tus compañeros el increíble perfil de tu criatura fantástica.

Para Pensar:

  • ¿Qué fue lo más fácil de este proceso? ¿Y lo más difícil?

  • ¿Para qué otra cosa se te ocurre que podrías usar esta herramienta?

¿Quieres publicarla en Internet? Si quieres que todo el mundo vea tu página, puedes investigar en casa una herramienta gratuita y súper fácil de usar llamada Netlify Drop. ¡Solo tienes que arrastrar tu archivo index.html y listo!

Entradas populares de este blog