Main menu

Pages

Mostrare data e orologio in un sito con secondi in tempo reale

Sono molti i siti che amano mostrare data e orologio, anche se questi dati sono visibili anche nella Barra delle Applicazioni del computer, in cui si può anche visualizzare il giorno della settimana nel tooltip che si apre passandoci sopra con il mouse.

Ci sono anche numerosi servizi web che mettono a disposizione un codice da incollare in una pagina web per mostrare un orologio digitale anche con grafiche accattivanti. In questi codici però c'è sempre un link che punta al sito proprietario dell'orologio e questo può creare due diversi tipi di problemi.

Viene aggiunta una nuova chiamata HTTP che può rallentare l'apertura della pagina e il collegamento viene considerato da Google alla stregua di tutti gli altri. Si instaura quindi un flusso di Page Rank verso un sito che generalmente ha poco da spartire con gli argomenti trattati nel sito e questo danneggia obiettivamente il lato SEO.  


La soluzione migliore è quindi quella di creare un nostro orologio digitale, in modo assolutamente svincolato da altre risorse web, attraverso un codice javascript, peraltro molto semplice e che quindi non inciderà in modo significativo sulla pesantezza della pagina e sulla rapidità di apertura del sito. 





Il codice che andrò a presentare mostrerà Giorno della settimana, Giorno, Mese, Anno, Ora, Minuti e Secondi che si aggiornano in tempo reale. 

orologio-tempo-reale

Ho creato l'orologio digitale con lo stile italiano, che mette il giorno prima di quello del mese, al contrario di come avviene nel mondo anglosassone, e con i giorni della settimana che sono anch'essi nella nostra lingua.






Il codice da incollare in una pagina web in modalità HTML, o in un widget HTML/Javascript per gli utenti di Blogger, è il seguente, in cui si possono personalizzare codici dei colori, dimensioni e famiglia di font.


22px; font-weight:bold; font-family:Georgia;">



18px; font-weight:bold; font-family: Georgia;">

I parametri e le righe da modificare sono stati colorati e evidenziati. Se inserito in un widget, si salva per poi posizionarlo con il trascinamento del cursore. L'ora è divisa dalla data da un salto di riga
.
Lo stile dell'ora è dato dalla riga evidenziata di giallo in cui impostare dimensione, colore e font, mentre quello della data è evidenziato di verde. Il colore dell'orologio digitale è quello determinato dal codice della seconda riga.





Possiamo anche mostrare l'orologio fisso nel layout mediante il tag position:fixed; e impostando la distanza dai bordi del layout. In questo caso il codice si può modificare in questo modo:

100px; right:50px; text-align:center; font-size : 18px; font-weight:bold; font-family: Georgia;">





Tale codice può essere incollato in un widget HTML/Javascript, per poi essere salvato, senza bisogno di essere posizionato, visto che la posizione viene impostata dalla prima riga del codice. Con il codice proposto, top:100px; right:50px;, l'orologio verrà mostrato fisso a una distanza di 100 pixel dall'alto e di 50 pixel dalla destra. Lo stile dell'orologio viene impostato nella prima riga evidenziata di giallo in cui scegliere la dimensione dei caratteri, la famiglia di font e il grassetto mentre per il colore si può cambiare il codice #036'.
reactions

Commenti

table of contents title