PDF de programación - Tema 5 – Web 2.0, Future Internet, Semantic Web and Ubiquitous Web

Tema 5 – Web 2.0, Future Internet,
Semantic Web and Ubiquitous Web

Dr. Diego Lz. de Ipiña Gz. de Artaza

http://paginaspesonales.deusto.es/dipina

http://www.morelab.deusto.es

http://www.ctme.deusto.es

Contents

1. Web 2.0: una revolución en ciernes

 Tecnologías Web 2.0: AJAX, wikis, blogs, sindicación
 Aplicaciones Web 2.0: GoogleMaps, Flickr, del.icio.us, Digg

2. SOA y Web Services
 El paradigma SOA

 Servicios Web Avanzados (WS-*)

3. Practical Case: Deusto WebLab y Deusto Sentient Graffiti

4. Web Semántica y Servicios Web:

 Concepto

 Servicios Web Avanzados

 Servicios Web Semánticos

5. Sinergia entre Web 2.0, SOA, Web Services y Ambient Intelligence

6. Cloud Computing

Apéndice. Frameworks de última generación

2/106

1

5.1. Web 2.0

Dr. Diego Lz. de Ipiña Gz. de Artaza

http://paginaspesonales.deusto.es/dipina

http://www.morelab.deusto.es

http://www.ctme.deusto.es

Web 2.0

4/106

2

¿Qué es Web 2.0?

 Una “palabreja” (buzzword) que hace referencia a:

 Todo aquello nuevo y popular en la web

 Web participativa tanto de humanos como de máquinas

 Cambio en la manera en que la gente ve la web:

 “Read/Write Web” y la “Web como una Plataforma”
 Acuñado por Tim O'Reilly y Dale Dougherty

 Observaron que varias aplicaciones web utilizan tecnologías

existentes de una manera nueva e innovadora

 Basada en una industria más madura (economía web sana)

Revolución Web 2.0

 Repentina renovación de energía en la web

 Nuevas aplicaciones apareciendo cada día
 Grandes empresas mostrando su talento
 Inversión en web start-ups de nuevo
 Pero:

 No comentamos los errores del 2000

 Temas de usabilidad/accesibilidad comprometidos

 Aplicaciones interesantes, pero no modelo negocio

5/106

6/106

3

Web 2.0 como Plataforma

 La Web está pasando de ser un sistema de envío de

documentos a …
 Una plataforma de aplicaciones

 Simplifica la distribución

 Promociona el modelo de subscripción en vez de la

compra de una vez

Web 1.0 vs. Web 2.0

Web 1.0

Altavista

Hotmail

Ofoto

Mp3.com

Geocities

Web 2.0

Google

Yahoo Mail

Flickr

iTunes

Blogger

MapQuest

Google Maps

Encarta

Slashdot

Wikipedia

Digg

7/106

8/106

4

Requisitos para un Aplicación Web 2.0

 Datos abiertos

 Formatos de datos abiertos
 Habilidad para usar datos fuera de la aplicación
 Permite al usuario crearse sus propios datos

 Arquitectura de participación

 Provee un servicio no un producto
 Incentiva la participación
 Inteligencia colectiva
 Fácil reutilizar y mezclar
 Formar parte de una comunidad
 Buena experiencia de usuario

 Fácil de usar y atractiva
 Interfaz de usuario rica
 Funciona como una aplicación tradicional

Tecnologías Web 2.0 Claves

 Apertura de datos a través de APIs y Servicios Web

 RSS
 Ajax
 Estándares web (DOM, XHTML, CSS)

9/106

10/106

5

Tecnologías de Presentación Web 2.0

 Aplicaciones AJAX

 http://www.ajaxian.com/

 Desktop Widgets

 http://widgets.yahoo.com/

 Aplicaciones Flex

 http://www.adobe.com/products/flex/

 OpenLazlo

 http://www.openlaszlo.org/

 XUL

 http://www.mozilla.org/projects/xul/

 Smart Clients and Avalon

 http://msdn.microsoft.com/winfx/technologies/presentation/default.

aspx

11/106

Aplicación Web 2.0

 Un portal Web 2.0 suele presentar las siguientes

características:
 Rico mecanismo de interacción: Ajax, Lazslo

 CSS

 XHMTL valido o utilización de microformatos (añadir semántica en

HTML)

 Sindicación y agregación de datos basada en RSS y Atom

 Publicación de Weblogs

 Mashups

 REST o XML WebServices APIs

12/106

6

Arquitectura Web 2.0

13/106

AJAX

 AJAX (Asynchronous Javascript and XML), técnica de

desarrollo que genera aplicaciones web más interactivas
combinando:
 XHTML y CSS para la presentación de información

 Document Object Model (DOM) para visualizar dinámicamente e

interactuar con la información presentada

 XML, XSLT para intercambiar y manipular datos

 JSON y JSON-RPC pueden ser alternativas a XML/XSLT

 XMLHttpRequest para recuperar datos asíncronamente

 Javascript como nexo de unión de todas estas tecnologías

14/106

7

¿Por qué AJAX?

 Las aplicaciones web proliferan debido a su simplicidad,

pero:
 Ofrecen una menor interactividad y usabilidad en comparación

con las aplicaciones desktop.

 La interacción del usuario con una aplicación web se interrumpe

cada vez que se necesita algo del servidor

 Varias tecnologías han sido diseñadas para resolver este

problema:
 Java Applets, FLASH

 AJAX permite lo mismo pero sin plug-ins

15/106

Características AJAX

 Aplicaciones son más interactivas al estilo desktop

 Look and feel similar a las aplicaciones de sobremesa sin plug-ins

o características específicas de los navegadores

 Reduce tamaño de la información intercambiada
 Muchas micro-peticiones, flujo de datos global inferior
 Libera de procesamiento a la parte servidora???

 Actualiza porciones de la página en vez de la página

completa

 Necesario asegurar aplicación AJAX funciona en todo

navegador

16/106

8

Arquitectura AJAX

17/106

Aplicaciones AJAX Famosas

 Empresas de referencia en la web definen soluciones AJAX:

 Google

 Orkut (https://www.orkut.com/Login.aspx) es una comunidad virtual que

conecta online a gente a través de una red de amigos.

 Gmail (www.gmail.com)
 Google Suggest (http://www.google.com/webhp?complete=1&hl=en) 

sugiere valores de búsqueda a medida que escribes caracteres

 Google Maps (http://maps.google.com/)

 Yahoo!

 Flickr (http://www.flickr.com/) es una aplicación para gestionar y compartir

fotos

 Oddpost (http://oddpost.com/learnmore)

 El equipo de Oddpost ha rediseñado Yahoo! Mail siguiendo la filosofía AJAX

 En definitiva, AJAX es un buena solución técnica con gran

aplicabilidad, demostrada por aplicaciones reales complejas.

18/106

9

Problemas con AJAX

 Disponibilidad del objecto XMLHttpRequest
 Usabilidad

 Carga del Servidor

 Comportamiento Asíncrono

Ejemplo AJAX

 Conversor números romanos a árabes

19/106

20/106

10

Ejemplo AJAX

 En el HTML:

<input type="text" size="30" id="decimalNum" value

="-- Introduce un número decimal -- “
onkeyup="traducirDecimalARomano()
onkeyup="traducirDecimalARomano();">
onkeyup="traducirDecimalARomano()
onkeyup="traducirDecimalARomano()

<input type="text" size="30" id=“romanNum"

value

="-- Introduce un número romano -- “
onkeyup="traducirRomanoADecimal()
onkeyup="traducirRomanoADecimal();">
onkeyup="traducirRomanoADecimal()
onkeyup="traducirRomanoADecimal()

Ejemplo AJAX

 En JavaScript:

function traducirDecimalARomano
traducirDecimalARomano() {
traducirDecimalARomano
traducirDecimalARomano

var idField = document.getElementById("decimalNum")
document.getElementById("decimalNum");
document.getElementById("decimalNum")
document.getElementById("decimalNum")
if (isPositiveInteger(idField.value)) {

var url = "convert?numDecimal=" + escape(idField.value);
url = "convert?numDecimal=" + escape(idField.value);
url = "convert?numDecimal=" + escape(idField.value);
url = "convert?numDecimal=" + escape(idField.value);
if (window.XMLHttpRequest) {

req = new XMLHttpRequest();
new XMLHttpRequest();
new XMLHttpRequest();
new XMLHttpRequest();

} else if (window.ActiveXObject) {

req = new ActiveXObject("Microsoft.XMLHTTP");

}
req.open("GET", url, true);
req.open("GET", url, true);
req.open("GET", url, true);
req.open("GET", url, true);
req.onreadystatechange = callback;
req.onreadystatechange = callback;
req.onreadystatechange = callback;
req.onreadystatechange = callback;
req.send(null);
req.send(null);
req.send(null);
req.send(null);
return true;

} else {

alert("Texto introducido no es un número entero: " +

idField.value);

idField.value = "";
return false;

}

}

21/106

22/106

11

Ejemplo AJAX

 En JavaScript:

function callback
callback() {
callback
callback

if (req.readyState == 4) {

if (req.status == 200) {
// update the HTML DOM
var message =

req.responseXML.getElementsByTagName("message")[0]
req.responseXML.getElementsByTagName("message")[0];
req.responseXML.getElementsByTagName("message")[0]
req.responseXML.getElementsByTagName("message")[0]

var responseElement =

document.getElementById("romanNum");

message.childNodes[0].nodeValue;

responseElement.value =

}

}

}

Frameworks AJAX

 JavaScript puras:

 http://prototype.conio.net/

 http://script.aculo.us/

 http://openrico.org/demos.page

 Parte Servidora:

 http://www.getahead.ltd.uk/dwr

 http://atlas.asp.net/Default.aspx?tabid=47

23/106

24/106

12

Wikis

 Un tipo de portal que permite a los usuarios editar, añadir,

borrar su contenido de manera rápida y sencilla
 Herramienta efectiva de escritura colaborativa

 A través del browser y utilizando una sintaxis muy simple el

usuario puede escribir documentos

 MediaWiki es una buena herramienta

25/106

Weblogs

 Bitácoras web que recogen artículos periódicos en orden

cronológico inverso

 Se concentran en una temática particular:

 Comida

 Política

 Tecnología

 Dan oportunidad a que la gente comente en la bitácora

 Herramientas: Blogger, WordPress

26/106

13

Sindicación

 La sindicación web es una forma de sindicación donde un
parte de un portal es hecho disponible para ser usado por
otros

 Un portal facilita web feeds:

 Web feed = documento XML con elementos de contenido (título,

descripción) y enlaces a versiones largas del contenido

 Varios formatos:

 Rich Site Summary (RSS 0.91)
 RDF Site Summary (RSS 0.9, 1.0 and 1.1)
 Really Simple Syndication (RSS 2.0)
 Atom

 Utilizamos agregadores para subscribirnos a web o

podcast feeds

 Promociona un modelo “push” para la web

27/106

RSS: Formato de Sindicación

<rss version="2.0">

<channel
channel>
channel
channel

<title>Ejemplo de canal</title>
<link>http://example.com/</link>
<description>Ejemplo de fuente RSS</description>
<language>es</language>
<item
item>
item
item

<title>