conceptes bàsics de la web 2.0

Curs universitat d’estiu6 al 10 de juliol 2009

BONES PRÀCTIQUES EN EL DISSENY DE PÀGINES WEB

lunes 20 de julio de 2009

Conceptes bàsics de Web 2.0

Juan Manuel Gimeno Illajmgimeno@diei.udl.cat

lunes 20 de julio de 2009

• Orígens del concepte• Definició !?• Característiques• Aspectes tecnològics

– Estàndards– JavaScript– Ajax

• Estètica de la Web 2.0• Agregació de continguts• Blogs, Podcasts i Vodcasts• Aspectes legals

– Creative Commons

• Wikis• Organització de la informació

– Etiquetatge– Cerca

• Intel·ligència col·lectiva– Rellevància– Recomanacions

• Aspectes econòmics– The Long Tail

• Mashups (pràctica)• Més enllà de la Web 2.0• Una visió de conjunt

Índex

lunes 20 de julio de 2009

• 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é:

Orígens del terme Web 2.0

“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

lunes 20 de julio de 2009

• 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:

• 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

Orígens del terme Web 2.0

“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.”

lunes 20 de julio de 2009

• Per començar a centrar de què parlarem, podem assajar una possible definició:

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

6

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.”

lunes 20 de julio de 2009

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

lunes 20 de julio de 2009

La corba de maduresa

8

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

lunes 20 de julio de 2009

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

lunes 20 de julio de 2009

10

Característiques

lunes 20 de julio de 2009

• Comunicació• Compartició• Interoperabilitat• Col·laboració• Interactivitat• Comunitat• Simplicitat• Disseny• Mobilitat

• Estàndards• Usabilitat• Participació

10

Característiques

lunes 20 de julio de 2009

• Comunicació• Compartició• Interoperabilitat• Col·laboració• Interactivitat• Comunitat• Simplicitat• Disseny• Mobilitat

• Estàndards• Usabilitat• Participació• Ajax• Rest• PageRank• Beta• .....

10

Característiques

Paraulos tècnics

lunes 20 de julio de 2009

• Comunicació• Compartició• Interoperabilitat• Col·laboració• Interactivitat• Comunitat• Simplicitat• Disseny• Mobilitat

• Estàndards• Usabilitat• Participació• Ajax• Rest• PageRank• Beta• .....

10

Característiques

Paraulos tècnics

lunes 20 de julio de 2009

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

lunes 20 de julio de 2009

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

lunes 20 de julio de 2009

Núvol d’etiquetes Web 2.0

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

lunes 20 de julio de 2009

13

• 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 només IE)

Tecnologia: Estàndards web

Web de l'autor

lunes 20 de julio de 2009

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

14

Web de l'autor

lunes 20 de julio de 2009

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

• Asynchronous JavaScript & XML

15

Web del llibre

lunes 20 de julio de 2009

Funcionament d’Ajax

16

lunes 20 de julio de 2009

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

lunes 20 de julio de 2009

18

• 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 una revista? Què guanya?

Agregació (syndication)

(http://es.wikipedia.org/wiki/Archivo:Feed-icon.svg)

lunes 20 de julio de 2009

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

lunes 20 de julio de 2009

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

lunes 20 de julio de 2009

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

lunes 20 de julio de 2009

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

lunes 20 de julio de 2009

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

lunes 20 de julio de 2009

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

lunes 20 de julio de 2009

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

lunes 20 de julio de 2009

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

lunes 20 de julio de 2009

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

27

wikipatterns.com

lunes 20 de julio de 2009

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

lunes 20 de julio de 2009

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 lloc !?

29

Web del llibre

lunes 20 de julio de 2009

Foto a flickr

Usant etiquetes• A quina carpeta?

– fotos del Lleida– fotos de la Seu Vella– fotos diurnes– ????????

• Solució:– li assigno les etiquetes:

lleida, seu, dia– la pujo a flickr– uso un organitzador (p.e.

DataCrow)

30

lunes 20 de julio de 2009

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

lunes 20 de julio de 2009

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 recomenacions a d’altres.

32

Web del llibre

lunes 20 de julio de 2009

Page Rank: avaluant la rellevància

33

lunes 20 de julio de 2009

Page Rank: avaluant la rellevància

• 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

lunes 20 de julio de 2009

Page Rank: avaluant la rellevància

• 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

lunes 20 de julio de 2009

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

lunes 20 de julio de 2009

The Long Tail

35

• 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

lunes 20 de julio de 2009

The Long Tail

36

Grans èxits

Productes ordenats per nº vendes

Tota

l de

vend

es

“the long tail”

Tècnicaments’anomena llei

potencial

http://en.wikipedia.org/wiki/File:Long_tail.svg

lunes 20 de julio de 2009

Democratització de la producció

37

lunes 20 de julio de 2009

Democratització de la producció

37

Tenir més productes

allarga la cua

lunes 20 de julio de 2009

Democratització de la producció

38

Tenir més productes

allarga la cua

lunes 20 de julio de 2009

Democratització de la producció

38

N’hi ha més oportunitats

pels productes “rars”

Tenir més productes

allarga la cua

lunes 20 de julio de 2009

Democratització de la distribució

39

lunes 20 de julio de 2009

Democratització de la distribució

39

Millor accés als productes

engreixa la cua

lunes 20 de julio de 2009

Democratització de la distribució

40

Millor accés als productes

engreixa la cua

lunes 20 de julio de 2009

Democratització de la distribució

40

N’hi ha més oportunitats

pels productes “rars”

Millor accés als productes

engreixa la cua

lunes 20 de julio de 2009

Connexió d’oferta i demanda

41

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

demanda !!!

lunes 20 de julio de 2009

Oportunitats de negoci

42

Força Negoci Exemples

Democratització de la producció

Creadors d’eines i productes de la LT

Càmeres digitals, programes d’edició de vídeo i àudio , eines de

blogs,

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

Netflix

Connexió de l’oferta i la demanda Filtres de la LT

Google, sistemes de recomanació, llistes de

vendes

lunes 20 de julio de 2009

43

• 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.

Mashups

lunes 20 de julio de 2009

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

lunes 20 de julio de 2009

Fent un mashup (avançat)

45

lunes 20 de julio de 2009

Fent un mashup (avançat)

• 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

lunes 20 de julio de 2009

Fent un mashup (avançat)

• 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?• Solució:

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

45

lunes 20 de julio de 2009

Fent un mashup (avançat)

• 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?• Solució:

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

• Ara hem de programar???

45

lunes 20 de julio de 2009

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

lunes 20 de julio de 2009

(Per si falla)

47

lunes 20 de julio de 2009

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

48

• 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

lunes 20 de julio de 2009

Una visió de futur

lunes 20 de julio de 2009

Resumint

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

lunes 20 de julio de 2009

• 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

Enllaços i bibliografia

lunes 20 de julio de 2009