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
2Marco Porta - CIM: Web Design & Technologies
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
3Marco Porta - CIM: Web Design & Technologies
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
4Marco Porta - CIM: Web Design & Technologies
3
Web 2.0Web 2.0I protagonisti
5Marco Porta - CIM: Web Design & Technologies
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
6Marco Porta - CIM: Web Design & Technologies
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• …
È
7Marco Porta - CIM: Web Design & Technologies
È 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
8Marco Porta - CIM: Web Design & Technologies
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
9Marco Porta - CIM: Web Design & Technologies
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 )
10Marco Porta - CIM: Web Design & Technologies
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 ?
11Marco Porta - CIM: Web Design & Technologies
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
12Marco Porta - CIM: Web Design & Technologies
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
13Marco Porta - CIM: Web Design & Technologies
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
14Marco Porta - CIM: Web Design & Technologies
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, …
15Marco Porta - CIM: Web Design & Technologies
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
16Marco Porta - CIM: Web Design & Technologies
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
17Marco Porta - CIM: Web Design & Technologies
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
18Marco Porta - CIM: Web Design & Technologies
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
19Marco Porta - CIM: Web Design & Technologies
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
20Marco Porta - CIM: Web Design & Technologies
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
21Marco Porta - CIM: Web Design & Technologies
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
22Marco Porta - CIM: Web Design & Technologies
• 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 )
23Marco Porta - CIM: Web Design & Technologies
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 ”
24Marco Porta - CIM: Web Design & Technologies
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
25Marco Porta - CIM: Web Design & Technologies
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 è
26Marco Porta - CIM: Web Design & Technologies
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
27Marco Porta - CIM: Web Design & Technologies
gnuovi fattori
forum, social network, blog, ecc. concorrono (pesantemente) a influenzare i risultati dei motori di ricerca…