3. introduzione al web
DESCRIPTION
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.comTRANSCRIPT
Edizione 2012-13
Università degli Studi di Milano BicoccaDipartimento di Informatica, Sistemistica e Comunicazione
Corso di Strumenti e applicazioni del Web
3. Introduzione al WebRoberto Polillo
Sintesi della puntata precedente
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
LINK
NODO
Ipertesto
R.Polillo - Marzo 2013
4
stack
card
area sensibile(bottone invisibile)
script
clic
Ipertesti off-line: Hypercard (1987)
R.Polillo - Marzo 2013
5
Hypercard: esempi (video)
A children hypercard adventure: http://bit.ly/XFN1hT
R.Polillo - Marzo 2013
6
Myst, 1993
R.Polillo - Marzo 2013
7
(Le immagini che seguono sono contigue)
L'idea di base del World Wide Web
Archiviare pagine di ipertesto su computer in Internet, permettendo di linkarle fra loro (indipendendentemente dalla loro collocazione) epermettendone l’accesso da qualunque computer in Internetspecificandone soltanto un nome simbolico, detto URL (Uniform Resource Locator)
R.Polillo - Marzo 2013
17
Il world wide web
INTERNET
Pagina (file) Link
R.Polillo - Marzo 2013
18
Che cos’è il World Wide Web
Un sistema di tecnologie correlate, evolutesi con continuità a partire dai primi anni ’90:
R.Polillo - Marzo 2013
19
Concetto di ipertesto (es.Hypercard, 1987)
Protocolli internet:- TCP/IP (primi anni 70) - DNS (primi anni 80)
HTTPHTMLURIBROWSER(da1990-91)
+ WWW
=
Il World Wide Web20
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
Il protocollo HTTP
R.Polillo - Marzo 2013
21
HTTPinternet
Browser
Web server
HTML
GET (URL)
HTMLPUT
HyperText Transfer Protocol:le regole che governano il trasferimento di pagine web dal computer che le archivia (“server”) al computer che le richiede (“client”)
Protocollo stateless
HTTP: privacy
R.Polillo - Marzo 2013
22
HTTPinternet
Browser
Web server
HTML
GET (URL)
HTMLPUT
CookiesLog file
Info inviate dal browser al server:•Indirizzo IP•Referrer•Browser name•Screen resolution•OS•…
Su indirizzi IP cfr.http://whatismyipaddress.com
Naming: URI, URL, URN23
URI Uniform Resource Identifier
URN Uniform Resource Name
Specifica il nome della risorsa
Esempio:(International Standard Book Number)
R.Polillo - Marzo 2013
URL Uniform Resource Locator
Specifica l'indirizzo della risorsa
Esempio24
R.Polillo - Marzo 2013
Root /
A corso
B
Index.html
Web server
URL shortening
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
R.Polillo - Marzo 2013
25
HTTPinternet
Browser
Web server
HTML
HTMLPUT
GET short
Esempi:bit.lytinyurl.comt.Co….
Statistiche d'accesso e altri servizi
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), poi anche CSS (Cascading Style Sheet)
Il "rendering" è gestito localmente dal browser, che conosce le caratteristiche del device
R.Polillo - Marzo 2013
26
Esempio
R.Polillo - Marzo 2013
27
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
Contenuto
HTML: esempio
R.Polillo - Marzo 2013
28
HTML: link
R.Polillo - Marzo 2013
29
HTML: immagini
R.Polillo - Marzo 2013
30
Testo attivo
Immagine attiva
Bottone Tab
I link possono assumere diverse forme
R.Polillo - Marzo 201331
Scripts (client side)
R.Polillo - Marzo 2013
32
Script eseguito dal
browser
Scripts (server side)
R.Polillo - Marzo 2013
33
Script eseguito dal
server
<html><body>
<?php echo "ciao"?>
</body></html>
<html><body>
<?php echo "ciao"?>
</body></html>
<html><body>
ciao
</body></html>
<html><body>
ciao
</body></html>
ciao
Embedding
R.Polillo - Marzo 2013
34
<html><body>
embed code
</body></html>
oggetto attivo
disponibile sulla rete
Embedding: esempio
R.Polillo - Marzo 2013
35
<iframe width="560" height="315" src="http://www.youtube.com/embed/qrO4YZeyl0I" frameborder="0" allowfullscreen></iframe>
"Widgets": esempi
R.Polillo - Marzo 2013
36
In sintesi…
R.Polillo - Marzo 2013
37
link
BROWSER
File HTML
Virtualizzazone / globalizzazione della rete
38
Da dove provengono i servizi?
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 e carico del server
Caratteristiche della pagina
R.Polillo - Marzo 2013
39
Larghezza di banda
R.Polillo - Marzo 2013
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)
Digital divide (banda)
http://chartsbin.com/view/2484 (widget embeddable)R.Polillo - Marzo 2013
41
Situazione al 2011 (?)
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 - Marzo 2013
42
La molteplicità dei device di accesso
R.Polillo - Marzo 2013
43
HTTP
internet
Web server
HTML
Si caricano pagine diverse per ogni device
OppureSi carica una stessa pagina e il browser la specializza sul device?
I device sono molto diversi e cambiano in fretta…
R.Polillo - Marzo 2013
44
Fonte: StatCounter http://bit.ly/VMpWMT
PC top screen resolution Q12009-Q12013 (Italy)
I device mobili complicano ulteriormente le cose… (qui solo alcuni)
R.Polillo - Marzo 2013
45
Media query (HTML5)
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
R.Polillo - Marzo 2013
47
App nativespecifiche per il device e scaricate da un App store
Responsive web siteGestito da un
browser ?
oppure
Voi che ne pensate?
R.Polillo - Marzo 2013
48
(Agosto 2010)
… O NO?
Lavoro individuale: riflessioni e piccoli esperimenti 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
49