Sapienza Università di Roma Anno Accademico 2012 – 2013 Informatica per gli Archivi e le Biblioteche Prof.ssa Linda Giuva Prof. Maurizio Caminito Lezione 8a

1. Il WEB 2.0
Sapienza Università di Roma
Anno Accademico 2012 – 2013
Informatica per gli Archivi e le Biblioteche
Prof.ssa Linda Giuva
Prof. Maurizio Caminito
LEZIONE 8a 1

2. La gestione dei contenuti:
dal Web 1.0 al Web 2.0
creare e rendere fruibili i contenuti sul web
Authors Webmaster
Content managers
Webmaster Producers Platform (blog, wiki) Re-publishing
Providers Re-packaging
Platform (social network)
Consumers
Users
“Prosumers”
Users
Web 1.0 Web 2.0

3. Gestione dei contenuti e Web 2.0
Dalle pagine web create dai webmaster
all'UGC (user-generated content)
dal sito web al blog e al wiki,
dall'inserimento manuale di informazioni
all'aggregazione di informazioni da altre fonti.

4. Sistemi informativi e Web 2.0
Da un flusso diretto dalla fonte all'utente finale che visualizza
l'informazione su una schermata
ad un flusso multi-direzionale in cui i produttori sono spesso
anche consumer e i consumer sono spesso servizi avanzati che
rielaborano, aggregano e disgregano i contenuti e li rendono
disponibili ad altri servizi consumer, in un ciclo potenzialmente
infinito.

5. DATI GENERATI DAGLI UTENTI
• Wikipedia, Flickr, YouTube, LinkedIn, Facebook
(pubblicazione di testi, filmati, foto, …)
• Social tagging
• Tassonomie generate dagli utenti: FOLKSNOMIES
(categorizzazione collaborativa)
• Passaparola = marketing virale
5

6. Il Mash up
Mash-up (letteralmente: "poltiglia"):
applicazione che usa contenuti da più
sorgenti per creare un servizio nuovo.
Uso di applicazioni web di tipo ibrido, cioè tale da
includere dinamicamente informazioni o contenuti
provenienti da più fonti.
N.B. Chiunque può combinare dati in modi innovativi da siti
come : Amazon.com, eBay, Google, Windows Live e Yahoo! 6

7. Gli strumenti per il Mash Up
Il contenuto dei mash-up è preso da terzi:
• via API,
• tramite feed (es. RSS e Atom)
• o Javascript. 7

8. API
(Application Programming Interface)
Sistema che permette la comunicazione tra applicazioni,
attraverso la possibilità di incorporare in un altro software
un pezzo di codice che non si può manipolare direttamente
L’API è una particolare interfaccia che librerie, software o
piattaforme possono usare per interagire con un altro
programma o un’altra piattaforma. 8

9. A che servono le API
Per uno sviluppatore o un gestore di una
piattaforma o di un sito (di una biblioteca?)
mettere a disposizione un set di API di un suo
software significa dare la possibilità ad altri di
interagire con la sua piattaforma e, soprattutto,
estendere le funzioni e le caratteristiche della
struttura base della piattaforma.
Le API sono un ottimo strumento per promuovere
un programma offrendo ad altri un modo per
interagirci. 9

10. L’uso delle API
• Le foto possono essere condivise tra siti come FLICKR e Social
Network come Facebook e Myspace.
• I contenuti che si trovano in siti diversi possono essere integrati
tra di loro.
• I contenuti possono essere dinamicamente postati. Un commento
lasciato su Twitter può essere direttamente condiviso ed apparire
su Facebook tramite le API di Twitter e Facebook.
• I video possono essere scaricati da YOUTUBE e inseriti in un sito.
( in un blog per esempio)
• Le informazioni degli utenti possono essere condivise tra comunità
web e applicazioni esterne, dando così nuove funzionalità alla
comunità del web. Un esempio tipico di questo processo è dato
dalla piattaforma delle applicazioni di Facebook.
10

11. Un sito: molte API
11

12. Un altro esempio:
il mio sistema di commercio elettronico
può sfruttare le API messe a disposizione
da PayPal per consentire ai miei clienti
di pagare con PayPal un ordine,
nonostante io non sia PayPal e non
abbia un accesso diretto al loro sistema.
12

13. I feed RSS
Gli RSS Feed (Rich Site Summary ed anche
Really Simple Syndication) sono un formato per
la distribuzione automatica di contenuti Web.
Si riconoscono dalle icone (verso una standardizzazione)
Si leggono attraverso un lettore specifico locale o web based
(es.: Bloglines, Google Reader, ecc..)
• Un elenco completo dei lettori di Feed RSS disponibili:
13
http://www.rss-world.info/aggregatori/

14. FEED: il flusso
Un feed è usato per fornire agli utilizzatori una serie di contenuti
aggiornati di frequente. I distributori del contenuto rendono
disponibile il feed e consentono agli utenti di iscriversi.
L'aggregazione consiste in un insieme di feeds accessibili
simultaneamente, ed è eseguita da un aggregatore Internet.
L'uso principale dei feed RSS (detti anche flussi RSS) è legato alla
possibilità di creare informazioni che un utente potrà vedere
molto comodamente, con l'aiuto di un lettore apposito, nella
stessa pagina, nella stessa finestra, senza dover andare ogni
volta nel sito principale.
14

15. I Feed RSS in biblioteca
A cosa servono?
(per i bibliotecari e per gli utenti)
• Alerting sull’aggiornamento delle banche dati
• Aggiornamento dei contenuti di un sito Web (i blog hanno
• feed RSS)
• TOC (Table of Contents) delle riviste
Utilità per chi li usa:
Non diffondo la mia mail
Mi difendo dallo spam
Scelgo io come e quando voglio ricevere informazione
15

16. RSS: gli aggregatori
RSS reader / RSS aggregator
Un aggregatore è un software in grado di accedere ai
file delle feed RSS (è sufficiente che l'utente indichi al
programma le URL delle feed), effettuarne il parsing
(ovvero l'estrazione delle informazioni dai vari
elementi XML), aggregarne i vari item e visualizzarli
in base alle preferenze dell'utente.

17. Gli aggregatori RSS nei motori di ricerca
• Aggregatori RSS online
– Google Reader (http://www.google.com/reader/)
– Yahoo Pipes (http://pipes.yahoo.com/pipes/)
Google Reader:
notizie aggregate
da diverse fonti su
“Informatica”

18. Feed RSS. Per approfondire
Istruzioni per l’istallazione di un FeedRss
http://www.uniciber.it/fileadmin/doc_imm/documenti/RSS_02.pdf
Per saperne di più sugli RSS
http://it.wikipedia.org/wiki/Really_simple_syndication
18

19. JAVASCRIPT
19

20. JAVASCRIPT
• Javascript è il principale linguaggio utilizzato per lo scripting
lato-client, cioè per scrivere istruzioni che verranno eseguite
a livello del client del visitatore di una pagina web.
Il codice Javascript, pertanto, è sempre visibile all'interno del
sorgente della pagina web scaricata dal browser in quanto
quest'ultimo potrà eseguire le istruzioni Javascript solo dopo
averne effettuato il download.
Grazie a Javascript è possibile ridefinire in maniera dinamica
le proprietà degli oggetti che formano la pagina Web.
20

21. JavaScript: un linguaggio lato client
Il web funziona a due livelli:
le pagine web vengono inviate all’utente da un web server, cioè da un
programma che si trova su un computer remoto, e che invia le pagine a chi ne
fa richiesta
l’utente da casa visualizza sul proprio browser le pagine che gli sono state
inviate. Un “browser” è un programma che permette di leggere le pagine
scritte in linguaggio HTML: si tratta di “Internet Explorer”, “Netscape
Navigator”, “Opera” e altri.
Quando visualizziamo le nostre pagine web da casa ci sono dunque due
computer che si parlano: il server e il client.
Alcuni linguaggi di scripting (asp, php, perl) vengono eseguiti dal web server
(si chiamano appunto linguaggi server side o lato server). JavaScript, invece,
viene eseguito sul nostro computer di casa dal browser (è un linguaggio client
side o lato client).
21

22. N.B.
In realtà il web è fatto a tre livelli, e non a due:
•il client (il pc su cui visualizzate le pagine)
•il “web server” (il programma che vi spedisce le
pagine dal pc remoto)
•il “database server” (un altro programma che
immagazzina i dati e li restituisce, quando
vengono richiesti)
22

23. JavaScript: Visualizzare gli oggetti
Quando programmate con JavaScript dovete immaginare che la pagina HTML sia
formata da vari elementi (o oggetti) in varia relazione fra loro. Il browser infatti (con
all’interno il documento HTML) può essere infatti “sezionato” in vari elementi:
•la finestra che contiene tutto quanto (l’oggetto window)
•eventuali frames (l’oggetto window.frames)
•il documento HTML vero e proprio (document)
•i moduli per raccogliere l’input dell’utente
•le immagini
•i cookie
•i livelli
•le applet
•la barra degli indirizzi (location)
•la barra di stato, nella parte bassa del browser (status)
Tutti gli oggetti che vediamo nel browser sono in relazione gerarchica fra di loro e
tramite JavaScript – utilizzando la corretta sintassi – è possibile interrogare questi
elementi, leggerne le proprietà e in taluni casi anche cambiare il valore di queste
proprietà.
23

24. DOM: Document Object Model
Una pagina web è un documento. Questo documento è visibile all'utente come
semplice testo (visualizzazione del codice) o attraverso un'interfaccia grafica, la
pagina internet che tutti conosciamo.
Il DOM è un terzo modo di guardare il documento, esso è una rappresentazione
completamente orientata agli oggetti della pagina web. Attraverso di esso, oltre
a guardare il documento, possiamo anche modificarlo con un linguaggio di
scripting, ad esempio Javascript.
DEFINIZIONE: Il Document Object Model (spesso abbreviato come DOM),
letteralmente modello a oggetti del documento, è una forma di rappresentazione
dei documenti strutturati come modello orientato agli oggetti.
24

25. Gli «oggetti» del Javascript
Javascript è un linguaggio di programmazione che di per sé non
ha nulla a che vedere con i documenti xml o html.
Esso però "entra in contatto" con il documento per mezzo del
DOM, che è quindi una interfaccia per programmare
l'applicazione javascript che vuole agire sul documento.
Tutto ciò che è contenuto nel documento ha il suo corrispettivo
nel DOM, e una modifica programmata tramite DOM si riflette
in una modifica al documento.
Javascript può quindi modificare il documento attraverso i
metodi del DOM
25

26. I «metodi» del JavaScript
Ognuno degli oggetti del browser ha i propri metodi
=
ognuno degli oggetti del browser ha a disposizione
determinate azioni e non altre.
Es.: Esiste l’oggetto history che contiene la storia della navigazione
dell’utente per quel che riguarda una finestra.
Tramite il metodo back() dell’oggetto history è possibile mandare indietro
l’utente alla pagina da cui è arrivato.
Il metodo back() è proprio dell’oggetto history, e non (per esempio) del
campo di un form in cui è previsto solo il riempimento di alcuni campi con
dati inseriti dall’utente.
26

27. Gli «eventi» nel JavaScript - 1
Oltre essere organizzato a oggetti e metodi,
con JavaScript si programmano degli eventi.
Un evento è qualcosa che accade nel documento.
Il documento è l’ambiente entro cui vengono realizzate delle “azioni”, in
parte dovute alla volontà dell’utente (passaggio del mouse su un link, click su
qualcosa…), altre volte dovute alla situazione contingente (la pagina è stata
caricata).
Grazie agli eventi possiamo “impacchettare” il codice scritto attraverso
JavaScript e farlo eseguire non appena l’utente esegue una data azione:
quando si clicca su un bottone di un form possiamo controllare che i dati
siano nel formato giusto; quando passa su un determinato link possiamo
scambiare due immagini, eccetera.
Gli eventi (le possibili cose che possono capitare all’interno della pagina)
Es.: “alert” è una finestra di dialogo che avverte di qualcosa.
27

28. Gli «eventi» nel JavaScript - 2
Allo stesso elemento
possono essere collegati eventi diversi,
ciascuno con il proprio codice da eseguire.
Ogni elemento dell’HTML ha a disposizione
determinati eventi e non altri.
Possiamo inserire il codice JavaScript in qualsiasi parte del documento a
seconda delle nostre esigenze.
Per scrivere la sintassi è sufficiente aprire il tag <SCRIPT>. Il codice JavaScript
va inserito tra l’apertura e la chiusura del tag. Così:
<script>
alert(“ciao”); 28
</script>

29. IL DHTML
Dynamic HTML
=
linguaggio che,
congiungendo HTML, CSS e JavaScript,
permette ai livelli di muoversi
all’interno della finestra del browser
29

30. AJAX: la comunicazione asincrona
Ajax elimina la natura del Web contraddistinta da momenti
alternati di dialogo-risposta che fanno attendere l’utente,
introducendo un intermediario - un motore Ajax - tra
l’utente e il server.
Può sembrare di aggiungere un livello all’applicazione che
la rende meno veloce a rispondere, però è vero il contrario.
Invece di caricare una classica pagina web, ad inizio
sessione, il browser carica il motore Ajax. Questo motore è
responsabile della comunicazione tra l’interfaccia utente e il
server, mettendoli in comunicazione tra di loro. Il motore
Ajax permette all’interazione dell’utente con l’applicazione
di essere asincrona. Così l’utente non rimane in attesa
della finestra del browser bianca e dell’icona indicante il
caricamento, aspettando che il server esegua le
30
operazioni.

31. Cosa cambia con AJAX
Le applicazioni web
31

32. In biblioteca una nuova pagina web
Topeka & Swanee County Public Library
32

33. 33