Roma @ IED
13 Marzo 2015
"To understand a program
you must become both
the machine and the program."
Alan Perlis
una finestra con una barra degli indirizzi...
una finestra sul Web, una delle applicazioni di Internet
il browser Web e' un client che richiede risorse e servizi ad un server
... i server sono raggiungibili attraverso Internet, una maglia composta anche da una moltitudine di sistemi intermedi
... inoltre i server a volte si comportano da client nei confronti di altri server, ed una sola pagina web potrebbe creare connessioni a piu' di un solo server
All'interno di ogni browser Web sono presenti dei Tool di Sviluppo integrati
I Tool di Sviluppo ci danno una visione privilegiata di alcuni dei meccanismi interni al browser Web
Selezionare dal "Menu Chrome " nell'angolo in alto a destra della finestra del browser, e selezionare "Strumenti > Strumenti per lo sviluppatore" (o "Tools > Developer Tools")
oppure
Premere il tasto destro del mouse su un qualunque elemento nella pagina e selezionare "Ispeziona Elemento" (o "Inspect Element")
Selezionare dal "Menu Firefox " nell'angolo in alto a destra della finestra del browser, e selezionare "Sviluppatore > Abilita/Disabilita Strumenti" (o "Developer > Toggle Developer Tools")
oppure
Premere il tasto destro del mouse su un qualunque elemento nella pagina e selezionare "Ispeziona Elemento" (o "Inspect Element")
HTTP e' il principale protocollo di comunicazione del Web
Mediante il tool Network e' possibile visualizzare le richieste effettuate dal Browser Web e il loro esito (Status)
http://localhost:9999/index.html
L'URL e' un formato standard per rappresentare l'indirizzo di una risorsa sulla rete
La prima componente di un URL e' il protocollo:
- http, il protocollo HTTP nella sua versione plaintext
- https, il protocollo HTTP nella sua versione crittografata
La seconda componente e' il nome di dominio o l'indirizzo IP del server che ci dara' accesso alla risorsa:
- nome di dominio:
localhost
(che indica la macchina locale),google.it
,facebook.com
,mozilla.org
...- indirizzo IP:
127.0.0.1
(comelocalhost
indica la macchina locale),192.168.0.1
, ...
$ host google.it
google.it has address 173.194.113.248
google.it has address 173.194.113.255
google.it has address 173.194.113.239
google.it has address 173.194.113.247
google.it has IPv6 address 2a00:1450:4002:800::1018
google.it mail is handled by 50 alt4.aspmx.l.google.com.
google.it mail is handled by 10 aspmx.l.google.com.
google.it mail is handled by 40 alt3.aspmx.l.google.com.
google.it mail is handled by 20 alt1.aspmx.l.google.com.
google.it mail is handled by 30 alt2.aspmx.l.google.com.
Quando chiediamo al browser di collegarsi ad un server (e.g. google.it), il browser fara' una richiesta ad un servizio chiamato DNS (Domain Name Service), che tradurra' il nome in un indirizzo IP
opzionalmente, accando all'indirizzo e separato da un carattere ":", puo' essere specificato il numero di porta
(di solito solo se diverso dal valore standard per il protocollo, http -> 80, e https -> 443)
Il percorso indica la posizione della risorsa, la quale potrebbe essere un file fisicamente residente sul disco del server o essere generata dinamicamente da una web application
Il percorso inizia con il carattere "/", che indica l'inizio della struttura ad albero (detto anche radice)
Ogni livello sara' codificato nella stringa usando il carattere "/" come separatore:
- /res/img/home.png
- /articles/2015/comments
Quando un URL non inizia con uno "/" si dira' relativo:
- app.css
- ./app.css
- ../res/app.css
All'URL della risorsa possono essere allegati dei parametri.
"?" e "&" sono dei caratteri speciali usati come separatori
?since=20150101&completed=false
I parametri sono codificati con la sintassi nome=valore
?since=20150101&completed=false
GET
Mediante l'HTTP Method il client comunica al server il tipo di operazione che si vorrebbe eseguire.
GET
GET
304 Not Modified
Lo Status Code codifica l'esito (il tipo di risposta) del server alla richiesta.
304 Not Modified
304 Not Modified
HTML: HyperText Markup Language
- un linguaggio per la definizione di documenti ipertestuali
- uno standard mantenuto dalla W3C (World Wide Web Consortium)
Iniziamo con l'analizzare il documento HTML piu' semplice possibile:
<html>
<head>
<title>Titolo</title>
</head>
<body>
Contenuto
</body>
</html>
- un semplice file in formato testo (non binario)
- espresso secondo le regole sintattiche dello standard HTML
- composto da elementi organizzati in una struttura ad albero
<title>Titolo</title>
- la stringa delimitata dai caratteri "<" e ">" e' detto tag
- i tag HTML costituiscono il vocabolario degli elementi a nostra disposizione
- l'insieme dei tag e le regole sintattiche sono definite dalla W3C
<html>
<body>...</body>
</html>
- alcuni tag possono contenerne altri
- il carattere "/" viene utilizzato per specificare la chiusura di un tag
<title>...</title
- quando un tag puo' contenere altri tag DEVE essere chiuso correttamente
<head/>
- quando un tag non ha contenuto si puo' far uso della sintassi abbreviata
<html>
...
</html>
- il tag html delimita all'interno del file di testo l'inizio e la fine della pagina HTML.
- costituisce l'elemento radice (root) del documento
<html>
<head>...</head>
<body>...</body>
</html>
- all'interno del tag html troveremo i tag head e body
- body conterra' gli elementi che ne rappresentano il contenuto (paragrafi, menu' etc.)
- head conterra' il titolo della pagina e altri metadata (non direttamente visibili)
<html>
__<head>
<title>...</title>
</head>
__<body>
...
</body>
</html>
- di solito i documenti HTML vengono appositamente formattati in modo da facilitare la visualizzazione della loro struttura ad albero
questa tecnica di formattazione che fa uso di particolari regole di spaziatura viene detta indentation (identazione)
<html>
__<head>
<title>...</title>
</head>
__<body>
__<h1>...</h1>
<p>...</p>
...
<p>...</p>
</body>
</html>
<html>
__<head>
<title>...</title>
</head>
__<body>
__<h1>...</h1>
<p>...</p>
<p>...</p>
</body>
</html>
- l'elemento HTML e' detto root element
- gli elementi saranno tra di loro legati da relazioni padre/figli/discendenti (parent, childs, descendents)
- gli elementi figli di uno stesso elemento padre si dicono siblings
<p>paragrafo</p>
<p>
paragrafo
multi line
</p>
- il tag p consente di inserire nel documento paragrafi di testo
<p>paragrago</p>
<p>
paragrafo
multi line
</p>
paragrafo
paragrafo multi line
il tag p inserisce una spaziatura con gli elementi confinanti (comportamento personalizzabile mediante l'applicazione dei fogli di stile)
<pre>
testo preformattato
e multi - line
</pre>
<p>
paragrafo di testo
e multi - line
</p>
- il tag pre consente di inserire del testo preformattato di cui il browser rispettera' la spaziatura
<pre>
testo preformattato
e multi - line
</pre>
<p>
paragrafo di testo
e multi - line
</p>
testo pre-formattato e multi - lineparagrafo di testo e multi - line
<p>
<div>blocco div</div>
testo del paragrafo
</pre>
<p>
<div>blocco span</div>
testo del paragrafo
</p>
- il tag div e span non applicano alcuno stile particolare al loro contenuto
<p>
<div>blocco div</div>
testo del paragrafo
</p>
<p>
<span>blocco span</span>
testo del paragrafo
</p>
blocco divtesto del paragrafoblocco span testo del paragrafo
il tag div e span, pur non applicando stili particolari, sono molto utilizzati per dare una maggiore struttura ai contenuti senza influenzarne la visualizzazione
<nav>...</nav>
<main>
<article>
<section>
<subsection>
...
</subsection>
</section>
</article>
<aside>...</aside>
</main>
- l'ultima versione dello standard HTML (HTML5) ha introdotto alcuni nuovi tag struttura
- analogamente ai tag struttura div e span non applicano alcuno stile particolare al loro contenuto
il loro scopo, con i classici div e span, e' quello di assegnare un significato semantico al particolare blocco di contenuto che racchiudono
<p>
test del paragrafo
<custom-tag>
"contenuto tag sconosciuto"
</custom-tag>
dopo il custom tag
<p>
test del paragrafo"contenuto tag sconosciuto" dopo il custom tag
In presenza di un tag sconosciuto, il browser web non segnala alcun errore e lo interpretera' come un tag span.
<h1>H1</h1>
<h2>H2</h2>
<hr/>
<h3>H3</h3>
<h4>H4</h4>
...
H1
H2
H3
H4
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
<ol>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ol>
- item 1
- item 2
- item 3
- item 1
- item 2
- item 3
<dl>
<dt>Termine 01</dt>
<dd>Descrizione</dd>
<dt>Termine 02</dt>
<dd>Descrizione</dd>
<dt>Termine 03</dt>
<dd>Descrizione</dd>
</dl>
- Termine 01
- Descrizione
- Termine 02
- Descrizione
- Termine 03
- Descrizione
<table>
<thead>
<tr>
<th>th1</th>
...
</tr>
</thead>
<tbody>
<tr>
<td>r1c1</td>
...
</tr>
...
</tbody>
</table>
th1 th2 r1c1 r1c2 r2c1 r2c2
<img src="res/alcacoop-logo.png">
Per i tag che non prevedono contenuto (detti tag void) il browser non necessita di un esplicito tag di chiusura.
Ma e' necessario assicurarsi che il browser lo riconosca come tale:
area, base, br, col, embed, hr, img, input, keygen, link, meta,
pram, source, track, wbr
<ul>
<li> a1 </li>
<li> a2 </li>
<ul>
<ul>
<li> b1 </li>
<li> b2 </li>
</ul>
- a1
- a2
- b1
- b2
Il browser interpretare ugualmente il documento, cercando di mantenere la struttura gerarchica, ma in genere il risultato non sara' quello che avremmo voluto ottenere
<img src="res/alcacoop-logo.png">
- su ogni tag possono essere applicati degli attributi
- gli attributi devono essere specificati nel tag di apertura
- la sintassi degli attributi e' nome="valore" o nome (per gli attributi booleani)
- alcuni attributi hanno un significato specifico per il tag su cui vengono applicati
<a href="http://google.it">Google</a>
<a href="/archive/posts/">Archivio</a>
<a href="#footer">Salta a pie' pagina</a>
- il tag a consente di associare al suo contenuto un collegamento ipertestuale
- il collegamento ipertestuale e' contenuto nell'attributo href
- nell'attributo href possiamo creare link ad un altro server web, ad un altra risorsa del server web corrente o ad un'altro punto della pagina
<div id="menu">
<a href="#footer">
Salta a pie' pagina
</a>
</div>
...
<div id="footer">
...
</div>
- l'attributo id e' un attributo che possiamo utilizzare su uno qualunque dei tag di un documento HTML
la stringa associata ad un elemento della pagina mediante l'attributo id ne costituisce l'identificativo univoco
l' id puo' essere usato per specificare in un collegamento ipertestuale a quale punto della pagina ci stiamo riferendo
<ul>
<li> > </li>
<li> < </li>
<li> & </li>
<li> @ </li>
<li> ® </li>
<li> © </li>
</ul>
- >
- <
- &
- @
- ®
- ©
Essendo alcuni caratteri (come ">" e "<") riservati dalla sintassi dei tag, esistono delle sintassi speciali (dette HTML entities) per l'inserimento di tali caratteri
<!DOCTYPE html>
<html>
...
</html>
- lo standard HTML prevede che come intestazione di un file HTML si specifichi il tipo del documento (DOCTYPE)
<p>
paragrafo di testo 1
</p>
<!-- p>
paragrafo commentato
</ -->
<p>
paragrafo di testo 2
</p>
paragrafo di testo 1
paragrafo di testo 2