1

Il WEB 2.0

Sapienza Università di RomaAnno Accademico 2012 – 2013

Informatica per gli Archivi e le BibliotecheProf.ssa Linda Giuva

Prof. Maurizio CaminitoLEZIONE 8a

La gestione dei contenuti: dal Web 1.0 al Web 2.0

creare e rendere fruibili i contenuti sul web

AuthorsContent managers Webmaster

Users

ProducersProviders

Consumers

Webmaster

Platform (blog, wiki)

Users

Platform (social network)

“Prosumers”

Re-publishingRe-packaging

Web 1.0 Web 2.0

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.

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

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!

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.

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.

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.

11

Un sito: molte API

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.

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: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.

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 spamScelgo io come e quando voglio ricevere informazione

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.

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 FeedRsshttp://www.uniciber.it/fileadmin/doc_imm/documenti/RSS_02.pdf

Per saperne di più sugli RSShttp://it.wikipedia.org/wiki/Really_simple_syndication   

19

JAVASCRIPT

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.

JavaScript: un linguaggio lato clientIl 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

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

JavaScript: Visualizzare gli oggettiQuando 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.

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

I «metodi» del JavaScript

26

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.

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

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”);

</script> 28

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 asincronaAjax 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 operazioni.

31

Cosa cambia con AJAX

Le applicazioni web

32

In biblioteca una nuova pagina webTopeka & Swanee County Public Library

33