Introducción a la Web 2 - di002.edv.uniovi.esdi002.edv.uniovi.es/~labra/cursos/Web20/web20.pdf · I No existe una definición precisa... I Numerosos sitios se proclaman Web 2.0

Contenidos Evolucion Caracterısticas Tecnologıas Ejemplos

Introduccion a la Web 2.0

Jose Emilio Labra Gayo

Octubre 2006




Contenidos

Evolucion

Caracterısticas

TecnologıasProtocolos basicosHTML y CSSJavascript y DOMXML y Servicios WebAJAX

Ejemplos




Evolucion del Hipertexto

I 1945 - Vannevar Bush escribe As we may think, libro deciencia ficcion que describe el hipertexto.

I 1965 - Ted NelsonI Acuna el termino de Hipertexto e Hiperenlaces.I Enlaces entre texto, graficos y audioI Su sistema Xanadu no fue implementado

I 1968 - Douglas Engelbart implementa el primer sistemaI Interfaz grafica de usuario (incluido el raton)

I 1987 - Hypercard de Apple



http://xanadu.com.au/ted/


Historia de WWW

I 1990 - Nacimiento de la WWW (Tim Berners-Lee)I Lenguajes y protocolos de hipertexto (HTTP,URI, HTML)I Primeros navegadores (Mosaic, 1993)I Objetivo principal: Intercambio cientıfico

I 1995 - Aplicaciones comercialesI Competencia entre navegadores: Netscape vs IEI Nacimiento de W3c para estandarizar

I 2000 - Burbuja de InternetI Comercio electronico y portales WebI Pinchazo de la burbuja

I 2005 - Web 2.0



http://www.w3.org/People/Berners-Lee/

http://www.w3c.org


¿Que es la Web 2.0?

I En 2004, se celebra la primer conferenciaI Servicios de Internet de segunda generacionI Popularidad de cierto tipo de servicios Web con muchas

caracterısticas comunes:I Enfoque hacia el usuarioI Importancia de la informacionI Interaccion en multiples formas (no solo HTML)

I No existe una definicion precisa...I Numerosos sitios se proclaman Web 2.0I Una buzzword?I Una actitud?I Un conjunto de tecnologıas?I Algo que esta de moda?I Una nueva revolucion?




Algunas caracterısticas de la Web 2.0

I La Web como plataforma

I Aprovechamiento de la Inteligencia colectiva

I Importancia de los datos

I Fin ciclo Software tradicional

I Modelos de programacion ligeros

I Multi-dispositivo




La Web como plataforma

I Creacion de Aplicaciones de Internet en vez de portales

I Enriquecimiento de la experiencia del usuario

I Menor diferencia entre portales web y aplicaciones deescritorio

I Ejemplo: GMail



http://www.gmail.com


Aprovechamiento de la Inteligencia colectiva

I Aspectos colaborativos

I Los usuarios participan de la creacion de informacionI Objetivo: Compartir recursos e informacion

I Ejemplos: Wikipedia y otros wikis

I Sistemas de reputacion: eBay, Amazon, DiggI Etiquetado colaborativo en lugar de taxonomıas centralizadas

I Flickr, del.icio.us



http://www.wikipedia.org

http://www.ebay.com/

http://www.amazon.com

http://www.didd.com

http://www.flickr.com

http://del.icio.us


Blogs e Inteligencia Colectiva

I Emergencia de los Blogs relacionada con Web 2.0

I Los Blogs se diferencian de las paginas personales

I Utilizacion de RSS para publicacion/suscripcion a mensajes

I Enlaces permanentes (permalinks) facilitan el acceso amensajes anteriores

I Fomento de participacion (no solamente publicacion)

I La Blogoesfera puede considerarse un entorno global deconocimiento




Importancia de los datos

I La informacion es la clave

I La riqueza de la aplicacion radica en la informacion quecontiene

I Objetivo: Facilitar acceso a los datosI Combinaciones de datos en multiples formatos

I Ejemplo: Housing Maps

I Importancia de gestion de datos

I Rivalidad en captar/gestionar ciertos tipos de datos:localizacion, identidad, agendas, etc.



http://www.housingmaps.com


Fin del ciclo de Software tradicional

I El software no se descarga sino que esta en la Web

I No hay versiones de productos

I Version Beta constante

I Actualizacion automatica (siempre se accede a la ultimaversion)

I Importancia de lenguajes dinamicos: Perl, Python, PHP, Ruby,etc.

I Usuarios = desarrolladoresI Filosofıa de codigo abiertoI Liberacion de API’s y servicios




Modelos de programacion ligeros

I Arquitecturas basadas en servicios simplesI Utilizacion de servicios Web con protocolos estandar

I Dicotomıa REST vs SOAP

I Intercambio de informacion mediante estandares: XML

I Comunicacion asıncrona: AJAX

I Objetivo: escalabilidad a gran escala

I Innovacion en el ensamblaje de aplicaciones




Multi-dispositivo

I Importancia del acceso desde multiples dispositivosI Cada vez mayor acceso desde dispositivos moviles

I El acceso a la Web ya no es principalmente desde ordenadoresde sobremesa

I Objetivo: computacion ubicua

I Ejemplo: Podcasting (iTunes)




Mejora de la Experiencia de usuario

I Utilizacion de estandares: XHTML, CSS que aumenten laaccesibilidad

I Recuperaciones de informacion asıncronas durante lainteraccion

I Todos los usuarios y los sitios son importantes (Long tail)I Mashups o aplicaciones Web hıbridas que combinan datos de

diversas fuentes.I Ejemplo: Google maps, Amazon, eBay, etc.I Mas ejemplos en WebMashup.com



http://www.webmashup.com


Protocolos basicos

World Wide Web

I Protocolo de comunicacion:HTTP

I Modelo cliente-servidor

I Sin estado en lacomunicacion




Protocolos basicos

URI

I URI = URL + URNI URL (Uniform Resource Locator)

I Tiene doble funcionalidad:

1. Identificar un recurso globalmente2. Indicar el protocolo de acceso: http, ftp, telnet...

I URN = Nombres unicos

I IRI permite utilizar caracteres internacionales en elidentificador




HTML y CSS

HTML

I HTML (Hypertext MarkupLanguage) es un lenguaje demarcado para hipertexto

I Primeras versiones de HTMLusaban sintaxis SGML (unlenguaje de marcado generico

I XHTML = version recientebasada en XML

Ejemplo

<html><head>< t i t l e>Ejemplo</ t i t l e>

</head><body><h1>Ejemplo</h1><p>Un en l a c e a l a

<a h r e f=” ht tp : //www. u n i o v i . e s ”>Un i v e r s i d a d de Oviedo</a>

</p></body>

</html>




HTML y CSS

CSS

I CSS (Cascading StyleSheets), hojas de estilo encascada

I Permite separar detalles depresentacion del contenido

I Facilita la reutilizacion de laspresentaciones

I Facilita la independencia deldispositivo en el contenido

I Aumenta la accesibilidad

Ejemplo

<html><head>< t i t l e>Ejemplo</ t i t l e>< l i n k r e l=” s t y l e s h e e t ”

h r e f=” e jemp lo . c s s ”type=” t e x t / c s s ” />

</head><body>

. . .</html>

body { background : y e l l ow ; }h1 { t ex t−a l i g n : c e n t e r ; }




Javascript y DOM

ECMAScript

I Lenguaje de scripting quepuede ser ejecutado en elcliente

I Varias implementaciones:JavaScript, JScript

I Lenguaje basado enprototipos

I No todos los navegadoressoportan el lenguaje

Ejemplo

<html><head>< s c r i p t type=”t e x t / j a v a s c r i p t ”>f u n c t i o n d i s p a l e r t ( ) {a l e r t (”Has pu l s ado ! ” )}</ s c r i p t ></head>

<body><form>< i n pu t type=”button ”

o n c l i c k=”d i s p a l e r t ( )”v a l u e=”No Pu l s e s”>

</form></body>

</html>




Javascript y DOM

DOM

I DOM (Document ObjectModel), Modelo de objetosdel documento

I Librerıa de funciones (API)que permiten acceder deforma estandar al arbol deldocumento

I Originalmente, para HTML yposteriormente para XML




Javascript y DOM

DHTML

I DHTML (Dynamic HTML) se refiere a la combinacion entreHTML, CSS, Javascript y DOM

I Permite crear efectos dinamicos

I Adquirio mala fama debido a los problemas de compatibilidadentre navegadores

I Algunas demos son espectaculares



http://www.dhteumeuleu.com/


XML y Servicios Web

XML

I XML (eXtensible Markup Language), lenguaje de marcadoextensible

I Mismo objetivo que SGML pero pensado para la Web

I Mas restrictivo que SGML

I A la vez, mas sencillo

I Adquirio gran exito como lenguaje de intercambio




XML y Servicios Web

Servicios Web

I Aplicaciones accesibles a traves de la Web que se comunicanmediante tecnologıas estandar

I Habitualmente, los mensajes contienen documentos XML

I Gran exito de las Arquitecturas Orientadas a Servicios




AJAX

Ajax

I AJAX (Asynchronous Javascript and XML), XML y Javascriptasıncrono

I Combinacion de tecnologıas que permiten intercambiarinformacion con el servidor durante la interaccion del usuario(de forma asıncrona)

I Mediante Javascript se realiza la peticion de datos al servidormediante HTTP de forma asıncrona

I Los datos estan en formato XMLI A partir de dicha informacion se puede modificar el DOM del

documentoI Objetivo: mejorar experiencia del usuario, dando apariencia de

aplicacion de escritorio




Ejemplos

I Del.icio.usI Intercambio de marcadores y etiquetas de marcadoresI Creacion de folksonomıas

I FlickrI Intercambio de imagenes, comentarios y etiquetas

I PanoramioI Fotografıas e informacion geografica

I YouTubeI Vıdeos y comentarios

I MySpaceI Informacion personal: gustos musicales, comentarios, etc.



http://del.cio.us

http://flickr.com

http://www.panoramio.com

http://www.youtube.com

http://www.myspace.com

Documents

Introducción a la Web 2 - di002.edv.uniovi.esdi002.edv.uniovi.es/~labra/cursos/Web20/web20.pdf · I No existe una definición precisa... I Numerosos sitios se proclaman Web 2.0