Web 2.0: tecnologie e applicazionivision.unipv.it/wdt-cim/aa12/wdtcim-16.pdf · 2 I siti del Web...

1

Web 2.0: tecnologie e applicazioniWeb 2.0: tecnologie e applicazioni

1Marco Porta - CIM: Web Design & Technologies

Non è una nuova tecnologia, ma piuttosto un insieme di tecnologie

Cos'è il Web 2.0? ...Cos'è il Web 2.0? ...L'evoluzione del Web

tecnologiee il W3C non c'entra…

Termine coniato da Tim O’Reilly in una conferenza del 2004fondatore e CEO di O'Reilly Media, Inc.[http://oreilly.com/web2/archive/what-is-web-20.html]

Si fonda su una nuova "filosofia" per l'utilizzo del Web


Si fonda su una nuova "filosofia" per l'utilizzo del Webl'utente, normalmente navigatore passivo nel "Web 1.0", nel Web 2.0 diventa parte attiva, fornendo anche il suo contributo (e i contenuti variano in genere molto frequentemente…)

2

I siti del Web 2.0 fanno ampio uso delle tecnologie per l'interazione

… cos'è il Web 2.0?… cos'è il Web 2.0?L'evoluzione del Web

l interazionesia lato client, sia (soprattutto) lato server: l'HTML non basta…

The term “Web 2.0” is commonly associated with web applications that facilitate interactive information sharing, interoperability, user-centered design, and collaboration on the World Wide Web. Examples of Web 2.0 include web-based communities, hosted services, web applications, social-networking sites, video-sharing sites, wikis, blogs, mashups, and


g g g pfolksonomies. A Web 2.0 site allows its users to interact with other users or to change website content, in contrast to non-interactive websites where users are limited to the passive viewing of information that is provided to them [Wikipedia, http://en.wikipedia.org/wiki/Web_2.0]

Web 2.0Web 2.0I protagonisti


3

Web 2.0Web 2.0I protagonisti


Da Web log"online journals" di individui o organizzazioni – Coprono in pratica

Diari online: i Diari online: i blogblogAlcuni servizi e tecnologie del Web 2.0

online journals di individui o organizzazioni – Coprono in pratica qualunque argomento

Aggiornamento (in genere) frequenteanche quotidianamente – I "post" (ordinati cronologicamente) possono includere testo, immagini e elementi multimediali in genere

I lettori possono rispondere ai post dell'autore


come per l'implementazione dei forum (anch'essi parte del Web 2.0), sono richieste opportune tecnologie lato server… ma esistono servizi on-line che fanno quasi tutto da soli nella creazione dell'"impianto tecnologico" (database, ecc.)

4

Facebook è il più famoso, ma non l'unicone esistono a decine

Social networkSocial networkAlcuni servizi e tecnologie del Web 2.0

ne esistono a decine… [http://en.wikipedia.org/wiki/List_of_social_networking_websites]• MySpace• LinkedIn • Xing• …

È


È possibile anche costruire propri SN personalizzati es. NING [http://www.ning.com/]

WikiWikiWeb• primo wiki in assoluto, creato da Ward Cunningham nel

WikiWikiAlcuni servizi e tecnologie del Web 2.0

primo wiki in assoluto, creato da Ward Cunningham nel 1994 [http://c2.com/cgi/wiki?WikiWikiWeb]

• termine "wiki" ispirato al bus di linea dell'aeroporto di Honolulu, chiamato, in espressione hawaiana, "wiki wiki" (= veloce)

Wikipediail più famoso esempio di "creazione collaborativa" di contenuti


contenuti…

Esistono molte "piattaforme" open source per la creazione wiki

es. MediaWiki [http://www.mediawiki.org/wiki/MediaWiki]

5

Photo sharinges Flickr [http://www flickr com/]

ContentContent sharingsharingAlcuni servizi e tecnologie del Web 2.0

es. Flickr [http://www.flickr.com/]

Video sharinges. YouTube [http://www.youtube.com/]

Presentation sharing


es. Slideshare [http://www.slideshare.net/]

…

Acronimo di Really Simple Syndicationè f t b t XML l i i

FeedFeed RSSRSSAlcuni servizi e tecnologie del Web 2.0

è un formato basato su XML per la ricezione "automatica" di contenuto

Come funzionano?si effettua una sottoscrizione ai feed che interessano sui siti che li offrono; si usa poi un reader che periodicamente controlla se ci sono novità (ad esempio Internet Explorer e Mozilla Firefox includono lettori di feed )


lettori di feed…)

Indicano una certa "attenzione" nei confronti dell'utente…quasi sinonimo di "sito attivo"…

6

Dai Dai prodotti prodotti ai ai servizi servizi (?)(?)Perché il Web 2.0?

Esempio tipico: Netscape vs. GoogleN t è t ft i è d tt– Netscape è nato come software, cioè come prodotto(il browser Web, da installare, aggiornare, ecc.)

– Google è nato da subito come applicazione Web nativa, cioè come servizio

Applicazioni on-line come naturale evoluzione delle li i i ff li ?


applicazioni off-line?– utenti "co-sviluppatori" (si sa subito come usano il prodotto…)– indipendenza dalla piattaforma

Verso il Verso il cloudcloud computingcomputing (?)(?)Perché il Web 2.0?

Tutto in retetutto è "la fuori" nella rete, delocalizzato, distribuito… nella "nuvola" , ,di Internet

Esempio eclatante di cloud computing: Google Chrome OSGoogle Chrome OS is an open source, lightweight operating system that will initially be targeted at netbooks. […] We're designing the OS to be fast and lightweight, to start up and get you onto the web in a fe seconds The ser interface is minimal to sta


in a few seconds. The user interface is minimal to stay out of your way, and most of the user experience takes place on the web.[http://googleblog.blogspot.com/2009/07/introducing-google-chrome-os.html]

7

Le tecnologie per il Web 2.0Le tecnologie per il Web 2.0


Le Rich Internet Applications (RIA) sono "applicazioni Web" con caratteristiche simili a quelle dei programmi ordinari

RichRich Internet Internet ApplicationsApplicationsOltre il markup

con caratteristiche simili a quelle dei programmi ordinaridi solito funzionano in un browser… in pratica sono pagine web che si comportano parzialmente o totalmente come applicazioni desktop

Le RIA si distinguono in genere per la loro interattivitàrispetto alle pagine "tradizionali", in cui le uniche forme di interazione possibili sono date dal "click" e dalle funzionalità dei f


form…

Le RIA sono particolarmente adatte al Web 2.0sono il suo motore…

8

L’HTML da solo non permette di codificare interazioni con l’utente (a parte il semplice clic sui link e l’inserimento dei

Siti web interattiviSiti web interattiviOltre il markup

l utente (a parte il semplice clic sui link e l inserimento dei dati nei form…)

Esempi di interazioni: immagine che cambia quando il cursore del mouse le passa sopra, contenuto della pagina che cambia alla pressione di un bottone, finestra di popup che informa del verificarsi di un errore, …


Per creare interazioni è di solito necessario utilizzare codice di programmazione

Nell’interazione lato client, il comportamento interattivo

Interazione Interazione latolato clientclient e e lato serverlato serverTipi di interazione web

, pdella pagina è definito da codice che viene eseguito sulla macchina dell’utente

es. JavaScript, applet Java, Flash, controlli ActiveX, …

Nell’interazione lato server, il comportamento interattivo della pagina è definito da codice che viene eseguito sul server


server programmi CGI e application server

9

• JavaScript (DHTML = HTML + CSS + JavaScript)

Principali tecnologie lato clientPrincipali tecnologie lato clientInterazione lato client

• Adobe Flash permette di creare animazioni vettoriali e di definire comportamenti interattivi (all'interno di aree rettangolari)

come per le applet Java, il codice (binario) risiede in file esterni

• I controlli ActiveX (Windows) sono componenti software h il ti d di i li i


che possono essere sviluppati usando diversi linguaggi solo Internet Explorer è in grado di eseguire i controlli ActiveX (gli altri browser necessitano di un plugin) - Fattore di rischio: accesso completo al sistema operativo (Windows)…

Un sito dinamico è un sito il cui contenuto (o una parte dei suoi contenuti) viene generato "on-demand" cioè quando

Siti web Siti web dinamici…dinamici…Interazione lato server

suoi contenuti) viene generato on-demand , cioè quando serve…

• si pensi ai molti siti il cui contenuto proviene da database: inquesto caso i dati non sono memorizzati in file HTMLpredefiniti, ma sono generati "al volo" quando le pagine sonorichieste (quando devono cioè essere inviati all’utente)

• la generazione dinamica del contenuto è generalmente affidata a


programmi CGI o application server, che risiedono sul server

ma una pagina può essere resa dinamica anche dalle tecnologie lato client…

10

Si pensi al caso in cui i dati inseriti in un form vengono di solito inviati al server dove sono elaborati in qualche modo

… siti web … siti web dinamici…dinamici…Interazione lato server

solito inviati al server, dove sono elaborati in qualche modo (da un programma o da una pagina "speciale"…)

l’utente potrebbe quindi ricevere una pagina di risposta il cui contenuto non è staticamente definito, ma dipende proprio dai dati che


aveva inserito nel modulo

… siti web dinamici… siti web dinamiciInterazione lato server

Attenzione a non confondere siti interattivi e siti dinamici• un sito può essere interattivo senza essere dinamico

es. pagina con effetto rollover

• un sito può essere dinamico senza essere interattivoes. quotidiano online senza funzionalità interattive


11

• Programmi CGItili ti i l b i d i d ti i iti i f ( d i l

Principali tecnologie lato serverPrincipali tecnologie lato serverInterazione lato server

utilizzo tipico: elaborazione dei dati inseriti nei form (ad esempio la loro memorizzazione in file o database) e la generazione di contenuto dinamico (che viene inviato al client e visualizzato dal browser)Es. definizione di un form i cui dati saranno inviati al programma elabora.tcl:<form name="f" method="get"

i / i bi / l b l


action="/cgi-bin/elabora.tcl">

• Software aggiuntivo che viene installato su una macchina server (in genere quella che ospita il Web server) ed è in

Application serverApplication serverInterazione lato server

server (in genere quella che ospita il Web server) ed è in grado di interpretare ed eseguire codice di programmazione scritto in un linguaggio specifico; gli application server più diffusi sono PHP e ASP

• Utilizzi analoghi a quelli dei programmi CGI

A differenza dei programmi CGI il codice di


• A differenza dei programmi CGI, il codice di programmazione può essere integrato direttamente nell’HTML

12

Un esempio PHPUn esempio PHPInterazione lato server

<html><head>

<title>Test</title></head><body>

<h2>Test</h2><hr/><h2>Test</h2><hr/><form method="post" action="result.php"/>

Nome <input type="text" name="nome" size="10"/>

Età<input type="text" name="eta" size="4"/><br/><br/><br/> <input type="submit" value="Invia"/>

</form> </body>

</html>

<html><head>

<title>Test</title></head><body>

<h2>Test PHP</h2><hr/><?php

$nome = $_REQUEST['nome'];$eta = $_REQUEST['eta'];echo "Ciao $nome, hai $eta anni!"

?><br/><?php

if ( $ t > 49 )


if ( $eta > 49 )echo "$nome, la vita inizia a cinquant'anni...";

elseif ( $eta > 29 )echo "$nome, sei giovane";

elseecho "$nome, sei molto giovane!";

endif;?>

</body></html>

Ogni organizzazione è dotata di un sistema informativoormai praticamente sempre automatizzato…

Database…Database…Interazione lato server

p p

Sistema informativo automatizzato sistema informaticonei sistemi informatici, le informazioni vengono rappresentate per mezzo di dati

Informazione= elemento che permette di avere una conoscenza di fatti, situazioni

“ di di ”


o “modi di essere”

Dato= elemento di informazione costituito da simboli che si prestano ad

essere elaborati (es.: Mario Bianchi e 025053459 ...)

13

Un DBMS (DataBase Management System) è una collezione di dati tra loro correlati e un insieme di "modalità"

… database… databaseInterazione lato server

per accedere ad essiin genere, i DBMS sono progettati per gestire grandi quantità di dati…

Esempi di DBMSMS Access, MySQL, Oracle, MS SQL server, …

I iti di i i ( i di il W b 2 0) f i d i


I siti dinamici (e quindi il Web 2.0) fanno ampio uso dei DBMS

i contenuti forniti dagli utenti devono essere memorizzati da qualche parte…

Acronimo di Asynchronous JavaScript And XMLè t l i tili i di J i t

Interazioni più veloci: AJAXInterazioni più veloci: AJAXAltre tecnologie del Web 2.0

non è una nuova tecnologia, ma un utilizzo asincrono di Javascript che, per mezzo di un interfacciamento XML, può permettere ad un client di richiamare informazioni lato server in modo più veloce, creando nuove possibilità per lo sviluppo di rich internet applications

Richieste asincrone ai serverl'oggetto XMLHttpRequest permette di effettuare richieste di risorse a un server Web in modo indipendente dal browser Non è


risorse a un server Web in modo indipendente dal browser - Non è necessario attendere che la richiesta sia stata ultimata per effettuare altre operazioni (esempio: GoogleMaps)

14

SEO = Search Engine Optimization"strategie" per aumentare le visite a un sito attraverso i motori di

Web 2.0 e SEOWeb 2.0 e SEOSEO

g pricerca… quindi metodi per migliorare il "posizionamento"

Una corretta "politica di SEO" può essere fondamentale per la sopravvivenza di un'azienda

se Google non ti trova "non esisti" (o quasi…)

Con il Web 2.0 le strategie del SEO devono tenere conto di


gnuovi fattori

forum, social network, blog, ecc. concorrono (pesantemente) a influenzare i risultati dei motori di ricerca…

Web 2.0: tecnologie e applicazionivision.unipv.it/wdt-cim/aa12/wdtcim-16.pdf · 2 I siti del Web...

Documents

Transcript of Web 2.0: tecnologie e applicazionivision.unipv.it/wdt-cim/aa12/wdtcim-16.pdf · 2 I siti del Web...