L’HTML COS’E’? I LINGUAGGI DI FRONT-END
Quando si effettua una ricerca in internet attraverso i motori di ricerca (Google, Edge, Firefox ..), si ottiene come risultato un elenco di articoli relativi alla parola chiave digitata nella barra degli indirizzi. Questo processo è caratterizzato da una richiesta del Client (in questo casi il Browser o motore di ricerca) e dalla risposta di un Server. La risposta del Server è rappresentata da un file in codice (con estensione .html) e integrata da ulteriori righe di sviluppo (CSS e Javascript).
Pertanto per dare istruzioni al pc è necessario un Linguaggio in codice che sia leggibile dall’utente e dalla macchina. La traduzione di questo codice, da parte del browser, completa il processo appena descritto.
In sintesi il Client richiede, il Server risponde, il Browser traduce e l’utente visualizza. In ambito strettamente informatico, quanto descritto, fa parte dell’architettura web di rete logica, in cui il modello di riferimento è il “Client-Server”.
Il tema chiave dello sviluppo web, alla luce di quanto esposto, è rappresentato da ciò che avviene nel front end e back end di un sistema software. Il Front End gestisce l’interazione con l’utente o con sistemi esterni che producono dati di ingresso, mentre il Back End è invece la parte che elabora i dati generati dal front end.
Il modello Client-Server
[torna all’indice]E’ bene far presente che il Client non è l’utente ma l’applicazione che esso utilizza, in questo caso il browser (Fig.1). Il client può essere anche, ad esempio, un applicazione di posta elettronica. In questo caso i protocolli di comunicazione sono rispettivamente POP3 o IMAP per la ricezione della posta in arrivo, e SMTP per l’invio della posta in uscita.
In Fig.1, è rappresentata l’architettura del modello in una configurazione classica detta LAMP.
L’acronimo di configurazione LAMP è riferito:
| L: al framework server Linux |
| A: al web server Apache, che opera dietro le quinte fornendo servizi o risposte in Html; |
| M: è il linguaggio MySql del Database; |
| P: è il linguaggio PHP; è l’interprete per la produzione di pagine dinamiche (le pagine statiche vengono generate dal file system del web server). |
L’approfondimento del web developement lato server di un applicazione (Server Side), senza cui non riusciremmo a effettuare richieste e ne ottenere risposte, lo faremo in un altro articolo. Questo sviluppo dietro le quinte in pratica, detto Back-end, è la parte nascosta agli utenti, ed elabora tutto ciò che è necessario ad una applicazione web per funzionare.
Questa breve descrizione ha lo scopo di rimarcare l’importanza del web developement per i programmatori Lato Client e Lato Server.
Cos’è Html
[torna all’indice]Il tema chiave dello sviluppo web lato Client (Client Side) del Front End, è rappresentato dall’ Html, CSS e JavaScript. Essi, come spesso erroneamente vengono classificati, non sono linguaggi di programmazione ma sono dei linguaggi descrittivi detti Formali o di Markup.
Esistono numerosi linguaggi formali, ma non tutti hanno la stessa funzione o caratteristiche. Fondamentalmente sono caratterizzati da specifici codici o una sintassi da scrivere in un file di testo che, come dicevamo, il browser tradurrà in un testo leggibile dall’utente. In sostanza:
- Con Html si struttura il contenuto informativo della pagina web, come ad esempio il carattere e le dimensioni del testo, elenco ordinato, immagini, link..
- Con CSS il design, cioè l’aspetto, forma, colore, grandezza..
- Con Javascript le funzioni di interattività con l’utente; basti pensare ad una interfaccia di login in cui è indispensabile indicare le credenziali di accesso per usufruire del servizio.
In Fig.2, è rappresentato un semplice codice Html. E’ definito di markup in quanto descrive i dati attraverso i marcatori tag <..>. Fondamentalmente il primo elemento, o tipo di documento, è il tag <!DOCTYPE html>, senza cui potrebbero verificarsi errori nella visualizzazione della pagina, e prosegue attraverso l’<head> e il <body>.
Numerosi sono inoltre i tag all’interno del body, e numerose anche le funzioni che svolgono, ma anche degli attributi presenti nei tag. Ogni tag di apertura (<..>), tranne qualche eccezione, è necessariamente correlato da un tag di chiusura (</..>).
Il CSS nell’Html
[torna all’indice]Nel riquadro in verde 2, sempre della Fig.2, è evidenziato un link che definisce lo stile principale di alcuni tag, per mezzo del main.CSS. Questo è un codice CSS (Fig.3).
In sostanza definisce i fogli di stile attraverso l’attribuzione di alcuni parametri. Al testo Sport, inserito tra il tag <h1>…</h1> ad esempio, è stato assegnato il: color, font-size, background-color e il padding. Questo vuol dire che tutti i tag h1 dell’html principale, avranno i parametri identificati con questo stile. Analogamente per i tag: a, h2, h3 e body. Notiamo anche che le istruzioni del CSS presentano le parentesi graffe di apertura e chiusura.
Cos’è JavaScript
[torna all’indice]L’interattività di una pagina web, come dicevamo, è ad appannaggio di Javascript. Nella Fig.4 è raffigurata la sintassi di alcune istruzioni. Lo script può essere eseguito all’interno dell’html (Fig.4.1) mentre nella Fig 4.2 possiamo visualizzare la pagina web prodotta.
Nell’esempio le funzioni di interattività sono rappresentate dall’inserimento di un pulsante [Tommaso Caligiuri], il risultato è rappresentato da un alert sulla pagina, e da un contatore in secondi progressivo.
JavaScript si avvale di una sintassi del tutto diversa dagli altri linguaggi di scripting. Entrare nel dettaglio delle funzioni sarebbe complicato, ma possiamo dire che sono presenti componenti quali identificatori, letterali e operatori e comprende cinque tipi di dato semplici o primitivi: numeri, stringhe, booleani, null e undefined.
Nel prossimo articolo, daremo uno sguardo alla sorgente del codice di una qualsiasi pagina web e alla differenza con l’ispeziona elemento.
Classe 1964. Laureato in Ingegneria Informatica e Biomedica
