3. Introduzione al Web

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


4

stack

card

area sensibile(bottone invisibile)

script

clic

Ipertesti off-line: Hypercard (1987)


5

Hypercard: esempi (video)

A children hypercard adventure: http://bit.ly/XFN1hT


6

Myst, 1993


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)


17

Il world wide web

INTERNET

Pagina (file) Link


18

Che cos’è il World Wide Web

Un sistema di tecnologie correlate, evolutesi con continuità a partire dai primi anni ’90:


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!”


Il protocollo HTTP


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


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)


URL Uniform Resource Locator

Specifica l'indirizzo della risorsa

Esempio24


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


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


26

Esempio


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


28

HTML: link


29

HTML: immagini


30

Testo attivo

Immagine attiva

Bottone Tab

I link possono assumere diverse forme


Scripts (client side)


32

Script eseguito dal

browser

Scripts (server side)


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


34

<html><body>

embed code

</body></html>

oggetto attivo

disponibile sulla rete

Embedding: esempio


35

<iframe width="560" height="315" src="http://www.youtube.com/embed/qrO4YZeyl0I" frameborder="0" allowfullscreen></iframe>

"Widgets": esempi


36

In sintesi…


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


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)

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


42

La molteplicità dei device di accesso


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…


44

Fonte: StatCounter http://bit.ly/VMpWMT

PC top screen resolution Q12009-Q12013 (Italy)

I device mobili complicano ulteriormente le cose… (qui solo alcuni)


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


46

Un dibattito attuale per il mobile


47

App nativespecifiche per il device e scaricate da un App store

Responsive web siteGestito da un

browser ?

oppure

Voi che ne pensate?


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)


49

Education

3. Introduzione al Web