Vieja normalidad

   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) Abre tus herramientas: Abre tu  editor de código  (como Visual Studio Code o el que uses en clase). En otra pestaña, abre la  herramienta de Inteligencia Artificial  que te indique tu profesor/a. 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. 👉  Cop...

  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) Abre tus herramientas: Abre tu editor de código (como Visual Studio Code o el que uses en clase). En otra pestaña, abre la herramienta de Inteligencia Artificial que te indique tu profesor/a. 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! (25 Minutos) 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. 👉 Copia el siguiente texto COMPLETO y pégalo en ...

Plan de Actividad: ¡Dando Vida a tu Página con JavaScript! Tema:  Interacción con JavaScript. Objetivo: Añadir un botón a tu página anterior que permita mostrar y ocultar la tabla de detalles usando conceptos básicos de JavaScript. Requisito: Tener a mano tu proyecto de CodePen de la clase anterior. Introducción  ¡Vamos a darle interacción a nuestra página! Ya tenes la estructura (HTML) y el estilo (CSS). Ahora, con JavaScript (JS), le agregamos comportamiento e interactividad. Tu trabajo: Añadir un botón que, al hacerle clic, ocultará o mostrará la tabla con los detalles de los desafíos de la IA. Abre tu Pen de la actividad anterior y comienza ⚡ Paso 1: Preparando el Terreno en HTML  Para que JavaScript pueda "encontrar" los elementos con los que va a trabajar, necesitamos darles un nombre único, un id . Añade el botón: Justo antes de tu <table> , añade esta línea de código HTML para crear el botón. El id nos servirá para identificarlo en J...

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 ...

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! &#128640; Fase 1: Investigación (15 minutos) Tu primera tarea es investigar en internet cu...

Un Vistazo al Proyecto El proyecto "Megapantalla Micro:bit" es un sistema de visualización modular a gran escala. Utiliza una red de micro:bits para crear una pantalla robusta y escalable, controlada de forma centralizada para mostrar patrones, texto y gráficos en tiempo real. Modular y Escalable Construido como una matriz de 5x5, el sistema está diseñado para crecer. El software de las esclavas se programa una sola vez, permitiendo futuras expansiones sin esfuerzo. Control Centralizado Una única micro:bit "controladora" actúa como cerebro, gestionando todas las entradas del usuario y dictando el contenido de la pantalla. Comunicación Robusta Un prot...

  Paso 1: Empezando en CodePen (5 min) Entra a la web: Abre tu navegador y ve a CodePen.io . Crea un nuevo "Pen": Haz clic en el botón "Start Coding" o busca la opción para crear un nuevo "Pen". Conoce la interfaz: Verás tres cajas grandes: HTML , CSS y JS . Por ahora, solo vamos a escribir en la caja de la izquierda, la de HTML . Puedes arrastrar las otras ventanas para hacer la de HTML más grande. A la derecha, verás un panel blanco: ¡ahí aparecerá tu página web en tiempo real! Busca una imagen en línea: En otra pestaña del navegador, busca una imagen sobre tu tema. Cuando la encuentres, haz clic derecho sobre ella y selecciona "Copiar dirección de la imagen" o "Copy Image Address". Guarda ese enlace, ¡lo usaremos en un momento! Paso 2: Añade tu Contenido Principal (10 min) En CodePen no necesitas escribir la estructura <html> o <body> . ¡La herramienta lo hace por ti! Simplemente escribe las etiquetas de tu conten...