Conceptes bàsics de la Web 2.0

BONES
PRÀCTIQUES EN
EL DISSENY DE
PÀGINES WEB
Curs universitat d’estiu
6 al 10 de juliol 2009

jueves 9 de julio de 2009

Conceptes bàsics de Web 2.0

Juan Manuel Gimeno Illa
jmgimeno@diei.udl.cat


Índex

• Orígens del concepte • Wikis
• Definició !? • Organització de la informació
• Característiques – Etiquetatge
• Aspectes tecnològics – Cerca
– Estàndards • Intel·ligència col·lectiva
– JavaScript – Rellevància
– Ajax – Recomanacions
• Estètica de la Web 2.0 • Aspectes econòmics
• Agregació de continguts – The Long Tail
• Blogs, Podcasts i Vodcasts • Mashups (pràctica)
• Aspectes legals • Més enllà de la Web 2.0
– Creative Commons • Una visió de conjunt


Orígens del terme Web 2.0

• El terme Web 2.0 va ser (suposadament, docs hi ha
controvèrsia) creat per Darcy Dinucci al 1999.
• En un article titulat “Fragmented Future” escrigué:
“La Web que coneixem actualment en la que es carreguen pàgines
senceres de forma estàtica, és només l’embrió de la Web que
vindrà. Les primeres pinzellades de la WEB 2.0 estan començant a
arribar, i comencem tot just a veure com aquest embrió es
desenvoluparà.... La Web ja no serà concebuda com pàgines de
text i gràfics sinó com un mecanisme de transport, l’èter en el qual
succeeix la interacció. Apareixerà ... a la pantalla de l’ordinador ...
al televisor ... al quadre de comandament del cotxe ... al telèfon
mòbil ... consoles de joc portables ... i inclús al teu microones.”

4


Orígens del terme Web 2.0

• Encara que el terme normalment s’associa amb Tim
O’Reilly, degut al congrés O’Reilly Media Web 2.0 al
2004.
• Segons Tim O’Reilly:
“La Web 2.0 és una revolució a la indústria
informàtica produïda per la transformació d’internet
en una plataforma i en l’intent de comprendre les
noves regles d’èxit en aquesta nova plataforma.”

• Hi ha persones, com Tim Berners-Lee, que creuen
que el terme és una paraula buida (“piece of jargon”)
• No pot negar-se que és un terme que ha triomfat.
5


Definició !?
• Per començar a centrar de què parlarem, podem
assajar una possible definició:
“La Web 2.0 es refereix a una segona generació de disseny i
desenvolupament web que facilita la comunicació i l’intercanvi
segur d’informació, la interoperabilitat i la col·laboració en la
WWW.”

• De cara a entendre millor aquest concepte farem ús
de dues perspectives:
–Temporal
–Característiques

6


Una perspectiva temporal

• La Web 2.0 es refereix a una segona generació de
desenvolupament i disseny web
• Neix després de l’explosió de la gran bombolla
d’internet (.com)
• Potser és conseqüència natural de la corba de
maduresa de qualsevol tecnologia.

7


La corba de maduresa

http://www.andybudd.com/presentations/dcontruct05/images/hype.png
8


Una perspectiva temporal

• Problemes:
–Tornar a recaure en els problemes del 2000
–Crear solucions on no hi ha problema
–Aplicacions “cool” però cap pla d’empresa
• Solucions:
–El mercat és molt més madur
–Es coneix millor l’economia de la Web
–S’ha après dels excessos de la crisi .com

9


Característiques

10


Característiques

• Comunicació • Estàndards
• Compartició • Usabilitat
• Interoperabilitat • Participació
• Col·laboració
• Interactivitat
• Comunitat
• Simplicitat
• Disseny
• Mobilitat
10


Característiques

• Comunicació • Estàndards
• Compartició • Usabilitat
• Interoperabilitat • Participació
Paraulos
• Col·laboració • Ajax tècnics

• Interactivitat • Rest
• Comunitat • PageRank
• Simplicitat • Beta
• Disseny • .....
• Mobilitat
10


Una forma 2.0 de presentar això

• A la web 2.0 les coses tenen etiquetes
–etiquetes de correu a gmail
–etiquetes als marcadors de del.icio.us
• Una forma de veure-les és el núvol d’etiquetes

11


Núvol d’etiquetes Web 2.0

http://en.wikipedia.org/wiki/File:Web_2.0_Map.svg


Tecnologia: Estàndards web
• Tendència a seguir els
estàndards web
• Cada vegada els
navegadors els
implementen millor
• Els estàndards cada
vegada permeten fer
millor les coses
• (Encara que continua
havent força pàgines
Web de l'autor
només IE)
13


Tecnologia: JavaScript
• Creat per Netscape
• Llenguatge que permet dotar
de dinamisme a les pàgines
web
• No té res a veure amb Java
• Llenguatge malament après i
poc comprès
• Tampoc no estava preparat per
a ser la base de la Web 2.0
• Exemple: Polaroid Photo
Viewer
Web de l'autor

14


Tecnologia: Ajax
• Permet que les pàgines
web es comportin com les
aplicacions d’escriptori
–no hi ha recàrrega de les
pàgines
–l’usuari pot continuar la
feina encara que la
transacció no hagi
acabat Web del llibre
• Asynchronous JavaScript
& XML
15


Funcionament d’Ajax

16


Disseny / Estètica
• L’estètica de la web ha canviat molt
• En part això és degut a què els nous estàndards
permeten moltes més possibilitats
• Preocupació pels estàndards (validació) i
accessibilitat
• Una forma de veure tot això és usar l’arxiu d’internet
–Web de la Paeria el 17 d’abril de 1997 i avui
–Web de la UdL el 18 de juny de 1997 i avui

17


Agregació (syndication)
• Potser uns dels elements
més importants de la web
2.0
• Permet la subscripció a un
canal d’informació
–text
–àudio
–vídeo
• Per què la gent se subscriu a (http://es.wikipedia.org/wiki/
una revista? Què guanya? Archivo:Feed-icon.svg)

18


Blogs

• Contracció del terme web-log i són pàgines web
organitzades per entrades cronològiques (a mena de
diari)
• La majoria són personals, però també n’hi ha
d’empresa o de temàtica
• No se solen llegir directament sinó amb agregació
• Faciliten dues coses:
–la creació de pàgines (motors com WordPress,
Drupal, etc.)
–la lectura ja que l’usuari normalment entèn l’estructura

19


El concepte de blogosfera

• És la comunitat col·lectiva de tots els blogs
–blogroll: recomanacions de blogs
–permalink: URL que identifica una entrada dins
d’un blog o un comentari
–linkback (refback, trackback, pingback):
mecanismes per saber qui t’enllaça
• Això genera una xarxa formada per diàlegs que es
van duent a terme entre varis blogs

20


Consum de continguts
• Depenent del tipus de contingut agregat, el podem
–Llegir en un lector de feeds com Google Reader
–Baixar al nostre reproductor MP3 (podcast)
–Baixar al nostre reproductor MP4 (videocast)
• A la web 2.0
–Un decideix quin contingut consumeix
–Qual el vol consumir
–Com el vol consumir
• Problema: com afecta això a la publicitat?

21


Podcasting

• Un podcast no és més que un conjunt de fitxers
d’àudio que s’actualitzen de forma periòdica
• El seu nom ve de P-O-D (Personal-on-demand)cast
on cast ès per similitud amb “broadcast”.
• (El terme no va sorgir a partir del iPod d’Apple)
• Ofereixen:
–Continguts alternatius (encara que els mitjans de
comunicació convencionals també n’ofereixen)
–Comoditat d’ús

22


Videocasting

• Video podcast, vodcast, vidcast (!?)
• Potser el més conegut és YouTube
–va simplificar la pujada de vídeos
• També hi ha artistes que tenen canals a YouTube,
com per exemple Monty Python
• Usos més seriosos:
–Open Course Ware Universia
–Stanford University

23


Aspectes legals

• Podem remesclar tot allò que volem?
• Un contingut que està penjat a una web (p.e. una
imatge):
–el puc baixar i usar a una presentació?
–el puc modificar i tornar-lo a pujar?
–puc barrejar-lo amb alguna cosa meva i treure profit
econòmic?
• Per tal de solucionar aquests (i d’altres) problemes
s’han creat llicències lliures
• Les més conegudes són les Creative Commons
24


Creative Commons

• CC és una organització que promou la compartició,
la remescla i la reutilització.
• Les llicències CC restringeixen alguns usos del
contingut.
• Usen la següent nomenclatura:
–BY: atribució (by)
–SA: compartir igual (share-alike)
–NC: no comercial (non commercial)
–ND: no derivats (no derivatives)

25


Creative Commons
• Les combinacions que hi ha són:
–by-nc-nd
–by-nc-sa
–by-nc
–by-nd
–by-sa
–by
• Altres iniciatives:
–Publicació científica: Science Commons
–Material educatiu: ccLearn

26


Wiki
• Concepte inicialment definit
per Ward Cunningham per a
mantenir informació d’un
projecte
• Potser la més coneguda és
la wikipèdia
–Des de 2007 es pot usar
CC amb wikipedia.
• Projecte UdL sobre gestió
de residus urbans wikipatterns.com

27


Organització de la informació
• No hi ha una millor
manera d’organitzar la
informació
• Les nostres formes de
classificar la informació
es trenquen en el món
digital:
• Solució: que siguin els
usuaris qui organitzin la
informació. Com?

28


Etiquetatge
• Els elements físics no
poden estar en més d’un
lloc al mateix temps.
–carpetes, arxivadors, ...
• Malauradament els entorns
informàtics parteixen de la
idea d’escriptori
• El disc té carpetes que
tenen fitxers
• I cada cosa està en un únic
Web del llibre
lloc !?
29


Usant etiquetes
• A quina carpeta?
– fotos del nadal
– fotos de la Seu Vella
– fotos nocturnes
– ????????
• Solució:
– li assigno les etiquetes:
nadal, seu, nit
– la pujo a flickr
Foto a flickr
– uso un organitzador (p.e.
DataCrow)

30


Folksonomies

• Una folksonomia és el sistema de classificació que
s’obté a partir de crear i manegar etiquetes per
anotar i caracteritzar continguts
• La paraula folksonomy deriva de folk (poble) i
taxonomy (classificació jeràrquica)
• Les etiquetes d’una folksonomia es poden
viasulatizar en forma de núvol d’etiquetes
• Les etiquetes d’una folksonomia solen seguir una
llei potencial.

31


Intel·ligència Col·lectiva
• Aprofitar la saviesa
col·lectiva dels usuaris és
clau
–Google explota la
informació dels enllaços
que hi ha entre les
pàgines.
–Amazon, aprofita les
compres i/o valoracions
d’un usuaris per a fer
Web del llibre
recomenacions a d’altres.

32


Page Rank: avaluant la rellevància

33



• Quan busquem per internet no és suficient saber
que les pàgines trobades contenen els termes
• Volem que les més rellevants apareguin al principi
• De manera que potencialment el que busco ho
trobaré als primer enllaços

33



• Quan busquem per internet no és suficient saber
que les pàgines trobades contenen els termes
• Volem que les més rellevants apareguin al principi
• De manera que potencialment el que busco ho
trobaré als primer enllaços
• Page Rank. Dues idees:
–Una pàgina és més rellevant quantes més pàgines
rellevant l’apunten
–Una pàgina reparteix la seva rellevància entre les
pàgines a les que apunta
33


Filtratge col·laboratiu: fent recomanacions

• Partim de les valoracions fetes per usuaris a
productes (p.e. llibres)
• De qui seguim normalment les recomanacions?
–d’aquells que opinen de forma més semblant a
nosaltres
• Com tenim les valoracions que han fet tots els
usuaris podem calcular en quina mesura se
semblen
• Per un usuari li recomenaré els productes millor
valorats pels que se li assemblen més
34


The Long Tail
• Chris Anderson (editor de
la revista Wired) va
intentar explicar
discrepàncies entre els
negocis del món físic i del
virtual
• En el món real el 20% dels
productes general el 80%
de les vendes (i gairebé el
100% dels beneficis)
• És això igual món virtual? Blog de l'autor

35


Total de vendes The Long Tail

Grans èxits Tècnicament
s’anomena llei
potencial

“the long tail”

Productes ordenats per
nº vendes
http://en.wikipedia.org/wiki/File:Long_tail.svg

36


Democratització de la producció

37



Tenir més
productes
allarga la cua

37



Tenir més
productes
allarga la cua

38



Tenir més
productes
allarga la cua N’hi ha més
oportunitats
pels productes
“rars”

38


Democratització de la distribució

39



Millor accés als
productes
engreixa la cua

39



Millor accés als
productes
engreixa la cua

40



Millor accés als N’hi ha més
productes oportunitats
engreixa la cua pels productes
“rars”

40


Connexió d’oferta i demanda

Tot aixó només funcionarà si
podem connectar l’oferta i la
demanda !!!

41


Oportunitats de negoci

Força Negoci Exemples

Càmeres digitals,
Democratització de la Creadors d’eines i programes d’edició de
producció productes de la LT vídeo i àudio , eines de
blogs,

Democratització de la Amazon, eBay, iTunes,
Agregadors de la LT
distribució Netflix

Google, sistemes de
Connexió de l’oferta i la
Filtres de la LT recomanació, llistes de
demanda
vendes

42


Mashups

• Aplicacions que combinen dades i/o funcixºonalitat
de fonts externes per a crear un nou servei.
• Exemple canònic: HousingMaps.com
–Dades: CraigList
–Servei: Google Maps
• Un altre de molt conegut és Chicago Crime Map
• Un més proper és nestoria.es
• També són mashups els motors de pàgines
personals com iGoogle, Netvibes, etc.

43


Fent un mashup (bàsic)

• Imagineu-vos que voleu fer una pàgina per anunciar
la sessió d’avui
–Voleu que surti un mapa que ajudi a saber com
arribar
–Voleu penjar les transparències de manera 2.0 ;-)
• Podem usar Google Web Elements
–Creem el mapa que volem i enllacem
–Pugem la presentació a Google Docs i enllacem
• (CSS baixat de Layouts.IromMyers.com)

44


Fent un mashup (avançat)

45



• Diferents mitjans d’informació publiquen un feed
amb les seves notícies
• Pocs d’ells tenen un feed específic per a les notícies
de Lleida
• Us agradaria construir-ne un? Què faríeu?

45



de Lleida
• Solució:
–Obtenir-los tots
–Seleccionar les notícies que “parlen” de Lleida

45



de Lleida
• Solució:
–Obtenir-los tots
–Seleccionar les notícies que “parlen” de Lleida
• Ara hem de programar???

45


Yahoo! Pipes al rescat
• Pipes és una eina de
composició que permet
agregar, manipular i mesclar
contingut de la web
• De forma visual podem anar
agregant els diferents
elements que volem
combinar
• (De vegades va una mica
lent, pero és beta !?)

46


(Per si falla)

47


Web 1.0, Web 2.0, ¿Web 3.0? ...

• Ja es comença a parlar del nou pas d’evolució de la
web: la Web 3.0
• Normalment s’associa al concepte de la web
semàntica
–Representar la informació de manera que sigui
possible processar-la automàticament
–Definir formalismes que permetin agregar
informació procedent de varis llocs

48


Una visió de futur


Resumint

http://en.wikipedia.org/wiki/File:Web_2.0_Map.svg


Enllaços i bibliografia

• Web 2.0, article de la wikipedia [darrer accés
1-7-2009]
• Tim O’Reilly, What is Web 2.0, O’Reilly Network
(30-9-2005) [darrer accés 1-7-2009]
• Paul Graham, Web 2.0, (Novembre 2005) [darrer
accés 1-7-2009]
• Historia Secreta de la Web 2.0 [darrer accés 2-7-2009]
• Paul Anderson, What is Web 2,0? Ideas, technologies
and implications for education. JISC Technology &
Standards Watch, Feb. 2007 [darrer accés 8-7-2009]

51


Conceptes bàsics de la Web 2.0

Recommended

Recommended

More Related Content

Similar to Conceptes bàsics de la Web 2.0

Similar to Conceptes bàsics de la Web 2.0 (20)

More from Juan-Manuel Gimeno

More from Juan-Manuel Gimeno (8)

Recently uploaded

Recently uploaded (8)

Conceptes bàsics de la Web 2.0