Televito

L’Ispirazione

Durante il cenone di Natale a casa dei nonni della mia ragazza, i parenti hanno aperto il Televideo sulla TV. Quell’interfaccia così particolare, con i suoi colori saturi, i caratteri pixelati e la navigazione numerica, mi ha colpito immediatamente. Un pezzo di storia della televisione italiana ancora funzionante, un’esperienza utente così diversa da tutto quello che progettiamo oggi.

Tornato a casa, ho deciso di ricrearlo come esperimento web. In un pomeriggio è nato Televito: un omaggio digitale che replica l’estetica e l’interazione del Televideo RAI, alimentato da dati reali grazie ai feed RSS ufficiali della RAI.

La Soluzione

Televito è un’applicazione React che ricrea fedelmente l’esperienza del Televideo nel browser. Include navigazione numerica autentica digitando numeri da tastiera o cliccando, effetti CRT con scanlines e flickering per simulare un monitor a tubo catodico, dati in tempo reale tramite feed RSS ufficiali RAI, widget meteo con previsioni per Cerignola via Open-Meteo API, e design responsive che adatta i widget allo spazio disponibile.

Come Funziona

L’interfaccia replica fedelmente il Televideo RAI originale. In alto c’è l’header con il numero di pagina corrente e l’orologio in tempo reale (verde, come nell’originale). In basso, una barra di navigazione colorata con i pulsanti per le sezioni principali.

La navigazione numerica funziona esattamente come nel Televideo reale: si digita un numero a 3 cifre (100, 200, 300…) e si viene portati alla pagina corrispondente. Su desktop basta iniziare a digitare i numeri; su mobile si tocca l’indicatore di pagina per aprire l’input. Il sistema include auto-conferma dopo 2 secondi se non si completa il numero.

Le sezioni disponibili seguono la struttura del Televideo originale:

• 100: Homepage con widget informativi (meteo, ultime notizie, guida TV)
• 200: Notizie principali (feed RSS RAI)
• 300: Guida TV
• 400: Economia (feed RSS RAI)
• 500: Cultura e spettacolo (feed RSS RAI)

Ogni sezione supporta sotto-pagine: digitando 201, 202, ecc. si accede ai singoli articoli della sezione notizie.

L’Estetica Retro

L’effetto visivo è ottenuto combinando diversi elementi. Lo sfondo nero con testo ad alto contrasto replica l’aspetto del Televideo. Le scanlines sono create con un pseudo-elemento CSS che sovrappone righe orizzontali semitrasparenti, simulando le linee di scansione di un CRT. Un’animazione di flickering sottile fa variare leggermente la luminosità ogni 3 secondi, ricreando l’instabilità tipica dei vecchi monitor.

La tipografia usa Jersey 10, un google font pixel-art che evoca i caratteri bitmap del Televideo originale. I colori seguono la palette classica: blu, giallo, verde, rosso, ciano e bianco su sfondo nero, tutti definiti come variabili CSS per consistenza.

Le Sfide Tecniche

Il sistema di caching è stato fondamentale per evitare troppe chiamate API. Ho implementato un servizio che memorizza i dati per 10 minuti, con fallback ai dati scaduti se la chiamata API fallisce. Questo garantisce che l’applicazione rimanga utilizzabile anche offline o con connessione instabile.

La responsività dei widget nella homepage ha richiesto un approccio particolare: invece di usare media queries statiche, ho implementato un sistema che misura dinamicamente lo spazio disponibile e mostra/nasconde i widget in base all’altezza effettiva. Questo evita layout rotti su dispositivi con dimensioni non standard o quando la barra degli indirizzi del browser cambia altezza.

La navigazione numerica doveva funzionare sia da tastiera che da touch, gestendo casi limite come input parziali, auto-conferma dopo timeout, e prevenzione di caratteri non numerici.

Dettagli Tecnici

1
televito/
2
├── src/
3
│   ├── components/         # Componenti UI
4
│   │   ├── layout/         # Header, Navigation, Content
5
│   │   ├── utility/        # TitleBox, Loader
6
│   │   └── widgets/        # Weather, News, TvGuide, Contact
7
│   ├── hooks/              # Custom hooks
8
│   │   ├── useNavigation.ts
9
│   │   └── usePageSelection.ts
10
│   ├── lib/                # Configurazioni
11
│   │   └── navigation.config.tsx
12
│   ├── pages/              # Pagine per sezione
13
│   │   ├── 200/            # Notizie
14
│   │   ├── 300/            # Guida TV
15
│   │   ├── 400/            # Economia
16
│   │   ├── 500/            # Cultura
17
│   │   └── index.tsx       # Homepage (100)
18
│   ├── services/           # Servizi API
19
│   │   ├── cache.service.ts
20
│   │   ├── rss.service.ts
21
│   │   ├── weather.service.ts
22
│   │   └── news.service.ts
23
│   ├── types/              # TypeScript types
24
│   └── main.css            # Stili globali e effetti CRT
25
├── index.html              # Entry point con meta tag e font
26
└── vite.config.ts          # Configurazione Vite

1
// Mapping pagine a componenti
2
if (page >= 200 && page < 300) return <NotiziePage page={page} />;
3
if (page >= 300 && page < 400) return <GuidaTvPage page={page} />;
4
if (page >= 400 && page < 500) return <EconomiaPage page={page} />;
5
if (page >= 500 && page < 600) return <CulturaPage page={page} />;

1
body::after {
2
  content: "";
3
  position: fixed;
4
  inset: 0;
5
  background: repeating-linear-gradient(
6
    0deg,
7
    rgba(0, 0, 0, 0.15) 0px,
8
    rgba(0, 0, 0, 0.2) 1px,
9
    transparent 1.5px,
10
    transparent 2.5px
11
  );
12
  pointer-events: none;
13
  z-index: 9999;
14
  mix-blend-mode: multiply;
15
}

1
@keyframes flicker {
2
  0%, 95%, 100% { filter: brightness(1); }
3
  97%, 98% { filter: brightness(0.97); }
4
}
5

6
body {
7
  animation: flicker 3s infinite;
8
}

1
interface CacheEntry<T> {
2
  data: T;
3
  timestamp: number;
4
}
5

6
class CacheService {
7
  private static readonly CACHE_DURATION = 10 * 60 * 1000; // 10 minuti
8
  private static cache: Map<string, CacheEntry<any>> = new Map();
9

10
  static async get<T>(key: string, fetchFunction: () => Promise<T>): Promise<T> {
11
    const cached = this.cache.get(key);
12
    const now = Date.now();
13

14
    // Restituisci cache se valida
15
    if (cached && (now - cached.timestamp) < this.CACHE_DURATION) {
16
      return cached.data;
17
    }
18

19
    // Fetch e salva, con fallback su cache scaduta in caso di errore
20
    try {
21
      const data = await fetchFunction();
22
      this.cache.set(key, { data, timestamp: now });
23
      return data;
24
    } catch (error) {
25
      if (cached) return cached.data; // Fallback
26
      throw error;
27
    }
28
  }
29
}

1
const API_URL = "https://api.open-meteo.com/v1/forecast";
2
// Coordinate di Cerignola, Puglia
3
const LATITUDE = 41.2667;
4
const LONGITUDE = 15.9000;