Con SuperSite puoi mostrare i dati e i numeri del tuo sito in modo chiaro e dinamico: tabelle aggiornabili, grafici, orari in tempo reale, conti alla rovescia e contatori. Questa guida raccoglie questi componenti raggruppati per funzione, con le opzioni principali e i consigli d'uso essenziali.
Tabella di dati
La Tabella dati serve a pubblicare e tenere aggiornate grandi quantità di informazioni - listini, schede, elenchi, calendari - senza scrivere codice. Non è una tabella statica: ricerca interna, ordinamento, paginazione e import/export dei dati sono già inclusi.
Le opzioni principali:
- Righe e colonne: ne regoli il numero con i cursori e modifichi il contenuto facendo clic direttamente su una cella; trascini l'intestazione per riordinare le colonne. Tutte le modifiche si salvano da sole.
- Ricerca e navigazione: ricerca in tempo reale, ordinamento per colonna e paginazione automatica, con impostazioni separate per desktop e telefono.
- Stile: tipografia distinta per intestazione e corpo, colori di sfondo alternati per righe o colonne (effetto a zebra) e bordi regolabili per spessore e colore.
- Link nelle celle: ogni cella può rimandare a una pagina del sito, a un indirizzo esterno, a un documento da scaricare o a un ancoraggio, con icona a scelta.
- Telefono e CSV: scegli quali colonne mostrare su smartphone (almeno una); importi i dati da un file CSV scegliendo il separatore, oppure li esporti tutti in un file.
Grafici: a linee, a barre e a ciambella
I tre grafici si costruiscono nello stesso modo. Inserisci i dati in una piccola tabella dell'editor, dai un nome a ogni serie (fino a tre) e premi Salva per convalidare i valori e ridisegnare il grafico; i colori delle serie si scelgono con il selettore colore. Se lasci vuoto il nome di una serie, la colonna corrispondente si disattiva e il grafico usa solo le serie definite.
Scegli il tipo in base a ciò che vuoi comunicare:
- Grafico a linee - mostra un andamento nel tempo (mesi, trimestri, anni). Puoi scegliere linee o area piena e angoli netti o morbidi; la griglia di sfondo è opzionale.
- Grafico a barre - confronta categorie o periodi. Le serie possono essere affiancate, per il confronto diretto, oppure impilate, per mostrare la composizione di un totale.
- Grafico a ciambella - mostra come un totale si divide in parti, in percentuale o in valore assoluto. Per la leggibilità usa da tre a otto voci.
Ora, data e conto alla rovescia
Quattro componenti per portare il tempo nelle tue pagine:
- Orologio analogico - un orologio con lancette che mostra l'ora locale del visitatore. Scegli il quadrante tra le miniature disponibili e regola l'opacità con il cursore; mantieni larghezza e altezza uguali per ottenere un cerchio perfetto.
- Data e ora - mostra data e ora correnti (gg/mm/aaaa e hh:mm:ss) aggiornate ogni secondo, come un orologio digitale. Personalizzi carattere, dimensione, colore del testo e sfondo, anche con trasparenza.
- Conto alla rovescia - conta giorni, ore, minuti e secondi fino a una data di fine (obbligatoria); puoi impostare anche una data di inizio per le campagne programmate. A zero compare una frase finale che scrivi tu, con sfondo e carattere personalizzabili.
- Conto alla rovescia stile tabellone - lo stesso conteggio con un aspetto da tabellone aeroportuale, a blocchi scuri. Il design è fisso e non personalizzabile: aggiungi tu, sopra o sotto, un testo che spieghi che cosa scade.
Tutti questi componenti usano l'ora del dispositivo del visitatore. Se ti rivolgi a un pubblico internazionale, affianca un testo che indichi il fuso orario di riferimento, per esempio Orario Italia - CET.
Contatori
Tre modi per dare risalto ai tuoi numeri:
- Contatore animato - un numero che sale da un valore iniziale fino a quello finale quando entra nell'area visibile della pagina; l'animazione parte una sola volta. Modifichi la cifra facendo clic sul contatore nell'editor e regoli velocità e punto di partenza. Per l'Italia usa il punto per le migliaia e la virgola per i decimali.
- Contatore visite totali - mostra il numero complessivo di visite ricevute dal sito, aggiornato a ogni caricamento. Utile nella sezione *I nostri numeri* o nel piè di pagina per costruire autorevolezza nel tempo.
- Contatore visite online - mostra quante persone sono collegate al sito in quel momento. Utile vicino agli inviti all'azione per creare senso di urgenza e di comunità attiva.
I due contatori di visite leggono le statistiche del tuo sito senza strumenti esterni: puoi mostrare il numero intero oppure abbreviato (per esempio 1.2k) e, al passaggio del mouse, compare comunque il numero completo. In entrambi personalizzi carattere, dimensione, colore e sfondo.
Problemi comuni e soluzioni
Il testo o i numeri si leggono male.
Il contrasto tra testo e sfondo è insufficiente. Usa testo scuro su sfondo chiaro e testo chiaro su sfondo scuro, ed evita colori troppo simili tra loro.
Il contenuto esce dal riquadro o appare tagliato.
Il blocco è troppo piccolo per la dimensione scelta: ridimensionalo nell'editor o riduci un po' il testo. Per l'orologio, porta larghezza e altezza allo stesso valore così il quadrante resta un cerchio.
Le modifiche a un grafico o alla tabella non compaiono.
Ricordati di premere Salva dopo aver modificato i dati. Inserisci solo numeri (punto o virgola per i decimali): i valori non numerici vengono azzerati o scartati. Se una colonna o una serie è disattivata, manca il nome del set corrispondente.
L'import da CSV non carica i dati.
Controlla il separatore usato nel file (di solito virgola o punto e virgola) e verifica che la codifica sia UTF-8. Se la prima riga contiene i nomi delle colonne, seleziona l'opzione che include le intestazioni.
Il conto alla rovescia non parte o mostra subito la frase finale.
Verifica le date: la data di inizio non deve essere nel futuro e la data di fine deve essere successiva a oggi. Imposta con attenzione anche ore e minuti, non solo il giorno.
Un contatore di visite resta vuoto o il numero è troppo lungo.
Il contatore mostra dati reali: il sito deve essere pubblicato e ricevere visite. Se il numero rompe il layout, scegli la modalità con numeri abbreviati o riduci la dimensione del testo.