14/11/2018
Informazioni sul corso
INFORMATICA PER LA
COMUNICAZIONE LM
INTRODUZIONE
Programma del corso
Internet e Web
Protocolli e linguaggi di base
Caratteristiche delle due reti
Linguaggi di marcatura: HTML e CSS
Reti:
Proprietà delle reti
Struttura e organizzazione
Motori di ricerca
Software di analisi di reti: Gephi
Ufficio: via San Tomaso
Orario di ricevimento: lunedì dalle 10.30 alle 12.30
Pagina web: http://www.unibg.it/dondi
Avvisi
Piattaforma e-learning
Programma del corso
Esperienza d’uso e usabilità
Introduzione all’interazione uomo-macchina
Architettura dell’informazione, navigazione
Gestione dei contenuti e degli errori
Accessibilità
SEO
 14/11/2018

Informazioni sul corso Introduzione

Materiale del corso Sistemi complessi (es. organizzazioni, istituzioni,
Libri di testo: grandi aziende)
S. Castano, A. Ferrara, S. Montanelli, Informazione, Relazioni tra elementi → caratteristiche strutturali
conoscenza e Web per le scienze umanistiche, Pearson, della rete
Milano, 2009 (pp. 77-175)
Internet e il Web sono esempi di sistemi complessi
A. Barabási: Link - La scienza delle reti, Einaudi, 2004
Diapositive delle lezioni
Modalità d’esame: scritto

Reti Elaborazione e reti

Relazioni → caratteristiche strutturali di una rete Elaboratori fondamentali nel determinare alcune
Proprietà dei legami caratteristiche strutturali delle reti
Ampiezza della rete Connessione tra elementi
Criticità: eventuali punti di debolezza della rete Parti delle reti con caratteristiche specifiche

Scienze delle reti

 14/11/2018

Elaborazione Memorie dell’elaboratore

Computer → elaboratore di informazione Memorie dell’elaboratore
Riceve dati in ingresso (input) Temporanea
Elabora questi dati Permanente
Restituisce elaborazione dei dati di input (output) Hanno caratteristiche differenti
Può memorizzare informazione Velocità di accesso
Costo
Capacità

Fase di elaborazione Algoritmi

Fase di elaborazione: esecuzione di programmi Algoritmo: procedimento per la risoluzione di un
→ istruzioni scritte in un opportuno linguaggio di problema utilizzando un numero finito di
programmazione istruzioni
Un programma è l’implementazione di un Aspetti fondamentali nella progettazione di un
algoritmo in un linguaggio comprensibile alla algoritmo:
macchina
Correttezza
Uno stesso algoritmo può essere implementato Efficienza
in più linguaggi di programmazione
 14/11/2018

Algoritmi: esempi Progettazione di un sito web

Esempi di algoritmi: Progettazione di un sito web:
Ricetta di cucina Un processo iterativo
Metodo risoluzione equazione di secondo grado
Algoritmo di ordinamento
…

Polillo, Mondo digitale, 2005

Fasi della progettazione

Progettazione di un sito web
Composta di diverse fasi: ognuna prevede
l’intervento di una figura professionale specifica

Polillo, Mondo digitale, 2005

 15/11/2018

Rete di reti
Rete di reti: interconnessioni di reti di tipo
differente
Ogni sottorete è collegata a Internet tramite un
dispositivo: gateway

INFORMATICA PER LA
COMUNICAZIONE LM
INTERNET, WEB

Internet Protocolli di comunicazione

Progetto collegamento tra elaboratori Comunicazione su rete Internet: protocolli di
Primo progetto: ARPANET (1969) dell’agenzia comunicazione
ARPA (Advanced Research Projects Agency) Protocollo di comunicazione: regole condivise
Caratteristiche per
scambio
Ridondanza delle connessioni
interpretazione
Rete di reti
delle comunicazioni
 15/11/2018

Protocolli di comunicazione Indirizzi IP

Alcuni standard per architetture di rete: Il numero di indirizzi IP → limitato; per ovviare:
Standard ISO/OSI: 7 livelli Tecniche software di mascheramento (NAT,
Protocolli Internet (TCP/IP): 4 livelli Network Address Translation): indirizzo gateway
Applicazione maschera gli indirizzi della sottorete
Trasporto (TCP) Versione 6 dell’Internet Protocol (IPV6)
Rete (IP)
Collegamento

Indirizzi IP Mascheramento NAT

Identificazione univoca del destinatario →
indirizzo IP
Indirizzi IP (Internet Protocol): indirizzi numerici
(es. 149.132.159.3)
ICANN (International Association for Assigned
Named and Numbers): assegnazione indirizzi IP

Whatismyipaddress.com
 15/11/2018

Indirizzi simbolici Indirizzi simbolici

Indirizzi IP → numerici Sintassi degli indirizzi simbolici:
Es. 192.168.12.1 Ogni stringa (eccetto la prima) → dominio
Indirizzo simbolico: costituito da stringhe Domini associati ad un livello: posizioni
Es. dinamico2.unibg.it nell’indirizzo a partire da destra
dominio più a destra → primo livello
Risoluzione indirizzo simbolico in indirizzo
numerico (e viceversa) spostandosi a destra → secondo livello
...
Nome dispositivo: stringa iniziale

Indirizzi simbolici Indirizzi simbolici

Indirizzo simbolico: costituito da diverse
stringhe, separate da “.”
Dominio di Dominio di
Ogni stringa (eccetto la prima) → dominio Nome Dominio di
secondo livello primo livello
dispositivo terzo livello
Es.: dinamico2.unibg.it
DNS (Domain Name System): servizio distribuito server1.informatica.unibg.it
di traduzione di indirizzi IP in indirizzi simbolici
 15/11/2018

Reti e protocolli
Servizi di rete per utenti: applicazioni a
disposizione degli utenti Reti e Web
World Wide Web
Posta elettronica World Wide Web
SMTP, POP3/IMAP
Telnet, SSH
FTP
VoIP
…

Architettura client/server World Wide Web

Architettura Client/Server
Nodo client: invio richieste
Nodo server: fornisce servizio
Esempio
Gestione posta elettronica
World Wide Web
World Wide Web (WWW)
Progettato al CERN (Ginevra) da Cailliau e
Berners-Lee (fine anni ‘80)
Facilitazione delle comunicazioni
Costituito da pagine web
Caratteristiche
Distribuito su rete (Internet)
Ipertestualità
Multimedialità
 15/11/2018

Ipertesto World Wide Web: protocolli

Ipertesto (T. Nelson 1965): Web basato su tre standard:
Testo costituto da parti elementari URL
Percorsi logici di lettura HTTP
Presenza di collegamenti ipertestuali HTML
I collegamenti sono orientati W3C (World Wide Web Consortium ): ente con
lo scopo di sviluppare tecnologie su cui si basa il
Web

Multimedialità URL
Multimedialità: presenza di molte forme di URL (Uniform resource locator): indirizzo univoco
comunicazione in un unico contesto: di una risorsa nel Web
Testo
Immagini protocollo://server:porta/percorso_file?query
Suoni
Filmati
…

URL
Protocollo: protocollo utilizzato (http, https, ftp,…)
Server: identificatore di un nodo della rete (vedi
DNS)
Porta: indicatore dell’applicazione destinataria
Percorso_file: percorso nel file system del server
per raggiungere un certo file
Query: eventuali informazioni sui parametri
URL
http://www.unibg.it/dondi/esami/risultati.html
http: hypertext transfer protocol
www.unibg.it: nome elaboratore
dondi/esami/risultati.html: file memorizzato sul
server
15/11/2018
URL
http://dinamico2.unibg.it/dondi/esami/iscrizione.php?data=100
12019
http: hypertext transfer protocol
www.unibg.it: nome elaboratore
dondi/esami/iscrizione.php: file memorizzato sul
server
data=10012019: parametri
HTTP
World Wide Web: costituito da pagine web
distribuite su server
Memorizzazione/invio pagine web
Richieste pagine regolate dal protocollo HTTP
Consultabili tramite browser (Internet Explorer,
Edge, Safari, Firefox, Opera, Chrome,…)
Visualizzazione delle pagine
Navigazione
 15/11/2018

HTTP HTTP
HTTP (Hypertext Transfer Protocol): protocollo per il Informazioni sul client a seguito di una richiesta:
trasferimento di documenti ipertestuali Indirizzo IP
Richiesta di trasferimento da client a server: Sistema operativo, browser
1. Richiesta dell’utente Risoluzione dello schermo e profondità di colore
2. Connessione con server web Sito dal quale proviene
3. Formulazione risposta Informazioni locali sulla visita
4. Visualizzazione pagina
Informazioni memorizzate in file di log

HTTP HTTP
Proprietà HTTP
dinamico2.unibg.it
149.123.111.7 Ogni richiesta indipendente dalle precedenti
Ogni richiesta → nuova connessione

Protocollo stateless
Quando è necessario gestire uno stato delle
interazioni
dinamico2.unibg.it/iscrizione.php?11012011 Cookie
 15/11/2018

HTML
HTML (Hypertext Markup Language): linguaggio
Reti e Web per la scrittura di documenti ipertestuali
Meta-informazione tradotta dal browser
Linguaggi di marcatura tag

<p><b>Esempio di elenco</b></p>
Inizio
<ol type="a">
<li>primo</li>
<li value="c">secondo</li>
<li>terzo</li>
</ol>

Linguaggi di marcatura HTML - Nascita

Linguaggi di marcatura: linguaggi formali Primi anni 90 Berners-Lee introduce un
Permettono di definire aspetti della struttura e linguaggio con cui creare documenti ipertestuali
della formattazione di una pagina web Definizione caratteristiche strutturali di un
Principali linguaggi: documento: tag
HTML
CSS
XML
 15/11/2018

HTML - Evoluzione World Wide Web

1995 Versione HTML 3.0 Pagina dinamica: pagina HTML generata da un
1998 Versione HTML 4.0 programma (linguaggi ASP, PHP,…)
2000 XHTML 1.0: riformulazione HTML Informazioni prelevate da basi di dati
basandosi sul linguaggio XML Generata a seguito di una richiesta dell’utente
Es. Moduli di ricerca
2004 Sviluppo HTML5
Variabile a seconda della richiesta

Pagine statiche e dinamiche World Wide Web

Pagine web memorizzate su server: Architettura a tre livelli
Statiche Risposta HTTP

Dinamiche Richiesta HTTP

dinamico2.unibg.it/iscrizione.php?11012011

Pagina statica: pagina HTML Server web

dinamico2.unibg.it
Descrizione completa sul server
Contenuto identico per ogni utente

DBMS
 20/11/2018

Reti e grafi
Reti: rappresentazione di elementi e delle
possibili relazioni tra elementi considerati
Relazioni fisiche
Relazioni immateriali
Internet: rete fisica
World Wide Web: rete immateriale
INFORMATICA PER LA
COMUNICAZIONE
Reti e grafi

Reti e grafi Scienza delle reti – Brevi cenni storici

Grafi – Reti: applicazioni in diversi ambiti Nel 1741 Eulero

Alberi evolutivi Risoluzione del problema dei ponti di Königsberg
Reti di telecomunicazioni Utilizzo tecniche di teoria dei grafi
Sistemi biologici Nel 1959: modello grafi casuali (Erdos- Renyi)
Reti sociali Nel 1999: reti a invarianza di scala/legge di
… potenza (Barabasi)
 20/11/2018

Teoria dei grafi

Grafo: costituito da due tipi di elementi
Teoria dei grafi Nodi (punti): a, b, c, d, e
Archi collegamento tra coppie di nodi: (a,e), (a,b),
Definizioni e applicazioni (b,e), (b,c), (d,e), (c,d)
Due nodi a,b sono adiacenti se esiste l’arco (a,b)

e d

b c

Grafi non diretti Grafi diretti

In un grafo non diretto ogni arco è biunivoco In un grafo diretto ad ogni arco viene associata
una direzione

e d e d

a a
b c b c
 20/11/2018

Grafi pesati Teoria dei grafi

Peso associato a un arco: intensità della relazione Archi incidenti nel nodo x: uno degli estremi in x
tra i nodi collegati Archi incidenti in a: (a,b), (a,e)
Grafi con archi pesati → grafi pesati Archi incidenti in b:
In alcuni casi: pesi associati ai nodi (a,b), (b,e), (b,c)

e 1 d e d
0,6

0,5 0,5
a a
0,3
1
b c b c

Grado di un nodo Grado di un nodo

Grado di un nodo (in un grafo non diretto): numero In un grafo diretto
di archi incidenti in quel nodo Numero di archi entranti (indegree)
Grado di a = 2 Numero di archi uscenti (outdegree)
Grado di e?
Nodo b: indegree = 1, outdegree = 2
Grado di f? Nodo a?
Nodo e?
e d
e d
f
a
a
b c
b c
 20/11/2018

Cammino Percorso
Cammino in un grafo: sequenza di nodi Percorso in un grafo: sequenza di nodi
Adiacenti
Adiacenti
Nodo sorgente
Distinti Nodo destinazione
Nodo sorgente Nodi possono essere ripetuti
Nodo destinazione e d
e d
a: sorgente
a
a: sorgente a
c: destinazione b: destinazione b c
b c
Cammino a, e, d, c Percorso a, e, d, c, e, b

Ponti di Könisberg Ponti di Könisberg

Könisberg (Kalingrad): Problema: esiste un
città natale di Kant sul modo per attraversare
fiume Pregel tutti i ponti
Sette ponti percorrendone ognuno
attraversano il fiume una e una sola volta?
Pregel
 20/11/2018

Ponti di Könisberg Ponti di Könisberg

Rappresentazione del problema tramite un Il problema ammette una soluzione?
grafo:
d
Nodi: parti della città
Archi: ponti
c
a

Ponti di Könisberg Ponti di Könisberg

Impossibilità attraversamento sette ponti (Eulero, Consideriamo il nodo c
1741) d
Consideriamo un percorso che attraversa i ponti
1. Esiste un nodo intermedio nel percorso c
2. Gli archi di quel nodo a

Tutti gli archi sono percorsi

Complessivamente percorsi un numero pari di volte
Tutti i nodi hanno grado dispari
b
3.
 20/11/2018

Teoria dei grafi Ponti di Könisberg

Proprietà generale: esiste un percorso che Aggiunta di un arco
attraversa tutti gli archi di un grafo una e una sola
volta, solo se il grafo contiene al più due nodi di d
grado dispari.
Ogni nodo intermedio deve essere attraversato un a
c

numero pari di volte

Teoria dei grafi Teoria dei grafi

Lunghezza di un cammino (percorso): numero di In un grafo diretto un percorso deve seguire la
archi tra sorgente e destinazione direzione degli archi
Cammino a, e, d, c: lunghezza 3 Differenza tra grafi diretti e non diretti

e d e d

e d
a a
Cammino a, e, d, c b c b c
a

b c
Cammino a, e, d, c Cammino a, e, b, c
 20/11/2018

Teoria dei grafi Teoria dei grafi

Ciclo: percorso i cui nodi sono distinti eccetto il Circuito: percorso in cui il primo e l’ultimo nodo
primo e l’ultimo coincidono

e d e d

a a

b c b c

Ciclo a, e, d, c, b, a Circuito a, e, d, c, e, b, a

Teoria dei grafi Teoria dei grafi

Componente connessa: insieme dei nodi del grafo: Nei grafi diretti si parla di componente
Per ogni coppia di nodi esiste un cammino che li collega fortemente connessa (ogni nodo della
Grafi diretti/ Grafi non diretti? componente può raggiungere gli altri nodi della
componente)

e d e d

Nodo isolato
f
a a

b c b c

Componenti connesse: (1) f (2) a, b, c, d, e

 20/11/2018

Teoria dei grafi Teoria dei grafi

Un cammino tra due nodi è minimo quando Cammino minimo: caso pesato → somma dei
nessun altro cammino tra i due nodi è composto pesi sugli archi
da un numero inferiore di archi
Possono esistere più cammini minimi
e 1 d
0,5
e d 1
0,3 0,1
a 1
0,1
a b c

b c Cammino minimo tra a e d: a, e, b, c, d costo: 1

Cammini minimi tra a e d: (1) a, e, d (2) a, b, d

Teoria dei grafi Teoria dei grafi

Il diametro di un grafo è costituito dal numero di
archi che compongono il cammino minimo più
Diametro?
lungo presente nel grafo
e d
e d e d
a
f
a a
b c
b c b c

Diametro = 2 Diametro = 3
 20/11/2018

Teoria dei grafi Teoria dei grafi

Diametro? Cricca: insieme di nodi in cui ogni nodo è

collegato a tutti gli altri

e d a d

f
c
a
b
b c e

Teoria dei grafi Alberi

Albero: grafo connesso privo di cicli Applicazioni alberi:
Tra ogni coppia di nodi esiste uno e un solo cammino Alberi evolutivi
Foglie: nodi di grado 1 Procedure decisionali
Presenza o meno di radice
r radice
e d
a b

b c
c d e f g
 20/11/2018

Alberi
Esempio – Procedura decisionale per assicurazione
di un automobile

Età < 21?

vero falso

Incidenti
Alto nell’ultimo
anno?
vero falso

Alto Basso
 28/11/2018

Grafi regolari
Fino agli studi di Erdos e Renyii la teoria dei grafi
Reti casuali si concentra sulle proprietà di grafi regolari
Reti e grafi

Modelli di grafi Modelli di grafi

I grafi vengono utilizzati per descrivere diversi
sistemi complessi
Quali caratteristiche hanno?
Come è fatta la struttura generale di un grafo che
rappresenta tali sistemi?
Esistono differenze tra sistemi complessi?
Per spiegare le caratteristiche di tali sistemi:
modelli matematici
Definiscono le regole con cui i grafi si formano
Quando si forma un legame (creazione di un arco)
 28/11/2018

Grafi casuali Grafi casuali

Primo modello di riferimento per spiegare la
formazione di grafi
Introdotto nel 1959 da Erdos e Renyi
Gli archi che collegano i vertici sono scelti
casualmente
Gli archi che collegano i vertici sono scelti
casualmente:
Per ogni coppia di nodi, esiste una certa probabilità
che si formi un arco tra i due nodi
In alternativa non si forma un arco tra i due nodi

Grafi casuali Grafi casuali

Proprietà dei grafi casuali (Erdos e Renyi):
g
Pochi archi nel grafo → componenti non
h f
connesse
a
e
Se vengono inseriti più archi (> metà dei nodi) le
b d componenti si connettono
c
 28/11/2018

Grafi casuali Grafi casuali

g g Proprietà dei grafi casuali (Erdos e Renyi):

h f h f È sufficiente che in media ogni nodo abbia un
e e arco incidente per ottenere una componente con
a a
molti nodi (circa |V|2/3)
Se i nodi hanno in media meno di un arco
b d b d
c g c
h f incidente il grafo non è connesso
e Se i nodi hanno almeno c archi → componente
a
gigante
b d
c

Grafi casuali
Proprietà dei grafi casuali (Bollobás):
I nodi in un grafo casuale hanno circa lo stesso
Gradi di separazione
numero di archi incidenti Reti sociali e grafi

Fonte: network-science.org
 28/11/2018

Proprietà delle reti Reti– sei gradi di separazione

Caratteristica fondamentale di alcune reti:
diametro di un grafo
Nelle reti casuali e in molti casi concreti: diametro
limitato
Prospettato da uno scrittore, Karinthy (1928)
Sei gradi di separazione

Reti– sei gradi di separazione Esperimento di Milgram

Ricerca del sociologo Milgram (anni ’60)
Invio di messaggi tra due città degli Stati Uniti
L’esperimento di Milgram prevede che ogni
persona:
Consegni il messaggio al destinatario, se è un
conoscente
Invii un messaggio a un conoscente che abbia
maggiore probabilità di consegnare il messaggio al
destinatario

Esperimento di Milgram
In totale
160 lettere inviate
42 lettere arrivarono a destinazione
Quanti passaggi necessari?
Numero medio di intermediari: 5,5 ̴ 6
In media circa sei passaggi
Sei gradi di separazione
Grado di separazione del Web
Nel 1998 Barabasi analizzò il Web: rete formata
da link ipertestuali
Quanti passaggi sono necessari per passare da
una pagina a un’altra?
Problemi di analisi del Web
Come fare a individuare le pagine?
28/11/2018
Reti– sei gradi di separazione
Esempio: Rete persone - conoscenze
Per collegare uno studente Unibg e Presidente
degli Stati Uniti
1. Studente → Rappresentante degli studenti
2. Rappresentante degli studenti → Rettore
3. Rettore → Ministro Università
4. Ministro Università → Presidente del Consiglio
5. Presidente del Consiglio → Presidente degli Stati
Uniti
Grado di separazione del Web
Analisi preliminare del dominio nd.edu
Costituito da circa 100.000 pagine
Numero di gradi di separazione: 11
Nel Web (al 1999): 33.000?
 28/11/2018

Grado di separazione del Web Reti– sei gradi di separazione

Basandosi su risultati sperimentali su insiemi Possibile spiegazione
sempre più vasti: stima del grado di separazione Ipotesi: una persona conosce in media 100
del Web persone
Risultati dell’analisi Persone raggiungibili
800.000.000 di nodi Direttamente → 100
1 livello intermedio → 100*100 = 10.000
Diametro medio 18,59 → 19 gradi di separazione
2 livelli intermedi → 100*10.000 = 1.000.000
3 livelli intermedi → 100*1.000.000 = 100.000.000
4 livelli intermedi → 100*100.000.000 =
10.000.000.000

Reti– sei gradi di separazione Reti– sei gradi di separazione

Stima non esatta Caratteristiche di molte reti reali:
Persone considerate più di una volta Numero notevole di nodi
Bassa distanza media tra i nodi
E
Analisi della rete di Facebook (2011) e della sua
B Se A, B, C avessero 2 nuovi vicini
distinti: 2 * 2 nodi raggiungibili da evoluzione
A con 1 livello intermedio
A
F
Analisi della rete globale e di reti regionali
C

G
 28/11/2018

Rete di Facebook Rete di Facebook

Caratteristiche rete Facebook (2007 - 2011)
Utenti attivi: accesso ultimi 28 giorni
Considerati utenti con al più 5000 amici
Nel 2011:
721 milioni di utenti/nodi
69 miliardi di archi
Grado di separazione: 4
Nel 2007 grafo disconnesso
Dal 2009 grafo connesso, dati consolidati
Nel 2011
Grafi regionali: grado di separazione circa 3
Grado medio di separazione: 3,74
92% nodi con grado di separazione <=4

Facebook, Web - Milgram Facebook, Web - Milgram

Differenze tra le analisi di Facebook/Web e
l’esperimento di Milgram
Nelle analisi di Facebook/Web: utilizzo cammini
minimi
Nell’esperimento di Milgram: i cammini sono
minimi?
Altre differenze tra le analisi di Facebook e
l’esperimento di Milgram
Amicizie reali/amicizie in Facebook
Milgram: 300 volontari; 22% catene completate
Facebook: 721 milioni di utenti; 92% nodi con
grado di separazione < 4

Reti– sei gradi di separazione
Esempio di altre reti sociali
Collaborazioni scientifiche: esempio di relazione
tra individui
Collegamento tra due autori: coautori di una
pubblicazione
Reti– sei gradi di separazione
28/11/2018
Reti– sei gradi di separazione
Collaborazioni matematiche-informatiche:
numero di Erdos
Paul Erdos (1913-1996): matematico ungherese
Rete di collaborazioni molto ampia
Reti– sei gradi di separazione
Numero di Erdos di un
matematico/informatico: lunghezza del più
breve percorso che porta da Erdos all’autore
Numero associato a Erdos → 0
 28/11/2018

Reti– sei gradi di separazione Reti sociali – sei gradi di separazione

Stima: 90% dei matematici hanno un numero di La rete di Erdos è in continua evoluzione
Erdos non superiore a 8 Aumentano i nodi
Calcolo numero di Erdos Cammini diventano sempre più lunghi
Il diametro della rete aumenta

Reti a piccolo mondo

Il modello delle rete casuali non rappresenta le
Piccolo mondo caratteristiche di alcune reti reali
Reti sociali
Reti sociali e grafi
Web
Reti biologiche
 28/11/2018

Reti a piccolo mondo Reti a piccolo mondo

Nel 1969-1973 Granovetter analizzò le reti
interpersonali (nella ricerca di lavoro)
I suoi studi individuarono
Struttura della rete Cricche
Diversi tipi di legami (archi)

Struttura delle reti Reti a piccolo mondo

La rete vede la presenza di un numero
significativo di cluster (cricche o sottografi simili a
cricche)
Esistono alcuni collegamenti tra cluster
I legami possono essere di due tipi
Forti: legami tra elementi di uno stesso grafo
completo
Deboli: legami tra elementi di grafi completi
differenti
I legami deboli permettono la connessione cricche

Reti a piccolo mondo
Ulteriori studi (Strogatz e Watts , 1998)
introdussero un indice per misureare la presenza
di cril grado di clusterizzazione (coefficiente di
clustering)
Il coefficiente di clustering misura quanto un
grafo è costituito da cluster
Reti a piccolo mondo
Clusterizzazione
28/11/2018
Reti a piccolo mondo
Il modello osservato da Granovetter implica
Un alto coefficiente di clustering: presenza di un
numero significativo di cluster
Legami non distribuiti casualmente: se due individui
hanno un amico in comune è probabile che si
conoscano
Reti a piccolo mondo
Diverse reti hanno un alto grado di clustering
Rete di collaborazioni scientifiche
Rete biologica (C. elegans)
World Wide Web
Internet
 28/11/2018

Reti a piccolo mondo Reti a piccolo mondo

Il clustering
Non è spiegabile con il modello delle reti casuali
I cluster da soli non permettono di avere un
grado di separazione limitato:
Pochi legami tra cluster permettono di avere reti con
grado di separazione basso
I legami deboli hanno una grande importanza:
Mettono in comunicazione diversi gruppi
Rimozione → scollegamento della rete
h
e

d
a

b c

Connettori
Le analisi di alcune reti hanno dimostrato
Hub e legge di potenza l’esistenza di nodi con un numero molto elevato
di connessioni
Reti Sociali e Grafi
Reti di attori: Kevin Bacon
Collaborazioni scientifiche: Paul Erdos
Web: Google
…
 28/11/2018

Hub Hub
Un hub (connettore), Reti casuali e a piccolo mondo descrivono
all’interno di una rete situazione egualitaria
è un nodo con un Ogni nodo ha un ruolo (numero di collegamenti)
grado estremamente simili
elevato In molte reti reali → regola non rispettata
L’esistenza di hub non
era spiegabile dai
modelli fino proposti

Fonte: By Matt Britt - English Wikipedia

Hub Hub e gradi di separazione

Nell’analisi del Web (Albert et al, 1999)
203.000.000 di pagine analizzate
90% di pagine con meno di 10 link entranti
Tre pagine con circa 1.000.000 link entranti
Se il Web fosse una rete casuale: probabilità 10-99 di
avere nodi con 500 di link entranti
La presenza di hub può essere utilizzata per
spiegare il grado di separazione limitato
Nodi del grafo collegati a hub con cammini brevi
Utilizzando hub: cammini brevi tra ogni coppia di
nodi
 28/11/2018

Importanza degli hub Importanza degli hub

Numero limitato di nodi Esempio: Rete aeroportuale
hub nella rete
Permettono
l’interscambio tra nodi
sparsi nella rete

Legge di potenza
La presenza di hub all’interno di una rete viene
spiegata con un nuovo modello: reti che Legge di potenza
seguono una legge di potenza o a invarianza di
Reti sociali e grafi
scala
Il collegamento tra nodi non segue una legge
casuale: collegamento preferenziale
 28/11/2018

Reti casuali e a piccolo mondo Reti dinamiche

Uno dei limiti delle reti casuali e a piccolo mondo Nella realtà le reti hanno un’evoluzione dinamica
Staticità della rete Aggiunta/eliminazione di archi
I nodi sono tutti presenti nel momento in cui la rete si Aggiunta/eliminazione di nodi
forma
Quale regola seguono le reti nel collegare nuovi
Tutti i nodi hanno ugual importanza
nodi?

Rilevanza dei nodi Collegamento casuale

Nella realtà i nodi di una rete possono avere
importanza differente
Capacità di avere nuovi collegamenti
Quale regola seguono le reti nel collegare nuovi
nodi?
Collegamento casuale ai nodi della rete:
I nodi più vecchi hanno maggior probabilità di
attrarre collegamenti
Il modello non riesce a spiegare la presenza di
hub

Collegamento preferenziale
Aggiunta dei legami dei nuovi nodi segue
collegamento preferenziale:
Tendenza a collegarsi a nodi con molte connessioni
→ hub
Secondo questa regola: i nodi con molte
connessioni tendono ad aumentare il numero di
connessioni → i ricchi diventano sempre più ricchi
Legge di potenza
Definiamo
y: numero di nodi con grado x
y segue legge di potenza
y=k x-n
Al crescere di x → diminuisce y
28/11/2018
Collegamento preferenziale
Sviluppo di una rete:
Crescita: aggiunta di un nodo alla rete
Collegamento preferenziale: aggiunta di
collegamenti al nodo appena aggiunto
Conseguenza: i primi nodi hanno più probabilità
di avere molti collegamenti
Reti casuali e legge di potenza
Il rapporto tra y (legge di potenza) e y(reti casuali)
cresce al crescere di x
Rete che segue legge di potenza
Presenza di hub
Pochi hub enormi
 28/11/2018

Legge di potenza Reti casuali e legge di potenza

Confrontiamo i due modelli di reti
Reti casuali
Reti che obbediscono alla legge di potenza (Power
Law, a invarianza di scala)
Rete casuale
Collegamenti aggiunti ai nodi in modo casuale
Distribuzione del grado di nodi:
Pochi nodi molto più connessi della media
Non esistono hub

Reti casuali e legge di potenza Reti casuali e legge di potenza

Rete che segue legge di potenza
Distribuzione dei gradi di nodi: legge di potenza
Molti nodi con grado limitato
Parte significativa di nodi più connessi della media
Una piccola parte di nodi molto più connessa della
media → hub
 28/11/2018

Reti casuali e legge di potenza Collegamento preferenziale

Reti che seguono legge di potenza presenti in Modello proposto ha due limiti:
diversi ambiti Non sempre i nodi più connessi sono quelli aggiunti
Web prima
Reti sociali Es: Google
Economia Non è previsto il collegamento tra nodi già esistenti
Interazioni biologiche
…

Collegamento e fitness Fitness e hub

Collegamento basato su fitness: ogni nodo ha
una certa capacità di attrarre collegamenti,
basato sulla qualità del nodo
Collegamento preferenziale basato sul prodotto
tra fitness e numero di collegamenti dei singoli
nodi
Le reti basate su fitness dimostrano (Bianconi e
Barabasi, 2001):
La fitness è determinante nella formazione degli hub
Link con fitness maggiore acquisiscono più
velocemente collegamenti
 28/11/2018

Collegamento e fitness Collegamento e fitness

Il modello basato su fitness produce due tipi di
reti:
A invarianza di scala (presenza di alcuni hub)
A stella (presenza di un solo hub)

Reti - vulnerabilità
Vulnerabilità: aspetto fondamentale delle reti
Reti: vulnerabilità e propagazione Comportamento della rete a seguito di
Guasto
Reti Sociali e Grafi
Attacco
Tipo di guasto/attacco
 28/11/2018

Reti - vulnerabilità Reti - vulnerabilità

La robustezza delle reti è stata studiata in diversi Rete casuale Rete a invarianza di scala
ambiti:
Biologia: robustezza di una cellula La rete viene La rete non subisce danni
danneggiata anche irreparabili/scollegamenti
Sociologia: resilienza di una società
Economia: stabilità economica per attacchi/guasti Se gli attacchi/guasti sono
isolati isolati
In genere la robustezza è legata alla proprietà Se gli hub sono protetti
della connessione Attacchi mirati non
problematici Attacchi mirati contro hub
sono problematici

Propagazione su una rete Modello a soglia

Le reti sono strumenti per la propagazione di Il modello a soglia si basa sulla definizione di un
Virus, epidemie valore (soglia) individuale
Mode, tendenze, innovazioni Soglia: probabilità di accettare un’innovazione
Quali fattori di una rete influenzano sulla Tasso di diffusione: probabilità di propagazione
propagazione? sulla rete
Soglia critica: valore che determina la
propagazione
 28/11/2018

Propagazione: invarianza di scala Propagazione e modelli di rete

L’affermazione di un prodotto procede: Rete piccolo mondo
Come prima cosa adottato da un gruppo di esperti
(innovatori) Soglia critica
L’utilizzo si propaga (se possibile) dagli innovatori Al di sotto
agli hub propagazione non si
Dagli hub al resto della rete espande
Al di sopra si espande
senza controllo
Rete a invarianza di scala
Non esiste soglia
critica
Propagazione legata
al raggiungimento
degli hub

Reti sociali
Analisi delle rete sociali
Social Network Analysis Studio delle relazioni sociali tra individui, gruppi
Reti Sociali e grafi Caratteristiche delle relazioni
Flusso di informazioni
Ruolo degli individui
Prospettiva di rete, non individuale
 28/11/2018

Reti sociali Reti sociali

Reti sociali → modellate come grafi Indici che permettono di individuare le
Nodi → individui caratteristiche delle reti sociali
Archi → relazioni
Pesi → valore della relazione
Importanza di un nodo all’interno di una rete
1
Caratteristiche strutturali della rete
4 3 1
2 4
2
8 1 3

1
1
4 4
4

2 1

Reti sociali – Indici centralità Reti sociali – Degree centrality

Indici di centralità: importanza di un nodo in una Degree centrality: capacità di connessione con i
rete vicini
Dipende dal contesto di analisi Valore per uno specifico nodo → grado del nodo
Possibili indici: Esempio:
Degree centrality Grafo delle collaborazioni fra studiosi
Closeness centrality Grado → capacità relazionale
Betweenness centrality
Eigenvector centrality
 28/11/2018

Reti sociali – Degree centrality Reti sociali – Closeness

Esempio Closeness: somma della distanza di un nodo
rispetto a tutti gli altri nodi
Nodi centrali → indice di valore minore
Applicazioni:
Raggiungibilità dai nodi della rete

Reti sociali – Closeness Reti sociali – Betweenness

Esempio Betweenness di un nodo v: numero dei cammini
minimi passanti per v
Importanza nel
Controllo del flusso della rete
Influenza sulla rete
 28/11/2018

Reti sociali – Betweenness Reti sociali – Eigenvector centrality

Esempio Importanza delle connessioni di un nodo:
connessione con elementi/individui influenti
Centralità di un nodo → proporzionale a quella
dei vicini
Esempio: Pagerank

Reti sociali – Caratteristiche Reti sociali – Densità

Valori per valutare le caratteristiche strutturali Densità: indica la correlazione tra gli elementi
dell’intera rete della rete
Densità Misura l’integrazione sociale
Inclusività Densità: numero archi del grafo/numero possibili
archi
 28/11/2018

Reti sociali – Densità Reti sociali – Inclusività

A D A D A D
Inclusività: elementi/individui coinvolti nella
relazione rappresentata dal grafo
B C B C B C Inclusività: rapporto tra
Densità: 0/6 Densità: 1/6 Densità: 2/6 Numero totale di nodi non isolati in un grafo
Numero totale dei nodi
A D A D A D

B C B C B C

Densità: 4/6 Densità: 5/6 Densità: 6/6

Reti sociali – Inclusività

G G
A F A F

B E B E

C D C D

Inclusività: (7-2)/7 Inclusività : 7/7

 05/12/2018

Motori di ricerca
Si stima vi siano almeno diversi miliardi di pagine
web, oltre un miliardo di siti web

Sistemi per la ricerca e la catalogazione delle

pagine web
motori di ricerca (Google, Yahoo!, Bing,...)
INFORMATICA PER LA cataloghi sistematici (Yahoo! Directory, Open
COMUNICAZIONE Directory Project)

MOTORI DI RICERCA

1 2

Motori di ricerca Motori di ricerca

Motore di ricerca: Numero interrogazioni: migliaia al secondo
strumento di IR Tempi di risposta istantanei
Ricerca per parole chiave
Risultato di una ricerca:
lista ordinata di pagine che
trattano argomenti
descritti dalle parole chiave
Presenza collegamenti
sponsorizzati

3 4
 05/12/2018

Informazione e Web Information Retrieval

Caratteristiche del Web Information Retrieval (IR): disciplina che studia
Grande collezione di documenti come rispondere alle esigenze informative
Informazione non strutturata, priva di Cataloghi biblioteca
organizzazione, vincoli Motori di ricerca
…
Tecniche delle basi di dati → non applicabili al
Web Processo di selezione dell’informazione rilevante
Tecniche alternative di indicizzazione e all’interno di un corpus di documenti
interrogazione

5 6

Information Retrieval Information Retrieval

Sistema IR Obiettivi sistemi IR
Interrogazione (query) Efficacia: accuratezza della risposta
dell’utente: stringa di testo Efficienza: velocità nel fornire risposte
Es. Parole chiave
Risposta del sistema
Selezione all’interno del
Obiettivi contrastanti
corpus della parte rilevante
Eventuale ordinamento
risultato

7 8
 05/12/2018

Information Retrieval Tecniche di indicizzazione

Sistemi IR analizzano preventivamente documenti Indice: struttura per reperimento efficiente di
Estrarre informazione significativa documenti correlati a interrogazione
Memorizzazione efficiente Riduzione tempi di ricerca
Obiettivi: Informazioni memorizzate nell’indice
Rilevanza risultati Documenti in cui compare T
Limitare i confronti Frequenza T
Parte in cui compare T

9 10

Information Retrieval Tecniche di indicizzazione

Documento 1 Antonio
Struttura di un indice
Antonio e
Bruto
Cesare
Documento 4
Termine T
Cleopatra
Riferimenti ai documenti collegati a T
Cleopatra
Otello Cesare

Documento 2
Antonio
Termine Riferimenti
Bruto
Giulio Cesare
Cesare Documento 5 Antonio Documento 1 (frequenza 125); Documento 2 (frequenza 43), Documento
Calpurnia 5 (frequenza 3)
Antonio
Macbeth Bruto Documento 1 (frequenza 15); Documento 2 (frequenza 83), Documento 3
Cesare
(frequenza 2)
Documento 3
Bruto Cesare Documento 1 (frequenza 115); Documento 2 (frequenza 298), Documento
Amleto Cesare 3 (frequenza 2), Documento 4 (frequenza 2), Documento 5 (frequenza 3)
Calpurnia Documento 2 (frequenza 21)

Cleopatra Documento 1 (frequenza 124)

11 12
 05/12/2018

Interrogazione Motori di ricerca

Risultato interrogazione: Come funziona un motore di ricerca?
lista documenti correlati Attività di un motore di ricerca:
Valore di rilevanza → similarità tra parole chiavi e Raccolta
termini documento Analisi e indicizzazione
Documenti con scarsa rilevanza → scartati Interrogazione

13 14

Motori di ricerca Motori di ricerca

Raccolta: esplorazione del Web
Generazione indirizzi
Utilizzo link
Programmi per la raccolta: crawler, spider, robot
Informazioni raccolte memorizzate in base di dati
→ archivio Web

15 16
 05/12/2018

Motori di ricerca Motori di ricerca

Analisi e indicizzazione Interrogazione: risposta a richieste utenti
Elaborazione delle informazioni raccolte dagli Accesso solo all’indice e all’archivio Web
spider → contenuto informativo Risultati della ricerca → ordine con cui sono
Utilizzo tecniche IR mostrati
Parole chiave Pagine web
Analisi del documento Notizie www.corriere.it Pagine ordinate in base a rilevanza (ranking)
Costruzione indice www.repubblica.it
…
Università www.unimi.it
www.unibg.it
…
… …

17 18

Motori di ricerca Motori di ricerca specializzati

Motori di ricerca generalisti Motori di ricerca specializzati
Google (1998) Metamotori: sintesi di una ricerca su più motori
Bing (2009) Plurimotori: ricerche in parallelo
Yahoo! Search (2004) Motori specialistici: motori di ricerca per domini
… specifici
Pubblicazioni scientifiche: Google Scholar
Difficoltà nel confronto tra i diversi motori di ricerca Notizie: Google News
Libri: Google Books
Immagini, video

19 20
 05/12/2018

Motori di ricerca
Interrogazione: risposta a richieste utenti
Accesso solo all’indice e all’archivio Web
SERP e ordinamento
Risultati della ricerca → ordine con cui sono Ricerca e ordinamento dei risultati
mostrati
Pagine ordinate in base a rilevanza (ranking)
Come funzionano nella realtà?
Come costruiscono il ranking?

21 22

SERP Posizionamento
SERP (Search Engine Un aspetto fondamentale per la visibilità di un
Results Page): risultati sito → posizionamento nella SERP
di un motore di Gli utenti usano spesso i motori di ricerca
ricerca Nel 2017 circa 3,5 miliardi di ricerche al giorno
Risultati organici Mercato dei motori di ricerca
Risultati a pagamento
Ricerca sulle mappe
…

23 24
 05/12/2018

Importanza del posizionamento Visibilità dei risultati

Da una ricerca di AOL 2006: Rank Visibilità
I primi 10 risultati: 89.71% delle selezioni 1 100%

Risultati da 11 a 20: 4.37% 2 100%

3 100%
Risultati da 21 a 30: 2.42% 4 85%
In base alla posizione 5 60%

42% delle selezioni: prima posizione 6 50%

7 50%
12% delle selezioni: seconda posizione 8 30%
9% delle selezioni: terza posizione 9 30%

4% delle selezioni: quarta posizione 10 20%

25 26

Motori di ricerca Motori di ricerca

I motori di ricerca costruiscono i risultati da Motori di ricerca cercano le pagine che contengono
presentare in due fasi: le parole chiave inserite
Come funzionano nella realtà?
Individuazione delle pagine rilevanti (IR)
Ordinamento (Ranking) delle pagine rilevanti Esempio:
Esempio1.html
Esempio2.html
Esempio3.html
Esempio4.html
Ordinamento rispetto alla ricerca: Università
Bergamo?

27 28
 05/12/2018

Motori di ricerca Grafo del Web

Alla fine degli anni ’90 analisi della struttura del Grafo del Web
Web per individuare le pagine più rilevanti Nodi → pagine web
Da cosa è costituita questa struttura? Archi (orientati) → link ipertestuali
Pagine web
Link ipertestuali Pagina
2

Link ipertestuali → legame tra le pagine web Pagina

1

Pagina

Grafo del Web 3

29 30

Grafo del Web Grafo del Web

Caratteristiche del grafo del Web
Rete orientata
Differenza tra grado uscente e grado entrante
Grado di separazione: 19 link (Barabasi)
Presenza di
Hub
Componenti isolate

31 32
 05/12/2018

Grafo del Web Indicizzazione

Grafo del Web è utilizzato per La struttura del Web condiziona l’esplorazione e
Esplorazione del Web e raccolta di dati la conseguente indicizzazione
Ordinamento dei risultati dei motori di ricerca Nel 1997
(PageRank) Hotbot copriva circa il 33% delle pagine
Determinare pagine che si occupano di argomenti Altavista il 28%
simili
Lycos 2%

33 34

Indicizzazione Ranking
La probabilità che una pagina sia indicizzata Due caratteristiche di una
dipende dal numero di archi entranti nodo/pagina web x :
x
Un link: 10% di probabilità
link entranti: stella entrante
Tra 21 e 100 link: 90% di probabilità

link uscenti: stella uscente

x

35 36
 05/12/2018

Ranking Ranking
Parametro con cui valutare le caratteristiche di
una pagina: MioSito
/1

Numero di link nella stella entrante

Numero di link nella stella uscente MioSito
MioSito
/2

Siti autorità: siti autorevoli su un certo argomento

→ molti link entranti
MioSito
/3

MioSito
/k

37 38

Motori di ricerca HITS

Ulteriori analisi del grafo del Web per definire Hyperlink-Induced Topic Search (HITS):
migliori criteri di ordinamento Analisi di Kleinberg (1999)
Metodi: Nodi del grafo del Web possono essere
HITS classificati come
PageRank Autorità
Aggregatori

39 40

HITS
Hyperlink-Induced Topic Search (HITS):
Autorità: nodo con stella entrante molto ampia
Autorevolezza su un dato argomento
41
HITS
Pagine autorevoli e aggregatori si influenzano
vicendevolmente
Aggregatori rilevanti → pagine autorevoli
Pagine autorevoli → Aggregatori rilevanti
43
05/12/2018
HITS
Hyperlink-Induced Topic Search (HITS):
Aggregatore: nodo con stella uscente molto
ampia
42
PageRank
Successo di Google → metodo/algoritmo di ranking
(PageRank)
“The heart of our software is PageRank™, a system for
ranking web pages developed by our founders Larry
Page and Sergey Brin at Stanford University. And
while we have dozens of engineers working to
improve every aspect of Google on a daily basis,
PageRank continues to play a central role in many of
our web search tools.”
(Google technology)
44
 05/12/2018

PageRank
Ranking di Google basato su PageRank
Rilevanza di una pagina web: funzione della
rilevanza delle pagine web collegate (rilevanza
pagine delle stelle entranti)
PageRank
Calcolo PageRank: procedura ricorsiva
Rilevanza della mia pagina web dipende dalla
rilevanza delle pagine web della stella entrante
Rilevanza della delle pagine web nella stella uscente
influenzata dalla rilevanza mia pagina web

45 46

PageRank PageRank
Intuitivamente:
Se una pagina ha rilevanza X e n link uscenti,
trasmette una rilevanza X/n ai nodi della stella Page rank trasferito
uscente
Rilevanza di una pagina: somma delle rilevanze
ricevute dai nodi della stella entrante

47 48
 05/12/2018

PageRank PageRank

½ ½
Page rank trasferito Page rank trasferito

½
Page rank trasferito

½
Page rank trasferito

Page rank trasferito

49 50

Motori di ricerca PageRank

Calcolo PageRank: procedura ricorsiva complessa
Interpretazione: probabilità che navigando in
modo casuale nel Web si visiti una determinata
pagina
Rilevanza di una pagina indipendente dalle
parole chiave utilizzate nelle ricerche
Valore calcolabile a priori
Dipendente dalla struttura del Web

51 52
 05/12/2018

PageRank SEO
Strategie per condizionare PageRank: Seach Engine Optimization (SEO): tecniche per
Creazione link verso una pagina per aumentarne migliorare il posizionamento nei motori di ricerca
l’autorevolezza Obiettivo
Vendita link Migliorare la visibilità, sia per motori di ricerca che
Cloaking: utilizzo versioni differenti del sito per utenti
Usabilità del sito
Link da altre pagine

53 54
 10/12/2018

Esperienza d’uso
Progettazione applicazioni (informatiche)
Risoluzione problemi tecnici
Importanza dell’esperienza d’uso dell’utente
Caratteristiche
Bisogni
Contesto d’uso

INFORMATICA PER LA
COMUNICAZIONE
Esperienza d’uso e usabilità

Esperienza d’uso
L’esperienza d’uso è studiata da:
Interazione uomo-macchina
Interazione uomo-macchina
Progettazione interfacce
Definizioni e caratteristiche
Architettura dell’informazione
Usabilità

1
 10/12/2018

Interazione uomo-macchina Sette gradi di interazione

Con interazione indichiamo qualunque Donald Norman ha studiato la complessità di un
comunicazione tra utente e computer sistema individuando sette stadi di interazione
(Norman, 1988):
L’utente interagisce tramite l’interfaccia
1. Formare lo scopo
L’interfaccia deve permettere, tramite una serie di 2. Formare l’intenzione
azioni, di raggiungere un determinato scopo 3. Specificare un’azione
4. Eseguire l’azione
5. Percepire lo stato del mondo
6. Interpretare lo stato del mondo
7. Valutare il risultato

Usabilità Usabilità
La teoria di Norman può essere utilizzata per interpretare il comportamento di un utente di fronte ad
un sito web.
Per quanto riguarda il golfo dell’esecuzione, infatti, l’utente
Quest’ultimo compie diversi passi, o meglio azioni, mediante le quali va a colmare la distanza tra
potrebbe riscontrare problemi nel reperimento delle informazioni
l’interfaccia del sito e l’obiettivo finale. Al tempo stesso svolge anche un’attività di valutazione degli che sta cercando, trovandosi in difficoltà nel raggiungere la
effetti ottenuti in riferimento allo scopo desiderato.
sezione che gli consente di acquistare il servizio in questione.
Quello che segue è un esempio di possibile concatenamento di azioni che un utente può eseguire
associato ai vari stadi illustrati da Norman: Anche il golfo della valutazione potrebbe essere fonte di
Forma lo scopo: L’utente esprime l’intenzione di prenotare un volo online problemi, ad esempio, se l’utente, dopo aver cliccato il tasto
Forma l’intenzione: L’utente cerca si mette alla ricerca di un sito che gli consenta di raggiungere lo
scopo prefissato
‘acquista’, non avesse visto alcun segno di spunta o nessun
Specifica un’azione: Inizia il suo percorso nel sito, durante il quale esplora le diverse aree, cercando di
messaggio di conferma dell’ordine. In questo caso, l’utente
capire qual è la sezione che gli permetta di prenotare il volo prescelto sarebbe probabilmente rimasto nel dubbio, chiedendosi se
Esegue l’azione: Trova il campo ‘acquista’, inserisce il metodo di pagamento e procede nell’acquisto l’acquisto avesse funzionato.
Percepisce lo stato del mondo: Resta in attesa di un feedback che possa confermargli la riuscita
dell’acquisto I problemi riscontrabili in prossimità dei due golfi costituiscono la
Interpreta lo stato del mondo: Vede un segno di spunta e una dicitura che si complimenta per maggior parte dei problemi di usabilità dei sistemi, che si tratti di
l’acquisto effettuato oggetti di uso quotidiano o di tecnologie informatiche.
Valuta il risultato: Ha raggiunto l’obiettivo con successo.

2

Interazioni
Norman individua due punti in cui si nascono
problemi di interazione
Golfo dell’esecuzione: tra lo stadio delle intenzioni e
lo stadio delle azioni
Distanza tra azioni ipotetiche e le azioni permesse
Golfo della valutazione, che divide lo stadio della
percezione da quello della valutazione dei risultati
Distanza tra lo stato del sistema e la percezione
dell’utente
Affordance: esempi
Fonte:
http://www.designisvital.co/article/affordance
10/12/2018
Interfaccia
L’interfaccia ha lo scopo di superare questi golfi
Golfo dell’esecuzione: specificando in modo chiaro le
azioni possibili (affordance)
Golfo della valutazione: comunicando in modo
chiaro lo stato del sistema (feedback)
Feedback: esempi
3
 10/12/2018

Modello concettuale Modelli concettuali e progettazione

Progettazione dell’interfaccia basata su:

Modello concettuale: descrizione del sistema, delle
sue funzionalità e del suo comportamento
Nella progettazione troviamo diversi modelli Utente
Progettista
concettuali
Del progettista
Dell’utente
Effettivo del sistema
Sistema

Progettazione e interazione Problematiche di progettazione

Distanza tra modelli concettuali può causare Nei modelli concettuali dei progettisti Norman
problemi di interazione evidenzia due problematiche:
Distanza tra modello concettuale del progettista e Proliferazione delle funzioni
modello dell’utente Culto della complessità
Progettisti/utenti tipici
Estetica/facilità d’uso
Committenti/utenti

4
 10/12/2018

Progettazione centrata sull’utente Principi della buona progettazione

Nuovo approccio introdotto da Norman per Visibilità: riconoscibilità dei comandi

ridurre le distanze tra modelli concettuali
Utilizzare il punto di vista dell’utente
Coinvolgere l’utente nella fase di progettazione
Mapping: facilità nel determinare rapporto tra comandi e
azioni
Feedback: informazione sullo stato del sistema
Gestione degli errori: prevedere possibili errori e il
conseguente comportamento del sistema
Utilizzo standard

Usabilità
Usabilità: facilità di
Usabilità utilizzo di un prodotto
L’efficacia, l'efficienza e la
soddisfazione con le quali
determinati utenti raggiungono
determinati obiettivi in
determinati contesti.

(ISO)

5
 10/12/2018

Usabilità Usabilità nel Web

Grado di usabilità di un prodotto dipende da alcuni Approcci all’usabilità nel Web:
fattori: Norman
Curva di apprendimento Nielsen
Semplicità di memorizzazione Krug
Efficienza Polillo
Soddisfazione
Errori

Principi usabilità nel Web Progettazione di un sito web

Complessità navigazione nel Web: sforzo cognitivo La progettazione di un sito web è un processo
Navigazione iterativo e interattivo
Supporto alla navigazione Progettazione:
Minimizzare clic inutili Utenti potenziali
Pratiche in uso
Contenuti
Realizzazione di prototipi
Organizzazione dei contenuti
Valutazione: fase di test
Fruizione uniforme indipendentemente da
dispositivi/browser

6
 10/12/2018

Identità digitale
Uno sito web ha come obiettivo primario
Identità digitale comunicare:
Identità
Attività svolta

Possibilmente in modo auto-esplicativo e

immediato

Interazione iniziale Indirizzo del sito

Fattori che influenzano l’interazione iniziale con il Indirizzo del sito (URL)
sito sito: Facilità di reperimento e memorizzazione
Uniformità visiva, coerenza comunicativa Legame con nome del proprietario
Nome del sito Domini di secondo livello simili
Indirizzo del sito (URL) Importanza in fase di ricerca
Marchio

7
 10/12/2018

Indirizzo del sito Indirizzo del sito

URL di un dipartimento di lingue URL di tre dipartimenti di lingue

Verona

? http://www.dlls.univr.it/
Cattolica Bs
http://dipartimenti.unicatt.it/scienze_linguistiche
Unimi
http://www.lingue.unimi.it

Marchio Marchio
Il principale elemento di riconoscibilità visiva:
marchio
Convenzioni nell’uso del marchio:
Presenza in tutte le pagine, nella stessa posizione
Clic sul marchio: ritorno in homepage

8
 10/12/2018

Altri aspetti di identità digitale Altri aspetti comunicativi

Informazioni di contatto
Definizione spazi pubblicitari
Fiducia laterale:
Social media
Portali di suggerimenti, recensioni

Struttura di un homepage

Homepage Header
Menu

Importanza e progettazione

Content

Footer

9
 10/12/2018

Struttura di un homepage Struttura di un sito

Header Homepage

Global
Il corso Studiare opportunities
Menu Content
Piano di Orario
Lezioni Doppio titolo
studi

Guida e Erasmus
Footer regolamento

Menu navigazione Navigazione principale

I menu di navigazione sono: Homepage

Principale: menu per le voci di primo livello, presente

in tutte le pagine Il corso Studiare Global
opportunities
Secondaria: suddivisione di ogni sezione del sito
Contestuale: elementi correlati Piano di studi Orario Lezioni Doppio titolo

Guida e Erasmus
regolamento

10
 10/12/2018

Navigazione secondaria Menu navigazione secondaria

Homepage

Global
Il corso Studiare opportunities Il corso
Piano di studi
Piano di studi Orario Lezioni Doppio titolo Guida e regolamento

Guida e
Erasmus
regolamento Menu di navigazione secondaria

Menu navigazione contestuale Homepage - importanza

Homepage: primo punto di contatto con l’utente
Identità
Individuazione zone semantiche
Navigazione
Accesso rapido a contenuti (interni)

Menu di navigazione contestuale

11
 10/12/2018

Homepage - progettazione Homepage - progettazione

Uno dei principali problemi nella progettazione La scelta dipende da diversi fattori
dell’homepage è: Tipo di sito
Obiettivi del sito
Cosa collocare?
Contenuto esteso: portali, giornali,…
Contenuto essenziale: siti personali, landing page,
minisiti, …
Contenuto essenziale Contenuto esteso

Homepage - progettazione Homepage – due approcci

Nella scelta va considerato inoltre l’impegno
richiesto all’utente
Il carico cognitivo richiesto all’utente è
direttamente proporzionale alla complessità
della pagina

12

Pre-homepage
La pre-homepage è una pagina che precede
l’homepage (intro-page, splash-page)
La pre-homepage va utilizzata solo se
strettamente necessaria (dare informazioni,
richiedere un’autorizzazione,…)
Rischio invisibilità per i motori di ricerca
Struttura di una landing page
Headline
Descrizione
Immagine
Bottone
10/12/2018
Landing Page
Oltre all’homepage, altre pagine possono essere
visualizzate inizialmente nella visita al sito →
landing page
Collegata a un’azione da mettere in risalto
Consultazione: fornire informazioni
Transazionale: per compiere un’azione
Landing Page
13
 10/12/2018

Evoluzione dei siti

Wayback machine permette la visualizzazione
dell’archivio delle homepage

14
 12/12/2018

Architettura dell’informazione - Web

Architettura dell’informazione di un sito web:

Architettura dell’informazione organizzazione dei contenuti
Alberatura e menu di navigazione
Organizzazione dei contenuti
Etichettatura (labelling) dei menu
Ricerca interna

Alberatura Alberatura: classificazione

Homepage Un approccio per la costruzione dell’alberatura è

basato sulla classificazione
Corsi Ricerca Internazionale Ateneo La classificazione si occupa di organizzare i
contenuti
Lauree e lauree
magistrali
Attività di
ricerca Erasmus Amministrazione Divisione in categorie e sottocategorie
Definizione della struttura organizzativa
Online Supporto alla
learning ricerca La storia

Dottorato
 12/12/2018

Classificazione dei contenuti Classificazione dei contenuti

Per la classificazione è possibile ricorrere a Card
Sorting: metodologia di classificazione
partecipativa
Classificazione di un insieme di elementi (cards) in
categorie
Raggruppamento di elementi omogenei
Due approcci alla classificazione partecipativa
Versione chiusa: assegnazione a categorie
predefinite
Versione aperta: definizione categorie
A seconda del numero di utenti coinvolti
Analisi qualitativa
Con ausilio metodi statistici

Organizzazione I Organizzazione - II
Principali metodi di organizzazione Altri metodi di organizzazione
dell’informazione Alfabetica
Per argomento: basato sui contenuti del sito Cronologica
Organizzazione semantica Geografica/Spaziale
Per compiti: basato sui bisogni degli utenti Diversi metodi possono essere utilizzati
Cosa devo fare?
congiuntamente
Per tipologia di utenza
 12/12/2018

Strutture organizzative Approccio gerarchico

L’architettura dell’informazione nel Web utilizza le I contenuti sono disposti seguendo in una
seguenti strutture organizzative per presentare struttura ad albero (a livelli)
l’informazione Categorie di alto livello (macro-categorie)
Approccio gerarchico Sotto-categorie
Approccio a faccette Foglie

Approccio gerarchico Legge di Hick

Vanno considerati due aspetti
Profondità dell’albero: lunghezza del cammino per
arrivare al contenuto
Ampiezza della gerarchia: numero di categorie tra
cui scegliere
La legge di Hick quantifica lo sforzo cognitivo
nell’utilizzo di menu
Scegliere una volta tra un menu di 8 voci è meno
impegnativo che scegliere 2 volte da menu di 4 voci
 12/12/2018

Legge di Hick Approccio a faccette

Ogni informazione del sito può essere
considerata da diversi punti di vista
Elementi selezionati in base a caratteristiche
Es.
Automobili
Cilindrata
Tipo di alimentazione
Tipo di cambio

Etichettatura
Gli elementi strutturali del sito (e non solo)
devono essere opportunamente etichettati Navigazione
(labelling)
Strumenti di supporto alla navigazione
Utilizzo di termini distintivi, comprensibili
all’utente
 12/12/2018

Navigazione nel mondo digitale Navigazione

Secondo Steve Krug nel Web abbiamo Funzioni della navigazione
mancanza: Dove siamo all’interno del sito
Senso delle proporzioni Dove possiamo spostarci
Senso della posizione Da quali pagine è composto il sito
Senso di direzione

La navigazione deve permettere di ovviare a tali

limiti del Web

Posizione nel sito Navigare nel sito

Nome del sito e marchio Come visto nella sezione homepage, esistono
Breadcrumb: percorso per raggiungere la pagina diversi tipi di navigazione
Esempio 1, Esempio 2 Globale o primaria
Posizione nel sito segnalata dal menu di Locale o secondaria
navigazione Contestuale
Esempio
Titolo della pagina/marchio
 12/12/2018

Altri modelli di navigazione Mappa del sito

Tag: classificazione semantica del contenuto La mappa del sito permette all’utente di
Esempio 1 comprendere la struttura del sito
Comportamento utenti (pagine più viste, articoli Mappa del sito: esempio 1, esempio 2
più letti, …)
Footer

Ricerca interna
La ricerca interna aiuta l’utente a individuare i
Ricerca contenuti di interesse
Strumenti per la ricerca interna Può essere utile quando
L’utente conosce l’oggetto a cui è interessato
Per trovare un contenuto più velocemente rispetto
alla navigazione
 12/12/2018

Ricerca interna Tipo di sito

La ricerca è una funzionalità molto usata dagli Orientati ai contenuti Orientati alle attività
utenti
Non è una funzionalità necessaria Ricerca interna Ricerca non
indispensabile indispensabile
Dipende da:
Tipo di sito
Bisogno informativo Compiti specifici per
Orientato ai contenuti/alle attività Esempio l’utente
Complessità del sito Esempio

Specificità della ricerca interna Ordinamento e filtri

Ricerca interna Ricerca generalista

Altri strumenti di supporto alla ricerca
Filtri: selezione in base a caratteristiche
Numero limitato di Miliardi di pagine
Strumenti di ordinamento
pagine Ambiguità semantica
Pagina zero risultati
Ambiguità semantica complessa
Esempio 1
limitata Difficoltà uso
Esempio 2
Importanza metadati metadati
 12/12/2018

Tecniche di analisi degli utenti

Per determinare le zone di interazione
Leggibilità dell’utente: eyetracking
Heatmap
Modalità di lettura
Gazeplot

Lettura sul Web Impostazione delle pagine

Quale modalità segue l’utente nella lettura sul Le pagine vanno impostate
Web? Includendo punti di riferimento
Lettura non sequenziale Menu navigazione
Scansione della pagina Link
Titoli
“Non leggiamo le pagine, le scansioniamo” Parole chiave
…
(Steve Krug)
Evidenziando zone di interesse
 12/12/2018

Comportamento dell’utente Comportamento dell’utente

Gli studi sul comportamento dell’utente (Nielsen):
percorso a F
Altri dati degli studi sul comportamento
dell’utente:
Il 30% dei visitatori non considera la parte destra
Il percorso inizia nella parte superiore
Si sposta progressivamente verso il basso

Comportamento dell’utente Impostazione delle pagine

Golden Triangle di Google Diagramma di Gutenberg

Ulteriore aspetti da considerare:
La risoluzione del video
La piega della pagina

Piega

Tipografia digitale
«Il 95% della progettazione web è tipografia»
Oliver Reichenstein
Test della pellicola
Questa pagina descrive il funzionamento del test
della pellicola
Il test prevede che una volta tolta la pellicola
Solo le parole in grassetto rimarranno visibili
Le altre parole scompariranno
12/12/2018
Tipografia digitale
Scelta del font:
Numero di font limitato
Possibilmente senza grazie
Sottolineatura → solo per link
Grassetto per evidenziare → test della pellicola
Test della pellicola
Questa pagina descrive il funzionamento del test
della pellicola
Il test prevede che una volta tolta la pellicola
Solo le parole in grassetto rimarranno visibili
Le altre parole scompariranno
 12/12/2018

Scrittura per il Web Piramide rovesciata

Lettura nel Web Separazione visiva del Piramide rovesciata
Lettura su schermo più contenuto
Densità tipografica Concetti più significativi
impegnativa della carta Presentati

stampata equilibrata Conclusioni inizialmente

Allineamento del testo: Dettagli: nel seguito

a sinistra
Differente metodo di Informazioni principali 5W: Chi, cosa,
lettura: documenti non Riconoscibilità dei link come, quando
sequenziali
perché
Esempio Informazioni addizionali

Sovraccarico Utilizzo titoli, sottotitoli, Altre

informativo abstract informazioni
Essenzialità

Risoluzione dello schermo

La visualizzazione della homepage dipende dalla
Aspetti tecnici risoluzione dello schermo
Aspetti tecnici e usabilità Le statistiche (http://gs.statcounter.com/screen-
resolution-stats) sull’utilizzo dei siti evidenziano:
Molteplicità di risoluzioni/dispositivi utilizzati
Utilizzo significativo di dispositivi mobili
 12/12/2018

Dati 2016 Dati 2017

Dati 2018 Aspetti tecnici

Gli aspetti tecnici influenzano l’esperienza
dell’utente
Regole di progettazione per verificare
l’indipendenza da
Dispositivi
Browser
Sistemi operativi
 12/12/2018

Browser Sistema operativo

Browser interpreta il codice html con alcune Eventuale utilizzo plug-in interagiscono con
differenze sistema operativo
Possono cambiare Verifica indipendenza dal sistema operativo
Visualizzazione
Funzionalità

Velocità e stabilità Velocità caricamento

Altri aspetti da verificare riguardano la velocità di Strumenti per la misura del caricamento di una
caricamento delle pagine pagina:
La velocità è influenzata da diversi fattori https://developers.google.com/speed/pagespeed
Back end (hosting, DB,…) /insights/
Front end (immagini/video, CSS, Java script, …)
 12/12/2018

Link spezzati
Link spezzato: collegamento a una pagina
irraggiungibile Visual Design
Penalizzazione da parte dei motori di ricerca Usabilità dell’interfaccia
Prevedere una pagina opportuna
Strumenti di verifica
https://validator.w3.org/checklink

Progettazione dell’interfaccia Griglia

Aspetto visivo dell’interfaccia grafica
Approccio basato sulla progettazione centrata
sull’utente
Utilizzo di griglie per la progettazione del layout

Fonte: webdev-il.blogspot.it
 12/12/2018

Responsive Web Design Responsive Web Design

Nuovo approccio alla progettazione
Layout si adatta al dispositivo:
Risoluzione
Dispositivo
Orientazione
Riposizionamento e ridimensionamento elementi
della pagina

Fonte DigitalFamily.com

Altre tendenze nel web design

Alcune tendenze recenti
Mobile first
Minimal design
Single page
Parallax scrolling
 13/12/2018

Metodologie di valutazione
Esistono due metodologie per l’analisi della qualità
Valutazione della qualità di un sito web:
Metodologie per valutare la qualità di un sito Valutazione euristica: valutazione di esperti
web Test utente: utilizzo di un campione di utenti

Valutazione euristica Dieci euristiche

Analisi di esperti Nielsen e Molich (1995) hanno proposto dieci
Stesura di un documento di analisi individuale euristiche per la valutazione dell’usabilità
Rielaborazione congiunta 1. Feedback adeguati
Carenza della metodologia: esclusione degli 2. Corrispondenza con il mondo reale
utenti 3. Controllo e libertà di uscita all’utente
4. Consistenza e standard
 13/12/2018

Dieci euristiche Modelli di qualità

5. Prevenzione errori I modelli di qualità hanno come obiettivo
6. Correzione errori l’organizzazione della valutazione della qualità di
7. Utilizzo del riconoscimento, non del ricordo un artefatto
8. Flessibilità e scorciatoie per utenti esperti Individua alcune caratteristiche per valutare la
qualità
9. Estetica minimalista
10. Strumenti di aiuto

Un modello di qualità per siti web Valutazione euristica

Modello sistematico (Polillo 2004) per analizzare Caratteristiche del modello di qualità per siti web (Polillo
la qualità di un sito 2004)
1. Architettura: struttura e navigazione
Il modello presenta i principali fattori
2. Comunicazione: obiettivi della comunicazione
(caratteristiche) che influiscono sulla qualità di un
3. Funzionalità
sito
4. Contenuti informativi: affidabilità, aggiornamento,
Obiettivo è valutare la qualità esterna e in uso, comprensibilità
non la qualità interna 5. Gestione
6. Accessibilità
7. Usabilità
 13/12/2018

Diagramma a stella Testo con utenti

Nel test con utenti
CONFRONTO TRA DUE SITI
Sito 1 Sito 2
Criteri oggettivi
Architettura
5 Quantitativi: tempo esecuzione, numero clic, numero
4 errori …
Usabilità Comunicazione
3
2
Qualitativi: utilizzo caratteri, organizzazione, colori
1 Criteri soggettivi: legati all’esperienza dell’utente
0

Accessibilità Funzionalità

Gestione Contenuti informativi

Testo con utenti Scelta utenti

Valutare usabilità → test di usabilità Numero utenti selezionato può essere limitato
Scelta utenti campione Cinque utenti → oltre 80% problemi usabilità
Definizione compiti da svolgere Quindici utenti → circa 100% problemi usabilità
Osservazione degli utenti

Fonte: Nielsen 2000

 13/12/2018

Numero utenti Test di usabilità: valutazione

Valutare usabilità → test di usabilità
Efficacia, l'efficienza e la soddisfazione con le quali determinati utenti
raggiungono determinati obiettivi in determinati contesti.
(ISO)
Misure:
1. Efficacia: tasso successo
2. Efficienza: tempo impiegato
3. Soddisfazione: gradimento

A/B test
A/B test di una pagina: creazione di due versioni
di una pagina Accessibilità
Verifica sperimentale dell’usabilità delle due Definizioni e valutazione
versioni
 13/12/2018

Accessibilità Accessibilità
Accessibilità di un sito web: Difficoltà di accesso → Disabilità
Universalità di accesso a un sito web per tutti gli Accessibilità significa accesso al Web da parte di
utenti tutti, indipendentemente da eventuali disabilità
Difficoltà di accesso: (Web Accessibility Initiative (WAI))
Tecnologiche
Disabilità

Accessibilità Accessibilità e standard

Accessibilità web: Legge Stanca: disposizioni per garantire
Accessibilità formale: l’accessibilità (in particolare per servizi pubblici)
Codice WAI raccomanda l’utilizzo degli standard per
Di competenza degli sviluppatori garantire l’accessibilità
Accessibilità contenutistica: Linee guida per l’accessibilità
Contenuti di un sito
Redazione del sito
 13/12/2018

Accessibilità: valutazione
Alcuni strumenti automatici per la valutazione
dell’accessibilità:
Validatore W3C
http://validator.w3.org/
Controllo contrasto colori:
http://www.checkmycolours.com/
 13/12/2018

HTML
HTML (Hypertext Markup Language): linguaggio
per la scrittura di documenti ipertestuali
Meta-informazione tradotta dal browser
tag

<p><b>Esempio di elenco</b></p>
Inizio

INFORMATICA PER LA
<ol type="a">
<li>primo</li>
<li value="c">secondo</li>

COMUNICAZIONE
<li>terzo</li>
</ol>

HTML e CSS

HTML: evoluzione HTML5

Caratteristiche di HTML5:
Disaccoppiare definizione di struttura e
formattazione della pagina
HTML HTML 2.0 XHTML HTML5 Introduzione di elementi semantici
• 1989 • 1995 • 2000 • 2014 Nuove funzionalità: audio, video, etc…
Compatibilità browser e dispositivi: miglior approccio
alla visualizzazione mobile
 13/12/2018

Lettori di HTML

Macchine Utenti
HTML
Leggono il codice Visualizzano
HTML per l’interpretazione dell’ Struttura e tag
Interpretazione: HTML da parte del
browser browser
Trovare informazioni:
motori di ricerca

HTML – struttura di una pagina Tag

Struttura di una pagina Tag: comandi per la strutturazione della pagina
Marcatore di inizio e <!DOCTYPE html> Definizione elementi strutturali
fine del documento:
<html> Marcatori
<html>…</html>
<head> Es. <p>, <body>, <div>, …
Intestazione: Intestazione
… Tag possono essere annidati nella definizione della
informazioni non
struttura della pagina
visualizzate </head>
<head>…</head> <body>
Corpo
Corpo: informazioni …
pubblicate </body>
<body>…</body>
</html>
 13/12/2018

Dichiarazione Intestazione
Una pagina html inizia con la dichiarazione del Intestazione: meta-informazioni sul documento,
tipo di documento: non mostrate dal browser
<!DOCTYPE html> Titolo della pagina
Indica che al browser che il documento segue le Associazione fogli di stile
regole del linguaggio HTML Meta tag: codifica dei caratteri, resa sui browser

Intestazione: titolo Metatag

Tag title: titolo della Metatag: metadati, danno informazioni sulla
pagina pagina a utenti e motori di ricerca
Univoco ed esplicativo Non influiscono sulla formattazione della pagina,
per ogni pagina non vengono mostrati dal browser
<head>
<meta name="proprietà" content="valore" />
<title> Corso di
Informatica
</title>
</head>
 13/12/2018

Metatag Metatag: codifica caratteri

Tabella di codifica dei caratteri
<meta name="DESCRIPTION"
content="Teorie e tecniche della
web" /> <meta-charset="utf-8">

<meta name="ROBOTS"
content="INDEX,FOLLOW“ />

Esercizio
Create una pagina web (senza contenuto),
specificando: Corpo della pagina
La struttura di una pagina web Tag HTML
Codifica dei caratteri utf-8
Titolo "Università di Bergamo: corso di laurea
CIE"
 13/12/2018

Corpo della pagina Marcatori

Corpo del testo: <body> Marcatori:
contenuto della … Definiti dalla seguente sintassi
pagina mostrato dal
</body> <Nome_marcatore>
browser
Possono esserci
Testo
marcatori con apertura e chiusura
Immagini
privi di chiusura
Elenchi
Link iperstestuali
…

Marcatori con apertura e chiusura Marcatori privi di chiusura

Marcatori con apertura (<marcatore>) e chiusura Marcatori privi di chiusura
(</marcatore>)
Il marcatore <p> definisce un paragrafo Adesso <br> interruzione di riga

<p> Esempio di paragrafo </p>

<p> Secondo Paragrafo </p>
 13/12/2018

Tag intestazioni Tag pre

I marcatori da <h1>a <h6> servono per definire Il tag pre permette di scrivere testo preservando
le intestazioni (titoli) del documento spazi e a capo
Utilizzati dai motori di ricerca per il ranking
<pre>
Prima riga
<h1> Titolo di primo livello Seconda riga
</h1>
Terza riga
</pre>

Esercizio Attributi HTML

Dalla piattaforma e-learning: Esercizi HTML Gli attributi specificano caratteristiche del tag
Create una pagina web simile a Esercizio1.pdf, Vanno specificati all’interno dell’apertura del tag
inserendo del testo e contenente i tag Sintassi
h1,h2, h3 name=“value”
p
pre
<p title=“Questo è un paragrafo”>
Primo paragrafo </p>

Tooltip

Tag a Percorsi file
Link ipertestuali:
<a> con attributo href: destinazione del link
Interno al sito
Esterno al sito
<a href="page.html" title="Link
interno"> Link a una pagina del
sito
</a>
<a href= "http://www.unibg.it"
title="Link esterno" > Unibg </a>
Ancora Esercizio
Link ipertestuali con destinazione interna alla
pagina (ancore):
L’elemento destinazione deve contenere attributo id:
identificatore dell’elemento
L’attributo href contiene il nome id preceduto da #
<a href="#sezione1" title="Link
interno alla pagina"> Link interno
alla pagina </a>
<p id="sezione 1" title="Sezione 1" >
Questa è la sezione 1 </p>
13/12/2018
I percorsi specificati in href possono essere assoluti o
relativi
Assoluto: a partire dalla radice del file system
<a href=
‟file:///C:/Informatica/esempio.html‟>
Percorso Assoluto </a>
Relativo: a partire dal punto in cui mi trovo
<a href= ‟Risultati/gennaio.html‟> Percorso
relativo </a>
Utilizzo “..” per risalire nel file system
Create due pagine web come Esercizio2.pdf,
Esercizio2b.pdf:
Pagina uno:
un paragrafo con tooltip
Un link interno alla pagina due
un link esterno alla pagina http://www.unibg.it
Pagina due
un link interno (percorso relativo) alla pagina uno
Un link interno a un paragrafo della pagina (ancora)
 13/12/2018

Tag per il testo Lista ordinata

Tag per caratterizzare il formato del testo
<strong>
Grassetto <ul>
<b>
<li> Antipasto </li>
<em> Corsivo <li> Primo piatto</li>
<i> <li> Secondo piatto </li>
<li> Dolce </li>
</ul>

Lista numerata Commento

Commento: porzione di codice non
visualizzata dal browser
<ol>
<li> Antipasto </li>
<li> Primo piatto </li> <!–– Questo è solo un commento e non
sarà visualizzato ––>
<li> Secondo piatto </li>
<li> Dolce </li>
</ol>
 13/12/2018

Esercizio
Costruire tre pagine web, nella cartella Lezione 2
Una lista ordinata: menu di navigazione
Struttura di una pagina
Un commento
Blocchi all’interno di una pagina

Elementi strutturali Tag strutturali HTML5

HTML 5 ha previsto l’introduzione di elementi per
la definizione della struttura della pagina: <header>

header, footer <hgroup>

nav <article>
section, article <nav> <aside>
<section>
hgroup
aside <figure>

<footer>
 13/12/2018

Intestazione Intestazione: un esempio

Il tag <header> identifica l’intestazione: <header>
<h1> Corso di laurea in CIE
Informazioni sulla pagina
</h1>
Supporto alla navigazione <p id="payoff">
Laurea magistrale in Scienze della
Comunicazione, Informazione, Editoria
<a href="http://www.unibg.it"
title="Università degli studi di
Bergamo"> Unibg </a>
</p>
</header>

Navigazione Esercizio
Il tag <nav> identifica il menu di navigazione Modificate i file creati in precedenza
(primario)
Definite il menu di navigazione primaria:
Può essere incluso nell’intestazione per definire il
menu di tutte le pagina All’interno dei tag nav e header

<nav>
<ul id="navigazione-primaria">
<li> <a href="/">Home</a></li>
<li> <a href="corso.html">Corso</a></li>
</ul>
</nav>
 13/12/2018

Blocchi di contenuto Article

Il contenuto della pagina può essere suddiviso in Una notizia o un avviso, può essere rappresentato con
article
blocchi:
<article>
Article: elemento autocontenuto <header>
Articolo <h1> Compilazione dei piani di studio </h1>
Notizia </header>
… <div class="notizia">
<p> I piani di studio vanno compilati entro
Div: blocco generico il 31/10/2018</p>
Section: contenuti omogenei, con titolo <p> Utilizzate la <a href=«procedura.html">
procedura telematica</a></p>
</article>
</div>

Div Aside
Per delimitare un blocco strutturale generico: Blocco aside: definizione di un blocco
Div strutturale correlato agli elementi della pagina:
Approfondimenti
<div id="contenuto" role="main">
Contatti di una pagina specifica
<p>Div con un bordo</p>
…
</div>

Div con un bordo

 13/12/2018

Footer Esercizio
Blocco footer: definizione del blocco piè di Definiamo la struttura dell’homepage e delle
pagina di una sezione o della pagina pagina interne (vedi i file Esercizio3a, Esercizio3b
Informazioni su: e Esercizio3c):
Autore Footer per tutte le pagine
Copyright Homepage
… Un div e all’interno due blocchi article
Pagine interne
Blocchi div centrali e un blocco aside

Immagini in HTML Figure

Inserimento immagini: Il tag <figure> identifica un blocco che
<img> con attributo src indirizzo dell’immagine racchiude immagini, grafici, etc…
<img style="width:200px; height:400px;"
<figcaption> permette di specificare una
src="logounibg.png" alt="Logo didascalia
Università Bergamo" title=“Università
di Bergamo "/>
<figure>
<img src=“UnibgLogo.jpg" title=“Unibg"
<img style="width:50%" src="logounibg.png" style="width:20%">
alt="Logo Università Bergamo" </figure>
title=“Università di Bergamo"/>
 13/12/2018

Esercizio
Costruire tre pagine inserendo l’immagine
unibg.png (dimensione 7%):
Lezione 3
Esercizio1a.pdf
Esercizio1b.pdf
Esercizio1c.pdf