PDF de programación - Web Semántica Práctica

Web Semántica Práctica

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 Cases: Deusto WebLab y Deusto Sentient

Graffiti

4. Web Semántica y Servicios Web:

 Concepto
 Servicios Web Avanzados
 Servicios Web Semánticos

5. Programming the Semantic Web with JENA

2

1

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

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

6

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

8

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

10

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

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

6

Arquitectura Web 2.0

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

13

14

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

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

8

Arquitectura AJAX

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.

17

18

9

Problemas con AJAX

 Disponibilidad del objecto XMLHttpRequest
 Usabilidad
 Carga del Servidor
 Comportamiento Asíncrono

Ejemplo AJAX

 Conversor números romanos a árabes

19

20

10

Ejemplo AJAX

 En el HTML:

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

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

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

value

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

Ejemplo AJAX

 En JavaScript:

function traducirDecimalARomano
traducirDecimalARomano() {
traducirDecimalARomano
traducirDecimalARomano

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

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

} else if (window.ActiveXObject) {

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

}
req.open
("GET", urlurlurlurl, , , , true
req.open("GET",
true););););
truetrue
("GET",
req.open
req.open
("GET",
req.onreadystatechange = = = = callback
req.onreadystatechange
callback;;;;
callback
req.onreadystatechange
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

22

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

24

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

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

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

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>
itemitem

<title>1 &lt; 2</title>
<link>http://example.com/1_less_than_2.html</link>
<description>1 &lt; 2, 3 &lt; 4. En HTML, &lt;b&gt;

comienza una frase en negrita

y puedes comenzar un enlace con &lt;a href=

</description>
<enclosure
enclosure urlurlurlurl="http://rss.org