PDF de programación - Introducción a la Web 2.0

Contenidos

Evolución

Características

Tecnologías

Ejemplos

Introducción a la Web 2.0

Jose Emilio Labra Gayo

Octubre 2006

Jose Emilio Labra Gayo

Introducción a la Web 2.0

Contenidos

Evolución

Características

Tecnologías

Ejemplos

Contenidos

Evolución

Características

Tecnologías

Protocolos básicos
HTML y CSS
Javascript y DOM
XML y Servicios Web
AJAX

Ejemplos

Jose Emilio Labra Gayo

Introducción a la Web 2.0

Contenidos

Evolución

Características

Tecnologías

Ejemplos

Evolución del Hipertexto

I 1945 - Vannevar Bush escribe As we may think, libro de

ciencia ficción que describe el hipertexto.

I 1965 - Ted Nelson

I Acuña el término de Hipertexto e Hiperenlaces.
I Enlaces entre texto, gráficos y audio
I Su sistema Xanadú no fue implementado

I 1968 - Douglas Engelbart implementa el primer sistema

I Interfaz gráfica de usuario (incluido el ratón)

I 1987 - Hypercard de Apple

Jose Emilio Labra Gayo

Introducción a la Web 2.0

Contenidos

Evolución

Características

Tecnologías

Ejemplos

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 comerciales

I Competencia entre navegadores: Netscape vs IE
I Nacimiento de W3c para estandarizar

I 2000 - Burbuja de Internet

I Comercio electrónico y portales Web
I Pinchazo de la burbuja

I 2005 - Web 2.0

Jose Emilio Labra Gayo

Introducción a la Web 2.0

Contenidos

Evolución

Características

Tecnologías

Ejemplos

¿Qué es la Web 2.0?

I En 2004, se celebra la primer conferencia
I Servicios de Internet de segunda generación
I Popularidad de cierto tipo de servicios Web con muchas

características comunes:

I Enfoque hacia el usuario
I Importancia de la información
I Interacción en múltiples formas (no sólo HTML)
I No existe una definición precisa...

I Numerosos sitios se proclaman Web 2.0
I Una buzzword?
I Una actitud?
I Un conjunto de tecnologías?
I Algo que está de moda?
I Una nueva revolución?

Jose Emilio Labra Gayo

Introducción a la Web 2.0

Contenidos

Evolución

Características

Tecnologías

Ejemplos

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 programación ligeros
I Multi-dispositivo

Jose Emilio Labra Gayo

Introducción a la Web 2.0

Contenidos

Evolución

Características

Tecnologías

Ejemplos

La Web como plataforma

I Creación de Aplicaciones de Internet en vez de portales
I Enriquecimiento de la experiencia del usuario
I Menor diferencia entre portales web y aplicaciones de

escritorio

I Ejemplo: GMail

Jose Emilio Labra Gayo

Introducción a la Web 2.0

Contenidos

Evolución

Características

Tecnologías

Ejemplos

Aprovechamiento de la Inteligencia colectiva

I Aspectos colaborativos
I Los usuarios participan de la creación de información
I Objetivo: Compartir recursos e información

I Ejemplos: Wikipedia y otros wikis

I Sistemas de reputación: eBay, Amazon, Digg
I Etiquetado colaborativo en lugar de taxonomías centralizadas

I Flickr, del.icio.us

Jose Emilio Labra Gayo

Introducción a la Web 2.0

Contenidos

Evolución

Características

Tecnologías

Ejemplos

Blogs e Inteligencia Colectiva

I Emergencia de los Blogs relacionada con Web 2.0
I Los Blogs se diferencian de las páginas personales
I Utilización de RSS para publicación/suscripción a mensajes
I Enlaces permanentes (permalinks) facilitan el acceso a

mensajes anteriores

I Fomento de participación (no solamente publicación)
I La Blogoesfera puede considerarse un entorno global de

conocimiento

Jose Emilio Labra Gayo

Introducción a la Web 2.0

Contenidos

Evolución

Características

Tecnologías

Ejemplos

Importancia de los datos

I La información es la clave
I La riqueza de la aplicación radica en la información que

contiene

I Objetivo: Facilitar acceso a los datos
I Combinaciones de datos en múltiples formatos

I Ejemplo: Housing Maps

I Importancia de gestión de datos
I Rivalidad en captar/gestionar ciertos tipos de datos:

localización, identidad, agendas, etc.

Jose Emilio Labra Gayo

Introducción a la Web 2.0

Contenidos

Evolución

Características

Tecnologías

Ejemplos

Fin del ciclo de Software tradicional

I El software no se descarga sino que está en la Web
I No hay versiones de productos
I Versión Beta constante
I Actualización automática (siempre se accede a la última

versión)

I Importancia de lenguajes dinámicos: Perl, Python, PHP, Ruby,

etc.

I Usuarios = desarrolladores

I Filosofía de código abierto
I Liberación de API’s y servicios

Jose Emilio Labra Gayo

Introducción a la Web 2.0

Contenidos

Evolución

Características

Tecnologías

Ejemplos

Modelos de programación ligeros

I Arquitecturas basadas en servicios simples
I Utilización de servicios Web con protocolos estándar

I Dicotomía REST vs SOAP

I Intercambio de información mediante estándares: XML
I Comunicación asíncrona: AJAX
I Objetivo: escalabilidad a gran escala
I Innovación en el ensamblaje de aplicaciones

Jose Emilio Labra Gayo

Introducción a la Web 2.0

Contenidos

Evolución

Características

Tecnologías

Ejemplos

Multi-dispositivo

I Importancia del acceso desde múltiples dispositivos
I Cada vez mayor acceso desde dispositivos móviles

I El acceso a la Web ya no es principalmente desde ordenadores

de sobremesa

I Objetivo: computación ubicua
I Ejemplo: Podcasting (iTunes)

Jose Emilio Labra Gayo

Introducción a la Web 2.0

Contenidos

Evolución

Características

Tecnologías

Ejemplos

Mejora de la Experiencia de usuario

I Utilización de estándares: XHTML, CSS que aumenten la

accesibilidad

I Recuperaciones de información asíncronas durante la

interacción

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 Más ejemplos en WebMashup.com

Jose Emilio Labra Gayo

Introducción a la Web 2.0

Contenidos

Evolución

Características

Tecnologías

Ejemplos

Protocolos básicos

World Wide Web

I Protocolo de comunicación:

HTTP

I Modelo cliente-servidor
I Sin estado en la

comunicación

Jose Emilio Labra Gayo

Introducción a la Web 2.0

Contenidos

Evolución

Características

Tecnologías

Ejemplos

Protocolos básicos

URI

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

I Tiene doble funcionalidad:

1.
2.

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

I URN = Nombres únicos
I IRI permite utilizar caracteres internacionales en el

identificador

Jose Emilio Labra Gayo

Introducción a la Web 2.0

Contenidos

Evolución

Características

Tecnologías

Ejemplos

HTML y CSS

HTML

I HTML (Hypertext Markup
Language) es un lenguaje de
marcado para hipertexto

I Primeras versiones de HTML

usaban sintaxis SGML (un
lenguaje de marcado genérico

I XHTML = versión reciente

basada en XML

Ejemplo

<html>

<head>

< t i t l e >E j e m p l o</ t i t l e >

</ head>
<body>
<h1>E j e m p l o</ h1>
<p>Un e n l a c e a l a

<a h r e f=” h t t p : / /www . u n i o v i . e s ”>
U n i v e r s i d a d de O v i e d o</ a>

</p>
</ body>

</ html>

Jose Emilio Labra Gayo

Introducción a la Web 2.0

Contenidos

Evolución

Características

Tecnologías

Ejemplos

HTML y CSS

CSS

I CSS (Cascading Style

Sheets), hojas de estilo en
cascada

I Permite separar detalles de
presentación del contenido

I Facilita la reutilización de las

presentaciones

I Facilita la independencia del

dispositivo en el contenido
I Aumenta la accesibilidad

Jose Emilio Labra Gayo

Introducción a la Web 2.0

Ejemplo

<html>
<head>
< t i t l e >E j e m p l o</ 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 j e m p l o . c s s ”
t y p e=” t e x t / c s s ” />

</ head>
<body>

. . .

</ html>

body { b a c k g r o u n d : y e l l o w ; }
h1 { t e x t −a l i g n :

c e n t e r ; }

Contenidos

Evolución

Características

Tecnologías

Ejemplos

Javascript y DOM

ECMAScript

Ejemplo

I Lenguaje de scripting que
puede ser ejecutado en el
cliente

I Varias implementaciones:

JavaScript, JScript
I Lenguaje basado en

prototipos

I No todos los navegadores

soportan el lenguaje

Jose Emilio Labra Gayo

Introducción a la Web 2.0

t y p e =” t e x t / j a v a s c r i p t ”>

<html>
<head>
< s c r i p t
f u n c t i o n d i s p
a l e r t ( ” Has p u l s a d o ! ” )
}
</ s c r i p t >
</head>

a l e r t ( ) {

<body>
<form>
<i n p u t

</form>
</body>

t y p e =”b u t t o n ”
o n c l i c k =” d i s p
v a l u e =”No P u l s e s ”>

a l e r t ( ) ”

Contenidos

Evolución

Características

Tecnologías

Ejemplos

Javascript y DOM

DOM

I DOM (Document Object

Model), Modelo de objetos
del documento

I Librería de funciones (API)

que permiten acceder de
forma estándar al árbol del
documento

I Originalmente, para HTML y

posteriormente para XML

Jose Emilio Labra Gayo

Introducción a la Web 2.0

Contenidos

Evolución

Características

Tecnologías

Ejemplos

Javascript y DOM

DHTML

I DHTML (Dynamic HTML) se refiere a la combinación entre

HTML, CSS, Javascript y DOM
I Permite crear efectos dinámicos
I Adquirió mala fama debido a los problemas de compatibilidad

entre navegadores

I Algunas demos son espectaculares

Jose Emilio Labra Gayo

Introducción a la Web 2.0

Contenidos

Evolución

Características

Tecnologías

Ejemplos

XML y Servicios Web

XML

I XML (eXtensible Markup Language), lenguaje de marcado

extensible

I Mismo objetivo que SGML pero pensado para la Web
I Mas restrictivo que SGML
I A la vez, más sencillo
I Adquirió gran éxito como lenguaje de intercambio

Jose Emilio Labra Gayo

Introducción a la Web 2.0

Contenidos

Evolución

Caracter´