## Tarea principal

### Antecedentes de la tarea

Los usuarios necesitan organizar información actualizada (como noticias del sector, eventos tecnológicos, lanzamientos de productos, etc.) en páginas de presentación profesionales y visualmente impactantes para compartir, mostrar o archivar. Los formatos tradicionales de documentos o PPT carecen de interactividad y modernidad, mientras que las páginas web, al estilo de las revistas tecnológicas, presentan mejor la cronología y la jerarquía de la información.

### Metas específicas

1. **Estructuración de la información**: Organizar la información sin procesar cronológicamente y extraer eventos, fechas y fuentes clave.

2. **Presentación visual:** Genere páginas web interactivas al estilo de la revista Wired, incluyendo líneas de tiempo, 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, sensación tecnológica).

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

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

- Buena adaptación móvil

Antes de comenzar, confirme con el usuario el tema de investigación y el plazo deseados. Comience la investigación solo después de obtener estos datos.

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

**Objetivo:** Con base en los temas y los plazos proporcionados por los usuarios, recopilar de manera objetiva y completa información relevante y sensible al tiempo y extraer datos de eventos clave a través de análisis dinámico, búsqueda multidimensional y autocomprobación integral.

**acción**:

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

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

- Especifique el rango de tiempo (p. ej., "último mes", "enero de 2026", "cuarto trimestre de 2025"). Si el usuario no lo especifica, el valor predeterminado es "últimos 30 días".

- Confirme sus preferencias de fuentes de información (como "medios de comunicación de confianza", "informes del sector", "anuncios oficiales"). La opción predeterminada es "medios de comunicación de confianza".

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 de los usuarios antes de realizar una búsqueda.

- **Acción**:

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

Por ejemplo, para el tema de “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, categorías de productos o direcciones comerciales importantes bajo este tema.

Por ejemplo, para el tema de “IA”, se deben identificar subcampos como modelos grandes, agentes, robots, IA para la ciencia y aplicaciones de 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 “industria de chips”, se deberían identificar regiones clave como Estados Unidos, China, Japón, Corea del Sur y Europa.*

- **Identificar tipos de eventos**: preestablece 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.

- **Salida**: Una lista de búsqueda multidimensional para el tema actual para guiar el siguiente paso de búsqueda.

3. **Diseñar y ejecutar una búsqueda multironda**:

- **Objetivo:** Con base 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 ángulos, combinando palabras clave de diferentes dimensiones.

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

- **Búsqueda de seguimiento de jugadores**: Realice búsquedas específicas (2 o 3 veces) para "jugadores clave" identificados.

- **Búsqueda de subcampo**: realiza una búsqueda específica (1 o 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).

- Establecer 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) a partir de los resultados de búsqueda.

- Filtrar artículos puramente de opinión, informes de análisis de mercado, información duplicada y 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 corresponde).

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

- Todos los eventos están organizados en orden cronológico (del más nuevo al más antiguo por defecto, lo que es coherente con los hábitos de lectura de un briefing).

- Desduplicación: si varias fuentes informan sobre el mismo evento, seleccione la fuente más confiable o completa y combine la información clave.

6. **Autocomprobación integral y búsqueda complementaria:**

- **Objetivo:** Después de la recopilación inicial de datos, verificar si hay discrepancias y complementar la información para garantizar la objetividad y la exhaustividad.

- **Acción**:

**Comprobación de sesgo de jugador:** Analice la lista de eventos para comprobar si hay una concentración excesiva en uno o dos jugadores clave. Si más del 50 % de los eventos provienen de la misma empresa, se deben realizar búsquedas adicionales para otros jugadores que se hayan pasado por alto.

**Comprobación de sesgo regional:** Verifica si el evento solo cubre una región. Si el tema es global, pero los resultados solo muestran una perspectiva estadounidense, la búsqueda debe complementarse con búsquedas de otras regiones clave (como China y Europa).

**Comprobación de sesgo de categoría:** Compruebe si el tipo de evento es demasiado singular (p. ej., solo noticias financieras). Si faltan categorías importantes como "avance tecnológico" o "lanzamiento de producto", se deben realizar búsquedas adicionales.

- **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 actores clave, la distribución geográfica y el tipo de evento, sin sesgos significativos.

- Cada evento debe incluir al menos: fecha, título, descripción y fuente.

- Toda la información proviene de fuentes confiables (medios de comunicación autorizados, anuncios oficiales, informes de la industria).

Los eventos están organizados en orden cronológico inverso (el más nuevo primero).

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

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

**Objetivo:** Planificar la jerarquía de contenidos 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 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 + Tiempo de actualización

- Diseño de la cronología:

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

- Alternativamente, se puede utilizar un diseño alterno (las tarjetas de eventos se muestran alternativamente de izquierda a derecha, creando un efecto visualmente 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 mouse pasa sobre las tarjetas de eventos

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

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

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

**Estándares de calidad**:

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

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

- Experiencia móvil sin concesiones

### 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:

**Esquema de colores**:

texto sin formato

Color de fondo: Negro espacial #0D0D0D

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

Color del texto principal: Blanco puro #FFFFFF

Color del texto secundario: Gris plateado #B0B0B0

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

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

Color de acento 3: Cyber ​​Pink #FF006E (para eventos particularmente importantes)

Línea divisoria/borde: gris oscuro #2A2A2A

```

**Sistema de fuentes**:

texto sin formato

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

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

Fuente de tiempo/datos: JetBrains Mono / Courier New (monoespaciado, inspirado en la tecnología)

```

**Elementos visuales**:

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

- Tarjeta de evento:

- Fondo: Gris carbón #1A1A1A, con un borde gris oscuro de 1px

- 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 “lanzamientos de productos” y el rosa cibernético se utiliza para “regulación de políticas”.

- Estilo de enlace:

- Predeterminado: Azul eléctrico, subrayado

- Al pasar el cursor sobre el cursor, el color se vuelve más brillante y el subrayado se vuelve más grueso.

**Efectos de animación**:

- Cuando se carga la página: el título se desvanece + la línea de tiempo se anima de arriba a abajo (0,8 s)

- Mientras se desplaza: las cartas de evento aparecen una a una (efecto de escalonamiento, cada una con un retraso de 0,1 s)

- Al pasar el cursor: la carta se eleva + la sombra se expande (transición: 0,3 s de facilidad)

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

**Objetivo:** Utilizar la herramienta generateWebpage para generar una página de presentación interactiva que se ajuste al 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.

- Llamar a la herramienta generateWebpage, pasando los siguientes parámetros:

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

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

- Diseño de la línea de tiempo (centrada verticalmente o escalonada)

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

- Pautas de estilo completas 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:

- "Usando 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 nodos de fecha a la izquierda y tarjetas de eventos a la derecha.

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

- "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 a abajo cuando se carga la página y las tarjetas de eventos aparecen una por una".

**Estándares de calidad**:

- La página web generada coincide perfectamente con el estilo visual de la revista Wired.

- Toda la información del evento es precisa y se puede hacer clic en los enlaces de origen.

- Interacción fluida y animación fluida.

## Estilo y presentación

### Pautas de estilo de la revista Wired

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

El lenguaje visual de la revista Wired combina futurismo y minimalismo. Utiliza colores vibrantes y formas geométricas para crear una atmósfera tecnológica, manteniendo una legibilidad clara. Sus características clave incluyen un alto contraste y una sólida 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), use un color oscuro ligeramente grisáceo (#0D0D0D).

- **Colores de acento**: utilice colores neón (azul, verde, rosa) como punto focal visual, pero no los utilice en exceso; mantenga la moderación.

- **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 > cuerpo del texto > pie de página)

**Principios de diseño**:

- **Comparación de fuentes**: Los títulos utilizan una fuente sans-serif en negrita (Inter Black), el cuerpo del texto utiliza un grosor de fuente 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 del cuerpo 16-18px, Notas al pie 12-14px

- **Interlineado**: espacio entre líneas 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, cuerpo del texto alineado a la izquierda, datos alineados a la derecha.

**Principios de diseño**:

- **Sistema de cuadrícula**: utiliza una cuadrícula de 12 columnas, pero permite enfoques no convencionales (como desplazamientos de línea de tiempo y entrelazado de tarjetas).

- **Espacio en blanco**: Un amplio espacio en blanco crea una sensación de espacio libre; el espacio entre las tarjetas debe ser de al menos 40 px.

- **Punto focal visual:** Utilice el tamaño, el color y la ubicación para guiar el flujo 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 respuesta visual clara (cambio de color, desplazamiento, sombra).

- **Animación natural:** Utiliza la función de suavizado de salida 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 del sitio web oficial de WIRED

- Página del 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:** Verificar si la página web generada cumple con los requisitos y realizar ajustes si es necesario.

**acción**:

- Obtenga una vista previa de la página web generada y verifique 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 completos 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 muestra correctamente en diferentes tamaños de dispositivos?

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

- Si se encuentran problemas, registre los requisitos de ajuste específicos:

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

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

- Si es necesario realizar ajustes, llame nuevamente a la herramienta generateWebpage, pasando el parámetro `webpage_id` para editar.

**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 consistente con el material original y los enlaces son accesibles.

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

- **Coherencia visual:** Todos los elementos se adhieren estrictamente a las pautas 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 se puede utilizar en dispositivos móviles.