FONDAMENTI WEB

Internet è una rete internazionale formata dall’interconnessione di molte migliaia di reti di computer. La sua
storia inizia nel 1958 quando negli Stati Uniti venne creata, nell’ambito del Dipartimento della Difesa,
un’agenzia di nome DARPA (Defence Advanced Research Projects Agency).

I primi studi portarono alla definizione della rete “Arpanet” (acronimo di "Advanced Research Projects
Agency NETwork”, "Rete dell'Agenzia per i progetti di ricerca avanzati”). Questa rete può essere considerata
l’antenata di Internet:

• Non aveva nessuna autorità centrale.

• I nodi che ne facevano parte erano autonomi e in grado di operare in una situazione di forte
instabilità (caso di conflitto bellico o catastrofi naturali).

Principali date:

• 1985: si collegano a Internet 100 reti diverse.

• 1989: si collegano a Internet 500 reti diverse.
• 1990: viene smantellata Arpanet e nasce Nsfnet.

In Internet, nessuno è “proprietario”; il funzionamento di Internet è basato su una serie di protocolli.

Protocollo: procedure e regole da seguire nel trasmettere e ricevere dati su una rete in modo che gli utenti
possano usare i computer per scambiare informazioni in modo ordinato.

• SSH: Secure Shell, collegamenti in modalità sicura.

• SMTP: Simple Message Transfer Protocol, invio della posta elettronica.
• POP3: Post Office Protocol 3, ricezione della posta elettronica.
• FTP: File Transfer Protocol, scambio di file.
• HTTP: HyperText Transfer Protocol, trasferimento di documenti ipertestuali, cioè pagine web.

Tutti i protocolli si basano su una tecnologia di tipo client-server:

• Server: computer che fornisce informazioni o servizi.

• Client: strumento o programma che usufruisce delle informazioni o dei servizi.

Tutti i protocolli di Internet sono gratuiti e aperti; il più importante è TCP/IP, basato sulla tecnologia a
commutazione di pacchetto.

Il protocollo TCP gestisce l’organizzazione dei dati e il controllo della trasmissione degli stessi, dividendo i dati
in tanti pacchetti più piccoli, che verranno poi ricomposti una volta giunti a destinazione. Per spostare i
pacchetti di dati, TCP ha bisogno del protocollo IP (se il pacchetto non viene ricevuto correttamente, si chiede
ritrasmissione). Il protocollo IP agisce al livello 3 della pila ISO/OSI e interconnette reti eterogenee per
tecnologia e prestazioni.

Un vantaggio che i pacchetti possano seguire percorsi differenti consiste nel fatto che non è necessario
conoscere il cammino da seguire: instradare correttamente i pacchetti è infatti compito del router.

Routing: funzione di instradamento dei pacchetti IP eseguita dai router.

• Il router riceve su una delle interfacce di ingresso il flusso dati IP.

• Il router legge l’header di ciascun pacchetto, osservando l’IP del mittente e del destinatario.
• Il router decide su quale porta mandare il pacchetto, basandosi su una tabella.
• Il router instrada il pacchetto sulla porta di uscita stabilita.
Gateway: router con due porte di rete: una connessa a Internet, l’altra a una sottorete (rete in cui le macchine
hanno tutte un IP che inizia con gli stessi byte).

Web: il World Wide Web (ragnatela estesa globale) è uno spazio definito all’interno di Internet, nato nel
CERN nel 1991 come sistema per semplificare lo scambio di informazioni all’interno del centro. Il metodo
usato si basava sul protocollo FTP.

Il 13 marzo 1989, Tim Berners Lee scrisse un documento dal titolo “Information Management: a Proposal”
che proponeva un’evoluzione del web basata su:

• Un’interfaccia utente comune per tutti.

• La capacità di incorporare nel sistema i tipi più diversi di documenti e tecnologie.
• L’accessibilità universale a tutte le informazioni contenute.

Fu necessario, per raggiungere questo scopo, definire:

• Un nuovo linguaggio universale per la creazione di documenti (HTML).

• Una notazione universale di localizzazione degli stessi (URL, Uniform Resource Locator, o URI,
Uniform Resource Identifier).
• Un nuovo protocollo ottimizzato per il trasferimento di ipertesti (HTTP).

L’architettura risultante è client-server; gli utenti possono usufruire delle informazioni presenti in Internet
tramite i browser.

1991: il CERN rende Internet libero da ogni copyright. Nasce ufficialmente il World Wide Web.

1994: il CERN trasferisce il Web al W3C (World Wide Web Consortium) a cui partecipano il MIT e l’INRIA.

Microsoft diffuse il suo nuovo browser, Internet Explorer, che vinse la “guerra dei browser” contro il
programma della Netscape.

1998: Netscape rilascia il codice sorgente del suo programma; nasce il progetto Mozilla.

Ipertesti: nascono nel 1965 con l’idea di collegare molti elementi in relazione non lineare tra loro grazie agli
iperlink (riferimenti).

HTTP: protocollo per lo scambio di documenti ipertestuali che si basa su:

• Connessione.
• Richiesta documento.
• Risposta.
• Disconnessione.

Socket: presa attraverso cui passa un flusso di dati.

Differenza tra processo e thread: un processo è un programma in esecuzione, un thread è un processo che
appartiene ad un programma o ad un altro processo.

Tutti i server Web comunicano tramite la porta 80 del router.

Per interfacciarsi con un sito web, normalmente bisognerebbe conoscerne l’indirizzo IP (esempio: 10.5.5.32);
con il DNS, ogni host può essere composto da stringhe di caratteri.

Esempio: voglio collegarmi al sito web del MIUR (indirizzo IP: 89.97.132.214) ma non conosco il suo indirizzo
IP. Posso aprire un browser e digitare www.miur.it; sarà compito del DNS convertire quell’URL in
“89.97.132.214” e consentirmi di collegarmi al sito web desiderato.
 • .com: organizzazioni commerciali.
• .edu: enti di ricerca e università.
• .gov: enti governativi.
• .int: organizzazioni sorte a seguito di trattati internazionali.
• .mil: enti militari.
• .net: enti di gestione della rete.
• .org: enti di volontariato o associazioni senza fini di lucro.

Il DNS è costituito da un sistema di archivi distribuiti nella rete e collegati tra loro: i name server.

MIX e NAP: [pdf n°1, da pag.64 a pag.67]

FTP: è un protocollo per il trasferimento dei file; servono un client, un account e uno spazio web a cui si vuole
trasferire il file. Funzionalità aggiuntive dei Client FTP includono:

• Trasferimento di file multipli contemporaneamente.

• Recupero automatico dei trasferimenti interrotti.
• Aggiunta alla coda dei file.

Uno dei più noti e utilizzati Client FTP è Filezilla.

MODULO WEB LATO CLIENT

Traduttore: programma che effettua la traduzione automatica da un linguaggio (linguaggio formale) a un
altro. Generano programmi scritti in linguaggio comprensibile alla macchina e si distinguono in compilatori e
interpreti.

Compilatori: traducono il codice sorgente in moduli scritti in codice macchina; restituiscono quindi un
programma funzionalmente equivalente a quello dato.

Interpreti: traducono di volta in volta l’istruzione in esecuzione in linguaggio macchina; devono essere
sempre attivi durante l’esecuzione del programma applicativo. I comandi eseguiti da un interprete possono
essere sintattici (in base alla forma con cui sono scritti) o semantici (in base al significato del termine).

Sintassi di un linguaggio: insieme delle regole che concorrono a definire le frasi del linguaggio tra tutte le
stringhe di simboli possibili.

Semantica: associa a ogni frase il suo significato.

Grammatica: struttura algebrica che consente di generare tutte le frasi lecite di un linguaggio.

Correttezza: proprietà di cui gode un programma che termina e calcola esattamente la funzione che si voleva
calcolare.

Linguaggio di programmazione: un linguaggio di programmazione L su un alfabeto V è un sottoinsieme di V

per cui esiste una grammatica G, tale che L=LG, cioè L è un linguaggio generato da G.

Esistono errori semantici (analisi del problema e costruzione dell’algoritmo che lo risolve) e sintattici (codifica
in un preciso linguaggio di programmazione).

Il programma compilato ha una velocità di esecuzione maggiore di un programma interpretato, che a sua
volta è portatile.

HTML: non è un linguaggio di programmazione, ma è un linguaggio di formazione della pagina che sfrutta
particolari marcatori (tag) per identificare la struttura della pagina da visualizzare.
Bisogna distinguere il contenuto (HTML) dalla formattazione (CSS), in quanto il codice sarebbe meno leggibile
e meno modulare.

Immagini raster e immagini vettoriali: le raster hanno dimensione e risoluzione propria, quindi se zoomate
sgranano; le vettoriali sono definite attraverso equazioni matematiche, quindi possono essere ingrandite
all’infinito senza subire perdite di definizione.

Formato standard di un tag HTML: <tag attributo=”valore”>Contenuto</finetag>

<!doctype html>
<html lang=”it”>
<head>
<meta charset=”utf-8” />
<title>Hello world</title>
</head>
<body>
</body>
</html>

1) !doctype: dichiarazione del linguaggio utilizzato per scrivere la pagina.

a) HTML: il tipo di linguaggio utilizzato è HTML.
b) public: il documento è pubblico.
c) W3C: il documento fa riferimento alle specifiche rilasciate dal W3C.
d) - : le specifiche non sono registrate all’ISO.
e) DTD HTML 4.01 Transitional: document type definition
f) EN: la lingua è l’inglese.
g) STRICT: DTD particolarmente rigorosa.
2) lang: attributo del tag <html> che definisce la lingua del documento.
3) meta charset: fornisce metadati invisibili agli utenti ma utili per l’indicizzazione del sito web.
4) charset: definisce l’elenco di caratteri usati per scrivere in una lingua; UTF-8 rappresenta un codice
ristretto per utilizzare massimo 8 bit, dove Unicode ne può usare 21.

Per validare un sito web, si può usare il Markup Validation Service messo a disposizione dal W3C:
www.validator.w3.org .

Contenuti della pagina web: i tag si distinguono in elementi di blocco (block-level, provocano interruzioni di
paragrafo) ed elementi di linea (inline, si posizionano sulla stessa riga).

N.B.: i tag <tag /> non hanno bisogno del relativo tag di chiusura, in quanto terminano nelle parentesi
angolari. In più, non si ha distinzione tra maiuscole e minuscole: <BODY>, <body> e <BoDy> hanno lo stesso
significato.

• <hn>: con n da 1 a 6, definisce l’importanza e quindi la dimensione del carattere del titolo.
• <p>: inserisce un paragrafo con spaziatura prima e dopo.
• <hr />: horizontal rule, inserisce una linea orizzontale di separazione. Non serve un tag di chiusura.
• <ul>: unordered list, lista non ordinata di elementi.
• <ol>: ordered list, lista ordinata di elementi.
• <li>: list item, elementi della lista. È possibile creare elenchi complessi annidando <ul> e <ol>,
sfruttando gli attributi start e type.
• <table>: inizializza una tabella. L’attributo border=”1” definisce il numero di pixel (nell’esempio, 1)
che formano lo spessore della cella.
• <tr>: table row, riga della tabella.
 • <td>: table data, cella all’interno della riga.
• <th>: table header, intestazioni nelle celle. È possibile, per <td> e <th>, definire gli attributi colspan
(numero di colonne occupate da una cella) e rowspan (numero di righe occupate da una cella).
• <dl>, <dt>, <dd>: liste a glossario.
• <div>: elemento di blocco multifunzione, è un contenitore generico. A differenza di <p>, non
presenta spaziatura con gli elementi subito precedente e subito successivo.
• <span>: contenitore generico di testo, è un elemento in linea e non di blocco.
• <center>: riga o paragrafo centrato.
• <a>: attachment, indica un link o un allegato la cui fonte è indicata nell’attributo href=”fonte”.
o <a href=”sito o path del file”>Parola chiave</a>.
▪ mailto:indirizzo@dominio.com
▪ tel://numeroditelefono
o title=”” definisce un tooltip che viene mostrato al passaggio del mouse sul link.
o target=”” definisce in quale finestra verrà aperta la pagina di destinazione.
▪ _blank: nuova finestra.
▪ _self: stessa finestra.
▪ _parent: nel frame di origine o di destinazione.
▪ _top: livello superiore.

I seguenti sono definiti tag stilistici, poiché conferiscono un minimo stile al sito web senza passare dal CSS.

• <i>: italic, corsivo.

• <em>: emphasis, corsivo indicizzato, migliore di <i>.
• <b>: bold, grassetto.
• <strong>: grassetto indicizzato, migliore di <b>.
• <u>: underline, sottolineato.
• <br />: ritorno a capo.
• <mark>: evidenzia una stringa di testo in giallo.
• <small>: usato per formattare note legali, disclaimer, copyright.
• <address>: usato per formattare informazioni di contatto e indirizzi.
• <time>: richiede l’attributo datatime=”aaaa-mm-dd”.

Segnalibri: sono identificati dall’attributo id=”testo” e riconoscono univocamente un elemento nella pagina
web. Per riferirsi a un id (per rimandare a quella sezione del sito tramite il tag <a>) bisogna usare #testo.

<h1 id=”inizio”>Testo</h1>
…
<a href=”#inizio”>Torna all’inizio della pagina</a>

Il salto può anche essere effettuato a una pagina diversa.

<a href=”index.html#inizio”>Torna all’inizio della home</a>

I link di reindirizzamento possono essere assoluti (www.sito.com/index.html) o relativi

(cartella/nomefile.html, dove la radice è la stessa cartella in cui è posizionato il file html contenente <a>).

• <img />: immagini.

o src=””: percorso del file in cui si trova l’immagine.
o alt=””: descrizione che appare al posto dell’immagine se questa non può essere visualizzata.
o align=”TOP/MIDDLE/BOTTOM”: allineamento.
o width=””: larghezza in pixel (px) o in percentuale (%).
o height=””: altezza in pixel (px) o in percentuale (%).
 • <video> e <audio>: definiscono dei video o degli audio nel sito.
o <VIDEO SRC=nomeFileVideo POSTER=nomeFileCopertina CONTROLS="controls">
messaggioErrore
</VIDEO>
o <AUDIO CONTROLS="controls">
<SOURCE SRC="./musicaPreferita.mp3" TYPE="audio/mp3" />
Attenzione: il tuo browser non supporta il tag AUDIO.
</AUDIO>
• <form>: modulo per l’invio di informazioni dall’utente al server.
o action=”URL-script”: indirizzo contenente le operazioni da effettuare alla fine della
compilazione del form.
o method=””: get o post, per inviare o meno in chiaro le informazioni.
• <input>: si inserisce all’interno di un form per definirne i componenti.
o type=””: specifica del tipo di input (text, number, email,..).
▪ type=”radio”: identifica una scelta tra varie opzioni, a “pallini”. L’elemento
preselezionato deve avere l’attributo checked. Tutto gli oggetti dell’elenco devono
avere lo stesso valore per l’attributo name.
▪ type=”checkbox”: usato per selezionare anche più voci contemporaneamente in un
elenco di voci con piccoli quadrati.
o name=”” o for=””: identifica l’oggetto all’interno del form.
o size=””: numero limite di caratteri inseribili.
o value=””: scritta che appare sul pulsante (che può avere type=”submit” o type=”button”).
• <button>: può essere inserito ovunque in una pagina web e il suo contenuto può essere un testo o
un’immagine.
• <textarea>: area in cui poter inserire testo, diviso in righe (rows=””) e colonne (cols=””).
• <select>: rappresenta una casella combinata per poter effettuare una scelta in un elenco di voci.
• <option>: le varie voci della casella combinata. L’attributo selected indica un’eventuale voce
preselezionata.
• <sub> e <sup>: creano pedici e apici, utili nelle equazioni.
• <!-- Testo -->: commento in HTML, non viene visualizzato ma può risultare utile per la lettura del
codice sorgente.

Entità carattere: stringhe particolari interpretate dal browser:

• &lt; ➔ <
• &gt; ➔ >
• &amp; ➔ &
• &euro; ➔ €
• &egrave; ➔ è
• &Egrave; ➔ È
• &agrave; ➔ à
• Per i caratteri Unicode ➔ &#numerocodice;
• Il punto è virgola è fondamentale.

Fogli di stile CSS: Cascading Style Sheet, foglio di stile a cascata, definisce il controllo sulla visualizzazione della
pagina HTML e del suo layout (font, colori, allineamenti…).

CSS3: versione con cui nasce la possibilità di inserire maggiore stile, come i bordi arrotondati, le transizioni
eccetera.
 • Fogli esterni (o collegati).
o <head>
<link href=”stile.css” rel=”stylesheet” type=”text/css” media=”screen” />
</head>
o A uno stesso sito si possono incorporare più fogli di stile, che agiranno in cascata (maggiore
priorità all’ultimo inserito).
o Possono essere utilizzati in più file html, essendo separati dal file su cui si sta lavorando (si
possono tranquillamente implementare con <link>).
• Fogli incorporati.
o Sono inseriti direttamente all’interno del tag <head> della pagina web.
o <html>
<head>
<STYLE TYPE=”text/css”>
H1 {
font-family: Arial;
font-size: 23px;
color: #0099CC
}
</STYLE>
</head>
…
</html>
• Fogli in linea.
o Si inseriscono direttamente all’interno di un tag per stilizzare solo quello, sfruttando
l’attributo style.
o <h1 style=”text-align: center; color: blue”>Hello world!</h1>

L’ordine di applicazione (quindi la priorità) è: in linea, incorporato, esterno.

Per definire lo stile di un CSS, si usano selettori, classi, id e pseudo-classi.

selettore {
proprietà: valore;
proprietà: valore;
proprietà: valore;
}

Un selettore può essere un tag html, una classe definita in class=”nomeclasse” o un id univoco definito in
id=”nomeid”.

tag {
proprietà: valore;
}

.nomeclasse {
proprietà: valore;
}

#nomeid {
proprietà: valore;
}
Il selettore universale è *.

*{
proprietà: valore;
}

Colori: si possono scrivere a lettere (se base) o in esadecimale (#000000 è nero, #FFFFFF è bianco).

Rosso: #FF0000
Verde: #00FF00
Blu: #0000FF

Alcune proprietà CSS:

• colour: per impostare il colore di primo piano

• background-color: per il colore di sfondo
• font-family: definisce la famiglia dei caratteri da usare
• font-size: specifica il corpo del carattere
• font-weight: specifica se il testo debba essere in grassetto (bold) oppure normale (normal)
• font-style: riguarda il corsivo (italic o normal)
• font: indica una sintassi abbreviata per la proprietà font che consente di specificare tutti i valori senza
l’uso delle parole chiave
• line-height: imposta l’interlinea dell’elemento
• text-align: permette il controllo dell’allineamento
• text-decoration: permette l’inserimento o l’eliminazione di una sottolineatura o di una linea sopra al
testo.
• border-radius: angoli arrotondati
• box-shadow: ombreggiatura
• opacity: trasparenza
• background-color: colore dello sfondo
• background-image: immagine di sfondo
• background-repeat: ripetizione dell’immagine
• background-position: posizione di inserimento dell’immagine
• background-attachment: comportamento dell’immagine rispetto agli elementi della pagina
• background-clip: area di estensione dello sfondo rispetto a border e padding
• background-size: dimensione dell’immagine di sfondo

Uso delle classi nel CSS: creando il seguente codice nel file .css,

.bluetext {
color: blue;
text-align: center;
}

Tutti i tag html aventi class=”bluetext” avranno testo blu e centrato. La stessa logica si applica agli id
(#bluetext), che però contrassegnano un elemento univoco all’interno del file html. È possibile applicare più
classi a un tag html (<h1 class=”bluetext title big”>Hello world!</h1>, definendo poi tre stili diversi (.bluetext,
.title e .big).

Pseudo-classi: si usano per i collegamenti ipertestuali (link) e sono applicati solo se sono soddisfatte
determinate condizioni.

• :link – collegamento presente nella pagina e non ancora visitato.

 • :hover – il cursore del mouse passa sopra il link senza cliccare.
• :active – collegamento su cui si sta facendo click.
• :visited – collegamento già visitato.

Selettore discendente:

#nomeid li {
display: inline;
}

Lo stile si applica solo agli elementi <li> presenti nel tag avente id=”nomeid”; i tag <li> fuori id=”nomeid” non
saranno considerati.

!important: è una dichiarazione che indica al browser che la regola deve essere applicata senza condizioni.
Va inserita all’interno della dichiarazione clear, prima della chiusura del punto e virgola.

#piede {
height: 40px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: center;
line-height:1.4em;
display: block;
clear: both !important; //Il piede andrà posizionato senza elementi a destra o a sinistra
}

Layout efficace con HTML e CSS:

• Accessibilità: realizzare contenuti facilmente fruibili da tutte le persone.

• Usabilità: un sito deve rispondere alle esigenze della tipologia di utenza per cui è stato creato.

Layout: interfaccia grafica, modo in cui sono distribuiti i vari contenuti della pagina web. Nasce qui il web
semantico, che conferisce un miglioramento nella leggibilità del codice, maggiore facilità di modifica,
diminuzione degli errori e migliore indicizzazione da parte dei motori di ricerca.

Tag semantici:

• <header> (intestazione): inserimento di titoli e sottotitoli, elementi introduttivi del documento.

• <section> (sezione): sezione generica, di solito con intestazione e contenuto.
• <article> (articolo): porzioni di contenuto all’interno della pagina.
• <nav> (navigazione): elementi di navigazione del sito.
• <aside> (laterale): contenuti che vengono collocati lateralmente rispetto alla pagina; sono
funzionalmente e semanticamente separati dal resto del documento.
• <footer> (piè di pagina): autore, data, copyright, link associati.
<body>
<header></header>
<nav></nav>
<section>
<article></article>
<article></article>
</section>
<aside></aside>
<footer></footer>
</body>

Layout fisso e layout fluido: nel layout fisso ogni elemento ha una larghezza fissa, espressa in pixel; nel layout
fluido, la dimensione degli elementi è definita in percentuale, quindi il layout si adatta alla finestra del
browser occupandone tutto lo spazio.

JAVASCRIPT
Nel 1995 l’ing. Brendan Eich creò un linguaggio di scripting per il browser Netscape Navigator, basato su Java,
con nome in codice Mocha: Javascript.

L’inserimento di codice Javascript all’interno del codice HTML rende la pagina più “intelligente”, permette
cioè al browser di eseguire dei controlli e delle elaborazioni molto utili in locale senza bisogno di collegarsi al
server Web.

All’interno di una pagina Web si possono incorporare comandi organizzati in funzioni che vengono poi
interpretate ed eseguite dal browser al momento dell’apertura della pagina: i Javascript.

Javascript è un linguaggio interpretato (ogni comando viene eseguito passo passo direttamente dal browser),
lato client (per il lato server si usa PHP) e case sensitive (c’è distinzione tra maiuscola e minuscola).
Alcuni scopi degli script nelle pagine HTML sono:

• gestire gli eventi provocati dall’utente con il clic del mouse oppure a seguito della navigazione
all’interno di un sito.
• fornire messaggi di avvertimento o risposte circa le scelte effettuate.
• acquisire le scelte dell’utente e lanciare l’esecuzione dell’azione conseguente.
• controllare la validità dei dati inseriti in un modulo (form).
• apportare modifiche all’aspetto di una pagina Web durante la visualizzazione con il browser.

<script language=”javascript”>
function nomeFunzione(parametri) {
…
…
…
}
</script>

Eventi: le funzioni Javascript possono essere richiamate in seguito a un evento:

• onLoad: un elemento viene caricato (si usa su <body> e <img>).

• onSubmit: invio di informazioni (si usa su <form>).
• onClick: click del mouse (si usa su <body> e <form>).
• onMouseOver: passaggio del mouse sopra un oggetto (si usa su <a>, <area> e <input>).
• onMouseOut: uscita del mouse da un oggetto (si usa su <a>, <area> e <input>).
• onChange: un evento viene modificato dall’utente (si usa su <select> e <input>).
• onFocus: l’elemento viene selezionato (si usa su <a>, <body> e <input>).
• onBlur: l’elemento viene deselezionato (si usa su <a>, <body> e <input>).

Si esaminano ora altre funzioni in Javascript:

function scriviTesto(testo) {
document.getElementById("descrizione").innerHTML=testo;
}

Lo script è composto da una sola funzione, chiamata scriviTesto che, a sua volta, è formata da un solo
comando.

• document è l’intero documento HTML.

• getElementByld (“descrizione”) è il metodo dell’oggetto document che restituisce l’elemento
della pagina HTML, avente id uguale a descrizione.
• Innerhtml è il codice all’interno dell’oggetto, nel nostro caso il testo.

In pratica la funzione cambia il testo all’interno del paragrafo chiamato descrizione.

<area shape="poly” coords ="80,0,260,0,260,200,80,170" onmouseover="scriviTesto('Testo.')”

href=”URL” target="_blank” alt="Testo alternativo" >

Sull’immagine viene ricreata la mappa immagine (area) che permette di individuare gli oggetti. Per
esempio, il tag che identifica l’oggetto è rappresentato dalla forma grafica (shape) di forma
poligonale (poly) con il codice suddetto. Quindi l’area è un poligono formato da segmenti consecutivi;
esso ha come vertici (80,0),(260,0),(260,200),(80,170); quando l’utente passa con il mouse sopra
l’area viene richiamata la funzione scriviTesto, alla quale viene passato il testo da visualizzare; se
l’utente fa clic viene rimandato alla pagina di cui è specificato l’URL.
Il linguaggio Javascript può essere usato per assegnare valori a variabili o eseguire calcoli; valgono tutti gli
operatori aritmetici, di confronto, logici e di assegnazione.

nomeVariabile = valore;

Strutture di controllo fondamentali:

• If(condizione) {
istruzioni
} else {
istruzioni
}
• for(contatore=valoreIniziale; contatore<valoreFinale; incremento) {
istruzioni
}
• while(condizione) {
istruzioni
}
• switch (espressione) {
case valore1:
istruzioni1
break;
case valore2:
istruzioni2
break;
……
default:
istruzioni predefinite
}

Commenti: //commento su una riga;

/* Commento su più righe */

Canvas: Il canvas è un elemento del linguaggio HTML che consente di tracciare linee, figure geometriche,
immagini e disegni all’interno di uno spazio in una pagina Web. In generale, in informatica, il termine canvas
(tela) indica una superficie su cui disegnare oggetti statici e dinamici. Le modalità di lavoro con i canvas sono
essenzialmente due: il tracciamento di forme e disegni con riempimenti, ombre e contorni secondo i
parametri definiti nel codice, oppure il “disegno a mano libera” direttamente sulla “tela” del canvas.
Alcuni tipi nel tag <input> in HTML prevedono una validazione implicita:

• type=”email”: indirizzo di posta elettronica.

• type=”url”: url di una risorsa web.
• type=”number”: dato numerico (è possibile definire min=”numeroMinimo” e
max=”numeroMassimo”).
• type=”range”: slider per valori da min=”” a max=””.
• type=”date”: data.

API: interfacce per la programmazione di un’applicazione; sono come piccole applicazioni autonome
all’interno della pagina web, che girano senza che il browser scarichi software aggiutivo. Le API mettono in
comunicazione due applicazioni in modo che si possano scambiare dati e ciascuna possa usare le funzionalità
dell’altra.

Cookie: biscotto, è un pacchetto di informazioni che viene salvato sul computer dell’utente. In successive
sessioni di collegamento a Internet (normalmente per un periodo di tempo limitato) il browser può accedere
ed utilizzare questi dati. Utilizzare i cookie permette a un sito di ricordare alcune informazioni dell’utente: in
alcuni casi può essere molto comodo (per esempio si evita che un utente debba inserire ogni volta il nome
utente e la password), ma può generare problemi di sicurezza.
In HTML5 la funzionalità di Webstorage permette di memorizzare dati in maniera simile ai cookie:

• localStorage: può contenere dati comuni a tutto il dominio.

• sessionStorage: i dati sono disponibili solo per la pagina che li ha creati.
• Metodi: setItem, getItem, removeItem, clear.

Audio e video tra HTML e Javascript:

<audio src="podcast.mp3" type="audio/mp3" autoplay controls></audio>

<video id="Video1" width="320" height="240" poster="picture.jpg" autoplay controls>

<source src="demo.mp4" type="video/mp4" />
Il tuo browser Web non supporta il tag video.
</video>

<script>
function controlli(video) {
var video = document.getElementById("Video1");
video.play();
video.pause();
video.currentTime = 0;
video.currentTime += value;
video.volume +=0.1;
}
</script>

Grafica vettoriale: come detto in precedenza, è indipendente dalla risoluzione ed è scalabile. Per tracciare
un’immagine in svg è necessario usare il tag <svg> (dove <canvas> si riferiva a immagini raster).

Geolocalizzazione: utilizzabile a partire da HTML5, dietro consenso da parte dell’utente, con i metodi
dell’oggetto navigator.geolocation:

• navigator.geolocation.getCurrentPosition(): i dati vengono forniti una sola volta.

• navigator.geolocation.watchPosition(): i dati vengono aggiornati costantemente.

Application cache: strumento per la creazione di applicazioni fruibili anche in assenza di una connessione a
internet; vengono stabiliti a priori i file che devono essere salvati sul computer in modo da permettere la
navigazione off-line.

Esempio: il file offline.manifest contiene:

CACHE MANIFEST
index.html
/img/banner.jpg
/img/logo.jpg
/css/stile.css
/js/calcola.js
/js/offline.js

Nella pagina web basterà segnare <html manifest="offline.manifest">.

Due funzioni utili in Javascript sono quelle per mostrare o nascondere un elemento (di cui viene passato l’id
quando si richiama la funzione, come parametro):
 • function mostra(idOggetto) {
document.getElementById(idOggetto).style.display = 'block';
}

• function nascondi(idOggetto) {
document.getElementById(idOggetto).style.display = 'none';
}

XML
eXtensible Markup Language, è un linguaggio utilizzato per rappresentare, trasmettere e memorizzare dati
strutturati. Un dato strutturato, cioè un record, può essere visto come un insieme di dati semplici organizzati
secondo una struttura prefissata.

Marcatura: qualcosa che permette di rendere esplicita un’interpretazione di un testo. Un linguaggio di

marcatura è un insieme di convenzioni per la marcatura di testi. Esistono due tipi di marcatura:

• Marcatura procedurale: descrive come processare il documento (PDF, docx,…).

• Marcatura descrittiva: descrive la struttura logica del documento (HTML, XML,…).

Il linguaggio XML è dunque un linguaggio di marcatura descrittiva, più espressivo e flessibile di HTML e
standard per lo scambio di informazioni semi-strutturate. Le informazioni possono essere fortemente
strutturate (classi Java), destrutturate (testo libero) o semi-strutturate.

SGML: Standard Generalized Markup Language, è il padre degli attuali linguaggi di marcatura. È un
metalinguaggio estremamente espressivo e configurabile ma non studiato espressamente per il Web, in
quando non gestisce i link e il conflitto sui nomi delle etichette. HTML è definito in termini di SGML.

Obiettivi di XML:

• XML deve essere usabile direttamente sul Web

• XML deve essere compatibile con SGML
• Deve essere semplice progettare programmi che processano documenti XML
• I documenti XML devono essere leggibili dalle persone e sufficientemente chiari
• I documenti XML devono essere facili da creare
• La specifica di XML deve essere formale e concisa

XML risponde al bisogno di rappresentare la struttura logica di un documento (per esempio la suddivisione
in titoli, capitoli, paragrafi, note, citazioni, ecc..): usa una marcatura descrittiva e non procedurale, dettata
dalla struttura logica del documento. Viene usato il concetto di tipo del documento specificato attraverso
una Document Type Definition (DTD), che specifica la struttura della marcatura ammessa.

XHTML: pagina HTML scritta in conformità con lo standard XML.

In definitiva, XML è un linguaggio per scrivere dati, assegnando loro un significato (semantica) e
rappresentandoli tramite <tag>.

Ruolo del W3C (World Wide Web Consortium): ogni proposta subisce un processo di produzione:

• Working draft (WD): proposta su cui una sotto commissione sta lavorando.
• Proposed (PR) e Candidate Reccomendation (CR): proposta sostanzialmente completa e in attesa di
approvazione.
• Reccomendation (REC): proposta approvata, diventa uno standard.
XML descrive i dati e i loro attributi, organizzandoli in un normale file di testo; questa caratteristica rende la
rappresentazione dei dati indipendente dal dispositivo e dal sistema operativo utilizzati dall’utente finale.

Dove si usa XML:

• HTML e linguaggi di scripting.

• Tecnologia AJAX (Asynchronous Java and XML).
• File di configurazione.
• Metadati (manifest).
• Descrizione di un insieme di dati.

Regole generali:

• Il file XML è un file di testo (indipendente dalle piattaforme e dagli applicativi).

• I Tag sono definiti dall’utente.
• La sintassi è rigorosa: tutti i tag devono essere chiusi.
• È case sensitive.
• Gli attributi sono racchiusi tra virgolette.
• I dati sono organizzati in modo gerarchico.

Un documento XML è composto da tre parti: un file XML che contiene i dati; un DTD che descrive la struttura
logica che devono rispettare i dati contenuti nel file XML (cioè quali sono i tag che posso utilizzare su quel
documento XML per considerarlo ben formato); un documento XSL (come si visualizzano i dati).

Un documento XML ben formato (well formed) deve contenere:

• Caratteri.
• Attributi.
• Entità.
• Sezioni CDATA (testo libero).
• Commenti.
• Istruzioni di processamento.

Un documento XML è formato dai seguenti elementi:

• Prologo (opzionale), costituito da:

o Dichiarazione XML.
o DTD.
• Istanza di documento, contenente:
o Testo libero.
o Elementi delimitati da etichette.
o Attributi associati a elementi.
o Entità.
o Sezioni CDATA.
o Istruzioni di processamento.
o Commenti.

Un documento XML well formed è definito tale se:

• È costituito da un insieme di elementi annidati.

• Un elemento è costituito da una coppia di etichette (apertura e chiusura) e tutto quello che
racchiudono:
o <autore>Giacomo Leopardi</autore>
 o <autore><nome>Giacomo</nome>…</autore>

Le etichette devono essere annidate correttamente; tutti gli attributi vanno inseriti tra virgolette; le righe di
commento vanno delimitate da <!--Commento -->.

<?xml version=”1.0” encoding=”ISO-8859-1”?>: l’attributo version dichiara la versione del linguaggio XML
utilizzato; l’attributo encoding è opzionale e specifica il codice utilizzato per i caratteri (UTF-8, UTF-16, ISO-
8895-1).

Non ci sono regole predefinite per decidere quali dati è opportuno mantenere a sé stanti e quali definire
come attributi: la scelta può variare a seconda del tipo di dato trattato. In generale gli attributi vengono
utilizzati per i dati che possono identificare univocamente un record (come accade per le chiavi in un
database).

Il DTD è utile per definire la struttura dei dati prima di costruire il file XML; può essere inserito direttamente
all’interno del file XML oppure salvato con estensione .dtd e poi collegato al file XML.

<!DOCTYPE lista [
<!ELEMENT lista (sito+)>
<!ELEMENT sito (nome, URL, descrizione, categoria)>
<!ELEMENT nome (#PCDATA)>
<!ELEMENT URL (#PCDATA)>
<!ELEMENT descrizione (#PCDATA)>
<!ELEMENT categoria (#PCDATA)>
<!ATTLIST sito IDSito ID #REQUIRED>
]>

!DOCTYPE definisce l’oggetto lista, formato da vari !ELEMENT; “sito+” indica che possono comparire più
elementi “sito”, formati da quattro dati indicati con parentesi tonde. !ATTLIST definisce un attributo per
l’elementi sito, obbligatorio (#REQUIRED).

XML Schema: Gli schemi XML (in inglese, XML Schema) rappresentano una diversa modalità di definizione
della struttura di un documento XML, in alternativa alla definizione del tipo di documento DTD.

• Un XML Schema usa la stessa sintassi del linguaggio XML.

• In un XML Schema è possibile definire con più precisione il tipo di dato relativo agli elementi della
struttura, distinguendo tra testo, numeri e date.
• Di contro la struttura di uno Schema XML è più complessa rispetto alla DTD.

Lo schema XML ha estensione .xsd (XML Schema Definition) e i tag sono caratterizzati da “xs:”

<xs:sequence> </xs:sequence>
<xs:element> </xs:element>

Il tag principale è <xs:schema> </xs:schema>, che possiede un attributo xlmns (XML namespace) che dichiara
il namespace (spazio dei nomi) che si intende usare.

XSL: eXtensible Stylesheet Language, descrive le modalità di visualizzazione dei dati, quindi il foglio di stile,
secondo la sintassi XML.

• XSLT (XSL Trasformation): trasformare XML in HTML, RTF o PDF; può agire lato server (PHP) o lato
client (se il browser supporta questa funzionalità).
• Xpath: accedere e navigare nel documento; inserite nel tag <xsl:for-each select=”…”>.

Controlli XSL:
 • <xsl:if> permette di controllare se gli elementi verificano una condizione
• <xsl:choose>, <xsl:when>, <xsl:otherwise> per la selezione binaria
• <xsl:sort> per ordinare gli elementi selezionati

Predicati per la navigazione:

• /lista/sito qualsiasi sito figlio di lista

• //sito qualsiasi sito
• /lista/sito[2] il secondo sito
• /lista/sito[last()] l’ultimo sito
• /lista/sito[@IDSito] il sito con un attributo chiamato IDSito
• /lista/sito[@IDSito=’s002’] il sito con l’attributo IDSito uguale a s002
• /lista/* un qualsiasi figlio di lista.

RSS: Really Simple Syndication, tecnologia standard per la distribuzione di contenuti Web basata sul
linguaggio XML.

PHP
Hypertext Preprocessor, preprocessore di ipertesti; è un software che può essere liberamente installato e
utilizzato.

<?php
// Elenco di istruzioni in PHP
?>

Agisce nella programmazione lato server (dove HTML e Javascript agiscono lato client): un browser Web
visualizza il file HTML in una finestra, interpretando i tag e le istruzioni Javascript. Per poter interagire invece
con i dati che si trovano sul server remoto, si devono utilizzare altre tecnologie che effettuino le operazioni
dal lato server, cioè occorre usare gli strumenti serverside.

PHP è un linguaggio che estende le funzionalità del Web server consentendo l’interpretazione di file con
estensione .php contenenti il codice dell’applicazione. L’interprete PHP viene aggiunto al server Web come
un modulo esterno. In questo modo le funzionalità del server Web sono ampliate: oltre ai file con estensione
.html può gestire file che hanno estensione .php. Questo nuovo tipo di file contiene, oltre ai marcatori HTML,
anche il codice del linguaggio PHP.

Quando il client richiede una pagina con estensione .php, il server Web non spedisce al browser direttamente
il file; prima interpreta le istruzioni scritte in PHP, recupera gli eventuali dati richiesti prelevandoli dai file o
dai database del server e in seguito restituisce una pagina Web visualizzabile dal browser. Poiché questa
pagina è costruita al momento della richiesta, si chiama pagina dinamica oppure pagina Web lato server.

Il linguaggio di scripting PHP consente di includere piccoli programmi (script) all’interno delle pagine Web
dove sono presenti i marcatori (tag) del linguaggio HTML.

Variabili: identificate da un nome preceduto dal dollaro $; sono case sensitive e implicitamente dichiarate in
base ai valori loro assegnati.

<?php
$eta = 19; // contiene un intero
$titolo = "I promessi sposi "; // contiene una stringa
$prezzo= 31.2; // contiene un floating point
?>
Il testo può essere racchiuso tra doppi apici (le variabili all’interno vengono espanse nel loro valore) o tra
apici singoli (le variabili all’interno non vengono espanse). Il punto è un operatore di concatenazione.

<?php
$nome = "Giovanni";
$saluto = "Buongiorno $nome"; // contiene: Buongiorno Giovanni
echo "$saluto <br />";
$saluto = 'Buongiorno $nome'; // contiene: Buongiorno $nome
echo "$saluto <br />";
$saluto = "Buongiorno " . $nome; // contiene: Buongiorno Giovanni
?>

Array: una variabile che contiene un insieme di valori identificati da un indice.

$dati = array(Marco, 42, HelloWorld);

$dati[0]; //Contiene Marco
$dati[2]; //Contiene HelloWorld

Strutture di controllo:

• If (condizione) {
// Istruzioni condizione vera
} else {
// Istruzioni condizione falsa
}
• while ( condizione ) {
// istruzioni eseguite mentre condizione si mantiene vera
}
• for( inizializzazione; condizione; aggiornamento ) {
// istruzioni eseguite se condizione è vera
}

Variabili predefinite: sono dette superglobals, scritte tutte in maiuscolo e sono raggruppate in array
associativi.

• $_GET: contiene le variabili passate allo script tramite la modalità GET.

• $_POST: contiene le variabili passate allo script tramite la modalità POST.
• $_SERVER: contiene le variabili passate allo script dal server Web.
• $_COOKIE: contiene le variabili passate allo script tramite i cookie.
• $_SESSION: contiene le variabili utilizzate per implementare il concetto di sessione (arco temporale
di un insieme di attività correlate).

Le informazioni che si ricavano dalle seguenti superglobals sono conservate nei file di log:

• $_SERVER[‘REMOTE_ADDR’] contiene l’indirizzo IP da cui proviene la richiesta di esecuzione dello

script ovvero l’indirizzo IP macchina dell’utente.
• $_SERVER[‘SERVER_SOFTWARE’] contiene il nome del server Web che esegue lo script.
• $_SERVER[‘HTTP_USER_AGENT’] contiene una stringa con il nome del browser usato dall’utente.
• $_SERVER[‘SERVER_NAME’] contiene il nome della macchina su cui gira il server Web.
• $_SERVER[‘PHP_SELF’] contiene il nome dello script in esecuzione.

Invio di dati tramite un form HTML:

 • Si usano dei <form> HTML contenenti caselle di testo e pulsanti per l’invio
• action: nome della pagina PHP.
• method: GET o POST (i parametri vengono passati tramite $_GET o $_POST); in get i dati passati sono
visualizzati insieme all’URL della pagina web; in post i dati non sono visibili all’utente.

MySQL: sistema di gestione di basi di dati con accesso tramite comandi SQL. In un sito Web dinamico i dati
risiedono in un database sul server gestito da MySQL e, ogni volta che un utente ne fa richiesta, questi dati
vengono recuperati e mostrati nelle pagine Web realizzate sul server tramite i marcatori (tag) del linguaggio
HTML e inviate al browser dell’utente client. Le due parti dell’applicazione Web, lato server e lato client, si
collegano usando gli script in linguaggio PHP che svolgono i seguenti compiti: connessione al DB MySQL, invio
dei comandi SQL e acquisizione delle risposte; scrittura dei dati ricevuti dal DB all’interno delle pagine Web
in formato HTML in modo che siano interpretate dal browser dell’utente.

1. Il browser Web esegue una richiesta di una pagina Web in formato PHP.
2. Il server Web riconosce che la richiesta fa riferimento a un file con estensione .php e quindi attiva
l’interprete PHP per eseguire gli script in esso contenuti.
3. Lo script PHP contiene i comandi per collegarsi al database MySQL e inviare le richieste tramite i
comandi SQL.
4. Il server MySQL risponde restituendo i dati richiesti.
5. Lo script PHP scrive questi dati all’interno di una pagina Web e la restituisce al server Web.
6. Il server Web invia al browser dell’utente la pagina richiesta in formato HTML, generata in modo
dinamico dallo script PHP.

PHP fin dalla sua nascita ha per default operato con il DBMS MySQL prima ancora che questo prodotto fosse
acquisito da Oracle. Attualmente viene spesso “pacchettizzato” con altro software open source, tra cui
MariaDB, un DBMS open, clone di MySQL. PHP non ha di norma necessità di alcuna specifica installazione
aggiuntiva per operare con MySQL, in quanto la possibilità di connettersi e di operare con esso è
implementata di default. In PHP esistono una serie di funzioni atte a svolgere tale compito riconoscibili dal
prefisso mysql; nella nuova versione 7 di PHP il supporto a tali funzioni ha cessato di esistere ed in tale
versione sono supportate solo le nuove funzioni mysqli.

La connessione a MySQL in PHP si realizza con mysqli_connect(…), che ha 3 parametri:

• Host con cui ci connettiamo, ospitante il server MySQL.

• Username dell’utente che si connette.
• Password dell’utente che si connette.

L’utente root è il superutente di MySQL, ossia quello al quale sono possibili tutte le operazioni.

Possibili cause del fallimento di una connessione a un DBMS:

• PHP non è adeguatamente configurato (ad esempio l’estensione per gestire MySQL è stata
disabilitata in php.ini).
• Il server MySQL al quale stiamo tentando di connetterci è spento.
• L’intera macchina a cui ci si sta tentando di connettere è spenta.
• L’utente specificato nel comando non esiste nel sistema MySQL.

Per selezionare il database su cui agire, si usa mysqli_select_db(“nomeDatabase”). I comandi si effettuano

tramite query: mysqli_query(“nomeQuery”). È inoltre possibile terminare la connessione a un database con
mysqli_close(<connessione>).

<?php
$host= “localhost”;
 $username=“root”;
$password=“root”;
$db_nome=“db1”;
$tab_nome=“utenti”;
// connessione al server
mysql_connect($host, $username, $password) or die(‘Impossibile connettersi al server: ‘ .
mysql_error());
// accesso al database
mysql_select_db($db_nome) or die (‘Accesso al database non riuscito: ‘ . mysql_error());
// lettura dei dati dalla tabella
$sql = “SELECT * FROM $tab_nome”;
$result = mysql_query($sql);
while($row = mysql_fetch_array($result)) {
echo $row[‘cognome’] . “ “ . $row[‘nome’] . “ “ . $row[‘provincia’];
echo “<br />
}
?>

AJAX: Asynchronous Javascript And XML; tecnologia basata sull’interazione asincrona tra web client e web
server. Il web client (browser) effettua una richiesta al server ma, a differenza delle altre forme di interazione
previste, non si interrompe fino all’arrivo della risposta (response) da parte del server.

Tecnologia sincrona:

1. L’utente scrive un indirizzo Web nella casella del browser oppure fa clic su un link all’interno della
pagina Web.
2. Il browser invia una richiesta al server Web.
3. Il server elabora una risposta e la restituisce al client.
4. Il browser visualizza la risposta ricaricando tutta la pagina.

Tecnologia asincrona:

1. L’utente genera un evento mentre interagisce con la pagina.

2. JavaScript gestisce l’evento inviando una richiesta al server Web.
3. Il server elabora una risposta e la restituisce al client.
4. La pagina viene aggiornata usando JavaScript.

Applicazioni che usano AJAX sono Google Mail, Google Maps,…

AJAX viene utilizzato per:

• Eseguire la validazione dei dati nei moduli.

• Completare automaticamente le caselle di testo mentre l’utente digita un input.
• Gestire nuovi componenti grafici per migliorare l’interazione con l’utente.
• Visualizzare informazioni prese dal server senza ricaricare l’intera pagina.

XMLHttpRequest è un oggetto utilizzabile nelle funzioni JavaScript e si occupa di gestire le richieste e le

risposte in base ai metodi standard GET e POST del protocollo HTTP.

XML Http Request Object (XHR) è l’oggetto che permette la comunicazione asincrona tra client e server; non
è un oggetto standard del DOM W3C ma è standard WHATWG (Web Hypertext Application Technology
Working Group) ed è attualmente supportato da tutti i browser.

Attributi di XHR:
• readyState: 1 = Open; 2 = Sent; 3 = Received; 4 = Loaded.
• Status: 200 = ok; 404 = page not found
• statusText: Contiene l’etichetta dello status.
• responseXML: Contiene il documento XML caricato (oggetto XML document). È significativo solo se
readyState = 4, altrimenti è null.
• Onreadystatechange: Funzione invocata quando cambia l’attributo readyState.
• responseText: Contiene i dati caricati (stringa di caratteri). Assume il suo valore finale quando
readyState diventa uguale a 4.