arquitectura del web 2

Nivel de aplicación: Web IIBibliografia:- 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

http://proquest.safaribooksonline.com/

http://proquest.safaribooksonline.com/

http://www.w3.org/

http://www.w3.org/

http://www.ietf.org/

http://www.ietf.org/

Índice (parte 2)…….Web de datos y XMLVocabularios, Namespaces y DTDsXHTML RESTATOM y ATOMPP (Atom Publishing Protocol)API REST de TwitterAplicaciones de cliente, JavascriptJSON, Applets, …Aplicaciones Web y AppletsCreación de Nuevos Servicios en Java


Web de Datos y XML


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

Web humana y Web programable


SGML, HTML, XML y XHTML


XML


Representación de datos


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> <persona> <nombre>Albert Einstein</nombre> <profesion>físico</profesion> </persona> <persona> <nombre>Wolfgang Amad. Mozart</nombre> <profesion>músico</profesion> </persona></listado>

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, περаЂ, ….

Marcado de Datos/Docs con XML

listado

persona persona

nombre profesion

Albert Einstein físico

nombre profesion

Wolfgang Amad. Mozart músico


XML: AtributosComentarios: 

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 especialesReferencias (<, &, ..): 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:

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>

&amp = & &lt = < &gt = > &quot = " &apos = '


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>


/* 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 */

/* Comando de formato de Libro */

Libro {display:block; /* Comienza bloque */ font-size: 12pt; /* Tamaño de letra: 12pt */ font-weight: normal; /* texto normal */ text-align: left} /* Texto alineado a la izquierda */

/* Titulo hereda las definiciones salvo font-weight */

Titulo {font-weight: bold} /* Cambia normal a bold */Titulo:after {content: ", "} /* Inserta una coma */

/* Autor se muestra sin aplicar ninguna instrucción */

/* Fecha, ISBN y Editorial no se muestran */

Fecha {display: none}ISBN {display: none} Editorial {display: none}

CSS: catalogo1.css

El ejemplo funciona en Firefox y no en Explorer (peor soporte a CSS)

font-size: small, .., 12pt, .. 0.2cm, ..font-weight: normal bold, 100, .., 900, ..font-strech: normal, wider, narrower, condensed, expanded, ..display: inline, block, list-item, none, table, table-row, table-cell, ..text:-align: left, right, center, justify, .. (aplica solo a block)text-indent: 0.5in, ..color: blue, red, .., rgb(7,99,2), .., #00FF00, .., rgb(8%, 12%, 70%), ..<marca>: before, after, first-letter, first-line (aplica solo a block)content: “texto” (inserta el texto)


Vocabularios XML


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

Un vocabulario es un conjunto de marcas y atributosUn 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ónEjemplos 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 NamespacesLos 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>


http://www.w3schools.com/xml/xml_namespaces.asp

http://www.w3schools.com/xml/xml_namespaces.asp

XML Namespaces Example<?xml version="1.0" encoding="ISO-8859-1"?>

<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 DeclarationFormalismo 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">


http://www.w3schools.com/dtd

http://www.w3schools.com/dtd

Ejemplo: Catálogo de libros en XML<?xml version="1.0" encoding="ISO-8859-1"?><!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>


<!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: 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 analizaPCDATA (Parsed Character DATA): texto (en código utilizado: ISO-8859-1)#REQUIRED: atributo obligatorio#IMPLIED: atributo no obligatorio


DTD: El lenguajeDefinició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-SchemaDTD 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


XHTMLTutorial: 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.0En proceso de definición


http://www.w3schools.com/xhtml

http://www.w3schools.com/xhtml

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”?>







<?xml …>: declaración de fichero XML, de la versión utilizada (1.0) y del código de caracteres usado (UTF-8).<!DOCTYPE html …>: declaración de tipo de documento html

PUBLIC …..>: identificador público del DTD de XHTML

xmlns=“http://.....”>: definición del espacio de nombres xmlns

Todas las marcas deben estar en minúsculas.

Todos los parámetros deben llevar un valor asociado

Todos los valores deben ir entre comillas.

Debe corregirse la sintaxis de las marcas sin terminador: <br />

Las letras acentuadas deben cambiarse por los códigos UTF-8 correspondientes

Código de página XHTML <?xml version=“1.0” encoding=“UTF-8”?>







Redefiniendo el Web en XMLEl 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


http://www.w3.org/

http://www.w3.org/

Rest: Restful Web Services


ÍndiceREST o WSPrincipios 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 programableAPI, 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 S3Servicio 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 objetoshttps://s3.amazonaws.com/{Bucket}/

Objeto: posee metadato y valorhttps://s3.amazonaws.com/{Bucket}/{Objeto}

*Bucket: disco o repositorio virtual accesible a través de HTTP


http://aws.amazon.com/s3/

http://aws.amazon.com/s3/

Interfaz uniforme


Amazon S3: Interfaz Uniforme

GET HEAD PUT DELETEBucket-list Lista los

buckets de un usuario

Bucket (disco virtual)

Lista los objetos del bucket

Crear bucket Borrar bucket

Objeto Obtener valor y metadato del objeto

Obtener metadato del objeto

Crear y/o Asignar valor a objeto y metadato

Borrar Objeto


Representación de los recursosQue 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


HipermediaLas 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 REST1. Determinar e conjunto de datos 2. Diseñar los recursos:

Partiendo el conjunto de datos en recursos

Para cada recursoNombrar el recurso con un URIDefinir las operaciones del interfaz uniforme a utilizarDiseñar la representación (query, XML, ..) aceptada por el servidorDiseñar la representación (XML, XHTML, ..) aceptada por el clienteConectar unos recursos con otros

Utilizando hiperenlaces y formularios que enlacen unos recursos con otros Considerar los ciclos productivos

La evolución de operaciones correctas1. Considerar condiciones de error

Respuesta a llamadas erroneas


Ventajas de RESTfull HTTPSoporte 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, ..).


ConclusionesROA: 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 DELETEService Document

Devolver servicio en XML

Indefinido Indefinido Indefinido

Category Document

Devolver categoría en XML


Collection Devolver un “Atom feed”

Crear in nuevo “member”

Indefinido Indefinido

Member Devolver “member” asociado a URI, normalmente un Atom entry, pero puede ser un fichero binario

Indefinido Actualizar el recurso identificado por URI

Borrar “member”


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

Google Data API (GData)


http://code.google.com/apis/gdata/docs/2.0/reference.html

http://code.google.com/apis/gdata/docs/2.0/reference.html

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


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

API REST de Twitter


http://apiwiki.twitter.com/REST+API+Documentation

http://apiwiki.twitter.com/REST+API+Documentation

Formato de Sindicación ATOM


Protocolo de Publicación ATOM


AtomPP: Interfaz Uniforme

GET POST PUT DELETEService Document

Devolver servicio en XML


Category Document

Devolver categoría en XML


Collection Devolver un “Atom feed”

Crear in nuevo “member”

Indefinido Indefinido

Member Devolver “member” asociado a URI, normalmente un doc Atom entry, pero puede ser un fichero binario

Indefinido Actualizar el recurso identificado por URI

Borrar “member”


Aplicaciones Web


Los componentes actuales del Web


Web humana Web de documentos online Basada en: Visor Web, HTTP y HTML

HTML: diseñado para representar documentos

Web programableWeb 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

Web programable


Aplicación WebAplicació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 clienteEjemplos: 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


AppletApplet: 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 peligrosasSe construyen como clases derivadas de java.applet.Applet


Ejemplo HTML: Hello World

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

La sentencia HTML asocia un código en bytecode y una zona de visualización


Ejemplo applet: Hello World

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

public class HelloWorldApplet extends Applet {

public void paint (Graphics g) {

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

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


Creación de appletsUn 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 RGBEvent.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)


Ejercicio aplicación-4Modificar HelloWorldApplet para que muestre el texto “hola” dentro de un ovalo de color azulEl texto (hola) debe estar en color amarillo (yellow) en helvetica (Helvetica) en negrita (BOLD) tamaño: 48


El paquete java.appletClases: 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 AppletSe 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()”


EventosAWT 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

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

Applet de carga de otra página web La carga se realiza al pulsar

DIT Carga “http://www.dit.upm.es”


Ejemplo: redirectpublic class redirect extends Applet implements ActionListener {

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;

public void init() { 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); }

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


Ejercicio aplicación-5Modificar 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

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

recibe 2 campos mensaje, URL

Envía un “query” en formato: x-www-form-

urlencoded

Muestra mensaje en visor


FormularioAWT: componentes

public class formularioAWT extends Applet implements ActionListener {

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

public void init() {

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 querypublic void actionPerformed(ActionEvent event) { 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(); }}


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 I


........ 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}

java.applet.Applet II


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 }

Interfaz: java.applet.AudioClipAudioClip interfaz que deben implementar las clases que

gestionen la reproducción de ficheros de audioLa clase Applet esta escrita usando el interfaz puede manejar cualquier objeto que lo implemente


Ficheros JARUn applet suele necesitar varios ficheros applet + imagenes + audioclips + ...

Se necesita un acceso http por cada uno

Java 1.1 permite empaquetarlos en un fich. JARFichero 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

Verificador de bytecode (Bytecode Verifier): verifica integridad del códigoCargador de clases (ClassLoader): carga clases de forma seguraGestor de seguridad/ Controlador de accesos (Security manager/Access controller): limita accesos

Verificador Bytecode

Cargador de clases

compilador/interprete

GestorDeSeguridad/Controlador de Acceso

Java VMfichero.class

sistema operativo

Base deDatos:llaves


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 I


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 II


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

Carga de un Applet III


Restricciones de seguridadApplet: 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 serviciosjava.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

HttpURLConnection(abstract)

URL URLConnection(abstract)

URLStream-Handler

(abstract)

Content -Handler

(abstract)

URLEncoder

Clases para crearnuevos 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 daytimeObjetivo: crear un servicio de acceso a servidores daytimeAcceso 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 directamenteDebe 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

HttpURLConnection(abstract)

URL URLConnection(abstract)

URLStream-Handler

(abstract)

Content -Handler

(abstract)

URLEncoder

Clases para crearnuevos serviciosClases para acceso

a servicios definidospor el usuario

servURLConnection

servURLStreamHan.

servURLContentHan.

URLStreamH-andlerFactory

(interface)

ContentHan-dlerFactory(interface)

Applicacion


Ejercicio aplicación-6Extender 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 URLStreamHandlerEs 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

existenteLa 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 ContentHandlerSuperclase 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

Technology