Conceptes bàsics de la Web 2.0

  • 1,136 views
Uploaded on

Sessió sobre web 2.0 del curs de la Universitat d'estiu

Sessió sobre web 2.0 del curs de la Universitat d'estiu

More in: Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,136
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
13
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. BONES PRÀCTIQUES EN EL DISSENY DE PÀGINES WEB Curs universitat d’estiu 6 al 10 de juliol 2009 lunes 20 de julio de 2009
  • 2. Conceptes bàsics de Web 2.0 Juan Manuel Gimeno Illa jmgimeno@diei.udl.cat lunes 20 de julio de 2009
  • 3. Í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 lunes 20 de julio de 2009
  • 4. 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 lunes 20 de julio de 2009
  • 5. 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 lunes 20 de julio de 2009
  • 6. 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 lunes 20 de julio de 2009
  • 7. 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
  • 8. La corba de maduresa http://www.andybudd.com/presentations/dcontruct05/images/hype.png 8 lunes 20 de julio de 2009
  • 9. 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 10 lunes 20 de julio de 2009
  • 11. Característiques • Comunicació • Estàndards • Compartició • Usabilitat • Interoperabilitat • Participació • Col·laboració • Interactivitat • Comunitat • Simplicitat • Disseny • Mobilitat 10 lunes 20 de julio de 2009
  • 12. Característiques • Comunicació • Estàndards • Compartició • Usabilitat • Interoperabilitat • Participació Paraulos • Col·laboració • Ajax tècnics • Interactivitat • Rest • Comunitat • PageRank • Simplicitat • Beta • Disseny • ..... • Mobilitat 10 lunes 20 de julio de 2009
  • 13. Característiques • Comunicació • Estàndards • Compartició • Usabilitat • Interoperabilitat • Participació Paraulos • Col·laboració • Ajax tècnics • Interactivitat • Rest • Comunitat • PageRank • Simplicitat • Beta • Disseny • ..... • Mobilitat 10 lunes 20 de julio de 2009
  • 14. 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
  • 15. 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
  • 16. Núvol d’etiquetes Web 2.0 http://en.wikipedia.org/wiki/File:Web_2.0_Map.svg lunes 20 de julio de 2009
  • 17. 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 lunes 20 de julio de 2009
  • 18. 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 lunes 20 de julio de 2009
  • 19. 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 lunes 20 de julio de 2009
  • 20. Funcionament d’Ajax 16 lunes 20 de julio de 2009
  • 21. 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
  • 22. 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 lunes 20 de julio de 2009
  • 23. 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
  • 24. 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
  • 25. 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
  • 26. 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
  • 27. 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
  • 28. 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
  • 29. 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
  • 30. 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
  • 31. 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 lunes 20 de julio de 2009
  • 32. 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
  • 33. 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 lunes 20 de julio de 2009
  • 34. 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) Foto a flickr 30 lunes 20 de julio de 2009
  • 35. 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
  • 36. 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 lunes 20 de julio de 2009
  • 37. Page Rank: avaluant la rellevància 33 lunes 20 de julio de 2009
  • 38. 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
  • 39. 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
  • 40. 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
  • 41. 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 lunes 20 de julio de 2009
  • 42. 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 lunes 20 de julio de 2009
  • 43. Democratització de la producció 37 lunes 20 de julio de 2009
  • 44. Democratització de la producció Tenir més productes allarga la cua 37 lunes 20 de julio de 2009
  • 45. Democratització de la producció Tenir més productes allarga la cua 38 lunes 20 de julio de 2009
  • 46. Democratització de la producció Tenir més productes allarga la cua N’hi ha més oportunitats pels productes “rars” 38 lunes 20 de julio de 2009
  • 47. Democratització de la distribució 39 lunes 20 de julio de 2009
  • 48. Democratització de la distribució Millor accés als productes engreixa la cua 39 lunes 20 de julio de 2009
  • 49. Democratització de la distribució Millor accés als productes engreixa la cua 40 lunes 20 de julio de 2009
  • 50. Democratització de la distribució Millor accés als N’hi ha més productes oportunitats engreixa la cua pels productes “rars” 40 lunes 20 de julio de 2009
  • 51. Connexió d’oferta i demanda Tot aixó només funcionarà si podem connectar l’oferta i la demanda !!! 41 lunes 20 de julio de 2009
  • 52. 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 lunes 20 de julio de 2009
  • 53. 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 lunes 20 de julio de 2009
  • 54. 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
  • 55. Fent un mashup (avançat) 45 lunes 20 de julio de 2009
  • 56. 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
  • 57. 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
  • 58. 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
  • 59. 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
  • 60. (Per si falla) 47 lunes 20 de julio de 2009
  • 61. 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 lunes 20 de julio de 2009
  • 62. Una visió de futur lunes 20 de julio de 2009
  • 63. Resumint http://en.wikipedia.org/wiki/File:Web_2.0_Map.svg lunes 20 de julio de 2009
  • 64. 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 lunes 20 de julio de 2009