HTML e CSS C. Gena, C. Picardi, J. Sproston Web 2.0 e Social Network Evoluzioni del World Wide Web.

20
HTML e CSS C. Gena, C. Picardi, J. Sproston Web 2.0 e Social Network Evoluzioni del World Wide Web

Transcript of HTML e CSS C. Gena, C. Picardi, J. Sproston Web 2.0 e Social Network Evoluzioni del World Wide Web.

Page 1: HTML e CSS C. Gena, C. Picardi, J. Sproston Web 2.0 e Social Network Evoluzioni del World Wide Web.

HTML e CSSC. Gena, C. Picardi, J. Sproston

Web 2.0 e Social Network

Evoluzioni del World Wide Web

Page 2: HTML e CSS C. Gena, C. Picardi, J. Sproston Web 2.0 e Social Network Evoluzioni del World Wide Web.

2HTML e CSSC. Gena, C. Picardi,

J. Sproston

Web 2.0Web 2.0

Indica un’evoluzione rispetto al Web standardNon tanto di tipo tecnologico

l’infrastruttura tecnologica è sostanzialmente la stessaquanto nel modo di fornire e fruire i contenuti

interattività: le pagine Web sono dinamiche, interagiscono con gli utenti che forniscono i contenuti e non si limitano a fruirli

interconnettività: i siti sono costruiti in modo distribuito sfruttando funzionalità provenienti da sviluppatori diversi

Fenomeno di tipo socialedecentramento dell’autorità, libertà di condivisione e riutilizzo di informazioni e servizi

Page 3: HTML e CSS C. Gena, C. Picardi, J. Sproston Web 2.0 e Social Network Evoluzioni del World Wide Web.

3HTML e CSSC. Gena, C. Picardi,

J. Sproston

EsempiEsempi

BlogWiki

MySpace

FaceBook

Flickr

Last.FM

del.icio.us

SkypeYouTube

aNobii

Page 4: HTML e CSS C. Gena, C. Picardi, J. Sproston Web 2.0 e Social Network Evoluzioni del World Wide Web.

4HTML e CSSC. Gena, C. Picardi,

J. Sproston

CaratteristicheCaratteristiche

I siti funzionano come veri e propri software Gli utenti possiedono contenuti (testi, musiche,

immagini, filmati, …) ospitati sui siti e dunque controllano una parte dei siti stessi

In sostanza gli utenti sono incoraggiati a dare un valore aggiunto ai siti tramite la condivisione dei propri contenuti

Sono anche incoraggiati a collaborare e cooperare in questo senso: in questo modo viene anche promossa la socializzazione (Social Software & Social Network)

Tecnologia basata su AJAXun’insieme di tecnologie del Web con cui si possono

implementare applicazioni lato client che comunicano con un server “in background”, senza interferire con lo stato corrente della pagina visualizzata.

Page 5: HTML e CSS C. Gena, C. Picardi, J. Sproston Web 2.0 e Social Network Evoluzioni del World Wide Web.

5HTML e CSSC. Gena, C. Picardi,

J. Sproston

HTTP Server

Pagine statichePagine statiche

foto.jpg

Altri file multimediali

<HTML><HEAD><TITLE> Pagina di Claudia</TITLE><LINK.../></HEAD><BODY><H1>Il mio testo </H1><P> Questo è il testo che voglio visualizzare nella mia pagina Web. Ecco la mia foto.<IMG.../></P><P>Questo è il <A ...>sito di mio cugino</A>.</P></BODY></HTML>

pagina .html

BODY{ color:...; border:...; margin:....; ...}H1{ color:...; border:...; margin:....; ...}P{ color:...; border:...; margin:....; ...}

stile .css

Browser

scarica

visu

alizza

Page 6: HTML e CSS C. Gena, C. Picardi, J. Sproston Web 2.0 e Social Network Evoluzioni del World Wide Web.

6HTML e CSSC. Gena, C. Picardi,

J. Sproston

HTTP Server

Programmi lato serverProgrammi lato server

Browser

scarica

visu

alizza

dati

prog

<HTML>…</HTML>

pagina

Page 7: HTML e CSS C. Gena, C. Picardi, J. Sproston Web 2.0 e Social Network Evoluzioni del World Wide Web.

7HTML e CSSC. Gena, C. Picardi,

J. Sproston

HTTP Server

Programmi lato clientProgrammi lato client

Browser

dati

prog

scarica

dati

prog

<HTML>…</HTML>

pagina

visu

alizza

Page 8: HTML e CSS C. Gena, C. Picardi, J. Sproston Web 2.0 e Social Network Evoluzioni del World Wide Web.

8HTML e CSSC. Gena, C. Picardi,

J. Sproston

HTTP Server

AJAXAJAX

Browser

dati

prog

background Browser

scarica

dati

prog

<HTML>…</HTML>

pagina

visu

alizza

Page 9: HTML e CSS C. Gena, C. Picardi, J. Sproston Web 2.0 e Social Network Evoluzioni del World Wide Web.

9HTML e CSSC. Gena, C. Picardi,

J. Sproston

HTTP Server

AJAXAJAX

Browser

dati

prog

background Browser

dati

prog

<HTML>…</HTML>

pagina

visu

alizza

continua a comunicare col server e a elaborare dati, senza necessariamente modificare la pagina

Page 10: HTML e CSS C. Gena, C. Picardi, J. Sproston Web 2.0 e Social Network Evoluzioni del World Wide Web.

10HTML e CSSC. Gena, C. Picardi,

J. Sproston

HTTP Server

AJAXAJAX

Browser

dati

prog

background Browser

dati

prog

<HTML>…</HTML>

pagina

visu

alizza

aggiorna la pagina solo quando l’interazione lo richiede (in modo asincrono rispetto all’elaborazione)

Page 11: HTML e CSS C. Gena, C. Picardi, J. Sproston Web 2.0 e Social Network Evoluzioni del World Wide Web.

11HTML e CSSC. Gena, C. Picardi,

J. Sproston

Funzionalità comuni [McAfee, 2006]Funzionalità comuni [McAfee, 2006]

Search: per reperire facilmente le informazioni Links: uso del numero di collegamenti per valutare la

bontà/utilità di una paginaes. PageRank di Google

Authoring: per creare contenuti in costante aggiornamento in alcuni casi in modo collaborativo da parte di diversi utenti (es.

Wiki) Tags: gli utenti possono assegnare etichette ai contenuti

classificazione flessibile, folksonomie Extensions: possibilità di costruire su quanto esistente per

fornire nuove funzionalitàes. raccomandazione di contenuties. creazione di associazioni fra contenuti e fra utenti social

network Signals: uso di RSS per avvisare gli utenti degli

aggiornamenti dei contenuti

SearchLinksAuthoringTagsExtensionsSignals

SearchLinksAuthoringTagsExtensionsSignals

Page 12: HTML e CSS C. Gena, C. Picardi, J. Sproston Web 2.0 e Social Network Evoluzioni del World Wide Web.

12HTML e CSSC. Gena, C. Picardi,

J. Sproston

Wiki & WikipediaWiki & Wikipedia

Wiki: collezione di pagine Web progettate in modo che chiunque possa modificarne il contenuto utilizzando un markup language semplificato

ideato da Ward Cunningham nel 1994l’idea è che le pagine possano essere modificate

direttamente sul WebWiki in Hawaiano significa “veloce”

Wikipedia è il wiki più famosoSi tratta di una enciclopedia online scritta

collaborativamente dagli utentiIn una prima fase chiunque poteva modificarne i contenuti

senza necessità di autenticazioneAtti di vandalismo hanno poi portato a richiedere agli utenti

che vogliono collaborare l’iscrizione al sito

http://www.wikipedia.it/

Search LinksAuthoring TagsExtensionsSignals

Search LinksAuthoring TagsExtensionsSignals

Page 13: HTML e CSS C. Gena, C. Picardi, J. Sproston Web 2.0 e Social Network Evoluzioni del World Wide Web.

13HTML e CSSC. Gena, C. Picardi,

J. Sproston

BlogBlog

Blog (da weB log): sito consistente in un insieme di interventi o articoli pubblicati con regolarità solitamente da un individuo (blogger)

tipicamente riguarda un tema specifico o funge da diario online

ciascun intervanto è detto posti post sono tipicamente pubblicati in ordine cronologico inversol’autore può mettere dei tag ai post per classificarligli altri utenti possono commentare i post dando luogo a vere e

proprie discussioniCaratteristica importante: spesso i blog contengono link ad

altri blog, e i commentatori sono spesso a loro volta autori di blog

creazione di comunità sociali di bloggers.

http://www.blogger.com/

SearchLinksAuthoring Tags ExtensionsSignals

SearchLinksAuthoring Tags ExtensionsSignals

Page 14: HTML e CSS C. Gena, C. Picardi, J. Sproston Web 2.0 e Social Network Evoluzioni del World Wide Web.

14HTML e CSSC. Gena, C. Picardi,

J. Sproston

La BlogosferaLa Blogosfera

Blogosfera: l’insieme dei blog e delle loro interconnessioni. Corrisponde alla percezione che i blog formino una comunità (o una collezione di comunità connesse fra loro) o una rete sociale.

Questa caratteristica viene messa in evidenza dai siti che si propongono come motori di ricerca per blog

Essi sfruttanoi tag per classificare i blogi collegamenti fra blog per stabilirne la popolarità

Tali siti sono anche in grado di studiare statisticamente i trend nel blogging

i blog sono diventati un elemento rilevante nell’analisi dell’opinione pubblica

http://www.technorati.com/

Search Links AuthoringTags ExtensionsSignals

Search Links AuthoringTags ExtensionsSignals

Page 15: HTML e CSS C. Gena, C. Picardi, J. Sproston Web 2.0 e Social Network Evoluzioni del World Wide Web.

15HTML e CSSC. Gena, C. Picardi,

J. Sproston

Servizi di Social NetworkingServizi di Social Networking

Siti web che promuovono la socializzazione fra gli utenti e la conseguente creazione di reti sociali

La socializzazione avviene intorno alla condivisione di contenuti o risorse (a tema o meno, a seconda del sito)

Caratteristiche comuni:Ciascun utente può fornire risorse di cui resta proprietario,

ma che condivide con gli altriTipicamente gli utenti possono “taggare” o commentare le

risorse (proprie e/o altrui)Gli utenti possono dichiarare relazioni di “amicizia” verso

altri utenti con cui sono interessati a rimanere in contatto o della cui attività vogliono essere informati

Oltre alla rete di utenti si può creare anche una rete di risorse, grazie ai tag, ai commenti, etc.

http://en.wikipedia.org/wiki/List_of_social_networking_websites

Page 16: HTML e CSS C. Gena, C. Picardi, J. Sproston Web 2.0 e Social Network Evoluzioni del World Wide Web.

16HTML e CSSC. Gena, C. Picardi,

J. Sproston

Esempio: aNobiiEsempio: aNobii

Servizio di Social Networking a tema: libriil nome viene dall’Anobium punctatum, o tarlo della carta

ciascun utente ha una libreria in cui inserisce i libri in suo possesso o che ha comunque letto

i libri possono essere taggati, votati e commentatii commenti possono essere valutati dagli altri utenti, che

possono anche risponderegli utenti possono dichiararsi amici o vicini

l’amicizia deve essere reciproca (ossia deve essere dichiarata da entrambi)

la vicinanza può non essere reciproca: scelgo come vicini coloro che hanno librerie interessanti, per essere avvertito di ciò che fanno sul sito

aspetto interessante: raccomandazione di libri e di persone con gusti simili

localizzazione geografica: posso restringere al mio paese o alla mia città

http://www.anobii.com/

Search LinksAuthoring ()Tags Extensions Signals

Search LinksAuthoring ()Tags Extensions Signals

Page 17: HTML e CSS C. Gena, C. Picardi, J. Sproston Web 2.0 e Social Network Evoluzioni del World Wide Web.

17HTML e CSSC. Gena, C. Picardi,

J. Sproston

Esempio: FaceBookEsempio: FaceBook

FaceBook non è a temaLo scopo principale è tenere in contatto persone che si conoscono

Gli utenti tipicamente si dichiarano amici se si conoscono realmenteCiascun utente può condividere risorse di varia natura (per lo più testi,

immagini, eventi, o collegamenti ad altri siti)Gli utenti sono invogliati a dichiarare i loro interessi tramite i

meccanismi dei Gruppi e delle Pagine dedicate a persone o cose note (si può essere fan della nutella come di beethoven)

Caratteristiche particolari: sistema aperto: chiunque può sviluppare applicazioni per FaceBook che

sfruttano la rete sociale molto diffusi quiz, test psicologici, giochi, etc

gli utenti possono commentare ciò che i loro amici fanno, per cui qualunque attività su FB può diventare oggetto di conversazioni di gruppo

tagging degli utenti nelle foto: meccanismo assai potente (e assai pericoloso…?)

http://www.facebook.com/

Search LinksAuthoring Tags ()Extensions Signals

Search LinksAuthoring Tags ()Extensions Signals

Page 18: HTML e CSS C. Gena, C. Picardi, J. Sproston Web 2.0 e Social Network Evoluzioni del World Wide Web.

18HTML e CSSC. Gena, C. Picardi,

J. Sproston

Funzionalità comuni [McAfee, 2006]Funzionalità comuni [McAfee, 2006]

Search: per reperire facilmente le informazioni Links: uso del numero di collegamenti per valutare la

bontà/utilità di una paginaes. PageRank di Google

Authoring: per creare contenuti in costante aggiornamento in alcuni casi in modo collaborativo da parte di diversi utenti (es.

Wiki) Tags: gli utenti possono assegnare etichette ai contenuti

classificazione flessibile, folksonomie Extensions: possibilità di costruire su quanto esistente per

fornire nuove funzionalitàes. raccomandazione di contenuties. creazione di associazioni fra contenuti e fra utenti social

network Signals: uso di RSS per avvisare gli utenti degli

aggiornamenti dei contenuti

Page 19: HTML e CSS C. Gena, C. Picardi, J. Sproston Web 2.0 e Social Network Evoluzioni del World Wide Web.

19HTML e CSSC. Gena, C. Picardi,

J. Sproston

FolksonomieFolksonomie

Una tassonomia è una classificazione gerarchica di concetti

Tipicamente strutturata ad alberoEs. classificazione delle forme di vita in biologia

Folksonomia = Folk + TassonomiaTassonomia popolarePiuttosto che essere stabilita a priori, emerge dall’attività

delle persone, in questo caso il tagging delle risorseSi tratta quindi di una classificazione delle risorse che non è

stabilita a priori, ma nasce dal basso, a partire dai tag che gli utenti assegnano

Page 20: HTML e CSS C. Gena, C. Picardi, J. Sproston Web 2.0 e Social Network Evoluzioni del World Wide Web.

20HTML e CSSC. Gena, C. Picardi,

J. Sproston

RSS RSS

RSS = Really Simple Syndicationè un insieme di formati XML usati dai siti Web per diffondere notizie

dai siti dei quotidiani per le notizie dell’ultima oradai siti di blogging o social networking per informare

degli aggiornamenti delle risorse…

Gli utenti possono “iscriversi” ad un canale RSSad esempio alla sezione Cronaca di Repubblica

Il Browser controlla l’RSS e avverte l’utente degli aggiornamenti, evitandogli di dover controllare personalmente tutti i siti a cui è interessato.