6. Introduzione al web
-
Upload
roberto-polillo -
Category
Education
-
view
1.419 -
download
3
description
Transcript of 6. Introduzione al web
![Page 1: 6. Introduzione al web](https://reader036.fdocumenti.com/reader036/viewer/2022062616/54b441a14a79598e018b45bb/html5/thumbnails/1.jpg)
Edizione 2011-12
Università degli Studi di Milano BicoccaDipartimento di Informatica, Sistemistica e Comunicazione
Corso di Strumenti e applicazioni del Web
6. Introduzione al WebRoberto Polillo
![Page 2: 6. Introduzione al web](https://reader036.fdocumenti.com/reader036/viewer/2022062616/54b441a14a79598e018b45bb/html5/thumbnails/2.jpg)
Riassunto lezione precedente
Il Web non è Internet Internet è una rete di reti Il protocollo TCP/IP suddivide il data stream in
pacchetti che seguono strade diverse I computer sono individuati da un indirizzo IP Il DNS associa indirizzi IP a nomi mnemonici
strutturati attraverso server distribuiti XML è un metalinguaggio per definire la struttura
dei messaggi fra sistemi diversi
R.Polillo - Ottobre 2011
3
![Page 3: 6. Introduzione al web](https://reader036.fdocumenti.com/reader036/viewer/2022062616/54b441a14a79598e018b45bb/html5/thumbnails/3.jpg)
ICANN
Internet Corporation for Assigned Names and Numbers: http://www.icann.org/
Organizzazione non-profit che gestisce lo spazio dei nomi di Internet: indirizzi IP, nomi dei protocolli, top-level domains
Dal 2012 sarà possibile definire nuovi top-level domainshttp://www.voanews.com/english/news/science-technology/New-Internet-Name-Rule-Opens-Door-to-Huge-Changes-124180874.html
R.Polillo - Ottobre 2011
4
![Page 4: 6. Introduzione al web](https://reader036.fdocumenti.com/reader036/viewer/2022062616/54b441a14a79598e018b45bb/html5/thumbnails/4.jpg)
LINK
NODO
Ipertesto
![Page 5: 6. Introduzione al web](https://reader036.fdocumenti.com/reader036/viewer/2022062616/54b441a14a79598e018b45bb/html5/thumbnails/5.jpg)
stack
card
area sensibile(bottone invisibile)
script
clic
Ipertesti off-line: Hypercard (1987)
![Page 6: 6. Introduzione al web](https://reader036.fdocumenti.com/reader036/viewer/2022062616/54b441a14a79598e018b45bb/html5/thumbnails/6.jpg)
Hypercard: esempi
http://www.youtube.com/watch?v=mlzBe5dV5e4
R.Polillo - Ottobre 2011
7
![Page 7: 6. Introduzione al web](https://reader036.fdocumenti.com/reader036/viewer/2022062616/54b441a14a79598e018b45bb/html5/thumbnails/7.jpg)
Che cos’è il Web
Un sistema di tecnologie correlate, evolutesi con continuità a partire dai primi anni ’90:
R.Polillo - Ottobre 2011
8
Concetto di ipertesto (es.Hypercard, 1987)
Protocolli internet:- TCP/IP (primi anni 70) - DNS (primi anni 80)
HTTPHTMLURIBROWSER(da1990-91)
+ WWW
=
![Page 8: 6. Introduzione al web](https://reader036.fdocumenti.com/reader036/viewer/2022062616/54b441a14a79598e018b45bb/html5/thumbnails/8.jpg)
Il World Wide Web9
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 - Ottobre 2011
![Page 9: 6. Introduzione al web](https://reader036.fdocumenti.com/reader036/viewer/2022062616/54b441a14a79598e018b45bb/html5/thumbnails/9.jpg)
Il world wide web
Una particolare applicazione di internet L’idea base:
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 - Ottobre 2011
10
![Page 10: 6. Introduzione al web](https://reader036.fdocumenti.com/reader036/viewer/2022062616/54b441a14a79598e018b45bb/html5/thumbnails/10.jpg)
Il world wide web
INTERNET
Pagina (file) Link
R.Polillo - Ottobre 2011
11
![Page 11: 6. Introduzione al web](https://reader036.fdocumenti.com/reader036/viewer/2022062616/54b441a14a79598e018b45bb/html5/thumbnails/11.jpg)
Il protocollo HTTP
“HyperText Transfer Protocol”: le regole che governano il trasferimento di pagine web dal computer che le archivia (“server”) al computer che le richiede (“client”)
R.Polillo - Ottobre 2011
12
![Page 12: 6. Introduzione al web](https://reader036.fdocumenti.com/reader036/viewer/2022062616/54b441a14a79598e018b45bb/html5/thumbnails/12.jpg)
Il world wide web: sintesi
Internet
Client
Serverweb server
File (HTML)
browser
il protocollo: HTTP
Get(URL)
Put
R.Polillo - Ottobre 2011
13
![Page 13: 6. Introduzione al web](https://reader036.fdocumenti.com/reader036/viewer/2022062616/54b441a14a79598e018b45bb/html5/thumbnails/13.jpg)
Naming: URI, URL, URN14
URI Uniform Resource Identifier
URN Uniform Resource Name
Specifica il nome della risorsa
Esempio:(International Standard Book Number)
R.Polillo - Ottobre 2011
URL Uniform Resource Locator
Specifica l'indirizzo della risorsa
![Page 14: 6. Introduzione al web](https://reader036.fdocumenti.com/reader036/viewer/2022062616/54b441a14a79598e018b45bb/html5/thumbnails/14.jpg)
Struttura di un file system16
Directory (folder)
Root /
A B
Cx y
z y
x
/B/C/y
R.Polillo - Ottobre 2011
![Page 15: 6. Introduzione al web](https://reader036.fdocumenti.com/reader036/viewer/2022062616/54b441a14a79598e018b45bb/html5/thumbnails/15.jpg)
HTTP: Privacy
Internet
Client
Serverweb server
File (HTML)
browser
il protocollo: HTTP
Get(URL)
Put
R.Polillo - Ottobre 2011
17
Info inviate dal browser al server:•Indirizzo IP•Referrer•Browser name•Screen resolution•OS•…
Log file Cookies
![Page 16: 6. Introduzione al web](https://reader036.fdocumenti.com/reader036/viewer/2022062616/54b441a14a79598e018b45bb/html5/thumbnails/16.jpg)
Il problema della varietà dei device di accesso
Client 1
Server
File (HTML)
R.Polillo - Ottobre 2011
18
browser 1
Internet
browser 2
Client 2Client 3
browser 3
![Page 17: 6. Introduzione al web](https://reader036.fdocumenti.com/reader036/viewer/2022062616/54b441a14a79598e018b45bb/html5/thumbnails/17.jpg)
Esempio: screen resolution
R.Polillo - Ottobre 2011
19
http://gs.statcounter.com/#resolution-ww-quarterly-200901-201104 (embeddable widget)
![Page 18: 6. Introduzione al web](https://reader036.fdocumenti.com/reader036/viewer/2022062616/54b441a14a79598e018b45bb/html5/thumbnails/18.jpg)
Il linguaggio HTML
→ 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)
La presentazione è gestita localmente, sulla base delle caratteristiche del client
R.Polillo - Ottobre 2011
20
![Page 19: 6. Introduzione al web](https://reader036.fdocumenti.com/reader036/viewer/2022062616/54b441a14a79598e018b45bb/html5/thumbnails/19.jpg)
Esempio
R.Polillo - Ottobre 2011
21
1.Titolo2. 1.1 Sottotitolo Lorem ipsum dolor sit
amet, consectetuer adipiscing
Nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat.
1.2 Sottotitolo Ut wisi enim ad minim
veniam, quis nostrud exerci tation ullamcorper suscipit
Struttura
Heading 1
Heading 2
paragrafo
Verdana, bold, 24
Verdana, bold, 18
Verdana, corsivo, 12
Presentazione
![Page 20: 6. Introduzione al web](https://reader036.fdocumenti.com/reader036/viewer/2022062616/54b441a14a79598e018b45bb/html5/thumbnails/20.jpg)
HTML: esempio
R.Polillo - Ottobre 2011
22
![Page 21: 6. Introduzione al web](https://reader036.fdocumenti.com/reader036/viewer/2022062616/54b441a14a79598e018b45bb/html5/thumbnails/21.jpg)
HTML: immagini
R.Polillo - Ottobre 2011
23
![Page 22: 6. Introduzione al web](https://reader036.fdocumenti.com/reader036/viewer/2022062616/54b441a14a79598e018b45bb/html5/thumbnails/22.jpg)
HTML: link
R.Polillo - Ottobre 2011
24
![Page 23: 6. Introduzione al web](https://reader036.fdocumenti.com/reader036/viewer/2022062616/54b441a14a79598e018b45bb/html5/thumbnails/23.jpg)
Testo attivo
Immagine attiva
Bottone Tab
I link possono assumere diverse forme
R.Polillo - Ottobre 201125
![Page 24: 6. Introduzione al web](https://reader036.fdocumenti.com/reader036/viewer/2022062616/54b441a14a79598e018b45bb/html5/thumbnails/24.jpg)
Scripts (client side)
R.Polillo - Ottobre 2011
26
Script eseguito dal
browser
![Page 25: 6. Introduzione al web](https://reader036.fdocumenti.com/reader036/viewer/2022062616/54b441a14a79598e018b45bb/html5/thumbnails/25.jpg)
Scripts (server side)
R.Polillo - Ottobre 2011
27
Script eseguito dal
server
<html><body>
<?php echo "ciao"?>
</body></html>
<html><body>
ciao
</body></html>
ciao
![Page 26: 6. Introduzione al web](https://reader036.fdocumenti.com/reader036/viewer/2022062616/54b441a14a79598e018b45bb/html5/thumbnails/26.jpg)
Widgets
R.Polillo - Ottobre 2011
28
![Page 27: 6. Introduzione al web](https://reader036.fdocumenti.com/reader036/viewer/2022062616/54b441a14a79598e018b45bb/html5/thumbnails/27.jpg)
Widget embedding
R.Polillo - Ottobre 2011
29
<html><body>
embed code
</body></html>
![Page 28: 6. Introduzione al web](https://reader036.fdocumenti.com/reader036/viewer/2022062616/54b441a14a79598e018b45bb/html5/thumbnails/28.jpg)
Embedding: esempio
R.Polillo - Ottobre 2011
30
<iframe width="560" height="315" src="http://www.youtube.com/embed/qrO4YZeyl0I" frameborder="0" allowfullscreen></iframe>
![Page 29: 6. Introduzione al web](https://reader036.fdocumenti.com/reader036/viewer/2022062616/54b441a14a79598e018b45bb/html5/thumbnails/29.jpg)
In sintesi…
R.Polillo - Ottobre 2011
31
link
CLIENT
![Page 30: 6. Introduzione al web](https://reader036.fdocumenti.com/reader036/viewer/2022062616/54b441a14a79598e018b45bb/html5/thumbnails/30.jpg)
Virtualizzazione dei servizi
INTERNET
R.Polillo - Ottobre 2011
32
![Page 31: 6. Introduzione al web](https://reader036.fdocumenti.com/reader036/viewer/2022062616/54b441a14a79598e018b45bb/html5/thumbnails/31.jpg)
HTML e CSS: evoluzione
R.Polillo - Ottobre 2011
33
http://www.jasonspeaking.com/index.php/2010/04/the-evolution-of-html-css/
![Page 32: 6. Introduzione al web](https://reader036.fdocumenti.com/reader036/viewer/2022062616/54b441a14a79598e018b45bb/html5/thumbnails/32.jpg)
W3C: World Wide Web Consortium
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 - Ottobre 2011
34
![Page 33: 6. Introduzione al web](https://reader036.fdocumenti.com/reader036/viewer/2022062616/54b441a14a79598e018b45bb/html5/thumbnails/33.jpg)
User
Site Access Provider
User Access Provider
Web Server
Internet
Prestazioni
Banda verso UAP
Caratteristiche dell’UAP
Congestione della rete
Caratteristiche del SAP
Banda verso SAP
Caratteristiche del server
Caratteristiche del file
R.Polillo - Ottobre 2011
35
![Page 34: 6. Introduzione al web](https://reader036.fdocumenti.com/reader036/viewer/2022062616/54b441a14a79598e018b45bb/html5/thumbnails/34.jpg)
Quanta banda oggi?
Da uno studio recente dei downloads (2010): Media worldwide: 580 kbps Media USA: 616 Kbps Media Italia: 336 Kbps Best : South Corea: 2020 Kbps Worst : Congo: 13 Kbps
http://www.pandonetworks.com/Pando-Networks-Releases-Global-Internet-Speed-Study
R.Polillo - Ottobre 2011
36
![Page 35: 6. Introduzione al web](https://reader036.fdocumenti.com/reader036/viewer/2022062616/54b441a14a79598e018b45bb/html5/thumbnails/35.jpg)
Digital divide (banda)
http://chartsbin.com/view/2484 (widget embeddable)R.Polillo - Ottobre 2011
37
![Page 36: 6. Introduzione al web](https://reader036.fdocumenti.com/reader036/viewer/2022062616/54b441a14a79598e018b45bb/html5/thumbnails/36.jpg)
Lavoro individuale
Incominciate a scrivere il wikibook Guardate le pagine dell'anno scorso (erano
individuali), in http://wikicorso.wiki-site.com/index.php/Learning_journals_2010
R.Polillo - Ottobre 2011
38