Curs Introducció Web20

116
Apropament pràctic a les noves eines d'Internet. Web 2.0 Xavier Noguero David Manjon Estiu 2009 Universitat de Lleida

description

Curs de la Universitat d'estiu de Lleida - 2009

Transcript of Curs Introducció Web20

Page 1: Curs Introducció Web20

Apropament pràctic a les noves eines d'Internet. Web 2.0

Xavier NogueroDavid Manjon

Estiu 2009Universitat de Lleida

Page 2: Curs Introducció Web20

Índex

IntroduccióComunicacióOrganització personalOficinaBlocs, wikis i variantsMultimèdia: FotografiaMultimèdia: ÀudioMultimèdia: VídeoSindicacióCerca d'informacióXarxes socialsMashups

Page 3: Curs Introducció Web20

Introducció: conceptes i tecnologies

Apropament pràctic a les noves eines d'Internet. Web 2.0

David Manjon

Estiu 2009

Universitat de Lleida

Page 4: Curs Introducció Web20

Introducció: Conceptes i tecnologies

Origen del terme.

Evolució.

Canvi de Filosofia.

Tecnologia.

Web 3.0?

Page 5: Curs Introducció Web20

Introducció: Origen del terme

El terme Web 2.0 va ser creat per Dale Dougherty de

O'Reilly Media en una pluja d'idees amb Craig Cline de

MediaLive per desenvolupar idees per una conferència.

Dougherty va suggerir que la web estava en renaixement

amb regles que canviaven i models de negoci que

evolucionaven.

Octubre 2004

Font: http://es.wikipedia.org/wiki/Web_2.0

Page 6: Curs Introducció Web20

Introducció: Evolució

La denominació 2.0 marca que hi ha alguna cosa anterior, hi ha un 1.0.

Com evolucionem de 1.0 a 2.0?:

Canvi filosòfic: de MiMi a TuTu.

Canvi tecnològic: tecnologies que permeten dur a terme el canvi de filosofia.

Canvi social: milions d'usuaris disposats a crear i no solament consumir.

Page 7: Curs Introducció Web20

Introducció: Evolució

Font: http://blog.aysoon.com/le-web20-illustre-en-une-seule-image

Page 8: Curs Introducció Web20

Introducció: Evolució, exemples

Web 1.0

Enciclopèdia Britànica

Pàgines web personals

Web 2.0

Wikipedia

Blocs personals

Page 9: Curs Introducció Web20

Introducció: Canvi de filosofia

La web 2.0 permet als usuaris participar d'una forma més

activa i immediata, deixa que siguin els propis usuaris

(internautes) els que subministren, trientrien i consumeixen

els continguts.

En el model anterior 1.0 l'internauta era, bàsicament, un

receptor passiu.

Font: PC Actual, n. 197, Web 2.0: participa, distribuye, disfruta

Page 10: Curs Introducció Web20

Introducció: Canvi de filosofia

Font: http://webilus.com/illustration/web20-une-personne-nest-plus-quun-simple-consommateur

Page 11: Curs Introducció Web20

Introducció: Canvi de filosofia

La web 2.0 serveix de plataforma per crear un sistema de

xarxes socials d'informació i convertir a l'usuari en el

protagonista.

La xarxa esdevé participativa i es democratitza gràcies a les

noves eines que propicien un canvi de rutines i actitud en

milions d'usuaris.

Font: PC Actual, n. 197, Web 2.0: participa, distribuye, disfruta

Page 12: Curs Introducció Web20

Introducció: Premisses 2.0

Una web 2.0 ha de funcionar com un espai obert on es pugui afegir i treure informació fàcilment.

Els usuaris controlen la informació.

Aprofitar la intel·ligència col·lectiva.

Millor si està basat únicament en la web.

Page 13: Curs Introducció Web20

Introducció: Tecnologia

Bases tecnològiques: Permeten crear les noves eines

per als usuaris.

Eines pels usuaris: Permeten als usuaris crear,

valorar i consumir continguts.

Page 14: Curs Introducció Web20

Tecnologia: Bases tecnològiques

XML, Ajax, XHTML, CCS, etc.

A partir d'aquestes es creen eines que permeten:

Immediatesa.

Separar el contingut del format.

Compartir.

Classificar.

Page 15: Curs Introducció Web20

Tecnologia: Eines pels usuaris

Etiquetes i núvols d'etiquetes.

Feeds: RSS o Atom.

Modularitat, widgets.

Aplicacions RIA (aplicacions enriquides per Internet).

Identificador únic i invariable dels elements.

Page 16: Curs Introducció Web20

Tecnologia: Etiquetes (tags)

Les etiquetes ens permeten categoritzar els elements.

Exemple: Tenim una foto de los nostres vacances.A aquesta foto li podem associar l'etiqueta: platja,ja que en la foto es veu una platja.

Podem assignar més d'una etiqueta a un element.

A la foto anterior li podem afegir etiquetes com: agost,hotel, sopar... depenent del que surti en la foto o delnostre criteri a l'hora d'etiquetar.

Page 17: Curs Introducció Web20

Tecnologia: Etiquetes (tags)

Utilitzarem les etiquetes per classificar els nostres elements i fer cerques per etiquetes.

Seguint l'exemple si etiquetem totes les nostres fotospodem fer una cerca i trobar totes les fotos on apareixla platja o totes les fotos d'agost.

Podrem cercar per una o varies etiquetes o demanar que no hi sigui una determinada etiqueta.

Si compartim informació podem utilitzar les etiquetes per unir la nostra informació amb la de més gent.

Page 18: Curs Introducció Web20

Tecnologia: Núvol d'etiquetes

Un núvol d'etiquetes és una representació visual de les

etiquetes. Com més utilitzada és una etiqueta més gran és el

tipus de lletra amb que està representada.

Exemple:

Page 19: Curs Introducció Web20

Tecnologia: Feeds

La paraula feed és un anglicisme que es refereix a un tipus de

dades utilitzat per subministrar informació que s'actualitza amb

freqüència.

Formats: RSS o Atom, basats en XML.

Els feeds solen ser titulars de notícies, articles... Cada dia hi ha

més mitjans que utilitzen aquest sistema.

Font: http://es.wikipedia.org/wiki/Feed

Page 20: Curs Introducció Web20

Tecnologia: Feeds: exemple

WebWeb

RSSRSS

Page 21: Curs Introducció Web20

Tecnologia: Modularitat, widgets

Són petites aplicacions o programes que ens poden donar

informació provinent d'altres pàgines web.

Exemple: Integrem en el nostre bloc personal una

petita aplicació que ens ofereix el temps que fa a la

nostra ciutat.

Page 22: Curs Introducció Web20

Tecnologia: RIA

Rich Internet Applications (Aplicacions Enriquides (potenciades) per Internet): Aquest terme fa referència a les aplicacions web que s'executen des del nostre navegador sense necessitat de ser descarregades o instal·lades a l'ordinador.

Dins de la web 2.0 les capacitats d'aquestes aplicacions arriben a igualar a les aplicacions tradicionals d'escriptori.

Exemple: Correu web de Gmail.

Page 23: Curs Introducció Web20

Tecnologia: Identificador únic i invariable

Més que una tecnologia es tracta d'una premissa.

Els nostres objectes (fotos, vídeos, articles...) s'han de poder enllaçar directament amb una adreça única i estable en el temps.

Això ens permet enviar o publicar aquest enllaços.

Exemple: Hem llegit una notícia en un diari electrònici la volem enviar a un amic, necessitem poder enviarla notícia en concret, no un enllaç a la plana principal del diari i que ell cerqui la notícia.

Page 24: Curs Introducció Web20

Introducció: Web 3.0 ?

Web Semàntica

Agents intel·ligents

Web 3D

Múltiples formes de connexió

Geolocalització

??

Page 25: Curs Introducció Web20

Introducció: Núvol resum

Page 26: Curs Introducció Web20

Introducció: Per saber més

Web 2.0 (Fundación Orange):http://www.fundacionorange.es/areas/25_publicaciones/publi_253_11.asp

La Web 2.0: La revolución social de Internet:http://es.youtube.com/watch?v=OwWbvdllHVE

Web 2.0 The Machine is Us (en castellà):http://es.youtube.com/watch?v=PL-ywltLjzk

Mapa visual de la web 2.0:http://internality.com/web20/

Page 27: Curs Introducció Web20

Comunicació

Apropament pràctic a les noves eines d'Internet. Web 2.0

Xavier Noguero

Estiu 2009

Universitat de Lleida

Page 28: Curs Introducció Web20

Comunicació

El correu electrònic o el xat són exemples de mecanismes per a comunicar-nos.

Les interfícies de les pàgines web han millorat fins al punt que imiten a la perfecció les aplicacions clàssiques que instal·lem a l'ordinador.

Hi molts exemples de serveis de correu web. Alguns dels més destacats són:

GmailYahoo MailWindows Live Hotmail

Page 29: Curs Introducció Web20

Què cal fer per utilitzar-los?

Normalment són gratuïts, però amb publicitat.

Primer cal fer un registre d'alta, ràpid i senzill.

Un cop registrats ja tenim un nom d'usuari i una paraula clau que ens identifica com a usuaris del servei.

I amb aquestes dades ja en tenim prou per començar a fer-los servir.

Page 30: Curs Introducció Web20

Correu electrònic via web amb GMail

Cas d'èxit: Gmail (www.gmail.com)

Pertany a l'empresa Google, tot un monstre del segment Internet d'aquesta dècada.

Sorgí al 2004, amb unes prestacions que de bon principi competien directament amb la competència.

Page 31: Curs Introducció Web20

Perquè escollim Gmail? (I)

Característiques de valor afegit:

S'ordenen els missatges i es mostren segons el context.

Organització de missatges amb etiquetes en substitució de les carpetes tradicionals.

Cerca avançada de missatges.

Xat per conversar amb usuaris de Google Talk

Page 32: Curs Introducció Web20

Perquè escollim Gmail? (II)

Altres que també cal destacar:

Filtre de correu brossa (spam) força aconseguit.

Arxivament automàtic de les adreces de mail a Contactes.

Molt d'espai per arxivar tots els missatges.

Internacionalització a més de 40 idiomes.

Page 33: Curs Introducció Web20

Perquè escollim Gmail? (III)

Altres característiques avançades:

Filtres de missatges amb moltes opcions.

Reenviament de missatges a d'altres adreces.

Compatible amb l'accés IMAP o POP.

Permet enviar correus des d'altres adreçes de mail nostres i recuperar el correu electrònic d'altres comptes nostres (POP3).

Page 34: Curs Introducció Web20

Organització personal

Apropament pràctic a les noves eines d'Internet. Web 2.0

David Manjon

Estiu 2009

Universitat de Lleida

Page 35: Curs Introducció Web20

Organització personal: Característiques

Optimitzar el nostre temps.

Agenda disponible des de qualsevol lloc.

Calendaris compartits.

Recordatoris.

Page 36: Curs Introducció Web20

Organització personal: Google Calendar

La nostra agenda personal a la xarxa:

Crear, gestionar les nostres tasques.

Creació de múltiples calendaris, segons el propòsit:

Diversos calendaris personals per organitzar-nos millor.

Exemple: un per la feina i un per les vacances.

Calendaris compartits. Exemple: calendari de l'agrupació

sardanísticaCalendaris públics per a tothom.

Page 37: Curs Introducció Web20

Organització personal: Google Calendar

Opcions de configuració: amagar calendaris, triar el color.

Diferents vistes d’un calendari:

Diària

Setmanal

Mensual

Personalitzada

En forma d’agenda

Page 38: Curs Introducció Web20

Organització personal: Google Calendar

Creació d’esdeveniments:

Ràpidament fent clic sobre un punt del calendari

Mitjançant el formulari “crear esdeveniment”

Dins un esdeveniment podem:

Enviar una invitació a algú per a que l’afegeixi a la seva

adreça

Veure l’estat de les invitacions (pendents, acceptades...)

Veure els comentaris que han deixat els invitats

Configurar avisos via sms, mail, finestra

Page 39: Curs Introducció Web20

Organització personal: Google Calendar

Integració amb Gmail i Google Maps.

Possibilitat d’exportar calendaris en format PDF.

Cercar calendaris públics.

Page 40: Curs Introducció Web20

Organització personal: Per saber més

Manejo del Google Calendar :

http://www.aulafacil.com/gestiontiempo/curso/Lecc-27.htm

Page 41: Curs Introducció Web20

Web 2.0: Oficina

Apropament pràctic a les noves eines d'Internet. Web 2.0

Xavier Noguero

Estiu 2009

Universitat de Lleida

Page 42: Curs Introducció Web20

Abans: Oficina tradicional

Fins ara,

Estem acostumats a treballar amb les eines ofimàtiques que hi han instal·lades al nostre ordinador.

Emmagatzemem els nostres documents i altres arxius al disc dur del nostre ordinador.

Si hem de moure fitxers d'un ordinador a un altre, ens els copiem amb un llapis usb, o en un cd, etc.

Si no disposem d'una aplicació l'hem d'instal·lar, i quan en surt una nova versió tard o d'hora s'ha d'actualitzar.

Page 43: Curs Introducció Web20

Després: Oficina disponible a Internet

A partir d'ara,

No importa si l'ordinador on ens trobem treballant no disposa d'aplicacions ofimàtiques instal·lades, les tenim disponibles a Internet.

Els nostres documents i altres arxius també són a Internet, disponibles des de qualsevol ordinador amb connexió (fins i tot de vegades sense), les 24 hores del dia i els 356 dies l'any.

No importa si vam escriure un document amb l'ordinador de la feina i ara el volem veure des del portàtil particular, sempre ho tenim disponible.

Page 44: Curs Introducció Web20

Després: Oficina disponible a Internet

A més, podem fer ús d'avantatges que les eines ofimàtiques clàssiques no tenen, com ara:

Compartir documents amb els contactes que desitgem.

Editar i treballar simultàneament en un mateix projecte (document de text, full de càlcul, presentació, etc).

Publicar documents a Internet, a l'abast de tothom.

També podem recuperar una versió anterior d'un document per desfer els últims canvis realitzats.

I organitzar-los: segons el tipus de document, l'autor o autors, amb etiquetes, entre d'altres.

Page 45: Curs Introducció Web20

Exemple d'oficina web: Documents de Google

Suite ofimàtica per crear i editar:Documents de textFulls de càlculPresentacions virtuals

També per llegir fitxers PDF. (http://docs.google.com)

Els arxius es guarden en un magatzem online segur.

Podem importar i exportar arxius en diferents formats compatibles: DOC, XLS, ODT, ODS, RTF, CSV, PPT, etc.

Page 46: Curs Introducció Web20

Exemple d'oficina web: Google Docs

Page 47: Curs Introducció Web20

Oficina a la web: més exemples

www.zoho.com

www.thinkfree.com

www.goffice.com

SlideShare, per compartir presentacions:

http://www.slideshare.net

Page 48: Curs Introducció Web20

Sistemes operatius web

Fent un pas més enllà, trobem el concepte de sistema operatiu web, on tot (tant documents com també les aplicacions) està disponible a través d'una pàgina web.

Exemple:

www.eyeos.com

Per provar-lo, aneu a www.eyeos.info

Page 49: Curs Introducció Web20

Eye Os - Web OS

És programari lliure, i inclou moltes eines:

També facilita el treball col.laboratiu en diferents entorns (escoles, empreses, etc.)

Page 50: Curs Introducció Web20

Blocs, wikis i variants

Apropament pràctic a les noves eines d'Internet. Web 2.0

David Manjon

Estiu 2009

Universitat de Lleida

Page 51: Curs Introducció Web20

Blocs: Concepte

Un bloc (informalment també weblog, blog o bitàcola) és un espai personal d'escriptura a Internet. Una mena de diari en línia, un lloc web que una persona utilitza per a escriure periòdicament.

Un bloc està dissenyat per a que, com a un diari, cada article tingui data de publicació, de tal forma que la persona que escriu (blocaire) i les que llegeixen poden seguir un camí de tot el que s'ha publicat i editat.

Font: http://ca.wikipedia.org/wiki/Bloc

Page 52: Curs Introducció Web20

Blocs: Components habituals

Escrits (posts):Títol.Contingut.Etiquetes.

Comentaris.Descripció del creador.Arxius:

Per data.Per etiquetes.

Tot el que et puguis imaginar.

Exemple: http://lo-lleidata.blogspot.com/

Page 53: Curs Introducció Web20

Blocs: Estils i Variants

Temàtics:Política.Esports.Economia.

Fotoblocs.

Vídeoblocs.

Exemples:

http://www1.fotolog.com/eli_1_v

http://hombrelobo.com/category/hombrelobotv/

Page 54: Curs Introducció Web20

Blocs: Casos d'èxit

Allotjament de blocs:

: http://www.blogger.com/

: http://es.wordpress.com/

: http://www.lacoctelera.com/

Fotoblocs:

: http://www.fotolog.com

Page 55: Curs Introducció Web20

Blocs: Per saber més

Introduction to blogging (castellà):

http://codex.wordpress.org/es:Introduction_to_Blogging

La jornada de un blogger:

http://www.pc-actual.com/actualidad/noticia/2007/04/02/La-

jornada-de-un-blogger

Page 56: Curs Introducció Web20

Microblogging

Com a microblogging o miniblogging es coneix a una derivació del fenomen blog, amb la particularitat que s'hi envien missatges curts (habitualment de menys de 200 caràcters) a l'atenció del public general o només de les pròpies coneixences.

Les novetats i els avisos poden enviar-se (depèn del servei) des d'un lloc web, per missatgeria instantània, per correu electrònic, a través d'aplicacions de tercers, per SMS, per mòbil, etc.

Font: http://ca.wikipedia.org/wiki/Microblogging

Page 57: Curs Introducció Web20

Microblogging: twitter

www.twitter.com

Primer i més conegut servei de microbblogging.

Màxim 140 caràcters mitjançant SMS, missatgeria

instantània o bé directament des del lloc web de Twitter o

des d'altres aplicacions.

Exemples:

http://twitter.com/parlament_cat

http://twitter.com/3cat24

Page 58: Curs Introducció Web20

Microblogging: Per saber més

Pardals:

http://pardals.atictes.cat/

Page 59: Curs Introducció Web20

Wikis: que són?

Una wiki (del hawaià wiki wiki, “ràpid”) és una col·lecció de pàgines web entrellaçades qualsevol de les quals pot ser visitada i editada en tot moment (programari col·laboratiu). El concepte i programari va ser inventat per Ward Cunningham

Els usuaris d'una wiki poden crear, editar, modificar o esborrar el contingut d'una pàgina web de manera interactiva, fàcil i ràpida. Aquestes facilitats fan de la wiki una eina efectiva per a l'escriptura col·laborativa

http://lyricwiki.org/Main_Page/esExemple:

Page 60: Curs Introducció Web20

Wikis: com s'escriuen?

S'utilitza un llenguatge de marques senzill: wikisintaxis

Exemples:Negreta -> '''Negreta'''Cursiva -> “Cursiva”Titulars

Nivel 1 = =Nivel 2 == ==Nivel 3 === ===

Page 61: Curs Introducció Web20

Cas d'èxit: Viquipèdia

La Viquipèdia (ca.wikipedia.org) és una enciclopèdia lliure escrita col·laborativament des d'Internet per voluntaris.

Projecte iniciat el març de 2001

Versions en més de 253 llengües (236 actives).

La Viquipèdia en català o valencià fou la segona Viquipèdia a fundar-se.

La Viquipèdia en català té actualment 119.602 183.407articles.

La versió anglesa en tenia 2.164.122 2.760.650 durant el gener de 2008 2009.

Page 62: Curs Introducció Web20

Wikis: Per saber més

Manual wiki:

http://es.wikibooks.org/wiki/Manual_de_edición_wiki

Page 63: Curs Introducció Web20

Multimèdia: Fotografia

Apropament pràctic a les noves eines d'Internet. Web 2.0

Xavier Noguero

Estiu 2009

Universitat de Lleida

Page 64: Curs Introducció Web20

Multimèdia: fotografia

Idea:compartir fotos amb les persones que volguem.

Organització de les fotos en àlbums, etiquetes, col·leccions d'àlbums...

Nivell de privacitat: compartir públicament per a tothom, per a grups, o només a nivell particular.

Realització de tarjetes, impressions, presentacions, publicació a blocs, etc.

Localitzar geogràficament les fotografies.

Page 65: Curs Introducció Web20

Multimèdia: fotografia

Podem carregar les fotos de diferents maneres: des del disc dur de l'ordinador,via e-mail,telèfon mòvil, pda, etc.

Tipus de limitacions en els serveis gratuïts: quantitat de fotos, mida, formats, resolució, entre altres.

Llicències artístiques Creative Commons per preservar els vostres drets d'autor:

http://cat.creativecommons.org/llicencia/

Page 66: Curs Introducció Web20

Fotografia: alguns exemples de serveis

Page 67: Curs Introducció Web20

Fotografia: crear presentacions

Alguns serveis ja ho permeten per si mateixos (ex: flickr)Cas d'èxit: Slide (www.slide.com)

Característiques:Permet fer una presentació de fotos procedents de diferents fonts.Podem afegir una nota de text a cada fotografia.Personalització amb diferents tipus de transicions, música de fons, efectes visuals, mida, privacitat...Ens dona el codi en llenguatge html que podrem inserir a d'altres webs, per exemple al nostre bloc.

Page 68: Curs Introducció Web20

Multimèdia: edició d'imatges via web

Disposem d'eines web d'edició i retoc fotogràfic.

Les imatges a editar poden estar:

al nostre ordinadoro bé a altres llocs web on tinguem compte com ara Picassa o Photobucket, entre altres.

Podem desfer molt fàcilment els canvis que hem aplicat en una fotografia si aquests no ens agraden.

Page 69: Curs Introducció Web20

Fotografia: recull d'adreces web...

Compartir fotografies:Google Picasa: http://picasaweb.google.comFlickr: http://www.flickr.com/Photobucket: http://photobucket.com/Panoramio: http://www.panoramio.com/

Zooomr: http://es.zooomr.com/

Presentacions i edició fotogràfica:Slide: http://www.slide.comAdobe Photoshop Express: http://www.photoshop/expressPicnik: http://www.picnik.comFotoEfectos: http://www.fotoefectos.comDibuix amb Bomomo: http://bomomo.comReparar ulls vermells: http://www.fixredeyes.com

Page 70: Curs Introducció Web20

Multimèdia: àudio

Apropament pràctic a les noves eines d'Internet. Web 2.0

David Manjon

Estiu 2009

Universitat de Lleida

Page 71: Curs Introducció Web20

Àudio

Ràdio:

Tradicional.

Radio online.

2.0.

Podcast: contingut a la carta.

Page 72: Curs Introducció Web20

Àudio: Ràdio tradicional

Escoltar la nostra emissora preferida directament des de la xarxa. Exemples:

Segre Ràdio:

www.segreradio.com

Rac1:

http://www.rac1.cat/

40:

http://www.los40.com

Avui en dia gairebé totes les emissores tenen una pàgina web on es pot escoltar la seva emissió.

Page 73: Curs Introducció Web20

Àudio: Ràdio online

Ràdios que nomes es poden escoltar a traves de la xarxa.

Radio la colifata:

http://www.lacolifata.org

iCat.fm:

http://www.icatfm.cat/

Page 74: Curs Introducció Web20

Àudio: Ràdio 2.0

S'incorporen les noves tendències de la web 2.0, etiquetes, compartir amb els amics, eines d'integració per a blocs, etc.

Problemes amb els drets d'autor.

Exemples:

http://blip.fm

Nomes per escoltar música del youtube, catalogada per àlbums:

http://www.vastfm.com

Page 75: Curs Introducció Web20

Àudio: Podcasts

El terme podcasting deriva de les expressions anglosaxones 'Play-On-Demand' (POD), que vol dir 'reprodueix en demanda' i 'broadcasting', que vol dir radiodifusió.

Els podcasts ens proporciones peces d'àudio, que podem descarregar-nos i escoltar en qualsevol lloc i/o moment.

Font: http://ca.wikipedia.org/wiki/Podcasting

Exemple:

http://audiolibros.podomatic.com/

Page 76: Curs Introducció Web20

Àudio: Per saber més

Podcast-es:

http://www.podcast-es.org

Podsonoro:

http://www.podsonoro.com/

Page 77: Curs Introducció Web20

Multimèdia: vídeo

Apropament pràctic a les noves eines d'Internet. Web 2.0

David Manjon

Estiu 2009

Universitat de Lleida

Page 78: Curs Introducció Web20

Vídeo: Concepte

Nous serveis que permeten pujar, veure, compartir i fins i tot editar vídeos.

Habitualment tecnologia Flash que permet una actualització ràpida.

Utilitzen eines de la web 2.0 com etiquetes, votacions socials i també faciliten la integració en blocs.

Page 79: Curs Introducció Web20

Vídeo: Casos d'èxit

: http://www.youtube.es

: www.tu.tv

Cercador de vídeos:

http://video.google.com

Page 80: Curs Introducció Web20

Vídeo: Youtube www.youtube.com

Va ser fundat el febrer del 2005.

El 10 d'octubre de 2006 Google va comprar Youtube per 1650 milions de dòlars.

Permet allotjar-hi vídeos personals de forma senzilla.

Els enllaços a vídeos poden ser posats en blocs i llocs web personals utilitzant APIs.

Classifica els vídeos amb un sistema d'etiquetes.

Actualment permet contingut panoràmic i amb alta definició.

Page 81: Curs Introducció Web20

Vídeo: Jaycut http://jaycut.es

Edició de vídeo online.

Permet edició senzilla de vídeos:

Retallar vídeos, ajuntar.

Afegir fotografies i música.

Crear Transicions.

Títols.

Redistribució de vídeos:

Xarxes socials.

Descarregar.

Page 82: Curs Introducció Web20

Sindicació

Apropament pràctic a les noves eines d'Internet. Web 2.0

Xavier Noguero

Estiu 2009

Universitat de Lleida

Page 83: Curs Introducció Web20

Situació del món web actual

El nombre de pàgines web a Internet està creixent moltíssim.

Cada cop tenim més feina per estar al día de les novetats que es produeixen a les webs que són del nostre interés.

Què podem fer doncs?

Sol·lució web 2.0: la sindicació

Page 84: Curs Introducció Web20

Passat i present...

Fins ara, nosaltres haviem de visitar les webs d'interés per saber si s'han produït novetats.

Ara, mitjançant l'ús de la sindicació, són les mateixes pàgines web que ens avisen quan s'hi han produït canvis i ens informen breument sobre les novetats.

Per tant, l'usuari ja no cerca la informació, és la informació que cerca a l'usuari!!!

Page 85: Curs Introducció Web20

Avantatges?

Ens informem sense haver de navegar.

Estalvi de temps considerable.

Accés a un gran volum d'informació de manera senzilla i automàtica.

Nosaltres escollim els llocs sobre als quals ens volem subscriure.

És totalment anònim, no hem de facilitar cap dada personal.

Page 86: Curs Introducció Web20

Com funciona?

Intervenen dos actors diferenciats:

D'una banda necessitem un lector de “feeds”, on veurem tots els llocs on ens subscrivim.

D'altra banda, necessitem trobar llocs on subscriure'ns, i que farem aparèixer al nostre lector. Hi ha cabuda per tots els aspectes: televisió, premsa, continguts web, radio...

Page 87: Curs Introducció Web20

Com trobem els feeds on subscriure'ns?

Els cercarem a les pàgines web.

Aquestes paraules i acrònims les podem entendre com a sinònims en el nivell d'aprententatge en el que ens trobem:

Sindicació webRedifusió webFeeds (fils)RSS, RDF, ATOM...També aquests logotips:

Page 88: Curs Introducció Web20

Tipus de lectors / agregadors de RSS

El lector es conecta automàticament a Internet i es baixa totes les actualitzacions i novetats de les pàgines web on ens hem subscrit.

Hi molts agregadors de feeds. Una classificació:

Els que són pàgines web (pàgines d'inici).

Els que s'instal·len a l'ordinador com una aplicació més ( ja sigui al Linux, al Mac, al Windows... ).

També poden integrar-se al navegador web, a l'escriptori, etc.

Page 89: Curs Introducció Web20

Netvibes: més que un lector de RSS

Netvibes és una pàgina d'inici (start page) que podem configurar i personalitzar al nostre propi gust.

Funcionalitats:Lector de feeds (blocs, diaris, etc...)Disposa de molts gadgets (o widgets) i mòduls d'aplicacions configurables (la gran majoria són serveis que ofereixen altres llocs web).Visors i reproductors (flick, podcasts, YouTube...).Universos Netvibes.

Page 90: Curs Introducció Web20

Més exemples de pàgines d'inici...

iGoogle: www.google.es/ig

Pageflakes: www.pageflakes.com

Page 91: Curs Introducció Web20

Exemples de lectors de feeds web

Google Reader: reader.google.com

Bloglines: www.bloglines.com

My Yahoo: my.yahoo.com

Page 92: Curs Introducció Web20

Cerca d'informació

Apropament pràctic a les noves eines d'Internet. Web 2.0

David Manjon

Estiu 2009

Universitat de Lleida

Page 93: Curs Introducció Web20

Cercadors

: http://www.google.cat/El cercador més utilitzat del moment, permet cercar:

Webs introduint paraulesImatgesVídeos http://video.google.cat/Grups de discussió blocs: http://blogsearch.google.cometc.

No confondre un cercador amb un directori

Page 94: Curs Introducció Web20

Cercadors 2.0

: http://www.technorati.com/

Cerca alhora blocs, articles, vídeos i fotos.Permet votacions dels elements cercatsEs poden filtrar les cerques per l'idioma

: http://www.searchme.com/

Cercador visual.

Page 95: Curs Introducció Web20

Cercadors 2.0

: www.trabber.es

Cercador de volsBusca simultàniament a les principals webs de viatges.

: http://www.xuletas.es/

Cercador de “xuletes”.

Page 96: Curs Introducció Web20

Mapes

Google Maps: http://maps.google.es

Cercar ubicacions

Desar mapes i ubicacions

Cercar rutes

Cerca de negocis o serveis

Google Streetview

Page 97: Curs Introducció Web20

Mapes: Mart i la Lluna

Google Mars: www.google.com/mars/

Similar a Google Maps però sobre Mart.

Basat en fotos de la Nasa.

Permet cerca accidents geogràfics, naus enviades, etc.

També podeu trobar una part de la lluna a:

http://moon.google.com/

Page 98: Curs Introducció Web20

Adreces d'interès

Emmagatzemant les nostres adreces favorites a la xarxa, les tindrem sempre disponibles.

Podem classificar-les amb etiquetes.

Compartir-les.

Casos d'èxit:

: www.gennio.com

: http://del.icio.us

Page 99: Curs Introducció Web20

Notícies i continguts votats pels usuaris

Les notícies ja no les selecciona una empresa, les seleccionen els propis lectors.

Votem les notícies que ens interessen més.

Sistema d'etiquetes per classificar-les.

Punts dels diferents usuaris segons les notícies enviades i la qualitat de les mateixes.

Page 100: Curs Introducció Web20

Cas d'èxit: Menéame

Adaptació de la web Digg

Servei per enviar noticies o enllaços a blocs

Sistema de votacions

Etiquetes, podem trobar-hi un mapa d'etiquetes

Notícies per ordre d'importància

Permet votacions anònimes (sense estar registrats). Les votacions les anomena “meneos”. Si una notícia ens agrada la “meneem”

www.meneame.net

Page 101: Curs Introducció Web20

Notícies i continguts votats pels usuaris

Enllaços:

: www.digg.com en Anglès.

: http://latafanera.cat/ en Català.

: http://www.fresqui.com/ Similar amb tres categories bàsiques: tecnologia, actualitat i oci.

Page 102: Curs Introducció Web20

Xarxes socials

Apropament pràctic a les noves eines d'Internet. Web 2.0

Xavier Noguero

Estiu 2009

Universitat de Lleida

Page 103: Curs Introducció Web20

Xarxes socials

Xarxes socials: permeten conèixer i relacionar-se amb d'altres persones, publicar fotos, vídeos, intercanviar missatges, tot de manera fàcil i senzilla.Exemples:

Facebook

Myspace

Google Orkut

Hi5

Page 104: Curs Introducció Web20

Cas d'èxit: Facebook

És una de les que compta amb més usuaris a nivell mundial (més de 70 200 milions d'usuaris registrats a l'abril de 2009).

S'inicià al 2004 com un projecte per comunicar entre sí els estudiants de la Universitat de Harvard.

(www.facebook.com)

Page 105: Curs Introducció Web20

Xarxes socials professionals

Dirigides a professionals, empresaris que desitgin augmentar la seva xarxa de contactes.

Permeten oferir el noste curriculum on-line, intercanviar idees i oportunitats, accedir a ofertes de feina, entre d'altres.

Casos d'èxit:

www.xing.com

www.linkedin.com

Page 106: Curs Introducció Web20

Mashups

Apropament pràctic a les noves eines d'Internet. Web 2.0

Xavier Noguero

Estiu 2009

Universitat de Lleida

Page 107: Curs Introducció Web20

Mashups: Què són?

Un mashup és una aplicació web híbrida, és a dir, que utilitza els continguts que ja disposen altres webs per oferir un nou servei més concret (Font: Wikipedia).

Avantatges? La idea consisteix en desenvolupar noves aplicacions web que es centrin en l'aportació de valor afegit, centrant els recursos en la novetat i reutilitzant serveis ja el·laborats per d'altres.

Límits? Fins on arribi la imaginació dels autors.

Page 108: Curs Introducció Web20

Categories més destacables de mashups

Així, principalment trobem mashups:De mapesDe fotografies, vídeos i músicaDe compresDe notíciesDe cercadorsMissatgeria...

Page 109: Curs Introducció Web20

Mashups: Algunes fonts de dades típiques

Els mashups s'alimenten de serveis web ja existents, els quals permeten el seu ús a desenvolupadors a través de les anomenades Interfícies de Programació d'Aplicacions (API).

Segons ProgrammableWeb les API's més emprades actualment per a crear mashups provenen de:

Page 110: Curs Introducció Web20

Mashups relacionats amb mapes...

Twittervision: Basat en Twitter, localitza i mostra al mapamundi els últims missatges que s'hi han enviat (twittervision.com)

Panoramio: situa les fotos exactament on van ser preses (www.panoramio.com)

Flickvision: Semblant a Twittervision però amb les fotos més recents de flickr (flickrvision.com)

360cities: fotos del món en 3 dimensions (www.360cities.net)

Page 111: Curs Introducció Web20

Mashups de compres, pisos, cases rurals...

Ugux: cerca un producte concret a Amazon i Ebay al mateix temps, i compara resultats. (ugux.com/shopping)

109things: productes més venuts per categoria (www.109things.com )

22books: la gent mostra la seva llista de llibres favorits (www.22books.com)

Vivirama: per cercar pis per llogar (www.vivirama.com)

Zangoa: per cercar cases rurals (www.zangoa.com)

Ruralita: igual que l'anterior (www.ruralita.com)

Page 112: Curs Introducció Web20

Mashups d'informació, notícies, el temps...

Wikimapia: barreja de Wikipedia i Google Maps (www.wikimapia.org)

Keegy: notícies recents de molts llocs diferents però relacionades geogràficament (es.keegy.com)

Weatherbonk: previsions del temps a nivell mundial, càmares de vídeo fixes de ciutats...(www.weatherbonk.com)

Page 113: Curs Introducció Web20

Mashups de música...

Nvivo: informació sobre els últims concerts, festivals... (www.nvivo.es)

LivePlasma: mostra relacions entre actors, cantants, películes... (www.liveplasma.com)

Musiic: cercador de cançons, imatges... (www.musiic.net)

AlbumArt: portades de caràtules de cd's de música de Amazon (http://albumart.org)

Page 114: Curs Introducció Web20

Miscel·lània...

Flashearth: Explorant la terra des de l'aire, podent triar entre diferents fonts de mapes (www.flashearth.com)

Sclipo: una mena de YouTube on la gent penja vídeos mostrant habilitats i trucs (www.sclipo.com)

Bookassist: reserva d'hotels online (www.bookassist.com)

Page 115: Curs Introducció Web20

Mashups en català...

Wikiloc: compartir rutes preferides i punts d'interés GPS (www.wikiloc.com)

Tagzania: uneix etiquetes amb llocs... (www.tagzania.com)

11870.com: per a tenir a mà els llocs i serveis que ens agraden (11870.com)

Page 116: Curs Introducció Web20

Mashups: On trobar-ne molts més...

Tres webs molt destacats (en anglès):

www.programmableweb.com

www.webmashup.com

mashupawards.com