WEB 2.0

Introduzione al Web 2.0

• Il termine web 2.0 indica il passaggio concettuale da siti intesi come contenitori di documenti a veri e propri servizi con cui gli utenti possono interagire (termine coniato da Dale Dougherty, O’Reilly, e Craig Cline, Media Live).

• I siti diventano servizi, ovvero hanno un’interfaccia, una facilità e velocità di uso che li rendono simili ad applicazioni dekstop.

• “Web 2.0: offerta di software come un servizio sempre aggiornato che migliora all’aumentare del numero di persone che lo usano, utilizzando e rimescolando i dati provenienti da sorgenti diverse, offrendo i propri dati in una forma che ne permetta un facile riutilizzo da parte degli altri, attraverso un’architettura della partecipazione,andando oltre la metafora della pagina tipica del web 1.0 in modo tale da offrire agli utenti una esperienza di utilizzo realmente ricca ed interattiva”(Tim O’Reilly).

• I servizi sono sempre disponibili ovunque ci si trovi , qualunque piattaforma si stia usando: basta avere un computer connesso alla rete.

• La connotazione sociale di partecipazione e collaborazione sta assumendo un ruolo centrale nella fisionomia del nuovo web.La pubblicazione di contenuti on line evolve verso un contesto di partecipazione; i sistemi di gestione dei contenuti evolvono nei sistemi dei Wiki in cui si incoraggia il contributo da parte degli utenti

web based services

Social networking sites• Sebbene le caratteristiche di questi siti siano differenti, tutti consentono di

accedere alla proprie informazioni personali e offrono vari meccanismi di comunicazione (forum, chat room, e-mail, instantmessenger) che consentono di connettere gli utenti tra loro. In alcuni siti è possibile ricercare persone anche secondo alcuni criteri. Alcuni altri siti invece hanno comunità o sottogruppi che sono basati su particolari interessi comuni.

• Quali sono i rischi di questi siti?I social network sites si basano sullo scambio di informazioni tra i partecipanti, così incoraggiano gli utenti a mettere a disposizione una certa quantità di informazioni personali. La particolare tipologia di questi siti, il desiderio di incrementare le proprie conoscenze, il falso senso di sicurezza ingenerato dalla rete, sono i fattori che spingono gli utenti a fornire una notevole mole di informazioni personali, non tenendo conto che queste possono cadere in mano a malintenzionati.Sono ormai molte le segnalazioni di attacchi conseguenti allo sfruttamento di informazioni personali raccolte in internet.

Malgrado abbia avuto uno sviluppo di anno in anno calcolabile al 117% di audience, che lo hanno portato a 19.2 milioni di utenti unici ad agosto, Facebookè rimasto dietro MySpace, che rimane al caposaldo dei social network negli Stati Uniti con 60.3 milioni di utenti unici.

Wiki

• Un wiki è un sito web (o comunque una collezione di documenti ipertestuali) che permette a ciascuno dei suoi utilizzatori di aggiungere contenuti, come in un forum, ma anche di modificare i contenuti esistenti inseriti da altri utilizzatori.

• Il nome wiki deriva da un termine in lingua hawaiana che significa “rapido” o molto veloce”.

• Il termine wiki può anche riferirsi al software collaborativo utilizzato per creare un sito web.

• Campi di applicazioneDocumentazione di numerosi progetti informatici, ad esempio Dotclear.

Enciclopedie e più generalmente knowledge based on line, sia generali come Wikipedia o settoriali come Sensei's Library, questionsSurLAlimentation,

Knowledge base d'impresa, per permettere di condividere conoscenze e di comunicare in seno all'impresa;

Folksonomy

• Descrive una categorizzazione collaborativa di informazioni mediante l'utilizzo di parole chiave scelte liberamente.

• In maniera più semplice e concreta, questo termine si riferisce alla metodologia utilizzata da gruppi di persone che collaborano spontaneamente per organizzare in categorie le informazioni disponibili attraverso internet.

• Questo fenomeno, in contrasto con i metodi di classificazione formale (in particolare con la tassonomia classica), cresce soprattutto in comunità non gerarchiche legate ad applicazioni web, attraverso le quali vengono diffusi contenuti testuali e/o multimediali.Considerato che gli organizzatori dell'informazione sono di solito gli utenti finali, la folksonomia produce risultati che riflettono in maniera più definita l'informazione secondo il modello concettuale dellapopolazione in cui il progetto viene realizzato.

• Fusione dei termini "folk" (popolare) e "taxonomy" (tassonomia), "folksonomy" è un termine che racchiude e definisce le pratiche, messe in atto quotidianamente dagli utenti di Internet, di classificazione e organizzazione collaborativa dei contenuti della rete.

• procedura è semplice ed efficace. A ogni inserimento di un nuovo link, immagine o altro dato, l'utente appone una o più parole che descrivono e classificano il contenuto. E' grazie a queste informazioni aggiuntive che in seguito sarà possibile gestire e richiamare in maniera selettiva e versatile i dati che ci servono, pescando tra i nostri e quelli degli altri: le "folksonomy" traggono infatti forza anche e sopratutto dal numero e dalla condivisione.

Flickr• sito dedicato alla pubblicazione e alla condivisione delle foto. Uno dei motivi non secondari del successo di Flickr è il cosiddetto "tagging". La possibilità cioè di apporre alle immagini una o più parole chiave, che diventano patrimonio pubblico di tutti gli utenti: per esempio per cercare immagini su un certo argomento, oppure navigando liberamente fra i tag, scorrendo la pagina dove sono evidenziati i tag più popolari. Questa caratteristica ha trasformato quello che poteva rimanere un semplice archivio in uno strumento di social networking e sopratutto di (ri)organizzazione versatile delle informazioni e dei dati a misurad'utente.

• del.icio.usdal 2003 offre uno spazio per ospitare i bookmark on line e gestirli, naturalmente per mezzo di "tag".

RSS (Really Simple Syndication)

• E’ uno dei più popolari formati per la distribuzione di contenuti web; è basato su xml, da cui ha ereditato la semplicità, l'estensibilità e la flessibilità.

• Parole associate comunemente a RSS:syndication, feed, channel• Oggi RSS è lo standard de facto per l'esportazione di contenuti

Web.

Syndication:.• modello syndication : l'affidamento dei testi a un'agenzia che

provvede a distribuirli a siti e riviste.• Il concetto centrale è quello della redistribuzione e del riuso dei

contenuti • La parola è usata anche per un sistema di collaborazione e

collegamento tra reti televisive o radiofoniche. Una rete produce un programma e poi lo distribuisce su un certo numero di stazioni locali.

Feed• Tipo di contenuto frequentemente aggiornato pubblicato da un sito web. Utilizzato per i notiziari web, blog, contenuti digitali (immagini, audio o filmati).

• Un feed può presentare gli stessi contenuti di una pagina web , ma in un formato spesso diverso

• Possono essere utilizzati per fornire contenuti audio, generalmente in formato MP3, da ascoltare direttamente dal computer o tramite lettore MP3 (podcasting)

ChannelMezzo trasmissivo per l’informazione contenuta nel feed.

Nel dicembre 2005, il dizionario americano New Oxford ha dichiarato Podcasting "parola dell'anno", definendo il termine come "registrazione digitale di una trasmissione radiofonica o simili, resa disponibile su internet con lo scopo di permettere il download su riproduttori audio personali".

Podcasting è un neologismo basato sulla fusione di due parole: iPod (il popolare riproduttore di file audio MP3 di Apple), e broadcasting. Il termine nacque quando l'uso dei feed RSS divenne popolare per lo scambio di registrazioni audio su computer, palmari, lettori di musica digitale e anche telefoni cellulari.

• Per accedere ai contenuti disponibili in RSS occorre installare sul proprio pc un RSS Reader scaricabile direttamente dal web. Ne esistono diversi tipi, disponibili sia gratuitamente sia a pagamento.

•Esempi:- Feed Reader (Microsoft)- Akregator (Linux)- Sage (Mozilla, Firefox)

• Dopo aver scaricato e installato il programma sul pcbasta aggiungere l'indirizzo dei feed prescelti. Per fare questo occorre cliccare col tasto destro del mouse sul pulsante RSS, scegliere "copia collegamento" e incollare il link nell’aggregatore appena installato.E sei pronto a ricevere gli ultimi aggiornamenti in tempo reale.

• Un documento RSS è conforme alla specifica di XML 1.0 e deve essere pertanto ben formato.

• Esistono diverse versioni di RSS: RSS 91, 92 93, 94RSS 1.0, RSS 2.0.

• Nonostante le differenti implementazioni delle diverse versioni, i documenti RSS condividono tutti la stessa struttura di base.

<?xml version="1.0"?><rss version="0.91"><channel><title>HTML.it News</title><link>http://webnews.html.it/</link><description>Le News di HTML.it sul mondo Hi-Tech</description><item><title>Italiani: senza fili e senza banda</title><link>http://webnews.html.it/news/1066.htm</link><description>L'Italia si conferma il paese europeocon la maggior presenza di telefonini. Tutt'altra storia, invece, per labanda larga.</description></item></channel></rss>

• elemento radice. È quello che deve contenere tutti gli altri elementi.

• elemento <channel> con i suoi sottoelementi. Quelli richiesti sono tre e definiscono le informazioni essenziali sul canale: <title> definisce il nome, <link> il suo URL, <description> fornisce una descrizione sintetica.

• All'interno di <channel>, trovano posto i vari <item> che compongono un feed: corrispondono ai post di un weblog, alle notizie di un sito di news, etc. La gestione di un singolo item (cosa pubblicare e come) è riservata all'autore. Si può decidere di fornire solo l'URL e il titolo, per esempio. O aggiungere una descrizione. Questa potrà essere una sintesi di un articolo, un estratto contenente solo la prima parte o il testo completo. Nessuno di questi elementi è obbligatorio, ma lo schema tipico è quello riportato qui sopra.

• Altri metadati possono arricchire l'informazione: l'autore, la data di pubblicazione, la categoria o l'ambito semantico di appartenza, etc. Il numero di item presenti in un feed, infine, è una libera scelta dell'autore.

Interpretazione di un documento RSS

• Un'applicazione in grado di interpretare un documento RSS ne effettua il parsing, ovvero una scansione del documento che individua i tag e isola i diversi elementi.

• Un feed reader è un programma in grado di effettuare il download di un feed RSS (è sufficiente che l'utente indichi al programma l‘URL del feed), effettuarne il parsing e visualizzarne i contenuti in base alle preferenze

dell'utente (es..può estrarre i titoli di tutti gli elementi item per visualizzare la lista degli articoli di un giornale online),

•Spesso i feed reader sono dotati di funzionalità avanzate; ad esempio sono in grado di rilevare automaticamente se il produttore del feed ha effettuato aggiornamenti al feed stesso, effettuandone il download a intervalli di tempo regolari

• Un aggregatore Web può estrarre i contenuti del feed per convertirli in linguaggio html e incorporarli all'interno delle proprie pagine.

.

Ci sono molti feed reader in circolazione: alcuni sono applicazioni stand-alone, altri funzionano come plug-in all'interno di altri programmi (ad esempio plug-inper programmi di posta elettronica o browser Web). Altri sono applicazioni in grado di convertire un feed RSS in una serie di post in formato leggibile dai più popolari newsreader (come, ad esempio, Mozilla Thunderbird, Forté Agent, etcetera): un esempio di questi software è nntp//rss, oppure RSS FeedConverter uno script per il popolare mail-newsserver Hamster. Un esempio di feed reader stand alone è, invece, FeedReader, programma free (distribuito con licenza GNU GPL) per piattaforme Microsoft Windows. Nella parte sinistra dell'interfaccia è mostrato l'elenco dei feed impostati dall'utente; nella parte in alto a destra l'elenco dei singoli contenuti del feed selezionato; nella parte principale l'intero contenuto testuale di un articolo. Alcuni feed reader, come ad esempio RssFeedEater, un programma shareware per Windows, permettono anche di inviare via mail o di scrivere su un blog le informazioni ricevute dai feed. Altri esempi di feed reader stand-alone e gratuiti ma per piattaforme Linux/GNUstep sono: Ticker o Liferea (LInux FEed REAder). Ci sono poi lettori di feed con molte funzionalità aggiunte: GreatNews permette di

aggregare anche i commenti all'interno del post (sui blog che rendonodisponibili i commenti via RSS

Scenario WebScenario Web______________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________

CLIENT:CLIENT:visualizzazione graficavisualizzazione graficadinamica e possibilitàdinamica e possibilità

di fare semplicidi fare semplicielaborazioni in localeelaborazioni in locale

SERVER: SERVER: linguaggi dedicati elinguaggi dedicati epagine aggiornate pagine aggiornate dinamicamente adinamicamente apartire da sistemipartire da sistemi

informativiinformativi

§§ Modello potente e dalle grandi potenzialitàModello potente e dalle grandi potenzialit১ Scarsa interattività e lunghe attese per l’utenteScarsa interattività e lunghe attese per l’utente§§ Forte sbilanciamento verso il serverForte sbilanciamento verso il server

Web 2.0Web 2.0______________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________

OBIETTIVOOBIETTIVOREALIZZARE APPLICAZIONI WEB REALIZZARE APPLICAZIONI WEB COME APPLICAZIONI DESKTOPCOME APPLICAZIONI DESKTOP

“Web “Web RichRich ApplicationApplication””

§§ Applicazioni ricche, dinamiche e velociApplicazioni ricche, dinamiche e veloci§§ Necessità di Necessità di forteforte interattivitàinterattivit১ Niente più attese per l’utenteNiente più attese per l’utente

Ajax & Web 2.0Ajax & Web 2.0______________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________

AAsynchronoussynchronous

JJavaScriptavaScript

AAndnd

XXMLML

§§ Tecnica recente (Febbraio 2005)Tecnica recente (Febbraio 2005)§§ che offre qualcosa di nuovo dal punto di vistache offre qualcosa di nuovo dal punto di vista

dell’utente anche se... dell’utente anche se... §§ .....in.in realtà è un insieme di tecnologie già noterealtà è un insieme di tecnologie già note

Nuovo modo Nuovo modo di concepire e creare le di concepire e creare le

applicazioni Webapplicazioni Web

Ajax:Ajax: che cos’è?che cos’è?______________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________

§§ Non è Non è nènè un linguaggio di programmazione, un linguaggio di programmazione, nènè una nuova tecnologiauna nuova tecnologia

§§ È È unouno stile architetturale composto da diverse stile architetturale composto da diverse tecnologie già note:tecnologie già note:

•• HTML e CSS:HTML e CSS: presentazione e visualizzazionepresentazione e visualizzazione•• DOM:DOM: aggiornamento dinamicoaggiornamento dinamico•• XML XML –– JSON: JSON: scambio e codifica dei dati scambio e codifica dei dati •• JavaScript:JavaScript: interazione asincronainterazione asincrona

§§ Quale è la NOVITQuale è la NOVITÀ?À?Interazione asincrona con il serverInterazione asincrona con il server

AApplicazioni classiche vs. Ajaxpplicazioni classiche vs. Ajax______________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________

§§ Natura “start/stop/start/stop”Natura “start/stop/start/stop”

§§ Ciclo richiesta/risposta sincronoCiclo richiesta/risposta sincrono

§§ RefreshRefresh completo della pagina:completo della pagina:utente costretto a lunghe atteseutente costretto a lunghe attese

§§ Flusso di lavoro continuo senza atteseFlusso di lavoro continuo senza attese

§§ Ciclo richiesta/risposta asincrono, Ciclo richiesta/risposta asincrono, richieste in backgroundrichieste in background§§ RefreshRefresh parziale della pagina:parziale della pagina:

nessuna attesa per l’utentenessuna attesa per l’utente

Ajax: Ajax: modellomodello______________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________

CLIENTCLIENT piattaforma programmabilepiattaforma programmabile

§§ Non più solo Non più solo renderingrendering§§ AjaxAjax--engineengine: intermediario fra client e server: intermediario fra client e server§§ Trasparente all’ utenteTrasparente all’ utente§§ Gestisce la comunicazione asincronaGestisce la comunicazione asincrona§§ Gestisce l’interfaccia utenteGestisce l’interfaccia utente

SERVERSERVER evoluzione del ruoloevoluzione del ruolo

§§ Aumento potenza di elaborazioneAumento potenza di elaborazione§§ Interfacciamento con altri sistemiInterfacciamento con altri sistemi§§ Trasmette al client solo i dati strettamenteTrasmette al client solo i dati strettamente

necessarinecessari

Nuovo Nuovo modello, nuovi problemimodello, nuovi problemi______________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________

Le applicazioni Ajax sembrano risolvere Le applicazioni Ajax sembrano risolvere tutti i nostri problemi, ma non è così!tutti i nostri problemi, ma non è così!

1.1. Complessità:Complessità:bilanciamento fra logica lato client e lato serverbilanciamento fra logica lato client e lato server

2.2. Compatibilità:Compatibilità:gestione dei diversi browsergestione dei diversi browser

3.3. Sicurezza: Sicurezza: facilità di scrivere codice non sicuro e facilmente facilità di scrivere codice non sicuro e facilmente accessibileaccessibile

4.4. Sovraccarico del server:Sovraccarico del server:specialmente in applicazioni specialmente in applicazioni realreal--timetime è un rischio è un rischio molto concretomolto concreto

Evoluzione di Ajax:Evoluzione di Ajax: CometComet______________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________

AJAX AJAX »» pollingpolling verso il serververso il server

Il client ad intervalli regolari interroga ilIl client ad intervalli regolari interroga ilserver per sapere se ci sono server per sapere se ci sono aggiornamentiaggiornamenti

§§ Una connessione per ogni richiestaUna connessione per ogni richiesta§§ Bassa frequenza di aggiornamento: Bassa frequenza di aggiornamento:

dati non aggiornatidati non aggiornati§§ Sovraccarico del serverSovraccarico del server

COMET COMET »» push verso il serverpush verso il server

Il client chiede al server di notificargliIl client chiede al server di notificargligli aggiornamenti non appena i datigli aggiornamenti non appena i dativengono aggiornativengono aggiornati

§§ Unica connessione per tutte le richiesteUnica connessione per tutte le richieste§§ Alta frequenza di aggiornamento:Alta frequenza di aggiornamento:

dati sempre aggiornatidati sempre aggiornati

Approccio integratoApproccio integrato

Combinare le due tecniche Combinare le due tecniche per avere i benefici di entrambeper avere i benefici di entrambe

Considerazioni finaliConsiderazioni finali______________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________

§§ Tecnologia ancora acerba, ma dalleTecnologia ancora acerba, ma dallegrandi potenzialità per il futurograndi potenzialità per il futuro

§§ Problemi di gioventù legati alla Problemi di gioventù legati alla scarsa scarsa compatibilità con le applicazioni già compatibilità con le applicazioni già esistentiesistenti

§§ Limiti legati al protocollo HTTP sottostanteLimiti legati al protocollo HTTP sottostantevedi “vedi “pollingpolling” verso il server” verso il server

... e in futuro?... e in futuro?

§§ StandardizzazioneStandardizzazione

§§ Compatibilità crossCompatibilità cross--browserbrowser

§§ Applicazioni desktop sul WebApplicazioni desktop sul Web

AJAX (Asynchronous Javascript And XML)

.• Insieme di tecnologie: HTML, CSS (Cascading Style Sheets), Javascript e XML

•. Usato per ottenere applicazioni web caratterizzate da un comportamento particolarmente interattivo.

• Client ricchi di funzionalità

•Asynchronous: non attesa. Il browser invia una richiesta ad un server e non attende la risposta. Il browser può effettuare più richieste contemporaneamente e gestire le risposte non appena arrivano dal server.

• Javascript, linguaggio client side, permette di :- Aggiornare parte di una pagina HTML senza che questa venga

ricaricata- Effettuare richieste tramite HTTP

• Tecnologia usata da Google in Google Maps, Gmail e Google Suggest

Un nuovo approccio per le applicazioni web.

• Modello desktop. Es. foglio elettronico: aggiungere, eliminare, modificare dati, fare calcoli di varia natura etc.. Feedback immediato.

• Grande interattività, ma modello chiuso (contesto locale).

• Ajax: portare il modello desktop in ambito web.

Interazione client-server

Modelli:

- Sincrono:il client rimane in attesa della risposta del server

- Asincrono il client non rimane in attesa della risposta del server.

Modello sincrono

Fig. “.4

Il browser risponde ad ogni azione dell’utente sospendendo la pagina HTML corrente ed inviando una richiesta HTTP al server: Il server risponderà trasmettendo una nuova pagina HTML al browser provvederà a visualizzarla.

Modello asincrono

Fig.2.5