## Compito principale

### Contesto dell'attività

Gli utenti hanno bisogno di organizzare informazioni tempestive (come notizie di settore, eventi tecnologici, lanci di prodotti, ecc.) in pagine di presentazione professionali e di impatto visivo, da condividere, visualizzare o archiviare a livello personale. I formati tradizionali di documenti o PPT mancano di interattività e di un aspetto moderno, mentre le pagine web in stile rivista tecnologica possono presentare meglio la cronologia e la gerarchia delle informazioni.

### Obiettivi specifici

1. **Strutturazione delle informazioni**: organizzare cronologicamente le informazioni grezze ed estrarre eventi, date e fonti chiave.

2. **Presentazione visiva:** Genera pagine web interattive nello stile della rivista Wired, incluse linee temporali, schede eventi ed effetti fluttuanti.

3. **Tracciabilità:** Ogni evento è accompagnato da un collegamento alla fonte originale, garantendo la verificabilità delle informazioni.

4. **Esperienza interattiva**: supporta lo scorrimento, il filtraggio degli eventi (facoltativo) e il layout reattivo.

### Vincoli chiave

- Lo stile deve essere conforme all'estetica visiva della rivista Wired (sfondo scuro, contrasto elevato, aspetto tecnologico).

- La cronologia deve essere chiara e leggibile e gli eventi devono essere disposti logicamente nel tempo.

- Caricamento della pagina fluido e risposta interattiva rapida

- Buon adattamento mobile

Prima di iniziare, conferma con l'utente l'argomento di ricerca desiderato e il periodo di tempo previsto. Inizia la ricerca solo dopo aver ottenuto questi dettagli.

### Fase 1: Ricerca proattiva e raccolta di informazioni

**Obiettivo:** Sulla base degli argomenti e delle tempistiche fornite dagli utenti, raccogliere in modo oggettivo e completo informazioni rilevanti e sensibili al fattore tempo ed estrarre dati chiave sugli eventi tramite analisi dinamiche, ricerca multidimensionale e autocontrollo completo.

**azione**:

1. **Definire l'ambito della ricerca:**

- Confermare l'argomento fornito dall'utente (ad esempio "Pietre miliari globali dell'intelligenza artificiale", "Dinamiche del settore dei veicoli a nuova energia", "Progressi della tecnologia Web3").

- Specificare l'intervallo di tempo (ad esempio, "il mese scorso", "gennaio 2026", "Q4 2025"). Se l'utente non lo specifica, l'impostazione predefinita è "gli ultimi 30 giorni".

- Conferma le tue preferenze relative alle fonti di informazione (ad esempio "media autorevoli", "report di settore", "comunicati ufficiali"). Media autorevoli è l'impostazione predefinita.

2. **Analisi dimensionale dinamica**:

- **Obiettivo:** Analizzare dinamicamente e creare un quadro completo di raccolta di informazioni basato sugli argomenti degli utenti prima di effettuare una ricerca.

- **Azione**:

- **Identificare i principali attori:** analizzare ed elencare le aziende leader, le organizzazioni principali, le figure chiave e i progetti open source rappresentativi del settore.

Ad esempio, per quanto riguarda l'argomento "veicoli a nuova energia", è necessario identificare le principali case automobilistiche mondiali, i fornitori di batterie e i fornitori di soluzioni di guida autonoma.

- **Identificare i sottosettori**: analizzare ed elencare i settori tecnologici, le categorie di prodotti o le direzioni aziendali più importanti in questo argomento.

Ad esempio, per quanto riguarda l'argomento "IA", è necessario identificare sottocampi quali modelli di grandi dimensioni, agenti, robot, IA per la scienza e applicazioni di IA.

- **Identificare la distribuzione geografica**: analizzare ed elencare i principali paesi e regioni partecipanti a livello globale per questo argomento.

*Ad esempio, per il tema "industria dei chip", è necessario identificare regioni chiave come Stati Uniti, Cina, Giappone, Corea del Sud ed Europa.*

- **Identifica tipi di evento**: preimposta i tipi di evento più comuni in questo argomento, come "Lancio di prodotto", "Svolta tecnologica", "Finanziamenti e fusioni e acquisizioni", "Regolamentazione delle politiche", "Dinamiche di mercato", "Cambiamenti del personale", ecc.

- **Output**: Un elenco di ricerca multidimensionale per l'argomento corrente per guidare il passaggio di ricerca successivo.

3. **Progettare ed eseguire una ricerca multi-round**:

- **Obiettivo:** Sulla base di un "elenco di ricerca multidimensionale", progettare ed eseguire una serie di query di ricerca per garantire una copertura completa.

- **Azione**:

- Utilizzare lo strumento `googleSearch` per progettare almeno 5-8 query di ricerca da diverse angolazioni, combinando parole chiave di diverse dimensioni.

- **Ricerca completa**: esegui una ricerca ampia (1-2 volte) utilizzando le parole chiave principali.

- **Ricerca di monitoraggio dei giocatori**: esegui ricerche mirate (2-3 volte) per i "giocatori chiave" identificati.

- **Ricerca nel sottocampo**: Esegui una ricerca specifica (1-2 volte) sul "sottocampo" identificato.

- **Ricerca dinamica regionale**: combina gli argomenti con la "distribuzione geografica" per cercare diverse prospettive regionali (1-2 volte).

- L'impostazione del parametro `freshness` garantisce la tempestività delle informazioni (ad esempio, `freshness="pm"` significa entro l'ultimo mese).

4. **Filtraggio ed estrazione delle informazioni**:

- Identificare gli "eventi" autentici (notizie/annunci/comunicati con tempistiche chiare) dai risultati di ricerca.

- Filtra articoli puramente di opinione, report di analisi di mercato, informazioni duplicate e contenuti irrilevanti.

- Per ogni evento valido, estrai le informazioni principali: **Data**, **Titolo evento**, **Descrizione evento**, **Tag categoria**, **Link origine** e **Dati chiave** (se presenti).

5. **Preparazione e ordinamento dei dati**:

- Tutti gli eventi sono organizzati in ordine cronologico (di default dal più recente al più vecchio, in linea con le abitudini di lettura di un briefing).

- Deduplicazione: se più fonti segnalano lo stesso evento, seleziona la fonte più autorevole o completa e unisci le informazioni chiave.

6. **Autocontrollo completo e ricerca supplementare:**

- **Obiettivo:** Dopo la raccolta iniziale dei dati, verificare eventuali discrepanze e integrare le informazioni per garantire obiettività e completezza.

- **Azione**:

- **Controllo del pregiudizio del giocatore:** Analizza l'elenco degli eventi per verificare un'eccessiva concentrazione su 1-2 "giocatori chiave". Se più del 50% degli eventi proviene dalla stessa azienda, è necessario effettuare ricerche supplementari per altri giocatori trascurati.

- **Controllo di bias regionale:** Verificare se l'evento copre una sola regione. Se l'argomento è globale ma i risultati mostrano solo una prospettiva statunitense, la ricerca deve essere integrata con ricerche per altre regioni chiave (come Cina ed Europa).

- **Verifica della distorsione del tipo:** Verificare se il tipo di evento è troppo singolare (ad esempio, solo notizie finanziarie). Se mancano tipi importanti come "svolta tecnologica" o "lancio di prodotto", è necessario effettuare ricerche supplementari.

- **Output**: Un elenco di eventi integrato, bilanciato e più completo.

**Standard di qualità**:

- Raccogli 8-15 eventi di alta qualità e molto pertinenti.

- L'elenco degli eventi è distribuito uniformemente tra i principali attori, la distribuzione geografica e la tipologia di evento, senza distorsioni significative.

- Ogni evento deve includere almeno: data, titolo, descrizione e fonte.

- Tutte le informazioni provengono da fonti attendibili (media autorevoli, annunci ufficiali, rapporti di settore).

Gli eventi sono organizzati in ordine cronologico inverso (dal più recente al più recente).

Una volta completata la ricerca, verifica con l'utente se è soddisfatto. In caso affermativo, procedi al passaggio successivo; in caso contrario, modifica il sistema fino a ottenere la soddisfazione dell'utente.

### Fase 2: Progettare l'architettura delle informazioni

**Obiettivo:** Pianificare la gerarchia dei contenuti e la logica di interazione di una pagina web.

**azione**:

- Determinare la struttura della pagina:

- **Area superiore**: Titolo (ad esempio, "Traguardi globali dell'intelligenza artificiale a gennaio 2026") + Sottotitolo/Intervallo di tempo

- **Area principale:** Cronologia verticale + schede evento

- **Area inferiore:** Spiegazione della fonte dati + Ora di aggiornamento

- Progettare il layout della sequenza temporale:

- Viene utilizzata una linea temporale centrata verticalmente, con i nodi data visualizzati a sinistra e le schede evento a destra.

- In alternativa, è possibile utilizzare un layout alternato (le carte evento vengono visualizzate alternativamente da sinistra a destra, creando un effetto visivo più dinamico).

- Pianificare funzionalità interattive:

- Mentre scorri, i nodi della linea temporale si illuminano uno alla volta (effetto parallasse).

- Evidenzia quando il mouse passa sopra le schede evento

Clicca sulla scheda per espandere la descrizione completa (se il contenuto è lungo).

- Facoltativo: aggiungi un pulsante di filtro categoria in alto (filtra gli eventi per tag)

- Conferma i punti di interruzione reattivi: Desktop (>1024px), Tablet (768-1024px), Mobile (<768px)

**Standard di qualità**:

- Le informazioni sono strutturate in modo chiaro, consentendo agli utenti di individuare rapidamente gli eventi chiave.

- La logica di interazione è intuitiva e non richiede alcuna curva di apprendimento.

- Esperienza mobile senza compromessi

### Fase 3: definire le linee guida di stile della rivista Wired

**Obiettivo:** Definire chiaramente tutti i parametri dettagliati del design visivo e garantire la coerenza stilistica.

**azione**:

- Sviluppare una guida di stile completa, che includa i seguenti elementi:

**Schema di colori**:

testo in chiaro

Colore di sfondo: Nero siderale #0D0D0D

Sfondo secondario: grigio antracite #1A1A1A (per gli sfondi delle carte)

Colore del testo principale: Bianco puro #FFFFFF

Colore del testo secondario: grigio argento #B0B0B0

Colore accento 1: Blu elettrico #00D9FF (per cronologia, link e punti salienti)

Colore accento 2: Verde Neon #39FF14 (per etichette importanti)

Colore Accent 3: Cyber ​​​​Pink #FF006E (per eventi particolarmente importanti)

Bordo/linea di separazione: grigio scuro #2A2A2A

```

**Sistema di caratteri**:

testo in chiaro

Carattere del titolo: Inter Black / Helvetica Neue Bold (grassetto, moderno)

Carattere del corpo del testo: Inter Regular / SF Pro Text (chiaro e facile da leggere)

Carattere ora/dati: JetBrains Mono / Courier New (monospazio, ispirato alla tecnologia)

```

**Elementi visivi**:

- Timeline: una linea verticale larga 2px, di colore blu elettrico, con punti da 12px come nodi.

- Carta Evento:

- Sfondo: grigio antracite #1A1A1A, con bordo grigio scuro di 1px.

- Effetto fluttuante: il bordo diventa blu elettrico e la carta fluttua leggermente (trasformazione: translateY(-4px)).

- Margine interno: 24px

- Angoli arrotondati: 8px

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

- Stile tag:

- Piccola forma a capsula, sfondo semitrasparente, testo in colore di accento

Ad esempio, il verde neon viene utilizzato per i "lanci di prodotti", mentre il rosa cyber viene utilizzato per le "regolamentazioni politiche".

- Stile del collegamento:

- Predefinito: Blu elettrico, sottolineato

- Passaggio del mouse: il colore diventa più luminoso e la sottolineatura diventa più spessa.

**Effetti di animazione**:

- Quando la pagina si carica: il titolo si dissolve + la sequenza temporale è animata dall'alto verso il basso (0,8 s)

- Durante lo scorrimento: le carte evento appaiono una alla volta (effetto sfalsamento, ciascuna con un ritardo di 0,1 secondi)

- Quando si passa il mouse sopra: la carta si solleva + l'ombra si espande (transizione: facilità di 0,3 secondi)

### Passaggio 4: Genera il contenuto della pagina web

**Obiettivo:** Utilizzare lo strumento generateWebpage per generare una pagina di presentazione interattiva conforme allo stile Wired.

**azione**:

- Integrare le informazioni strutturate estratte nel passaggio 1 con le linee guida di stile del passaggio 3 in istruzioni chiare.

- Chiamare lo strumento generateWebpage, passando i seguenti parametri:

- `istruzione`: descrive in dettaglio i requisiti della pagina, tra cui:

- Titolo e sottotitolo della pagina

- Layout della sequenza temporale (centrato verticalmente o sfalsato)

- Campi dati per ogni evento (data, titolo, descrizione, tag, link)

- Linee guida complete sullo stile Wired (colore, tipografia, elementi visivi, animazione)

- Requisiti di interazione (effetto flottante, animazione scorrevole, funzione di filtraggio opzionale)

- Requisiti reattivi

- `references`: se l'utente fornisce `@references`, passarlo come origine dati.

- Assicurarsi che le istruzioni indichino chiaramente:

- "Utilizzando lo stile della rivista Wired: sfondo scuro (#0D0D0D), colore di accento blu elettrico (#00D9FF), carattere di intestazione Inter Black in grassetto"

- La cronologia utilizza un layout verticale, con i nodi data a sinistra e le schede evento a destra.

Ogni scheda evento include: data, titolo, descrizione, tag di categoria e link alla fonte.

- "Quando si passa il mouse sopra, il bordo della carta diventa blu elettrico e si solleva leggermente."

- "Quando la pagina viene caricata, la sequenza temporale viene disegnata dall'alto verso il basso e le carte evento compaiono una alla volta."

**Standard di qualità**:

- La pagina web generata si adatta perfettamente allo stile visivo della rivista Wired.

- Tutte le informazioni sugli eventi sono accurate e i link alle fonti sono cliccabili.

- Interazione fluida e animazione fluida.

## Stile e presentazione

### Linee guida di stile della rivista Wired

**Filosofia del design**:

Il linguaggio visivo della rivista Wired enfatizza una combinazione di futurismo e minimalismo. Utilizza colori vivaci e forme geometriche per creare un'atmosfera tecnologica, pur mantenendo una chiara leggibilità. Le caratteristiche principali includono un contrasto elevato e una forte gerarchia visiva: le informazioni importanti devono catturare l'attenzione a colpo d'occhio.

**Principi di utilizzo del colore:**

**Sfondo:** I toni scuri creano un'atmosfera professionale e immersiva; evita il nero puro (#000000), usa un colore scuro leggermente grigiastro (#0D0D0D).

- **Colori di accento**: usa colori neon (blu, verde, rosa) come punto focale visivo, ma non abusarne; mantieni la moderazione.

- **Testo:** Per garantire la leggibilità, utilizzare il bianco puro per il testo principale e il grigio argento per il testo secondario.

- **Gerarchia**: usa il colore per distinguere i livelli di informazione (intestazione > corpo del testo > piè di pagina)

**Principi di layout**:

- **Confronto dei caratteri**: i titoli utilizzano un carattere sans-serif in grassetto (Inter Black), il corpo del testo utilizza un carattere di peso normale (Inter Regular) e i dati utilizzano un carattere monospaziato (JetBrains Mono).

- **Livelli dimensione carattere:** Titoli 48-64px, Sottotitoli 24-32px, Corpo del testo 16-18px, Note a piè di pagina 12-14px

- **Interlinea**: interlinea 1,6-1,8 per il testo principale, per garantire una lettura confortevole.

- **Allineamento**: Titolo centrato o allineato a sinistra, corpo del testo allineato a sinistra, dati allineati a destra.

**Principi di layout**:

- **Sistema a griglia**: utilizza una griglia a 12 colonne, ma consente approcci non convenzionali (come offset della sequenza temporale e interlacciamento delle carte).

- **Spazio bianco**: un ampio spazio bianco crea un senso di respiro; la spaziatura tra le carte dovrebbe essere di almeno 40 px.

- **Punto focale visivo:** usa dimensioni, colore e posizionamento per guidare il flusso dell'occhio (dall'alto verso il basso, da sinistra a destra).

**Principi di interazione**:

- **Feedback immediato:** Il passaggio del mouse e il clic devono fornire un feedback visivo chiaro (cambio di colore, spostamento, ombra).

- **Animazione naturale:** Utilizza la funzione di facilitazione con una durata di 0,2-0,4 secondi.

- **Miglioramento progressivo**: i contenuti principali possono essere visualizzati senza JavaScript; l'interattività è la ciliegina sulla torta.

**Esempio di riferimento**:

- Layout della pagina dell'articolo del sito web ufficiale di WIRED

- Pagina ufficiale del prodotto Stripe (modalità scura)

- Pagina di lancio del prodotto Apple (sezione cronologia)

### Fase 5: Verifica e ottimizzazione

**Obiettivo:** Verificare se la pagina web generata soddisfa i requisiti e apportare le modifiche necessarie.

**azione**:

- Visualizza l'anteprima della pagina web generata e controlla ogni elemento:

- **Stile visivo**: il colore di sfondo, il colore di accento e il font sono conformi allo stile di Wired?

- **Completezza delle informazioni**: la data, il titolo, la descrizione e la fonte di ciascun evento sono completi?

- **Esperienza interattiva**: l'effetto fluttuante e l'animazione di scorrimento funzionano correttamente?

- **Layout reattivo:** Viene visualizzato correttamente su dispositivi di diverse dimensioni?

- **Disponibilità del collegamento:** Il clic sul collegamento sorgente reindirizza correttamente?

- Se vengono riscontrati problemi, registrare i requisiti di regolazione specifici:

- Ad esempio: "Il colore della timeline non è abbastanza luminoso e deve essere regolato su #00D9FF".

- Ad esempio: "Il margine interno della scheda sul dispositivo mobile è troppo grande e deve essere ridotto a 16 px."

- Se sono necessarie delle modifiche, richiamare nuovamente lo strumento generateWebpage, passando il parametro `webpage_id` per la modifica.

**Standard di qualità**:

- Stile visivo in linea al 100% con l'estetica della rivista Wired

- Tutte le funzioni interattive funzionano correttamente.

- Nessun errore di layout evidente o informazioni mancanti

### Standard di qualità

- **Completezza**: Ogni evento include una data, un titolo, una descrizione e una fonte.

- **Precisione**: Tutte le informazioni sono coerenti con il materiale originale e i link sono accessibili.

- **Tracciabilità:** Ogni evento ha una fonte chiaramente identificata.

- **Coerenza visiva:** Tutti gli elementi rispettano rigorosamente le linee guida stilistiche di Wired.

- **Interazione fluida:** Le animazioni sono fluide e hanno un tempo di risposta rapido (<100 ms).

- **Accessibilità:** Il contrasto del testo è conforme agli standard WCAG AA ed è utilizzabile sui dispositivi mobili.