Cos'è ElectroYou | Login Iscriviti

ElectroYou - la comunità dei professionisti del mondo elettrico

5
voti

Orologio + cronometro digitale su PC 1a Parte

Si tratta di un' emulazione di un orologio + cronometro usando il framework JQuery. Si lancia mediante una pagina html che può essere tranquillamente aperta in locale senza necessità di connessione ad internet. L' idea sarebbe quella di renderla funzionante anche sui dispositivi Mobile.


Cercherò di descrivere il codice scendendo un po' nei particolari in modo da dar la possibilità di comprenderne il funzionamento anche a chi non ha mai programmato per il web. Prima di iniziare voglio mostrare uno screenshot dell' applicazione in modo da dare un' idea di ciò che ho realizzato.

Screenshoot

Screenshoot

Una volta avviato il conteggio del cronometro, non bisogna assolutamente ridurre a icona la finestra del browser perchè il browser arresta l' esecuzione di JS e il cronometro andrebbe temporaneamente in pausa.

Vediamo i file presenti nella cartella del progetto:

Cartella progetto

Cartella progetto

Inizierò con l' analizzare il contenuto del file index.html

index.html

index.html

L' applicazione viene lanciata con un doppio click sul file index.html. Per visualizzarne il contenuto occorre aprirlo o con un editor html o in alternativa col BlockNote. Meglio se con qualcosa un po' più avanzata come ad esempio Gedit per Linux o Notepad++ per Windows. Questi editor hanno la caratteristica di evidenziare di colore diverso le varie parti di codice rendendolo più comprensibile. Gli script html iniziano sempre con un tag di apertura <html> e terminano col tag di chiusura </html> . All' interno del blocco <html></html> sono presenti altri 2 blocchi:

 <head></head>
 <body></body>

All'interno del primo blocco vanno inserite le informazioni utili al browser mentre nel blocco body inseriremo il contenuto che verrà visualizzato nella pagina. Seguendo l' esempio (file index.html) all' interno del blocco head troviamo il blocco <title></title> che racchiude il titolo della pagina.

 <title>Cronometro</title>

Questo tag specifica al browser il nome da dare alla finestra. Come si può vedere dallo screenshot la stringa Cronometro appare come nome della finestra.

Vediamo cosa indicano gli altri tag all' interno del blocco <head></head>.

<meta charset="utf-8" /> Indica il charset da utilizzare per la codifica dei caratteri. E'importante. Se non indicato, usa quello di default e non si ha unabuona visualizzazione dei caratteri accentati.

<meta name="description" content="Cronometro JQuery" />

Si tratta di informazioni che non vengono visualizzate nella pagina masono utili ai motori di ricerca se l' applicazione viene messa onlineo anche al programmatore che sta leggendo il codice.

<meta name="keywords" content="JQuery,Cronometro,Timer" />

<meta name="author" content="daniele78" />

Da notare che il tag meta non si chiude con </meta> ma con /> così come alcuni dei tag già visti e che prima di /> va inserito uno spazio. <link rel="shortcut icon" href="/favicon.ico" /> Permette di specificare il link di una piccola icona da visualizzare accanto al nome della finestra. <link rel="stylesheet" type="text/css"href="jqClock.css" /> Si tratta di un link ad un foglio di stile (abbr. CSS) che altro non è che un file contenente informazioni su dimensioni, caratteri, colori, ecc, da utilizzare nella pagina. Lo esamineremo successivamente. Anche quì la chiusura del tag avviene con />

<script type="text/javascript" src="jquery-1.7.2.min.js"></script> Indica al browser di includere lo script presente al link indicato mediante l' attributo src. Esamineremo questi script più avanti. Passiamo al blocco

<body></body> Questo blocco, nell' esempio, contiene al suo interno ulteriori blocchi di tipo

I blocchi indicati con tag div, sono dei contenitori. All'interno vi possiamo inserire testo, immagini, ecc. Insomma tutto ciò che vogliamo. L'uso dei div è importante sopratutto perchè a questi è possibile attribuire la posizione che dovranno occupare, nella pagina.

Esaminiamo il primo div:

Affinchè l' applicazione funzioni è necessario attivare Javascript

All'interno del tag div è stato aggiunto anche un attributo: id="clock".

A cosa serve?

E'un po' come dare un identificativo al div per poi dire tramite CSS :

Assegna al div con id="clock" le seguenti proprietà …

Sarà più chiaro in seguito.

MOLTO IMPORTANTE!

L'attributo id permette di referenziare il tag in cui viene specificato.

Affinchè ciò avvenga è indispensabile che non ci sia alcun altro tag con lo stesso valore di id. Il nome che si dà agli id deve inoltre indicare ciò ciò che essi contengono. Questo per chiarezza di chi legge il codice.

Il div non contiene un orologio ma un messaggio quindi sembrerebbe che non abbia rispettato la regola. Non è esattamente così; vediamo perchè:

La pagina è a contenuti dinamici.

Questo significa che io stabilisco il layout e i contenuti tramite il foglio di stile e l' HTML ma dò la possibilità agli script JS contenuti nei file linkati nel blocco <header></header> di apportare modifiche.

Vediamo cosa succede esattamente:

Lanciando la pagina col Browser verrà visualizzato il div col messaggio:

 Affinchè l' applicazione funzioni è necessario attivare Javascript

Completato il caricamento della pagina, uno script JS cancellerà la frase presente nel div e piazzerà al suo interno, il codice HTML necessario alla visualizzazione di un orologio, indicante data e ora correnti.

Vedremo meglio in seguito come funziona.

Se l' utente ha l' esecuzione di Javascript disattivata (è un opzione del browser), la frase non verrà cancellata e quindi sarà visibile. In caso contrario, la cancellazione è così rapida che l' utente non si accorgerà di nulla.

Prima di andare avanti, esaminiamo anche l' attributo class.

Come già detto l' attributo id permette di referenziare in modo univoco un tag. Spesso accade che più blocchi hanno le stesse proprietà css. Pensiamo ad esempio a 3 div che hanno il bordo dello stesso colore e le stesse dimensioni.

Nel CSS per ciascuno dei 3 id dovremmo specificare le medesime proprietà.

E' più pratico invece, assegnare nel CSS quelle proprietà ad un attributo class e poi nel codice HTML, tutti i tag che hanno quello specifico valore per l' attributo class, le condivideranno.

E'possibile anche che uno dei 3 abbia una proprietà aggiuntiva che gli altri due non hanno. A questo punto a quel div si assegna anche un id e nel css a quel valore di id si associa la proprietà o le proprietà aggiuntive. In questo modo il div avrà le proprietà degli altri due più quelle aggiuntive. Con la pratica diverrà tutto più chiaro.

Procedendo avanti abbiamo ancora un blocco
che al suo interno contiene una lista.

Una lista in html per intenderci è quella che in Word viene chiamata elenco puntato o elenco numerato.

In html si chiamano rispettivamente lista non ordinata e lista ordinata.

Per il primo tipo i tag da utilizzare sono
    mentre per il secondo tipo:

      Le voci della lista vanno racchiuse in tag li

      Un esempio potrebbe essere:

      • Prima voce
      • Seconda voce
      • Terza voce


      Nel nostro caso le voci non sono del testo ma le immagini dei digit del cronometro. Le cifre visualizzate infatti sono immagini ricavate dalla foto di un display reale. Tutto questo per dare al cronometro un aspetto un po' più realistico.

      Mediante CSS sono stati rimossi i punti di enumerazione accanto alla visualizzazione di ciascuna immagine del digit ed è stato specificato di visualizzare questo elenco di immagini in orizzontale e non in verticale. Il risultato è quello ottenuto nello screenshot.

      Vediamo adesso come viene inserita un' immagine.

      Il tag da utilizzare è img.

      Questo tag viene chiuso con />

      <img class="digit" src ="digits/0.png" width="134" height="206" alt="" />

      L'attributo src indica il link all' immagine da visualizzare. Width ed height sono rispettivamente la larghezza e l' altezza dell'immagine espressa in pixel. Questi 2 attributi non sono obbligatori ma potrebbero evitare al browser di calcolarne lui le dimensioni con conseguente riduzione dei tempi di caricamento della pagina.

      L'attributo alt permette di visualizzare al posto dell' immagine una stringa di testo con una descrizione sintetica del contenuto dell'immagine qualora l' utente abbia disattivato la visualizzazione delle immagini. Si tratta di un' opzione del browser che permette di migliorare la velocità di navigazione escludendo appunto il caricamento delle immagini. Poichè le immagini potrebbero contenere informazioni molto importanti lo standard W3C vuole che il programmatore lo usi sempre in modo da ricordarsi che esiste questo pericolo. Tuttavia se non si vuole alcun testo visualizzato è sufficiente non inserire nulla tra i doppi apici.

      Subito dopo il blocco div con id = "chronometer" abbiamo un div con id="start_time" e ancora dopo il blocco div contenente i pulsanti.

      Per i pulsanti la sintassi è la seguente:

      <input type="button" value="Start" id="Start" />

      Anche il tag <input> viene chiuso con />

      input è un tag un po' generico e ciò che specifica di cosa si tratta effettivamente è l' attributo type (obbligatorio).

      L'attributo value indica invece il testo da mostrare sul pulsante.

      Prima ho parlato degli attributi id e class utili per agganciare delle proprietà, specificate su un file CSS, ai tag html nella nostra pagina.

      Prima di procedere vediamo lo screenshot che si avrebbe con javascript disattivato.

      Il risultato è lo stesso che si avrebbe linkando nell' header il solo file del foglio di stile: jqClock.css

      Screenshot 2.png

      Screenshot 2.png

      Notiamo che appare il testo che chiede l' attivazione dell' esecuzione discript JS, proprio perchè non essendo questa attiva, tale stringanon viene sostituita dinamicamente col codice relativo al timer.

      Le cifre mostrano tutte 0 perchè nei tag <img > abbiamo linkato ovunque l' immagine del digit 0. I pulsanti inoltre non funzionano proprio perchè gli eventi click sui pulsanti vengono gestiti con JS. Per l' esattezza non ho utilizzato JS puro ma il framework JQuery che semplifica notevolmente il codice.

      Diamo adesso un occhiata al CSS.

      jqClock.css

      jqClock.css


      Abbiamo detto che l' attributo id si usa quando vogliamo assegnare delle proprietà grafiche ad un singolo elemento mentre, l' attributo class quando vogliamo assegnare queste proprietà a più elementi contemporaneamente.

      C'è un ulteriore possibilità: quella di assegnare delle proprietà a tutti i tag di un certo tipo.

      Nell'esempio abbiamo sfruttato quest' ultima possibilità per il tag body

      body{background-image:url('digits/background.png');background-repeat:repeat;}

      Come si può vedere va scritto il nome del tag e subito dopo all' interno di parentesi graffe l' elenco delle proprietà.

      Tutto ciò che andremo a visualizzare nella pagina si trova nel body.

      Diciamo che il body è il nostro contenitore principale. Se vogliamo applicare un' immagine di sfondo alla nostra pagina web ènecessario specificare ciò come proprietà del body.

      Ciascuna proprietà deve terminare sempre con ;

      background-image:url('digits/background.png'); Specifica il link all' immagine da usare come sfondo.

      background-repeat:repeat; Indica al browser di replicare l' immagine sia orizzontalmente che verticalmente qualora questa sia più piccola della dimensione della finestra del browser. In questo modo ci assicuriamo sempre l' intera copertura.

      Utilizzando questa proprietà è stato possibile utilizzare la replica di un piccolo quadratino.

      Il carattere # indica che il nome specificato subito dopo è un id.

      Il carattere . indica che il nome specificato subito dopo è unattributo class.

      Ilnome soltanto, indica che si tratta del nome di un tag.

      1. clock{position:fixed;top: 0;}

      dice che il tag con id=”clock” deve essere posizionato in alto alla pagina.

      .jqclock{ float:left; text-align:center; padding: 10px; margin:10px; }

      .clockdate{ color: DarkRed; font-size: 2em; display: inline;}

      .clocktime{ padding-left: 35px; font-size: 2em; color: DarkRed; margin: 2px;display:inline; }

      I tag con questi attributi per class vengono inseriti dinamicamente dal codice js.

      Il significato delle proprietà è molto intuitivo.

      Supponiamo di avere un blocco div

      float:left; indica che va posizionato a sinistra.

      text-align:center; indica che tutto ciò che è presente tra i tag in questione deve essere centrato orizzontalmente all' interno del blocco.

      Il padding indica di quanti px il contenuto interno del div dovrà distanziarsi dai bordi dello stesso.

      Il margin indica di quanti px il div in questione dovrà distanziarsi dagli elementi adiacenti.

      Poi abbiamo colore del carattere, dimenzione del carattere, ecc.

      1. #chronometer li {
         display:inline; 
         list-style-type:none; 
         padding-left:0px; 
      

      }

      Questo è particolarmente importante e si riferisce alla lista non ordinata visualizzante i digit del cronometro. #chronometer li indica che ci stiamo riferendo a tutti i tag li che si trovano a loro volta racchiusi da un blocco più esterno che ha id=”chronometer”.

      Possiamo dire che tutti I tag li presenti nella pagina sono interni al div con id=”chronometer”.

      Poteva essere scritto benissimo: li{...}

      E' buona regola mantenere sempre un riferimento al div contenitore.

      Questo fa si che aggiungendo in seguito una nuova lista nella pagina, questa non acquisisca le proprietà specificate per la lista del blocco chronometer.

      E' una strategia di programmazione utile più che altro in caso di codice più complesso.

      display:inline; 
      list-style-type:none; 
      

      queste sono le proprietà che specificano che l' elenco puntato deve essere visualizzato in orizzontale e non in verticale come avviene normalmente e che non devono essere mostrati i puntini di enumerazione.

      Nella seconda parte spiegherò come vengono modificati dinamicamente i contenuti della pagina in modo da visualizzare il conteggio.

      Continuazioni

      0

      Commenti e note

      Inserisci un commento

      Inserisci un commento

      Per inserire commenti è necessario iscriversi ad ElectroYou. Se sei già iscritto, effettua il login.