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