Upload
juan-manuel-gimeno
View
1.205
Download
3
Embed Size (px)
DESCRIPTION
Sessió sobre web 2.0 del curs de la Universitat d'estiu
Citation preview
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
• 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