Laboratorio di Informatica 3 Anno Accademico 2019-2020

(1)

Laboratorio di Informatica 3

Anno Accademico 2019-2020

Luigi Catuogno

[lcatuogno@unisa.it]

Il World Wide Web

Introduzione

(2)

L’architettura del World Wide Web

Parte 2

Il World Wide Web

Libri di testo consigliati:

Donatella Sciuto, Giacomo Buonanno, Luca Mari

Introduzione ai sistemi informatici

McGraw-Hill Italia. (2016)

ISBN 978-88-386-9216-1

Capitoli consigliati:

Cap. 9: «Le applicazioni»

Cap. 9.5 «Le tecnologie per il World Wide Web»

(3)

Il World Wide Web

Libri di testo consigliati:

Ryan Teeter and Karl Barksdale

Google Sites & Chrome for Dummies

Wiley Publishing Inc. (2009)

ISBN 978-0-470-39678-0

Il web browser

(4)

• Cura la comunicazione via rete con il server, inviando le richieste di

risorse e ricevendo le risposte;

• Visualizza le risorse ottenute, interpretando le istruzioni in esse

riportate al fine di un rendering corretto;

• Cura l’interazione dell’utente con le risorse visualizzate;

• Servizi di supporto alla navigazione.

Dal verbo inglese to browse: curiosare, sfogliare, «dare una scorsa». E’

lo strumento principale per l’accesso al WEB.

Web browser

Cura la comunicazione via rete con il server…

Connessione a una rete TCP/IP

Implementazione del protocollo HTTP

Il WEB è solo una delle tecnologie di accesso alle informazioni sulla rete. Tra le principali alternative (alcune in via di abbandono) ci sono i servizi di:

• trasferimento dei file: File Transfer Protocol (FTP); • news boulletin boards (NNTP);

• gopher (un antenato text-based del WEB);

Tradizionalmente, i web browser assicurano la compatibilità con alcuni tra questi servizi, implementando i rispettivi protocolli.

(5)

Web browser

Visualizza le pagine ricevute eseguendo le istruzioni per il rendering.

Implementazione dello standard HTML

Nel tempo si sono succedute diverse versioni di questo standard («arricchite» da estensioni proprietarie).

• I web browser devono assicurare la compatibilità con lo standard.

• Le pagine realizzate secondo gli standard devono essere visualizzate nello stesso modo su qualsiasi browser «compatibile».

• Diversi browser possono supportare più standard contemporaneamente (e.g. HTML4 e HTML5), oltre che alcune delle più diffuse estensioni «proprietarie».

Intermezzo: il linguaggio HTML (Hyper-Text Markup Language)

(6)

E’ un «linguaggio a marcatori» orientato alla descrizione di ipertesti

HTML (Hyper-Text Markup Language)

E’ un

«linguaggio a marcatori»

orientato alla descrizione di ipertesti

Insieme di regole per descrivere il significato, la struttura, le proprietà e le modalità di visualizzazione di un testo.

Le informazioni descrittive sono inserite nel testo stesso tramite i «marcatori»: parole chiave riservate al dispositivo che le interpreta durante la visualizzazione

• Composizione del testo «indipendente» dal dispositivo di visualizzazione • Visualizzazione il più possibile omogenea, su dispositivi diversi (schermo, carta.. ) 11

(7)

HTML (Hyper-Text Markup Language)

E’ un

«linguaggio a marcatori»

orientato alla descrizione di ipertesti

RTF (Rich Text Format): Un formato universale per la rappresentazione di documenti testuali unitamente alle informazioni necessarie alla loro impaginazione. In uso inizialmente nei sistemi e nelle applicazioni Microsoft, è oggi molto diffuso come formato universale tra word processor di vendor diversi.

Buongiorno a tutti!

{\rtf1\ansi\ansicpg1252\deff0\nouicompat\deflang1040{\fonttbl{\f0\fnil\fcharset0 Calibri;}} {\*\generator Riched20 10.0.18362}\viewkind4\uc1

\pard\sa200\sl276\slmult1\f0\fs22\lang16 Buongiorno a \i tutti!\i0\par }

MS Word visualizza: In RTF si scrive:

HTML (Hyper-Text Markup Language)

E’ un

«linguaggio a marcatori»

orientato alla descrizione di ipertesti

HTML è un linguaggio a marcatori orientato al World Wide Web. In esso, oltre ai marcatori necessari a descrivere l’impaginazione e le proprietà del testo (paragrafi, titolazioni, etc..), vi sono anche marcatori impiegati per:

• Identificare e aggregare al testo informazioni rappresentate in maniera non testuale (e.g. immagini, suoni, video…)

Buongiorno a tutti!

Buongiorno a <i>tutti!</i> <img src=``smile.jpg’’> Un browser visualizza:

In HTML si scrive: 13

(8)

E’ un «linguaggio a marcatori» orientato alla descrizione di

ipertesti

Un ipertesto è un insieme di documenti collegati tra loro mediante delle parole chiave (ancore). Il collegamento (link) è associa all’ancora di un documento l’identificativo di un secondo documento (o il riferimento a una diversa posizione nel testo del documento corrente).

Raggiunta un’ancora, l’utente può modificare il flusso della lettura seguendo il link ad essa associato, o proseguire la lettura in maniera tradizionale.

L’interazione con i link dipende dalla tecnologia con cui è realizzato l’ipertesto

Elementi comuni al concetto di ipertesto sono antichissimi. Si pensi alle «note a fondo pagina» e ai rimandi in esse contenuti ad altre pagine e/o a fonti di una citazione inserita nel testo…

HTML (Hyper-Text Markup Language)

HTML è un linguaggio a marcatori orientato al World Wide Web. In esso, oltre ai marcatori necessari a descrivere l’impaginazione e le proprietà del testo (paragrafi, titolazioni, etc..), vi sono anche marcatori impiegati per:

• Identificare e «localizzare» altri documenti HTML il cui contenuto è associato a quello del testo corrente (e.g. la citazione a una fonte…)

Il quotidiano

La Repubblica

è uno dei più diffusi in Italia.

Il quotidiano <a href=``https://www.repubblica.it’’>La Repubblica</a> è uno dei più diffusi in Italia.

Un browser visualizza: In HTML si scrive:

E’ un «linguaggio a marcatori» orientato alla descrizione di ipertesti

15

(9)

HTML (Hyper-Text Markup Language)

• Istituzione internazionale che cura la definizione e lo sviluppo dello

standard HTML (e di altro…)

• è un consorzio per lo sviluppo di tecnologie legate al Web, ne fanno

parte oltre 500 organizzazioni accademiche, industriali, ...

https://www.w3.org

HTML è uno standard

2015

HTML (Hyper-Text Markup Language)

HTML5

CSS4

Timeline dell’evoluzione degli standard HTML e CSS dalle origini a oggi.

2018

(10)

Test di conformità dei browser:

Un servizio online gratuito per verificare la conformità dei browser con HTML5

http://html5test.com/index.html

Test di compatibilità di un sito:

Verifica della omogeneità nella visualizzazione di un sito indipendentemente dal browser.

Web browser

Visualizza le pagine ricevute eseguendo le istruzioni per il rendering.

Decodifica e riproduzione dei contenuti multimediali (immagini, audio, video)

Il browser riconosce il tipo dei file ricevuti dall’informazione «Content-type» inviata dal server tramite il protocollo HTTP. A seconda del tipo, il browser procede al trattamento dell’informazione: • «in proprio», quando il formato è nativamente riconosciuto dal server (e.g. testo, immagini gif…) • Tramite un «helper», un programma esterno che l’utente ha cura di installare sul computer. Nella

configurazione del browser, occorre specificare l’«associazione» tra ciascun helper e il relativo content-type

(11)

Web browser

Configurazione degli helpers (Applications) in Mozilla Firefox

Web browser

Visualizza le pagine ricevute eseguendo le istruzioni per il rendering.

Decodifica e riproduzione dei contenuti multimediali (immagini, audio, video)

L’insieme dei formati supportati «in proprio» può essere arricchito mediante l’installazione di componenti aggiuntivi del browser: plug-in ed estensioni:

• «plug-in»: Software eseguibile (spesso di terze parti) che modifica la struttura e il funzionamento del browser. (oggi, questa tecnologia è in fase di abbandono per motivi di sicurezza)

• «extension»: è una funzionalità aggiuntiva descritta in un linguaggio che il browser può interpretare. La struttura del browser non è modificata.

(12)

Configurazione Plug-ins in Mozilla Firefox Alcune estensioni in Google Chrome

Web browser

Cura l’interazione con l’utente

• Rendering,

• Gestione dei dati forniti dall’utente:

tastiera, camera, microfono, file esterni…

• Gestione degli eventi generati dall’utente:

mouse, touch screen…

• Gestione con dispositivi aggiuntivi

lettore smart card,…

(13)

Web browser

Cura l’interazione con l’utente

• Gestione dei dati forniti dall’utente:

tastiera, camera, microfono, file esterni…

L’utente può inviare dati al server componendoli con la tastiera in appositi spazi e moduli (form) predisposti sulla pagina web

Web browser

Cura l’interazione con l’utente

Un registratore audio on-line:

https://www.apowersoft.it/registratore-audio-gratuito-online 25

(14)

Cura l’interazione con l’utente

File upload:

Web browser

Cura l’interazione con l’utente

• Gestione degli eventi generati dall’utente:

mouse, touch screen, comandi del browser…

Il browser «cattura» le azioni compiute dall’utente sulla finestra del browser con i dispositivi di puntamento e ne estrae eventuali istruzioni per raffinare il rendering della pagina o per comporre informazioni da inviare al server. Per esempio:

• «double click»: si verifica quando l’utente clicca due volte in successione sul componente • «mouse over»: si verifica quando il puntatore del mouse scorre su un componente della pagina • «window load»: si verifica quando la finestra del browser sta per visualizzare il contenuto di una

pagina

(15)

Web browser

Cura l’interazione con l’utente

• Gestione con dispositivi aggiuntivi

lettore smart card,…

In alcuni casi, l’interazione con la pagina web richiede l’utilizzo di dispositivi esterni. Ad esempio, in alcune applicazioni, l’accesso a determinate siti/pagine è limitato solo ad alcuni utenti. Questi possono essere riconosciuti tramite una password o mediante l’utilizzo di una smart card o di un token crittografico.

Web browser

Supporto alla navigazione

• Persistenza dei dati

history, form data, cookies…

• Personalizzazione

bookmarks, browser settings…

• Gestione credenziali personali

password, certificati digitali

(16)

Supporto alla navigazione

• Persistenza dei dati

Cronologia (history), form data, cookies…

Il protocollo HTTP introduce una comunicazione stateless, cioè: ogni richiesta «fa storia a se». Il server non è obbligato a tenere traccia di ciò che fa ciascun browser (e.g. se ha fatto altre richieste, quali e quando). Tuttavia, in alcuni casi, conservare traccia di ciò che si fa è di grande utilità:

• Tenere traccia dei siti che si sono già visitati, può far risparmiare tempo in una ricerca;

• Conservare i dati inseriti in precedenza in una form, permette di non reimpostarli ogni volta in caso richieste multiple;

• Poi ci sono i «cookies»…

Web browser

Accesso alla cronologia su Google Chrome

31

(17)

Intermezzo: i «Cookies»

Intermezzo: i cookies

L’utente Alice, si collega a un sito di sondaggi e si accinge a compilare un lungo questionario che si dipana su più pagine. Al termine di ciascuna pagina c’è un link alla successiva. Ad un certo punto però, l’utente decide di interrompere il lavoro e di proseguire all’indomani. Ora, data la natura «stateless» del WEB:

Un esempio

Come fa il server a:

• tenere traccia delle risposte di Alice da una pagina all’altra?

• distinguere tra le richieste pervenute da Alice da quelle di altri utenti?

• far sì che il giorno seguente Alice riprenda esattamente da dove aveva lasciato? 33

(18)

Un cookie è una breve informazione scambiata tra il server e il browser.

Il browser:

• Conserva il cookie su richiesta del server

• Invia al server il cookie ad ogni successivo contatto

Il server:

• In assenza di cookie, evade la richiesta del browser in maniera «standard»,

chiedendogli di salvare un cookie che contiene informazioni sull’evento;

• Altrimenti, risponde alla richiesta tenendo conto delle informazioni contenute

nel cookie (ed eventualmente chiedendo al browser di aggiornarne il conenuto)

Intermezzo: i cookies

L’utente Alice, si collega a un sito di sondaggi e si accinge a compilare un lungo questionario che si dipana su più pagine. Al termine di ciascuna pagina c’è un link alla successiva. Ad un certo punto però, l’utente decide di interrompere il lavoro e di proseguire all’indomani…

Un esempio

• Alla prima connessione, il server invierà al browser di Alice un cookie contenente un codice identificativo di sessione che gli permetterà di riconoscere Alice nei successivi contatti.

• Il cookie può venire modificato ad ogni contatto per aggiornare il punto, nel sondaggio, a cui Alice è arrivata. • Ad ogni richiesta successiva, il server è in grado di ricostruire lo stato della sessione e proseguire il