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 [email protected]


mailto:[email protected]

mailto:[email protected]

• 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


• 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


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


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


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

8

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




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


10

Característiques


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

• Estàndards• Usabilitat• Participació

10

Característiques


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

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

10

Característiques

Paraulos tècnics


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


http://del.icio.us

http://del.icio.us

Núvol d’etiquetes Web 2.0

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




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


http://www.zeldman.com/

http://www.zeldman.com/

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


http://www.marcofolio.net/webdesign/creating_a_polaroid_photo_viewer_with_css3_and_jquery.html




http://www.crockford.com/

http://www.crockford.com/

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


http://oreilly.com/catalog/9780596515782/?CMP=AFC-ak_book&ATT=Head+First+Ajax%252c

http://oreilly.com/catalog/9780596515782/?CMP=AFC-ak_book&ATT=Head+First+Ajax%252c

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


http://www.archive.org/web/web.php

http://www.archive.org/web/web.php

http://web.archive.org/web/19970417053240/http://www.paeria.es/

http://web.archive.org/web/19970417053240/http://www.paeria.es/

http://paeria.es

http://paeria.es

http://web.archive.org/web/19970618023502/http://www.udl.es/

http://web.archive.org/web/19970618023502/http://www.udl.es/

http://udl.cat

http://udl.cat

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)


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




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


http://wordpress.org/

http://wordpress.org/

http://drupal.org/

http://drupal.org/

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


http://www.google.com/reader/view/%23overview-page

http://www.google.com/reader/view/%23overview-page

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


http://www.youtube.com/user/MontyPython

http://www.youtube.com/user/MontyPython

http://ocw.universia.net/ca/

http://ocw.universia.net/ca/

http://www.youtube.com/stanford

http://www.youtube.com/stanford

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


http://creativecommons.org

http://creativecommons.org

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


http://sciencecommons.org/

http://sciencecommons.org/

http://learn.creativecommons.org/

http://learn.creativecommons.org/

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


http://wikipedia.org/

http://wikipedia.org/

http://www.societatiresidus.udl.cat/index.php/Introducci%C3%B3




http://wikipatterns.com

http://wikipatterns.com

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

29

Web del llibre


http://genesmith.ca/tagging/

http://genesmith.ca/tagging/

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


http://www.flickr.com/photos/andorramistad/2892093226/

http://www.flickr.com/photos/andorramistad/2892093226/

http://www.flickr.com/

http://www.flickr.com/

http://www.datacrow.net/index.html

http://www.datacrow.net/index.html

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

32

Web del llibre


http://www.manning.com/alag/

http://www.manning.com/alag/

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

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


http://www.thelongtail.com/

http://www.thelongtail.com/

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




Democratització de la producció

37



37

Tenir més productes

allarga la cua



38


allarga la cua



38

N’hi ha més oportunitats

pels productes “rars”


allarga la cua


Democratització de la distribució

39



39

Millor accés als productes

engreixa la cua



40


engreixa la cua



40

N’hi ha més oportunitats

pels productes “rars”


engreixa la cua


Connexió d’oferta i demanda

41

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

demanda !!!


Oportunitats de negoci

42

Força Negoci Exemples


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


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


http://www.housingmaps.com/

http://www.housingmaps.com/

http://www.craigslist.org/about/sites

http://www.craigslist.org/about/sites

http://maps.google.com/

http://maps.google.com/

http://chicago.everyblock.com/crime/

http://chicago.everyblock.com/crime/

http://www.nestoria.es/

http://www.nestoria.es/

http://www.google.com/ig

http://www.google.com/ig

http://www.netvibes.com/vibes_net

http://www.netvibes.com/vibes_net

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


http://www.google.com/webelements/

http://www.google.com/webelements/

http://layouts.ironmyers.com/

http://layouts.ironmyers.com/

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





• Us agradaria construir-ne un? Què faríeu?• Solució:

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

45





• 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


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


http://pipes.yahoo.com/pipes/

http://pipes.yahoo.com/pipes/

(Per si falla)

47


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


Una visió de futur


Resumint





• 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


http://en.wikipedia.org/wiki/Web_2.0

http://en.wikipedia.org/wiki/Web_2.0

http://oreilly.com/web2/archive/what-is-web-20.html

http://oreilly.com/web2/archive/what-is-web-20.html

http://www.paulgraham.com/web20.html

http://www.paulgraham.com/web20.html

http://www.comentariodetexto.com/series/historia-secreta-de-la-web-20/

http://www.comentariodetexto.com/series/historia-secreta-de-la-web-20/

http://www.jisc.ac.uk/media/documents/techwatch/tsw0701b.pdf




conceptes bàsics de la web 2.0

Education