Slides del corso "Strumenti e applicazioni del Web", corso di laurea magistrale in Teoria e tecnologia della comunicazione - Università di Milano Bicocca - Prof. R.Polillo Lezione n.3, 12.3.2013 La registrazione della lezione è disponibile su YouTube: Parte I: http://youtu.be/JyEJ7XQbhoI Parte II: http://youtu.be/SsqzVdB2sN0 Vedi anche www.corsow.wordpress.com

1. Università degli Studi di Milano Bicocca
Dipartimento di Informatica, Sistemistica e Comunicazione
Corso di Strumenti e applicazioni del Web
3. Introduzione al Web
Roberto Polillo
Edizione 2012-13

2. Sintesi della puntata precedente
3
 Internet è una rete di reti
 Il protocollo TCP/IP suddivide il data stream in
pacchetti che seguono strade diverse (routing)
 Ogni nodo della rete è individuato da un indirizzo
IP, assegnato da un server DHCP
 Si usano nomi di dominio strutturati, che vengono
associati agli indirizzi IP da server DNS distribuiti
 Le regole per l'assegnazione dei nomi su Internet
vengono gestite da ICANN
R.Polillo - Marzo 2013

3. Ipertesto
4
LINK
NODO
R.Polillo - Marzo 2013

4. Ipertesti off-line: Hypercard
5
(1987)
clic
stack
card script
area sensibile
(bottone invisibile)
R.Polillo - Marzo 2013

5. Hypercard: esempi (video)
6
 A children hypercard adventure:
http://bit.ly/XFN1hT
R.Polillo - Marzo 2013

6. Myst, 1993
7
R.Polillo - Marzo 2013

7. (Le immagini che seguono sono contigue)

16. L'idea di base del World Wide Web
17
 Archiviare pagine di ipertesto su computer in
Internet, permettendo di linkarle fra loro
(indipendendentemente dalla loro collocazione) e
permettendone l’accesso da qualunque computer in
Internet
specificandone soltanto un nome simbolico, detto URL
(Uniform Resource Locator)
R.Polillo - Marzo 2013

17. Il world wide web
18
INTERNET
Link
Pagina (file)
R.Polillo - Marzo 2013

18. Che cos’è il World Wide Web
19
Un sistema di tecnologie correlate, evolutesi con
continuità a partire dai primi anni ’90:
Protocolli internet:
- TCP/IP (primi anni
HTTP
70)
HTML
- DNS (primi anni
80) + URI
BROWSER
= WW
Concetto di ipertesto
W
(da1990-
(es.Hypercard, 1987) 91)
R.Polillo - Marzo 2013

19. Il World Wide Web
20
Tim Berners-Lee
(1995)
"I just had to take the
hypertext idea and
connect it to the TCP
Protocol and Domain
Name System ideas
and – Ta-da! – the
World Wide Web!”
R.Polillo - Marzo 2013

20. Il protocollo HTTP
21
HyperText Transfer Protocol:
le regole che governano il trasferimento di pagine web dal
computer che le archivia (“server”) al computer che le richiede
(“client”)
HTML
GET (URL) Browser
internet
HTTP
Web PUT
server HTML
Protocollo stateless

21. Info inviate dal
HTTP: privacy browser al server:
•Indirizzo IP
22
•Referrer
•Browser name
Su indirizzi IP cfr. •Screen resolution
http://whatismyipaddress.com
•OS
•…
HTML
GET (URL) Browser
internet
HTTP
Web PUT
server HTML
Log file Cookies
R.Polillo - Marzo 2013

22. Naming: URI, URL, URN
23
URI
Uniform Resource
Identifier
URL URN
Uniform Resource Uniform Resource Name
Locator
Specifica il nome della
Specifica l'indirizzo della risorsa
risorsa Esempio:
(International Standard Book Number)
R.Polillo - Marzo 2013

23. Esempio
24
Root /
A corso
Index.ht
ml
Web B
server
R.Polillo - Marzo 2013

24. URL shortening
25
 Servizi che accorciano gli URL
 Esempio:
 http://www.rpolillo.it/index.php/2013/01/workshop-su-digital-heritage-levoluzione-della-
memoria-1-feb-2012-in-bicocca/ → http://bit.ly/YbLyml
Esempi:
Statistiche d'accesso e altri servizi bit.ly
tinyurl.com
HTML
t.Co
GET ….
shortBrowser
internet
HTTP
Web PUT
server HTML
R.Polillo - Marzo 2013

25. Il linguaggio HTML
26
 → distinguere contenuto, struttura logica e
modalità di presentazione delle pagine
 ogni pagina contiene, oltre al suo contenuto
informativo, anche “meta-informazioni” che
specificano struttura e presentazione
 Queste sono scritte in un linguaggio denominato
“HyperText Markup Language” (HTML) (e sue
evoluzioni), poi anche CSS (Cascading Style Sheet)
 Il "rendering" è gestito localmente dal browser, che
conosce le caratteristiche del device
R.Polillo - Marzo 2013

26. Esempio
27
1.Titolo
2. 1.1 Sottotitolo Verdana,
Heading Lorem ipsum dolor sit bold, 24
1 amet, consectetuer
Heading adipiscing Verdana,
2 bold, 18
Nonummy nibh euismod
paragrafo tincidunt ut laoreet dolore
magna aliquam erat
Verdana,
volutpat.
corsivo, 12
1.2 Sottotitolo
Ut wisi enim ad minim
veniam, quis nostrud
exerci tation ullamcorper
suscipit
Struttura Contenuto Presentazio
ne R.Polillo - Marzo 2013

27. HTML: esempio
28
R.Polillo - Marzo 2013

28. HTML: link
29
R.Polillo - Marzo 2013

29. HTML: immagini
30
R.Polillo - Marzo 2013

30. Tab Bottone
Immagine attiva
I link possono Testo attivo
assumere diverse
forme
31 R.Polillo - Marzo 2013

31. Scripts (client side)
32
Script
eseguito dal
browser
R.Polillo - Marzo 2013

32. Scripts (server side)
33
<html>
<html> <html>
<html>
<body>
<body> <body>
<body>
Script
eseguito dal <?php
<?php
echo
echo ciao
ciao
server "ciao"
"ciao"
?>
?>
</body>
</body> ciao
</body>
</body> </html>
</html>
</html>
</html>
R.Polillo - Marzo 2013

33. Embedding
34
<html> disponibile sulla
<body> rete
embed code
</body>
</html>
oggetto
attivo
R.Polillo - Marzo 2013

34. Embedding: esempio
35
<iframe width="560" height="315"
src="http://www.youtube.com/embed/qrO4Y
Zeyl0I" frameborder="0"
allowfullscreen></iframe>
R.Polillo - Marzo 2013

35. "Widgets": esempi
36
R.Polillo - Marzo 2013

36. In sintesi…
37
link
File HTML
BROWSER
R.Polillo - Marzo 2013

37. Da dove provengono i servizi?
Virtualizzazone / globalizzazione della rete
38

38. Prestazioni
39
Banda verso UAP
User
Caratteristiche dell’UAP
Congestione della rete User Access Provider
Caratteristiche del SAP
Internet
Banda verso SAP
Site Access Provider
Caratteristiche e carico
del server
Web Server
Caratteristiche della
pagina
R.Polillo - Marzo 2013

39. Larghezza di banda
40
 In genere, la banda in downstream è superiore a
quella in upstream
 Il termine "banda larga" ("broadband") non ha un
significato preciso
 ITU definisce "broadband" qualunque connessione,
fissa o mobile, con velocità di downstream >= 256
Kbps
 Provate la vostra banda (attuale) con
www.speedtest.net
(o con app SpeedTest per mobile)
R.Polillo - Marzo 2013

40. Digital divide (banda)
41
Situazione al 2011
(?)
 http://chartsbin.com/view/2484 (widget embeddable)
R.Polillo - Marzo 2013

41. W3C: World Wide Web Consortium
42
 Fondato nel 1994 da Tim Berners-Lee
 "The W3C mission is to lead the World Wide Web to its full
potential by developing protocols and guidelines that
ensure the long-term growth of the Web"
 Emette delle Recommendations, che sono
considerate gli standard del Web
 Guardate http://www.w3.org
R.Polillo - Marzo 2013

42. La molteplicità dei device di accesso
43
Si caricano pagine diverse per
ogni device
Oppure
Si carica una stessa pagina e il
browser la specializza sul
HTML
device?
internet
HTTP
Web
server
R.Polillo - Marzo 2013

43. I device sono molto diversi e cambiano in
fretta…
44
PC top screen resolution Q12009-Q12013
(Italy)
Fonte: StatCounter
R.Polillo - Marzo 2013
http://bit.ly/VMpWMT

44. I device mobili complicano ulteriormente le
cose… (qui solo alcuni)
45
R.Polillo - Marzo 2013

45. Media query (HTML5)
46
 Da HTML si può identificare il device che riceve la
pagina, e comporre layout diversi a seconda dei
casi: responsive design
 Una sola pagina per tutti i device
R.Polillo - Marzo 2013

46. Un dibattito attuale per il mobile
47
App native
specifiche per il
device e scaricate
da un App store
oppure
Responsive
web site
Gestito da un
browser ?
R.Polillo - Marzo 2013

47. Voi che ne pensate?
48
(Agosto
2010)
… O NO?
R.Polillo - Marzo 2013

48. Lavoro individuale: riflessioni e piccoli
esperimenti
49
 Riesaminate le vostre competenze di HTML, CSS, XML: quali
versioni avete usato? Quali tag non avete mai usato?
 Inserite qualche widget (es.: quello di StatCounter ) in una vostra
pagina web, e verificatene il funzionamento
 Cercate qualche "best responsive websites" con Google, e verificate
come le pagine cambiano al ridimensionamento della finestra del
laptop; guardatelo anche sul cellulare
 Date un'occhiata al sito del W3C
 Usando speedtest.net, verificate la banda a vostra disposizione
nelle varie ore della giornata, da laptop (connessione fissa o wi-fi) e
da cellulare. Quali sono le ore migliori della giornata?
 Date un'occhiata a http://chartsbin.co (NB anche qui potete inserire
widget nelle vostre pagine web)
R.Polillo - Marzo 2013