Main menu

Pages

Data e orologio digitale da inserire in pagine web, siti o blog

Ci sono molti servizi, anche gratuiti, che offrono una vasta gamma di stili di orologi, da inserire in pagine web e siti più o meno professionali. Mostrare la data corrente e l'orario con i secondi, può essere utile in alcuni siti che si occupano di eventi, che hanno creato dei sondaggi o dei concorsi a premi tra i lettori.

Su internet l'ora e la data possono essere acquisiti dal sistema in modo automatico. Gli utenti di Windows possono per esempio andare sulle Impostazioni per sincronizzare data e ora con i server della Microsoft.

In linea di massima quindi non è necessario utilizzare delle risorse esterne per avere ora data nel computer e nel web. D'altra parte la data e l'ora corrente possono essere ricavati anche con il javascript che poi potrà essere inserito in una pagina web, in un post o in un widget di un sito.






In questo post vedremo come mostrare data e ora oppure come mostrare solo la data o solo l'orario, in forma digitale, secondo lo stile europeo e la lingua italiana. In sostanza si può mostrare un calendario con l'ora digitale che si aggiorna secondo dopo secondo. Ho testato il javascript in un Editor HTML Online e questo è il risultato.

orologio-calendario-digitale

La scelta di questa soluzione è preferibile a quella offerta da terze parti, perché non occorrerà linkare siti esterni e il javascript è molto leggero e non incide in modo significativo sulla velocità di caricamento del sito, o della pagina in cui viene inserito. Ovviamente possono essere personalizzati, colori, dimensioni e famiglia dei font.






Inoltre si può decidere di aggiungere altro testo o di mostrare solo la data o solo l'orario. I secondi non resteranno bloccati al momento in cui si apre la pagina ma continueranno a scorrere anche a pagina web aperta.

L'installazione è molto semplice. Facciamo l'esempio di un widget su Blogger. Andate su Layout -> Aggiungi un gadget -> HTML/Javascript e incollate il codice seguente in Sezioni del sito per poi andare su Salva.

center;">
940F04; padding:4px; font-size : 28px; font-weight:bold' font-family: Georgia;">

191919; padding:4px; font-size : 20px; font-weight:bold' font-family: Georgia;"> ore
003366; padding:4px; font-size : 32px; font-weight:bold' font-family: Georgia;">


Posizionate l'elemento pagina dove credete, per poi andare su Salva Disposizione.





orario-data-javascript

Adesso vediamo quelle che possono essere le personalizzazioni più importanti:
  1. color='#940F04' serve per il colore della data
  2. font-size : 28px; font-weight:bold' font-family: Georgia; servono rispettivamente per la dimensione dei caratteri della data, per il grassetto e per la famiglia di font.
  3. text-align:center; è il tag per centrare nel layout data e orologio
  4. I numeri dei mesi "/ 01 /","/ 02 /"," / 03 /"," / 04 /","/ 05 / ecc... sono separati da uno spazio. Per una data più raccolta gli spazi possono essere eliminati in questo modo /01/","/02/","/03/","/04/" ecc...
  5. color:#191919; padding:4px; font-size : 20px; font-weight:bold' font-family: Georgia; è lo stile del testo ore che è l'unico presente e che può essere modificato. padding:4px; è lo spazio di divisione.
  6. color:#003366; padding:4px; font-size : 32px; font-weight:bold' font-family: Georgia; è lo stile dell'orario che può anche essere diverso dagli altri due.
Infine se si vuole mostrare solo la data si lasciano solo la prima e l'ultima riga oltre al codice evidenziato di giallo. Invece per mostrare solo l'orologio si lasciano sempre la prima e l'ultima riga ma si incollano solo le parti di codice evidenziate di verde. Il codice funziona perfettamente anche se incollato in un post in modalità HTML.
reactions

Commenti

table of contents title