## Tarea principal

### Antecedentes de la tarea

Los usuarios necesitan organizar información relevante (como noticias del sector, eventos tecnológicos, lanzamientos de productos, etc.) en presentaciones profesionales y visualmente impactantes para compartirlas, mostrarlas o archivarlas personalmente. Los formatos tradicionales de documentos o presentaciones de PowerPoint carecen de interactividad y un estilo moderno, mientras que las páginas web con estilo de revista tecnológica permiten presentar mejor la cronología y la jerarquía de la información.

### Objetivos específicos

1. **Estructuración de la información**: Organice la información en bruto cronológicamente y extraiga los eventos, fechas y fuentes clave.

2. **Presentación visual:** Generar páginas web interactivas al estilo de la revista Wired, incluyendo cronogramas, tarjetas de eventos y efectos flotantes.

3. **Trazabilidad:** Cada evento va acompañado de un enlace a la fuente original, lo que garantiza que la información sea verificable.

4. **Experiencia interactiva**: Admite desplazamiento, filtrado de eventos (opcional) y diseño adaptable.

### Restricciones clave

- El estilo debe ajustarse a la estética visual de la revista Wired (fondo oscuro, alto contraste, estética tecnológica).

- La cronología debe ser clara y legible, y los eventos deben estar ordenados lógicamente a lo largo del tiempo.

- Carga fluida de la página y respuesta interactiva rápida.

- Buena adaptación a dispositivos móviles

Antes de comenzar, confirme con el usuario el tema de investigación y el plazo que desea. Inicie la investigación únicamente después de obtener esta información.

### Paso 1: Investigación proactiva y recopilación de información

**Objetivo:** Basándose en los temas y plazos proporcionados por los usuarios, recopilar de forma objetiva y exhaustiva información relevante y urgente, y extraer datos clave de eventos mediante análisis dinámico, búsqueda multidimensional y autocomprobación integral.

**acción**:

1. **Defina el alcance de la investigación:**

- Confirme el tema proporcionado por el usuario (como "Hitos globales de la IA", "Dinámica de la industria de vehículos de nueva energía", "Avances de la tecnología Web3").

- Especifique el intervalo de tiempo (por ejemplo, "el último mes", "enero de 2026", "cuarto trimestre de 2025"). Si el usuario no especifica nada, el valor predeterminado es "los últimos 30 días".

- Confirma tus preferencias de fuente de información (como "medios autorizados", "informes del sector", "comunicados oficiales"). Los medios autorizados son la opción predeterminada.

2. **Análisis de dimensión dinámica**:

- **Objetivo:** Analizar dinámicamente y construir un marco integral de recopilación de información basado en los temas del usuario antes de realizar una búsqueda.

- **Acción**:

- **Identificar a los actores clave:** Analizar y enumerar las empresas líderes, las organizaciones principales, las figuras clave y los proyectos de código abierto representativos en el campo.

Por ejemplo, en lo que respecta al tema de los "vehículos de nueva energía", se deberían identificar los principales fabricantes de automóviles, proveedores de baterías y proveedores de soluciones de conducción autónoma a nivel mundial.

- **Identificar subsectores**: Analice y enumere las ramas tecnológicas importantes, las categorías de productos o las direcciones comerciales relacionadas con este tema.

Por ejemplo, en el tema de la "IA", se deben identificar subcampos como los modelos a gran escala, los agentes, los robots, la IA para la ciencia y las aplicaciones de la IA.

- **Identificar la distribución geográfica**: Analizar y enumerar los principales países y regiones participantes a nivel mundial para este tema.

*Por ejemplo, para el tema de la "industria de los chips", se deben identificar regiones clave como Estados Unidos, China, Japón, Corea del Sur y Europa.*

- **Identificar tipos de eventos**: Predefine tipos de eventos comunes bajo este tema, como "Lanzamiento de producto", "Avance tecnológico", "Financiamiento y fusiones y adquisiciones", "Regulación de políticas", "Dinámica del mercado", "Cambios de personal", etc.

- **Resultado**: Una lista de búsqueda multidimensional para el tema actual que sirve de guía para el siguiente paso de la búsqueda.

3. **Diseñar y ejecutar una búsqueda en varias rondas**:

- **Objetivo:** Basándose en una “lista de búsqueda multidimensional”, diseñar y ejecutar una serie de consultas de búsqueda para garantizar una cobertura integral.

- **Acción**:

- Utilice la herramienta `googleSearch` para diseñar al menos 5-8 consultas de búsqueda desde diferentes perspectivas, combinando palabras clave de diferentes dimensiones.

- **Búsqueda exhaustiva**: Realice una búsqueda amplia (1-2 veces) utilizando palabras clave principales.

- **Búsqueda de seguimiento de jugadores**: Realice búsquedas dirigidas (2-3 veces) de los "jugadores clave" identificados.

- **Búsqueda en subcampo**: Realice una búsqueda específica (1-2 veces) en el "subcampo" identificado.

- **Búsqueda dinámica regional**: combine temas con "distribución geográfica" para buscar diferentes perspectivas regionales (1-2 veces).

- Configurar el parámetro `freshness` garantiza la actualidad de la información (por ejemplo, `freshness="pm"` significa dentro del último mes).

4. **Filtrado y extracción de información**:

- Identificar "eventos" genuinos (noticias/anuncios/comunicados con cronogramas claros) en los resultados de búsqueda.

- Filtra los artículos de opinión, los informes de análisis de mercado, la información duplicada y el contenido irrelevante.

- Para cada evento válido, extraiga la información principal: **Fecha**, **Título del evento**, **Descripción del evento**, **Etiqueta de categoría**, **Enlace de origen** y **Datos clave** (si los hay).

5. **Preparación y clasificación de datos**:

- Todos los eventos están ordenados cronológicamente (del más reciente al más antiguo por defecto, lo cual es coherente con los hábitos de lectura de un informe).

- Eliminación de duplicados: Si varias fuentes informan sobre el mismo evento, seleccione la fuente más autorizada o completa y combine la información clave.

6. **Autoevaluación exhaustiva y búsqueda complementaria:**

- **Objetivo:** Tras la recopilación inicial de datos, comprobar si existen discrepancias y complementar la información para garantizar la objetividad y la exhaustividad.

- **Acción**:

- **Verificación de sesgo de jugadores:** Analice la lista de eventos para detectar una concentración excesiva en 1 o 2 "jugadores clave". Si más del 50 % de los eventos provienen de la misma empresa, se deben realizar búsquedas adicionales para identificar otros jugadores que hayan pasado desapercibidos.

- **Verificación de sesgo regional:** Compruebe si el evento abarca una sola región. Si el tema es global, pero los resultados solo muestran una perspectiva de EE. UU., la búsqueda debe complementarse con búsquedas de otras regiones clave (como China y Europa).

- **Verificación de sesgo de tipo:** Compruebe si el tipo de evento es demasiado singular (por ejemplo, solo noticias financieras). Si faltan tipos importantes como "avance tecnológico" o "lanzamiento de producto", se deben realizar búsquedas complementarias.

- **Resultado**: Una lista de eventos complementada, equilibrada y más completa.

**Estándares de calidad**:

- Recopila entre 8 y 15 eventos de alta calidad y gran relevancia.

- La lista de eventos está distribuida de manera uniforme entre los principales actores, la distribución geográfica y el tipo de evento, sin sesgos significativos.

- Cada evento debe incluir como mínimo: fecha, título, descripción y fuente.

Toda la información proviene de fuentes fiables (medios de comunicación autorizados, comunicados oficiales, informes del sector).

Los eventos están ordenados cronológicamente de forma inversa (del más reciente al más antiguo).

Una vez finalizada la investigación, confirme con el usuario si está satisfecho. Si lo está, proceda al siguiente paso; de lo contrario, ajuste el sistema hasta que el usuario esté satisfecho.

### Paso 2: Diseñar la arquitectura de la información

**Objetivo:** Planificar la jerarquía de contenido y la lógica de interacción de una página web.

**acción**:

- Determinar la estructura de la página:

- **Área superior**: Título (p. ej., "Hitos globales de la IA en enero de 2026") + Subtítulo/Rango de tiempo

- **Área principal:** Línea de tiempo vertical + tarjetas de eventos

- **Área inferior:** Explicación de la fuente de datos + Hora de actualización

- Diseño de la línea de tiempo:

- Se utiliza una línea de tiempo centrada verticalmente, con los nodos de fecha mostrados a la izquierda y las tarjetas de eventos a la derecha.

- Como alternativa, se puede utilizar un diseño alterno (las tarjetas de eventos se muestran alternativamente de izquierda a derecha, creando un efecto visual más dinámico).

- Planificar funciones interactivas:

- A medida que te desplazas, los nodos de la línea de tiempo se iluminan uno por uno (efecto de paralaje).

- Resaltar cuando el ratón se sitúa sobre las tarjetas de eventos

Haz clic en la tarjeta para ver la descripción completa (si el contenido es extenso).

- Opcional: Añadir un botón de filtro de categoría en la parte superior (filtrar eventos por etiqueta).

- Confirmar puntos de interrupción adaptables: Escritorio (>1024px), Tableta (768-1024px), Móvil (<768px)

**Estándares de calidad**:

- La información está claramente estructurada, lo que permite a los usuarios encontrar rápidamente los eventos clave.

- La lógica de interacción es intuitiva y no requiere curva de aprendizaje.

- Experiencia móvil sin compromisos

### Paso 3: Definir las pautas de estilo de la revista Wired

**Objetivo:** Definir claramente todos los parámetros detallados del diseño visual y garantizar la coherencia estilística.

**acción**:

- Desarrollar una guía de estilo completa, que incluya los siguientes elementos:

**Combinación de colores**:

texto plano

Color de fondo: Negro espacial #0D0D0D

Fondo secundario: Gris carbón #1A1A1A (para fondos de tarjetas)

Color del texto principal: Blanco puro #FFFFFF

Color de texto secundario: Gris plateado #B0B0B0

Color de acento 1: Azul eléctrico #00D9FF (para la línea de tiempo, enlaces y elementos destacados)

Color de acento 2: Verde neón n.° 39FF14 (para etiquetas importantes)

Color de acento 3: Rosa cibernético #FF006E (para eventos especialmente importantes)

Borde/Línea divisoria: Gris oscuro #2A2A2A

```

**Sistema de fuentes**:

texto plano

Fuente del encabezado: Inter Black / Helvetica Neue Bold (negrita, moderna)

Fuente del texto principal: Inter Regular / SF Pro Text (clara y fácil de leer)

Fuente de hora/fecha: JetBrains Mono / Courier New (monoespaciada, de inspiración tecnológica)

```

**Elementos visuales**:

- Línea de tiempo: Una línea vertical de 2 píxeles de ancho, de color azul eléctrico, con puntos de 12 píxeles como nodos.

- Tarjeta de evento:

- Fondo: Gris carbón #1A1A1A, con un borde gris oscuro de 1 píxel.

- Efecto flotante: El borde se vuelve azul eléctrico y la tarjeta flota ligeramente (transformación: translateY(-4px)).

- Margen interior: 24px

- Esquinas redondeadas: 8px

- Sombra: 0 4px 20px rgba(0, 217, 255, 0.15)

- Estilo de etiqueta:

- Forma de cápsula pequeña, fondo semitransparente, texto en color de acento

Por ejemplo, el verde neón se utiliza para los "lanzamientos de productos" y el rosa cibernético para la "regulación de políticas".

- Estilo de enlace:

- Predeterminado: Azul eléctrico, subrayado

- Al pasar el cursor por encima: El color se vuelve más brillante y el subrayado se vuelve más grueso.

**Efectos de animación**:

- Al cargar la página: El título aparece gradualmente y la línea de tiempo se anima de arriba a abajo (0,8 s).

- Mientras se desplaza: Las tarjetas de eventos aparecen gradualmente una por una (efecto escalonado, cada una con un retraso de 0,1 s).

- Al pasar el cursor sobre la carta: la carta se eleva y la sombra se expande (transición: 0,3 s de suavidad).

### Paso 4: Generar el contenido de la página web

**Objetivo:** Utilizar la herramienta generateWebpage para generar una página de presentación interactiva que cumpla con el estilo Wired.

**acción**:

- Integrar la información estructurada extraída en el Paso 1 con las pautas de estilo del Paso 3 en instrucciones claras.

- Llama a la herramienta generateWebpage, pasándole los siguientes parámetros:

- `instruction`: Describe en detalle los requisitos de la página, incluyendo:

- Título y subtítulo de la página

- Diseño de la línea de tiempo (centrado verticalmente o escalonado)

- Campos de datos para cada evento (fecha, título, descripción, etiquetas, enlace)

- Guía de estilo completa de Wired (color, tipografía, elementos visuales, animación)

- Requisitos de interacción (efecto flotante, animación de desplazamiento, función de filtrado opcional)

- Requisitos de respuesta

- `references`: Si el usuario proporciona `@references`, páselo como fuente de datos.

- Asegúrese de que las instrucciones indiquen claramente:

- "Utilizando el estilo de la revista Wired: fondo oscuro (#0D0D0D), color de acento azul eléctrico (#00D9FF), fuente de encabezado Inter Black en negrita"

- La línea de tiempo utiliza un diseño vertical, con los nodos de fecha a la izquierda y las tarjetas de eventos a la derecha.

Cada ficha de evento incluye: fecha, título, descripción, etiqueta de categoría y enlace de origen.

- "Al pasar el cursor sobre la tarjeta, el borde se vuelve azul eléctrico y se eleva ligeramente."

- "La línea de tiempo se dibuja de arriba abajo cuando se carga la página, y las tarjetas de eventos aparecen gradualmente una a una."

**Estándares de calidad**:

- La página web generada se ajusta perfectamente al estilo visual de la revista Wired.

Toda la información del evento es precisa y los enlaces de origen son clicables.

- Interacción fluida y animación fluida.

## Estilo y presentación

### Guía de estilo de la revista Wired

**Filosofía de diseño**:

El lenguaje visual de la revista Wired combina futurismo y minimalismo. Utiliza colores llamativos y formas geométricas para crear una estética tecnológica sin sacrificar la legibilidad. Entre sus características clave destacan el alto contraste y una marcada jerarquía visual: la información importante debe captar la atención de un vistazo.

**Principios del uso del color:**

**Fondo:** Los tonos oscuros crean una sensación profesional e inmersiva; evite el negro puro (#000000), utilice un color oscuro ligeramente grisáceo (#0D0D0D).

- **Colores de acento**: Utilice colores neón (azul, verde, rosa) como punto focal visual, pero no abuse de ellos; sea moderado.

- **Texto:** Utilice blanco puro para el texto principal y gris plateado para el texto secundario para garantizar la legibilidad.

- **Jerarquía**: Utilice el color para distinguir los niveles de información (encabezado > texto del cuerpo > pie de página).

**Principios de maquetación**:

- **Comparación de fuentes**: Los títulos utilizan una fuente sans-serif en negrita (Inter Black), el texto del cuerpo utiliza una fuente de grosor normal (Inter Regular) y los datos utilizan una fuente monoespaciada (JetBrains Mono).

- **Niveles de tamaño de fuente:** Encabezados 48-64px, Subencabezados 24-32px, Texto principal 16-18px, Notas al pie 12-14px

- **Interlineado**: Interlineado de 1,6 a 1,8 para el texto principal para garantizar una lectura cómoda.

- **Alineación**: Encabezado centrado o alineado a la izquierda, texto del cuerpo alineado a la izquierda, datos alineados a la derecha.

**Principios de maquetación**:

- **Sistema de cuadrícula**: Utiliza una cuadrícula de 12 columnas, pero permite enfoques no convencionales (como desplazamientos de línea de tiempo e intercalación de tarjetas).

- **Espacio en blanco**: Un amplio espacio en blanco crea una sensación de amplitud; el espacio entre tarjetas debe ser de al menos 40 píxeles.

- **Punto focal visual:** Utilice el tamaño, el color y la ubicación para guiar el recorrido de la mirada (de arriba a abajo, de izquierda a derecha).

**Principios de interacción**:

- **Retroalimentación inmediata:** Al pasar el cursor y hacer clic, se debe proporcionar una retroalimentación visual clara (cambio de color, desplazamiento, sombra).

- **Animación natural:** Utiliza la función de suavizado ease-out con una duración de 0,2 a 0,4 segundos.

- **Mejora progresiva**: El contenido principal se puede mostrar sin JavaScript; la interactividad es la guinda del pastel.

**Ejemplo de referencia**:

- Diseño de la página del artículo en el sitio web oficial de WIRED

- Página de producto del sitio web oficial de Stripe (modo oscuro)

- Página de lanzamiento de productos de Apple (sección de cronología)

### Paso 5: Verificación y optimización

**Objetivo:** Comprobar si la página web generada cumple con los requisitos y realizar los ajustes necesarios.

**acción**:

- Previsualiza la página web generada y comprueba cada elemento:

- **Estilo visual**: ¿El color de fondo, el color de acento y la fuente se ajustan al estilo de Wired?

- **Integridad de la información**: ¿Están completas la fecha, el título, la descripción y la fuente de cada evento?

- **Experiencia interactiva**: ¿Funcionan correctamente el efecto flotante y la animación de desplazamiento?

- **Diseño adaptable:** ¿Se visualiza correctamente en diferentes tamaños de pantalla?

- **Disponibilidad del enlace:** ¿Al hacer clic en el enlace de origen se redirige correctamente?

- Si se detectan problemas, registre los ajustes específicos necesarios:

- Por ejemplo: "El color de la línea de tiempo no es lo suficientemente brillante y necesita ajustarse a #00D9FF".

- Por ejemplo: "El margen interior de la tarjeta en el dispositivo móvil es demasiado grande y debe reducirse a 16 píxeles."

- Si se necesitan ajustes, vuelva a llamar a la herramienta generateWebpage, pasando el parámetro `webpage_id` para editarlo.

**Estándares de calidad**:

- Estilo visual 100% acorde con la estética de la revista Wired.

- Todas las funciones interactivas funcionan correctamente.

- No hay errores de diseño evidentes ni información faltante.

### Estándares de calidad

- **Integridad**: Cada evento incluye fecha, título, descripción y fuente.

- **Precisión**: Toda la información es coherente con el material original y los enlaces son accesibles.

- **Trazabilidad:** Cada evento tiene una fuente claramente identificada.

- **Coherencia visual:** Todos los elementos se ajustan estrictamente a las directrices de estilo de Wired.

- **Interacción fluida:** Las animaciones son fluidas y tienen un tiempo de respuesta rápido (<100 ms).

- **Accesibilidad:** El contraste del texto cumple con los estándares WCAG AA y es utilizable en dispositivos móviles.