Orologio Modelli HTML

Modelli HTML per orologi digitali, analogici e con visualizzazione dell'ora mondiale

L'interfaccia di un orologio ha un unico scopo visibile: mostrare l'ora corrente in modo che chiunque possa leggerla in un secondo. I modelli HTML per orologi forniscono il markup per la visualizzazione e il resto dei file sorgente, pronti per essere modificati e pubblicati sul proprio hosting. Al loro interno, potrebbero esserci un display digitale, un quadrante analogico o un tabellone con le città.

Scegliere tra cifre e quadranti

Un display digitale è il punto di partenza più semplice, che richiede poco più di contenitori per ore, minuti e secondi. Un indicatore AM/PM o un interruttore 12/24 ore si trova solitamente accanto. Un quadrante analogico funziona in modo diverso perché il quadrante, gli indici delle ore e le lancette necessitano ciascuno di un proprio elemento prima che uno script li aziona.

La maggior parte delle interfacce degli orologi è composta da pochi elementi riconoscibili:

• valori dell'ora con uno spazio separato per i secondi
• lancette delle ore e dei minuti su un quadrante graduato
• una riga della data, un'etichetta del giorno della settimana o un indicatore di sveglia
• il nome della città e l'offset per ogni fuso orario aggiuntivo

Le schede delle città sono il punto in cui il markup inizia a ripetersi, poiché una griglia di otto città utilizza un blocco otto volte. Nicepage Grid Repeater gestisce questo schema e la documentazione dell'elemento Grid Repeater spiega come un singolo elemento definisce il layout per più voci. Le righe dei prodotti per gli orologi da parete si ripetono allo stesso modo.

Markup che si aggiorna ogni secondo

Due cose diverse vengono chiamate allo stesso modo. A volte l'ora viene scritta nel file e non si aggiorna mai, il che va bene per uno screenshot ma può essere fuorviante in un ambiente di produzione. Un orologio funzionante necessita di JavaScript per leggere l'ora locale e riscriverla negli elementi predisposti, mentre un conto alla rovescia segue lo stesso principio a ritroso verso una data.

La lancetta dei secondi è la prova definitiva. Una demo può sembrare convincente anche se non c'è nulla in esecuzione dietro, quindi un'anteprima merita qualche secondo del tuo tempo.

Leggibilità su schermi piccoli

Gli orologi si leggono da distanze maggiori rispetto alla maggior parte degli elementi dell'interfaccia. I numeri che appaiono eleganti su un desktop diventano una massa grigiastra su un telefono tenuto a distanza di un braccio, e una sottile lancetta dei secondi scompare contro una fotografia ricca di dettagli.

Ciò che le persone regolano in seguito è lo stile dei numeri, lo spessore delle lancette e la luminosità o la scurezza del display. Il contrasto è fondamentale, perché un orologio che nessuno riesce a leggere a colpo d'occhio ha fallito nel suo unico scopo. È utile decidere fin da subito quale di questi elementi si sta realizzando, poiché un singolo orologio, una dashboard a zone e un conto alla rovescia partono da elementi diversi.