Arquitectura del Web 2

Nivel de aplicación: Web II
Bibliografia:
- Web Design in a Nutshell, J. Niederst Robbins, 3rd Ed., O’Reilly, 2006 (Safari)
- HTTP: Pocket Reference, Clinton Wong, O’Reilly 2000 (Safari)
- Java Network Programming, E. Rusty Harold, 3ª Ed., O’Reilly 2004 (safari)
- Restful Web Services, L. Richardson, S. Ruby, O’Reilly, 2007 (Safari)
- Safari Books: http://proquest.safaribooksonline.com/
Otros:
- XML in a Nutshell, E. R. Harold, W. S. Means, 3rd Ed., O’Reilly, 2004 (Safari)
- HTTP: The Definite Guide, D. Gourley & B. Totty, O’Reilly 2002 (Safari)
- HTTP Developer’s Handbook, Chris Shiflett, Developer’s Library, 2003 (Safari)
- HTML & XHTML, C. Musciano, B. Kennedy, 6th Ed., O’Reilly, 2006 (Safari)
- Using Microformats, B. Suda, O’Reilly, 2006 (Safari)
- Normas W3C (http://www.w3.org) y RFCs del IETF (http://www.ietf.org)

Tuesday, October 27, 2009

Índice (parte 2)
…….
Web de datos y XML
Vocabularios, Namespaces y DTDs
XHTML
REST
ATOM y ATOMPP (Atom Publishing Protocol)
API REST de Twitter
Aplicaciones de cliente, JavascriptJSON, Applets, …
Aplicaciones Web y Applets
Creación de Nuevos Servicios en Java


Web de Datos y XML


Web humana y Web programable
Web humana
 Se diseño para publicar documentos legibles por
personas
 HTML esta dseñado para ese proposito

Web programable o de datos
 Debe ser procesable por aplicaciones
 XML: Diseñado para ser procesable por programas
 Aparecen otros lenguajes: JSON, YML, ..
 Pero también legible por personas
 Y redefinición de HTML como XHTML


SGML, HTML, XML y XHTML


XML


Representación de datos


Marcado de Datos/Docs con XML
Las marcas definen la estructura de un documento
 Marcado de un documento define una estructura en árbol
 Los bloques deben estar contenidos (anidados) unos en otros

Marcado de un texto: <NombreDeMarca>texto marcado</NombreDeMarca>

Ejemplo: Representación en árbol
<listado> listado
<persona>
<nombre>Albert Einstein</nombre>
<profesion>físico</profesion> persona persona
</persona>
<persona>
<nombre>Wolfgang Amad. Mozart</nombre> nombre profesion nombre profesion
<profesion>músico</profesion>
</persona> Albert Wolfgang
físico músico
</listado> Einstein Amad. Mozart

Sintaxis. El nombre de una marca puede contener:
Letras: "a-z" o "A-Z" y cualquier otra letra o ideograma no inglés
Números: "0-9" y cualquier otro número no inglés
signos: "_", "-" o ".", además ":" está reservado para namespaces
El nombre de una marca debe empezar por letra (o ideograma) o por "_" (underscore)
Ejemplos de marcas bien construidas: profesión, eñe, hola_que_tal, _uno_, _91-336-7331, περаЂ, ….


XML: Atributos
Comentarios: 

Atributos. Las marcas pueden contener atributos, por ejemplo:
<marca atributo="valor">texto</marca>

Un atributo siempre debe tener un valor asignado, que debe ir entre comillas (" o ').

XHTML hace uso extensivo, por ejemplo:
<a href="http://www.dit.upm.es"> Departamento Ingeniería Telemática</a>

Marcas sin texto pueden utilizar una sintaxis abreviada: <marca atributo="valor" />

Marcas y atributos son equivalentes. El ejemplo anterior es equivalente a:


<listado>
<persona nombre="Albert Einstein" profesion="físico" />
<persona nombre="Wolfgang Amad. Mozart" profesion="músico" />
</listado>

XML: Caracteres especiales
Referencias (<, &, ..): Los caracteres usados como delimitadores de marcas y atributos
no deben aparecer en el texto o en los parámetros.

Se deben utilizar los siguientes simbolos:
&amp = & &lt = < &gt = > &quot = " &apos = '

Secciones CDATA: <![CDATA[ texto literal ]]>

Una sección CDATA puede contener cualquier texto, excepto la secuencia ]]>, que no
puede aparecer dentro de CDATA. En su lugar debe utilizarse “]]>”.
Ejemplo:

<formula><![CDATA[ x = (3 < x) & (8 < 9) ]]></formula>


XML: la cabecera (prolog)
Cabecera (prolog) de un fichero XML: debe contener la Declaración XML y otras
declaraciones o instrucciones de procesado anteriores al elemento raíz.
El elemento raíz es la primera marca del documento.

Declaración XML: <?xml version=“1.0” encoding=“ISO-8859-1” standalone=“yes”?
>
“version” y “encoding” juego de caracteres utilizado.
“standalone”: indica si necesita un DTD externo o no.

Declaración de tipo de documento: Un documento XML puede incluir una referencia
al DTD que lo define. Ejemplo (declaración de doc XHTML):
<!DOCTYPE html PUBLIC “-//W3C//DTDXHTML….//EN” “http://www.w3.org/TR/html1…..dtd”>

Instrucciones de procesado: Dirigidas a herramientas que deben procesar el fichero.
Pueden estar en cualquier lugar del fichero, siempre que sea fuera de una marca.
Su sintaxis es: <?HerramientaObjetivo parametros …… ?>

Ejemplo de hoja de estilo CSS: <?xml-stylesheet href=“person.css” type=“text/css”?>


Ejemplo: Catálogo de libros en XML y CSS
<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/css" href=“catalogo1.css"?>
<Catalogo>
<TituloCatalogo> Listado de Libros</TituloCatalogo>
<Listado>
<Libro genero="ensayo">
<Titulo>La Tumba de Tutankhamón</Titulo>
<Autor nacionalidad="inglesa">Howard Carter</Autor>
<Fecha>1990</Fecha>
<ISBN>84-233-1684-X</ISBN>
<Editorial>Ediciones Destino</Editorial>
</Libro>
<Libro genero="teatro">
<Titulo>Fuente Ovejuna</Titulo>
<Autor nacionalidad="española">Lope de Vega</Autor>
<Fecha>1996</Fecha>
<ISBN>84-7039-750-8</ISBN>
<Editorial>Editorial Castalia S.A.</Editorial>
</Libro>
</Listado>
</Catalogo>


CSS: catalogo1.css
/* Ejemplo de hola de estilo para Catalogo.xml */

/* Comando de formato del Titulo del Catalogo */

TituloCatalogo {display: block; /* Comienza bloque */
font-family: Arial ; /* selecciona Arial */
font-size: 20pt; /* Tamaño de letra: 20pt */
font-weight: bold; /* En negrita */
text-align: center} /* Texto centrado */ El ejemplo funciona en Firefox y no
en Explorer (peor soporte a CSS)
/* Comando de formato de Libro */

Libro {display:block; /* Comienza bloque */ font-size: small, .., 12pt, .. 0.2cm, ..
font-size: 12pt; /* Tamaño de letra: 12pt */ font-weight: normal bold, 100, ..,
font-weight: normal; /* texto normal */ 900, ..
text-align: left} /* Texto alineado a la izquierda */
font-strech: normal, wider,
/* Titulo hereda las definiciones salvo font-weight */ narrower, condensed, expanded, ..
display: inline, block, list-item,
Titulo {font-weight: bold} /* Cambia normal a bold */ none, table, table-row, table-cell, ..
Titulo:after {content: ", "} /* Inserta una coma */
text:-align: left, right, center,
/* Autor se muestra sin aplicar ninguna instrucción */ justify, .. (aplica solo a block)
text-indent: 0.5in, ..
/* Fecha, ISBN y Editorial no se muestran */
color: blue, red, .., rgb(7,99,2), ..,
Fecha {display: none} #00FF00, .., rgb(8%, 12%, 70%), ..
ISBN {display: none}
Editorial {display: none}
<marca>: before, after, first-letter,
first-line (aplica solo a block)
content: “texto” (inserta el texto)

Vocabularios XML


Vocabularios XML
XML permite crear “vocabularios”
 Restringen al marcado para uso en un ámbito de aplicación determinado

Un vocabulario es un conjunto de marcas y atributos
Un marcado es conforme a un vocabulario si solo utiliza sus marcas y
atributos
 Ejemplo de vocabulario con 4 marcas: <cuadro>, <autor>, <año>, <tipo>

Existen vocabularios creados por organismos de estandarización
Ejemplos de vocabularios definidos por W3C:
 XHTML, SVG, MahML, RDF, …

El usuario también puede crearse “vocabularios” a su medida
 Por ejemplo: para datos de clientes, productos, etc.


Definición de vocabularios XML


XML Namespaces
Los espacios de nombres XML diferencian vocabularios de marcado
 Desambiguan marcas iguales de vocabularios diferentes
 Ejemplo: <swcm:practica>, <rdf:RDF>, <xhtml:html>, <dc:title>, …
 Tutorial: http://www.w3schools.com/xml/xml_namespaces.asp
 Se declaran con atributo “xmlns”
 El ámbito de la declaración es el elemento donde se declara
 Ejemplo: <swcm:p1 “xmlns:swcm=“http://www.upm.es/swcm”>……. </swcm:p1>
 Normalmente se usa un vocabulario implícito:
 <html xmlns=“http://www.w3.org/1999/xhtml”>

<rdf:RDF xmlns:rdf=“http://www.w3.org/TR/REC-rdf-syntax#”>
<rdf:description about=“http://www.museo.com/impresionistas.xml>
<description>
..…
<description>
<rdf:description about=“http://www.museo.com/impresionistas.xml>
</rdf:RDF>


XML Namespaces Example

<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">

<html xmlns=“http://www.w3.org/1999/xhtml>
<body>
<h2>My CD Collection</h2>
<table border="1">
<tr>
<th align="left">Title</th>
<th align="left">Artist</th>
</tr>
<xsl:for-each select="catalog/cd">
<tr>
<td><xsl:value-of select="title"/></td>
<td><xsl:value-of select="artist"/></td>
</tr>
</xsl:for-each>
</table>
</body>
</html>

</xsl:template>
</xsl:stylesheet>


DTD - Document Type Declaration
Formalismo sencillo basado en expresiones regulares
 Define estructura sintáctica de marcas y atributos de un marcado
 Permite validar automáticamente la corrección de un fichero XML
 Tutorial: http://www.w3schools.com/dtd
El fichero XML referencia el DTD en “!DOCTYPE”
 El primer atributo indica el elemento raíz, a partir de el aplica el
DTD
 Ejemplos

<!DOCTYPE chapter SYSTEM "../dtds/chapter.dtd">

<!DOCTYPE chapter PUBLIC ”-//DTDXML//EN” "../dtds/chapter.dtd">

<!DOCTYPE ficha SYSTEM "http://www.etsit.upm.es//DTD/ficha.dtd">


Ejemplo: Catálogo de libros en XML
<!DOCTYPE Catalogo SYSTEM “catalogo.dtd">
<Catalogo>
<TituloCatalogo> Listado de Libros</TituloCatalogo>
<Listado>
<Libro genero="ensayo">
<Titulo>La Tumba de Tutankhamón</Titulo>
<Autor nacionalidad="inglesa">Howard Carter</Autor>
<Fecha>1990</Fecha>
<ISBN>84-233-1684-X</ISBN>
<Editorial>Ediciones Destino</Editorial>
</Libro>
<Libro genero="teatro">
<Titulo>Fuente Ovejuna</Titulo>
<Autor nacionalidad="española">Lope de Vega</Autor>
<Fecha>1996</Fecha>
<ISBN>84-7039-750-8</ISBN>
<Editorial>Editorial Castalia S.A.</Editorial>
</Libro>
</Listado>
</Catalogo>


DTD: catalogo.dtd
!ELEMENT Listado (Libro)*: Definición de elemento Libro de Listado
!ATTLIST: Definición de attributo
*: varias instancias (puede haber 0 o mas)
CDATA (Character DATA): puede incluir cualquier texto
 el analizador sintáctico (parser) no lo analiza
PCDATA (Parsed Character DATA): texto (en código utilizado: ISO-8859-1)
#REQUIRED: atributo obligatorio
#IMPLIED: atributo no obligatorio

<!ELEMENT Catalogo (TituloCatalogo)>
<!ELEMENT Catalogo (Listado)>
<!ELEMENT Listado (Libro)*>
<!ELEMENT Libro (Titulo,Autor,Fecha,ISBN,Editorial)>
<!ATTLIST Libro genero CDATA #REQUIRED>
<!ELEMENT Titulo (#PCDATA)>
<!ELEMENT Autor (#PCDATA)>
<!ATTLIST Autor nacionalidad CDATA #IMPLIED>
<!ELEMENT Fecha (#PCDATA)>
<!ELEMENT ISBN (#PCDATA)>
<!ELEMENT Editorial (#PCDATA)>


DTD: El lenguaje
Definición de marcas y sus relaciones:
<!ELEMENT Lista (elem1, elem2, ..)>: Lista debe contener elem1 y elem2 y ..
<!ELEMENT Lista (elem1 Ι elem2 Ι ..)>: Lista debe contener elem1 o elem2 o ..
<!ELEMENT Lista (elem1?)>: Lista debe contener 0 o 1 instancias de elem1
<!ELEMENT Lista (elem1*)>: Lista debe contener 0 o más instancias de elem1
<!ELEMENT Lista (elem1+)>: Lista debe contener 1 o más instancias de elem1
<!ELEMENT elem2 (#PCDATA)>: elem2 debe contener texto en código utilizado
<!ELEMENT elem2 EMPTY>: elem2 es una marca vacía, no contiene nada
<!ELEMENT elem2 ANY>: elem2 puede contener cualquier cosa

Definición de atributos:
<!ATTLIST elem1 href CDATA #REQUIRED>: elem1 tiene atributo obligatorio href
<!ATTLIST elem2 day (1 Ι 2 Ι 3) #IMPLIED>: atributo day opcional solo puede conener 1, 2 o 3
<!ATTLIST elem1 href CDATA #REQUIRED
month (Jan Ι Feb Ι Mar) #REQUIRED>: elem1 posee 2 atributos, href y month

CDATA (Character DATA): puede incluir cualquier texto, no se analizará
#PCDATA (Parsed Character DATA): texto (en código utilizad, por ejemplo ISO-8859-1)
#REQUIRED: atributo obligatorio
#IMPLIED: atributo no obligatorio

Ejemplo2: Catálogo con DTD
<?xml version="1.0"?>
<!DOCTYPE person [
<!ELEMENT person (name+, profession*)>
<!ELEMENT name EMPTY>
<!ATTLIST name first CDATA #REQUIRED
last CDATA #REQUIRED>

<!ELEMENT profession EMPTY>
<!ATTLIST profession value CDATA #REQUIRED>
]>
<person>
<name first="Alan" last="Turing"/>
<profession value="computer scientist"/>
<profession value="mathematician"/>
<profession value="cryptographer"/>
</person>

Ejercicio aplicación-2
Añadir un campo nuevo a cada libro de “Catalogo de Libros”
que describa la edición.
 El nuevo campo indicara el idioma de la edición como texto
marcado
 El numero de edición ira como atributo
 Ejemplo
 <Edicion numero=“segunda”>español</Edicion>

Definir el nuevo DTD

Modificar catalogo1.css para que imprima después del autor
el campo edición añadido en el ejercicio aplicación-1
 <Edicion numero=“segunda”>español</Edicion>


DTD y XML-Schema
DTD y XML-Schema permiten definir sub-lenguajes de XML
 Con una sintaxis de marcado específica
 Definen que marcas y que atributos son validos y cuales no
 La sintaxis se puede validar automáticamente

DTD (Document Type Definition)
 Lenguaje sencillo, pero limitado
 Basado en expresiones regulares
 Tutoriales: http://www.w3schools.com/dtd

XML Schema
 Lenguaje complejo, pero de gran poder expresivo
 Basado en gramáticas con atributos

Tutoriales:
http://www.w3.org
 http://www.w3schools.com

Las normas del W3C son en su mayoría sub-lenguajes de XML
 Con semánticas específicas


XHTML


XHTML
Tutorial: http://www.w3schools.com/xhtml

XHTML 1.0 Transitional
 Diseñado para facilitar la transición desde HTML 4.01
XHTML 1.0 Frameset
 Otro sabor ‘transicional’, con framesets

XHTML 1.0 Strict
 La version 1.0 ‘de verdad’, totalmente estructural.

XHTML Basic
 Versión mini para móviles.

XHTML 1.1
 Lenguaje modular y extensible:
 capaz de incorporar como modulos MathML, SVG, Framests, …

XHTML 2.0
En proceso de definición

Ejemplo: pagina XHTML en ISO-Latin-1
<?xml version=“1.0” encoding=ISO-8859-1”?>
<!DOCTYPE html
PUBLIC “-//W3C//DTD XHTML Transitional//EN”
“http://www.w3.org/TR/html1-transitional.dtd”>
<html xmlns=“http://www.w3.org/1999/xhtml”>
<head> <title> Ejemplo pagina HTML </title> </head>

<body>
<h1> Ejemplo de Cabecera </h1>

Acceda al <a href="http://www.w3schools.com/html/">
tutorial de HTML de W3C Schools</a>. <p />
A continuación aparece una lista y una tabla

<ul>
<li> elemento <font color="red">rojo</font> </li>
<li> elemento <strong>en negrita</strong> </li>
<li> elemento <sub>con subíndice</sub> </li>
</ul>
<table border="1">
<tr> <td>Primera celda <br /> de la tabla</td>
<td><img src="iconos.gif" /></td> </tr>
<tr> <td>Celda 21</td> <td>Celda 22</td> </tr>
</table>
</body>
</html>

Ejemplo: pagina XHTML en UTF-8
<?xml version=“1.0” encoding=“UTF-8”?>
<!DOCTYPE html
PUBLIC “-//W3C//DTD XHTML Transitional//EN”
“http://www.w3.org/TR/html1-transitional.dtd”>
<html xmlns=“http://www.w3.org/1999/xhtml”>
<head> <title> Ejemplo pagina HTML </title> </head>

<body>
<h1> Ejemplo de Cabecera </h1>

Acceda al <a href="http://www.w3schools.com/html/">
tutorial de HTML de W3C Schools</a>. <p />
A continuación aparece una lista y una tabla

<ul>
<li> elemento <strong>en negrita</strong> </li>
<li> elemento <sub>con subíndice</sub> </li>
</ul>
<table border="1">
<tr> <td>Primera celda <br /> de la tabla</td>
<td><img src="iconos.gif" /></td> </tr>
</table>
</body>
</html>

Código de página XHTML
<?xml version=“1.0” encoding=“UTF-8”?> <?xml …>: declaración de
<!DOCTYPE html fichero XML, de la versión
PUBLIC “-//W3C//DTD XHTML Transitional//EN” utilizada (1.0) y del código de
“http://www.w3.org/TR/html1-transitional.dtd”> caracteres usado (UTF-8).
<!DOCTYPE html …>:
<html xmlns=“http://www.w3.org/1999/xhtml”> declaración de tipo de
<head> <title> Ejemplo pagina HTML </title> </head> documento html
 PUBLIC …..>: identificador
<body> público del DTD de XHTML
<h1> Ejemplo de Cabecera </h1>  xmlns=“http://.....”>:
definición del espacio de
Acceda al <a href="http://www.w3schools.com/html/"> nombres xmlns
tutorial de HTML de W3C Schools</a>. <p />  Todas las marcas deben
A continuación aparece una lista y una tabla estar en minúsculas.
 Todos los parámetros deben
llevar un valor asociado
 Todos los valores deben ir
<ul> entre comillas.
<li> elemento <strong>en negrita</strong> </li>  Debe corregirse la sintaxis
<li> elemento <sub>con subíndice</sub> </li> de las marcas sin
</ul> terminador: <br />
<table border="1">  Las letras acentuadas deben
<tr> <td>Primera celda <br /> de la tabla</td> cambiarse por los códigos
<td><img src="iconos.gif" /></td> </tr> UTF-8 correspondientes
</table>
</body>
</html>

Redefiniendo el Web en XML
El W3C está redefiniendo el Web en XML
 XHTML: definición de HTML en XML que elimina ambigüedades
 CSS: definición de formato de presentación
 SVG: definición de gráficos vectoriales con animación
 SMIL: información multimedia
 MathML: definición de formulas matemáticas
 XFORMS: definición de formularios
 XLINK, XPOINTER, XPATH: URLs y punteros generalizados
 XQUERY: consulta a base de datos XML
 X……: (ver http://www.w3.org)
El Web evoluciona hacia una arquitectura abierta
 De documentos, datos y conocimiento
 Capaz de ser reutilizados e integrados con facilidad (Mash-ups)
 Capaz de crear documentos, recursos, aplicaciones y servicios


Rest: Restful Web Services


Índice
REST o WS
Principios de REST
 Direccionabilidad
 Interfaz uniforme
 Sin estado
 Representación abierta
 Hipertexto
Conclusiones


Web humana
 Visor Web, HTTP y HTML
 HTML: diseñado para leer documentos
 A evolucionado hacia CSS, XML, XHTML, …

Web programable
API, HTTP/SOAP, XML y ………
 XML: Datos procesables por programa
 Debate entre REST y “Big” Web Services (W3C)


Servicios o Recursos


Que es REST


REST: Principios


Recursos REST


Ejemplo: Amazon S3
Servicio de almacenamiento de objetos: “Disco Virtual”
Arquitectura Cloud Computing
http://aws.amazon.com/s3/

Autenticación: “AWS Access Key” o “Certificado X.509”
Tiene 3 tipos de recursos:
Bucket-list: conjunto de buckets* de un usuario
https://s3.amazonaws.com/
Bucket en particular: repositorio de objetos
https://s3.amazonaws.com/{Bucket}/
Objeto: posee metadato y valor
https://s3.amazonaws.com/{Bucket}/{Objeto}
*Bucket: disco o repositorio virtual accesible a través de HTTP


Interfaz uniforme


Amazon S3: Interfaz Uniforme

GET HEAD PUT DELETE
Bucket-list Lista los
buckets de
un usuario
Bucket Lista los Crear bucket Borrar
(disco objetos del bucket
bucket
virtual)
Objeto Obtener Obtener Crear y/o Borrar
valor y metadato del Asignar Objeto
metadato del objeto valor a
objeto objeto y
metadato


Representación de los recursos
Que es lo que obtenemos al acceder al URI del recurso?
 Una representación “bien conocida” y “abierta”

Pueden utilizar varios formatos:
 HTML, XHTML, XML, JSON, PDF, FLASH, FLEX, ...

HTTP nos facilita el tipo (MIME) y permite negociar el
formato.
 Los mas utilizados: XML, JSON, RSS2.0 y ATOM.


Comunicación sin estado


Hipermedia
Las transiciones entre estados
 Son siempre a través de enlaces
 El usuario navega (No debe recordar comandos)

Usar un servicio:
 similar a navegar por la Web

El servidor contiene la definición del servicio
 Proporciona los enlaces como parte del recurso
 El cliente es genérico

Modelo distribuido de fácil evolución.


Un servicio REST bien diseñado
 También puede ser utilizado con un visor Web
 Los recursos se presentan en el visor
 Con CSS, XSLT, …..
 Se usa navegando
 haciendo click sobre las operaciones (enlaces)

Existe un problema con XHTML4
 Los formularios solo soportan GET, POST
 Quiza se solucione en XHTML5


Diseño de una aplicación REST
1. Determinar e conjunto de datos
2. Diseñar los recursos:
 Partiendo el conjunto de datos en recursos

Para cada recurso
Nombrar el recurso con un URI
Definir las operaciones del interfaz uniforme a utilizar
Diseñar la representación (query, XML, ..) aceptada por el servidor
Diseñar la representación (XML, XHTML, ..) aceptada por el cliente
Conectar unos recursos con otros
 Utilizando hiperenlaces y formularios que enlacen unos recursos con otros
Considerar los ciclos productivos
 La evolución de operaciones correctas
1. Considerar condiciones de error
 Respuesta a llamadas erroneas


Ventajas de RESTfull HTTP
Soporte universal y simple desde cualquier
lenguaje y plataforma.
Escalabilidad demostrada.
Soporte para redirección, cache, diferentes
representaciones, …
Integración real para comunicación B2B.
Funciona con XML, pero también con otros
formatos (XHTML, JSON, ..).


Conclusiones
ROA: Resource Oriented Architecture
 REST es el protocolo para la arquitectura del mayor
sistema distribuido del mundo (la web).

Mayor adopción
 Adoptado casi unánimemente en el Web2.0
 Google, del.icio.us, Amazon, Yahoo, ….
 Las normas de “Big” Web Services están todavía
incompletas
 RoR a discontinuado el soporte a “Big WS”


RSS, ATOM and ATOM-PP


Publicación de contenidos Web


RSS: Publicación de contenidos Web


ATOM y ATOM-PP


Formato de Sindicación ATOM


Protocolo de Publicación ATOM


AtomPP: Interfaz Uniforme

GET POST PUT DELETE
Service Devolver servicio Indefinido Indefinido Indefinido
Document en XML
Category Devolver categoría Indefinido Indefinido Indefinido
Document en XML
Collection Devolver un “Atom Crear in nuevo Indefinido Indefinido
feed” “member”
Member Devolver “member” Indefinido Actualizar el Borrar
asociado a URI, recurso “member”
normalmente un identificado
Atom entry, pero por URI
puede ser un
fichero binario


Google Data API (GData)
Google ha apoyado fuertemente Atom y ATOM-PP
 Devuelve el resultado de busqueda en ATOM

 Como un “Atom Feed”, es decir como una lista de noticias (hits)
 http://code.google.com/apis/gdata/docs/2.0/reference.html

Ha necesitado extender ATOM: OpenSearch
 Con un vocabulario complementario: Gdata

 Añade tres parametros nuevos
 “OpenSearch:totalResults”: numero total de hits
 “OpenSearch:startIndex”: primer resultado solicitado
 “OpenSearch:itemsPerPage”: hits por página solicitados
Define la estructura de los URL queries


La API REST de Twitter
http://apiwiki.twitter.com/REST+API+Documentation


Twitter


API REST de Twitter
API de Twitter sigue fielmente REST
 Permite crear aplicaciones que integren el servicio de Twitter
 http://apiwiki.twitter.com/REST+API+Documentation
 Usa el interfaz uniforme con parametros en
 XML, JSN, RSS (si aplica) y Atom (si aplica)

Autenticación
 Usuarios registrados utilizan Basic Authentication
 Uso de OAuth se ofrecera en breve de forma experimental

Codificación de parametros
 Código UTF-8 y URL-encode


AtomPP: Interfaz Uniforme

GET POST PUT DELETE
Service Devolver servicio Indefinido Indefinido Indefinido
Document en XML
Category Devolver categoría Indefinido Indefinido Indefinido
Document en XML
Collection Devolver un “Atom Crear in nuevo Indefinido Indefinido
feed” “member”
Member Devolver “member” Indefinido Actualizar el Borrar
asociado a URI, recurso “member”
normalmente un identificado
doc Atom entry, por URI
pero puede ser un
fichero binario


Aplicaciones Web


Los componentes actuales del Web


Web programable
Web humana
 Web de documentos online
 Basada en: Visor Web, HTTP y HTML
 HTML: diseñado para representar documentos

Web programable
Web de recursos online
 Procesables por aplicaciones y servicios
 Pero también legibles como documentos
 Basada en: Visor, APIs, HTTP, Aplicaciones Web
 Formato abierto (XML, XHTML, JSON, ..) para representar datos


Aplicación Web
Aplicación capaz de viajar por la red
 Reside en un servidor
 Se ejecuta en el cliente
 Normalmente se invoca automáticamente al cargar la pagina
HTML que la contiene
La aplicación debe ser segura
 Se suele ejecutar sobre un gestor de seguridad que
evita acciones peligrosas para el cliente
Ejemplos:
 Applets Java (los primeros)
 AJAX (Asynchronous Javascript and XML)
 Widgets


JSON:


JSON:

{"menu": {
"id": "file",
"value": "File",
"popup": {
"menuitem": [
{"value": "New", "onclick": "CreateNewDoc()"},
{"value": "Open", "onclick": "OpenDoc()"},
{"value": "Close", "onclick": "CloseDoc()"}
]
}
}}

XML:

<menu id="file" value="File">
<popup>
<menuitem value="New" onclick="CreateNewDoc()" />
<menuitem value="Open" onclick="OpenDoc()" />
<menuitem value="Close" onclick="CloseDoc()" />
</popup>
</menu>


Applets


Applet
Applet: mini-aplicación capaz de viajar por la red
 Reside en un servidor
 En formato bytecode (<applet>.class)
 Se ejecuta en el cliente
 Se invoca automáticamente al cargar la pagina HTML que lo
referencia
Un applet debe ser seguro para el cliente
 Se ejecuta sobre un gestor de seguridad que evita
acciones potencialmente peligrosas
Se construyen como clases derivadas de
 java.applet.Applet


Ejemplo HTML: Hello World
La sentencia HTML asocia
 un código en bytecode y una zona de visualización
<HTML>
<HEAD> <TITLE> Hello World </TITLE> </HEAD>

<BODY>
This is the applet: <p>

<applet code=“HelloWorldApplet.class” // codigo
width=“200” height=“200”> // tamaño
</applet>

</BODY>
</HTML>


Ejemplo applet: Hello World
Redefine el método paint(..) de Applet
 paint(..) escribe ahora Hello World! en el panel
 paint(..) se invoca al arrancar el applet
 Graphics: clase contenedora de cualquier gráfico dibujable

import java.applet.Applet;
import java.awt.Graphics;

public class HelloWorldApplet extends Applet {

public void paint (Graphics g) {

g.drawString("Hello World!”, 50, 25);
}
}

Creación de applets
Un applet se define por extensión de la clase
“Applet”
Un applet hereda métodos de la clase Applet
 debe redefinirlos con la semántica adecuada
 Por ejemplo, tiene un método “paint” que dibuja
mensajes en el área de visualización de un visor
 puede ser utilizado para presentar mensajes
Utiliza las facilidades del Paquete AWT para
comunicarse con el usuario
 a través del teclado, ratón, pantalla, ...


AWT: Interacción con el usuario
El paquete AWT (Abstract Window Toolkit)
 permite crear objetos gráficos
 “Widgets”: botones y otros elementos de interacción
Un interfaz persona/maquina se diseña utilizando
objetos de AWT

AWT (51 clases, 7 interfaces, 2 excepciones y 1 error)
Component.class // Creacion de buttons, scrollbars, ..
Color.class // Creacion de colores RGB
Event.class // atención a eventos de teclado, raton, ....
.........


Algunas clases de AWT
java.awt.Graphics: para manejar objetos gráficos
 Algunos metodos de java.awt.Graphics
 drawString(String s, int x, int y)
 drawLine(int x1, int y1, int x2, int y2)
 drawRect(int x, int y, int width, int high)
 drawOval(int x, int y, int width, int high)
 fillOval(int x, int y, int width, int high)
 setColor(Color c)
 setFont(Font font)
java.awt.Color: constructor de colores RGB
 Color(int red, int green, int blue)
java.awt.Font: constructor de Fonts
 Font(String name, int style, int size)


Modificar HelloWorldApplet para que muestre el
texto “hola” dentro de un ovalo de color azul
El texto (hola) debe estar
 en color amarillo (yellow)
 en helvetica (Helvetica)
 en negrita (BOLD)
 tamaño: 48


El paquete java.applet
Clases:
 Applet
 superclase para derivar applets
 Se comunica con el visor a través de los interfaces

Interfaces: definen el interfaz del applet con el entorno
 AppletContext
 Visor (Browser) donde se ejecuta el applet.
 El objeto da acceso al visor desde el programa Java
 AppletStub
 Stub: programa interfaz entre el applet y el visor web
 define el interfaz entre el applet y el visor
 AudioClip
 interfaz de control de reproducción de un audioclip
 soporta reproducción simultanea de varios audioclips


Carga y ejecución de un Applet
Un visor carga una pagina HTML con un Applet
Se carga el fichero <applet>.class del servidor
Ejecución de metodos “init()” y “start()” (si existen)
Entrada y salida del ratón en ventana provoca:
 ejecución de “start()” y “stop()” respectivamente
Salida de pagina con applet provoca:
 ejecución de “stop()” y “destroy()”


Eventos
AWT utiliza un modelo basado en eventos
 Cada acción del usuario provoca un evento Java
 Por ejemplo, picar con el ratón, pulsar una tecla, ......
Para cada tipo de evento
 se puede definir una rutina de atención al evento
 La rutina es invocada al ocurrir el evento.
Las clases que atienden eventos deben
implementar el interfaz “ActionListener”
 Además deben registrar la clase para escucha
 addActionListener(this);

interface ActionListener {
public void actionPerformed(ActionEvent event)
}


Ejemplo: redirect
Applet de carga de otra
página web
 La carga se realiza al pulsar
DIT
 Carga “http://www.dit.upm.es”

<HTML>
<HEAD><TITLE> Redirection to another page </TITLE></HEAD>
<BODY>
This applet redirects the browser to another page: <p>

<APPLET code="redirect.class" width=200 height=45> </APPLET>
</BODY>
</HTML>


Ejemplo: redirect Applet implements ActionListener {
public class redirect extends

public void init() {
Button button = new Button("DIT");
add(button); button.addActionListener(this);
}

public void actionPerformed(ActionEvent event) {
try {
URL url = new URL("http://www.dit.upm.es");
AppletContext context = getAppletContext();
context.showDocument(url);
} catch (MalformedURLException e) {
Graphics g = getGraphics();
g.drawString("URL mal formada",8,60);
}
repaint();
}
}

HTML: Applet con botones

<HTML>
<HEAD> <TITLE> Blue and Red Buttons </TITLE> </HEAD>

<BODY>
This applet has a red and a blue button: <p>

<APPLET code="RedBlue.class" // codigo
width=200 height=100>
</APPLET>
</BODY> </HTML>

Ejemplo: Applet con botones
import java.awt.event.*; import java.awt.*; import java.applet.*;

public class RedBlue extends Applet implements
ActionListener {
Color c; String l;

Button r = new Button("Red");
add(r);
r.addActionListener(this);
Button b = new Button("Blue");
add(b);
b.addActionListener(this);
c = Color.black;
}
.......


Ejemplo: Applet con botones II
........

public void paint(Graphics g) {
g.setColor(c);
g.drawString("Texto rojo o azul", 55, 80);
}

if ((l = event.getActionCommand()).equals("Red"))
{ c = Color.red; setBackground(Color.blue); }
else if (l.equals("Blue"))
{ c = Color.blue; setBackground(Color.red); }
repaint();
}
}

Modificar el applet “RedBlue” para que cuando se
pulse un button además de cambiar el color del
fondo cambie el tamaño del applet y la posición
del texto.
 Se recomienda utilizar “resize(int x; int y)”.


FormularioAWT
recibe 2 campos
 mensaje, URL
Envía un “query”
 en formato:
 x-www-form-
urlencoded
Muestra mensaje
 en visor
<HTML>
<HEAD><TITLE> Formulario con Applet </TITLE></HEAD>

<BODY>
This applet creates a form like input: <p>

<APPLET code="formularioAWT.class" width=500 height=100> </APPLET>
</BODY>
</HTML>


FormularioAWT: componentes
public class formularioAWT extends Applet implements ActionListener {

Label l1, l2; TextField tf1, tf2; Button button;


l1 = new Label("mensaje: "); add(l1);
tf1 = new TextField(50); add(tf1);

l2 = new Label("URL: "); add(l2);
tf2 = new TextField(60); add(tf2);

button = new Button("Enviar"); add(button);
button.addActionListener(this);
}

........


Formulario: envío query
if (event.getActionCommand().equals("Enviar")) {
try {
String str = (tf2.getText() +
"?mensaje=" + URLEncoder.encode(tf1.getText()));
URL url = new URL(str);
AppletContext context = getAppletContext();
context.showDocument(url); // carga la nueva pagina
}
catch (MalformedURLException e) {
Graphics g = getGraphics();
g.drawString("URL mal formada",8,60);
}
showStatus(tf1.getText()); // muestra tf1 en la barra de mensajes
}
repaint();
}
}


java.applet.Applet I
public class Applet extends Panel {
public void destroy(); // se ejecuta al acabar el applet
public AppletContext getAppletContext();
// AppletContext representa el visor donde corre el applet
public String getAppletInfo(); // devuelve info. del applet
public AudioClip getAudioClip(URL url); // carga audioclip
public AudioClip getAudioClip(URL url, String name);
public URL getCodeBase(); // URL:lugar de carga del applet
public URL getDocumentBase();
// URL de la pagina HTML de invocación del applet
public Image getImage(URL url); // carga imagen
public Image getImage(URL url, String name);
public Locale getLocale();
public String getParameter(String name);
........ // devuelve un String asociado al parametro name


java.applet.Applet II
........
public String[][] getParameterInfo();
public void init(); // se ejecuta al arrancar el applet
public boolean isActive();
public void play(URL url); // reproduce un audioclip
public void play(URL url, String name);
public void resize(int width, int height);
public void resize(Dimension d);
public final void setStub(AppletStub stub); // instala stub
public void showStatus(String msg);
// muestra msg en la barra de mensajes del visor
public void start(); // se ejecuta al entrar el raton en el applet
public void stop(); // se ejecuta al salir el raton del applet
}


Interfaz: java.applet.AudioClip
AudioClip
 interfaz que deben implementar las clases que
gestionen la reproducción de ficheros de audio
La clase Applet esta escrita usando el interfaz
 puede manejar cualquier objeto que lo implemente

public abstract interface AudioClip {

public abstract void loop(); // reproduce el clip en bucle

public abstract void play(); // reproduce el clip

public abstract void stop(); // para la reproducción del clip
}

Ficheros JAR
Un applet suele necesitar varios ficheros
 applet + imagenes + audioclips + ...
 Se necesita un acceso http por cada uno
Java 1.1 permite empaquetarlos en un fich. JAR
Fichero JAR (Java ARchive)
 incluye varios ficheros juntos y comprimidos (ZIP)
 El fichero JAR debe ser referenciado en HTML
Ejemplo: empaquetado con herramienta jar
 > jar cf appl1.jar *.class image.gif sound.au
 opciones “cf” para crear el fichero “jar”


Hello World empaquetado
<HTML>
<HEAD> <TITLE> Hello World </TITLE> </HEAD>

<BODY>
This is the applet: <p>

<applet archive=“appl1.jar”
code=“HelloWorld2.class” // codigo
width=“200” height=“200”> // tamaño
</applet>

</BODY>
</HTML>


Seguridad en Java
Modelo de caja de arena (sandbox)
 Dos niveles: seguridad implícita y explícita
Seguridad implícita (intrínseca)
 Incorporada en la maquina virtual
 Protege frente a virus, caballos de Troya, espías, ..
 evita posibles ataques de un applet hostil

Seguridad explícita
 Para las aplicaciones que necesitan seguridad
 Utiliza una API de seguridad (paquete java.security)


Seguridad implicita
fichero.class
Java VM

Verificador de bytecode Verificador Bytecode

(Bytecode Verifier): verifica
integridad del código Cargador de clases
Cargador de clases
(ClassLoader): carga compilador/interprete
clases de forma segura
Gestor de seguridad/ Base de GestorDeSeguridad/
Datos: Controlador de Acceso
Controlador de accesos llaves
(Security manager/Access
controller): limita accesos sistema operativo


Carga de un Applet I
La carga de un Applet referenciado con el siguiente código

<APPLET CODEBASE=http://lab.dit.upm.es
CODE=redirect.class WIDTH=200 HEIGHT=200>

Se realiza con los siguientes pasos:

1) Visor Web reserva un área de 200x200 puntos

2) Visor Web abre una conexión con el servidor
=> servidor DOCUMENTBASE (o CODEBASE si existe)

3) Visor Web solicita <applet>.class
=> GET /redirect.class HTTP/1.0
.......

Carga de un Applet II
4) El servidor responde enviando el fichero

=> HTTP/1.0 200 OK
Server: NCSA/1.2.3
MIME-version: 1.0
Content-type: application/octet-stream // para bytecode
Content-length: 1508

.. <fichero>..

5) Visor guarda el fichero recibido en un “array de bytes”

6) El verificador de bytecode verifica el código


Carga de un Applet III
7) El “array de bytes” es convertido en un objeto ejecutable

=> con defineClass() y loadClass()
de objeto ClassLoader
=> con nombre único en red: es.dit.upm.lab.redirect

8) Cuando el nuevo objeto referencia otra clase

=> busca primero en CLASSPATH local
=> si no esta, busca en servidor de donde vino el Applet

9) El gestor de seguridad evita la realización de acciones no
permitidas durante la ejecución del Applet


Restricciones de seguridad
Applet: código no fiable (untrusted)
 solo es fiable si lleva una firma digital aceptada
Ejecución sobre gestor de seguridad (no fiable)
 objeto de java.lang.Security Manager class
 Prohibe acciones potencialmente peligrosas
 lectura/escritura/características de ficheros/directorios
 Accesos a través de la red (solo deja al servidor del applet)
 cargar librerías dinámicamente, arrancar procesos, ....
 Acceder a las`propiedades del sistema
 cargar/definir clases de sun.*, definir clases en java.*
 Crear o llamar Classloaders, utilizar “reflectión methods”, ..
 ........


Carga y verificación de código
Cargador de applets:
 instancia de “java.lang.ClassLoader”
 cada cargador implementa una política de seguridad y carga
 el cargador separa el espacio de nombres local y el cargado
para evitar suplantaciones maliciosas
Verificación de bytecode:
 se realiza durante la carga
 objetivo: evitar accesos no deseados y caídas de la MV Java
 verificaciones realizadas
 corrección del código
 no existencia de desbordamiento de la pila
 uso correcto de los registros
 no hay conversiones ilegales de tipos


Creación de nuevos servicios en
Java

Bibliografia:
- Java Network Programming, E. Rusty Harold,
Capitulos 10, 11 y 12
- Doc. API: paquete java.net


Creación de nuevos servicios
java.net
 permite la creación de nuevos servicios de aplicación
 por extensión de las clases (abstractas) de la API
Clases que crean conexiones de aplicación
 URLConnection
 URLStreamHandler
 URLContentHandler
Interfaces a implementar
 URLStreamHandlerFactory
 ContentHandlerFactory


Uso de servicios HTTP

URLEncoder
URLConnection URLStream- Content -
URL Handler Handler
(abstract)
(abstract) (abstract)

HttpURLConnection Clases para crear
(abstract) nuevos servicios
Clases para
acceso a HTTP


Creación de nuevos servicios (I)

1) Definir el nuevo URL de acceso al servicio
 Conviene que sea similar al URL de HTTP
 daytime://gilito.lab.dit.upm.es:8000
 echo:// gilito.lab.dit.upm.es
2) Decidir el formato de informacion utilizado
 Utilizando MIME
 Ejemplo: text/plain, text/html, ..
 Parametro de retorno de “getContentType()”


Creación de nuevos servicios (II)
3) Crear una subclase de URLConnection
 Debe entender y manejar el protocolo de aplicación
utilizado
 Debe implementar como mínimo “connect()”
 “connect()” es un método abstracto en URLConnection
 Además puede redefinir otros métodos
 getInputStream()
 getContentType()
 getContent()
 ...


Creación de nuevos servicios (III)
4) Crear una subclase de URLStreamHandler
 Debe incluir: “openConnection()”
 devuelve un objeto de la subclase de URLConnection
 si el nuevo URL es diferente de HTTP redefinir parseURL() y
toExternalForm()
5) La clase que defina la aplicación debe
 implementar el interfaz URLStreamHandlerFactory
 Con el método createStreamHandler()


Ejemplo: servicio daytime
Objetivo: crear un servicio de acceso a
servidores daytime
Acceso a través de un URL especifico
 daytime://host[:port]
 Ejemplo: daytime://gilito.lab.dit.upm.es
Invocación
 > java ProtocolTester daytime://gilito.lab.dit.upm.es
Debe utilizar circuitos TCP directamente
Debe devolver text/plain


clase daytimeURLConnection (I)
import java.net.*; import java.io.*;

public class daytimeURLConnection extends URLConnection {
Socket theConnection = null;
public final static int defaultPort = 13;

public daytimeURLConnection (URL u) {
super(u);
}

public String getContentType() {
return "text/plain";
}
............


clase daytimeURLConnection (II)

......
public synchronized void connect() throws IOException {
int port;
if (!connected) {
port = url.getPort();
if ( port < 0) { port = defaultPort; }
theConnection = new Socket(url.getHost(), port);
connected = true;
}
}
.......


clase daytimeURLConnection (III)

.........
public synchronized InputStream getInputStream()
throws IOException {
if (!connected) { connect(); }
return theConnection.getInputStream();
}

public Object getContent() throws IOException {
return getInputStream();
}
}


clase daytimeURLStreamHandler

import java.net.*;
import java.io.*;

public class daytimeURLStreamHandler
extends URLStreamHandler {

protected URLConnection openConnection(URL u)
throws IOException {
return new daytimeURLConnection(u);
}

}


clase ProtocolTester (I)
import java.net.*;

public class ProtocolTester imple. URLStreamHandlerFactory {
String theURL;

public static void main (String[] args) {
if (args.length == 1) {
ProtocolTester pt = new ProtocolTester(args[0]);
URL.setURLStreamHandlerFactory(pt);
pt.test();
} else { System.err.println("Usage: java ProtocolTest. url"); }
}

public ProtocolTester(String s) { theURL = s; }


clase ProtocolTester (II)
public void test() {
String l;
try {
URL u = new URL(theURL);
DataInputStream dis = new DataInputStr.(u.openStream());
while ((l = dis.readLine()) != null) { System.out.println(l); }
} catch (IOException e) { System.err.println(e); }
}

public URLStreamHandler createURLStreamHa.(String prot) {
if (prot.equalsIgnoreCase("daytime")) {
return new daytimeURLStreamHandler();
} else { return null; }
}
}


Creación de servicios en Java
Applicacion URLStreamH- ContentHan-
andlerFactory dlerFactory
(interface) (interface)
URLEncoder
URLConnection URLStream- Content -
URL Handler Handler
(abstract)
(abstract) (abstract)
servURLConnection

servURLStreamHan.

servURLContentHan.

HttpURLConnection Clases para crear
Clases para acceso (abstract) nuevos servicios
a servicios definidos
por el usuario


Extender el diseño de ProtocolTester
 para que incluya también un servicio de eco
 deberá aceptar los protocolos daytime y echo
El cliente de eco deberá
 establecer una conexión TCP
 esperar eco de una línea y desconectar
URL recomendado: echo://host[:port]
Formato de llamada: java NewTester url
 Ejemplo:
 > java NewTester daytime://gilito.lab.dit.upm.es
 > java NewTester echo://gilito.lab.dit.upm.es


Clase URLConnection (I)
public abstract class URLConnection extends Object {

protected URL url
protected boolean doInput
protected boolean doOutput
protected boolean allowUserInteraction
protected boolean useCaches
protected long ifModifiedSince
public static FileNameMap fileNameMap
protected boolean connected

protected URLConnection(URL url)

public abstract void connect() throws IOException
.......

Clase URLConnection (II)
public int getContentLength()
public String getContentType() // MIME-type
public String getContentEncoding() // codificación de linea
public long getExpiration() // seconds since January 1, 1970
public long getDate() // seconds since January 1, 1970 GMT
public long getLastModified() // last modification
public String getHeaderField(String name) // acc. by name
public Object getContent() throws IOException
public InputStream getInputStream() throws IOException
public OutputStream getOutputStream() throws IOException
public static synchronized void
setContentHandlerFactory(ContentHandlerFactory fac)
protec. static String guessContentTypeFromName(String n)
.......
}

La clase URLStreamHandler
Es la superclase de todos los manejadores
de flujos (StreamHandlers)
 Hay un flujo asociado a cada protocolo
 ftp, http, telnet, ...
 Si el protocolo ya posee un manejador se utiliza el
existente
La subclase asociada a un protocolo debe
redefinir
 openConnection()


Clase URLStreamHandler
public abstract class URLStreamHandler extends Object {

public URLStreamHandler()

protected abstract URLConnection openConnection(URL u)
throws IOException
protected void parseURL(URL u, String spec, int start,
int limit)
protected String toExternalForm(URL u)
protected void setURL(URL u, String protocol, String host,
int port, String file, String ref)
}


La clase ContentHandler
Superclase de todos los manejadores de
contenidos (ContentHandlers)
Un manejador de contenidos permite
 leer un objeto “URLConnection”
 getContent() devuelve el objeto de acceso al contenido

public abstract class ContentHandler extends Object {

public ContentHandler()

public abstract Object getContent(URLConnection urlc)
throws IOException
}


Arquitectura del Web 2

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (16)

Destaque

Destaque (20)

Semelhante a Arquitectura del Web 2

Semelhante a Arquitectura del Web 2 (20)

Mais de Juan Quemada

Mais de Juan Quemada (8)

Último

Último (10)

Arquitectura del Web 2