interoperabilidad y servicios webcs.uns.edu.ar/~dcm/downloads/catamarca2013/clase 02.pdfelementos...

16
Interoperabilidad y servicios web FACEN - UNCa Junio de 2013 © Diego C. Martínez - DCIC-UNS 1 Interoperabilidad y servicios web Facultad de Ciencias de la Administración Universidad Nacional de Entre Rios © Diego C. Martínez - DCIC-UNS Diego C. Martínez Departamento de Ciencias e Ingeniería de la Computación Universidad Nacional del Sur Clase 2 Hipertexto como estructura de datos vs © Diego C. Martínez - DCIC-UNS documentos lineales documentos hipermediales Estándares actuales HTML 4 XML Ofrece una mejor distinción entre la estructura del documento y su presentación. Lenguaje de marcado extensible. Orientado exclusivamente a la estructuración y descripción de datos. © Diego C. Martínez - DCIC-UNS HTML 5 XHTML 1 HTML5 es una evolución y actualización del HTML. + multimedial , + interactiva XHTML es una implementación de HTML en XML. Facilita la integración con otros lenguajes tipo. HTML correcto Las especificaciones HTML hasta la 4.01 no indican cómo el user-agent debe reaccionar ante errores en la estructura del documento. Para favorecer la interoperabilidad entre versiones, sugiere: Si el user-agent encuentra un elemento que no reconoce, debería intentar renderizar el contenido del elemento. Si el user-agent encuentra un atributo que no reconoce, debería ignorar el atributo y su valor. © Diego C. Martínez - DCIC-UNS Si el user-agent encuentra un irreconocible valor de un atributo, debería usar el valor por defecto. Además sugiere que el user-agent tenga una forma de notificar los errores. Advierte, sin embargo, que la forma de manejar los errores es variada y por lo tanto usuarios y autores no deben confiarse de ningún mecanismo de recuperación de error.

Upload: others

Post on 26-Apr-2020

3 views

Category:

Documents


0 download

TRANSCRIPT

Interoperabilidad y servicios web FACEN - UNCaJunio de 2013

© Diego C. Martínez - DCIC-UNS 1

Interoperabilidad y servicios web

Facultad de Ciencias de la AdministraciónUniversidad Nacional de Entre Rios

© Diego C. Martínez - DCIC-UNS

Diego C. Martínez

Departamento de Ciencias e Ingeniería de la ComputaciónUniversidad Nacional del Sur

Clase 2

Hipertexto como estructura de datos

vs

© Diego C. Martínez - DCIC-UNS

documentos linealesdocumentos hipermediales

Estándares actuales

HTML 4 XML

Ofrece una mejor distinción entre la estructura del

documento y su presentación.

Lenguaje de marcado extensible.Orientado exclusivamente a la estructuración y descripción de

datos.

© Diego C. Martínez - DCIC-UNS

HTML 5 XHTML 1

HTML5 es una evolución y actualización del HTML.

+ multimedial , + interactiva

XHTML es una implementación de HTML en XML.

Facilita la integración con otros lenguajes tipo.

HTML correcto

Las especificaciones HTML hasta la 4.01 no indican cómo el user-agent debe reaccionar ante errores en la estructura del documento.

Para favorecer la interoperabilidad entre versiones, sugiere:

• Si el user-agent encuentra un elemento que no reconoce, debería intentar renderizar el contenido del elemento.

• Si el user-agent encuentra un atributo que no reconoce, debería ignorar el atributo y su valor.

© Diego C. Martínez - DCIC-UNS

y• Si el user-agent encuentra un irreconocible valor de un atributo, debería

usar el valor por defecto.

Además sugiere que el user-agent tenga una forma de notificar los errores.

Advierte, sin embargo, que la forma de manejar los errores es variada y por lo tanto usuarios y autores no deben confiarse de ningún mecanismo de recuperación de error.

Interoperabilidad y servicios web FACEN - UNCaJunio de 2013

© Diego C. Martínez - DCIC-UNS 2

XML

La idea central detrás de XML es proveer una forma de estructurar información general, con independiencia de la plataforma.

Facilita intercambio, procesamiento, claridad de datos.

El usuario puede definir sus propios tags.

<producto>b

<contacto>

Incluyen la declaración inicial:<?xml version=”1.0” encoding=”UTF-8”?>

© Diego C. Martínez - DCIC-UNS

<nombre>Flatron L17

</nombre><descripcion>

Monitor LCD de 17

pulgadas.</descripcion>

</producto>

<nombre>Juan Perugia

</nombre><telefono tipo=”cel”>12345678</telefono><telefono tipo=”oficina”>42346</telefono>

</producto>

namespacesPara evitar colisiones de tags

Colección de vocabularios

XML - namespaces

<proveedor><producto>

...

</producto><contacto>

...

</contacto></proveedor>

<proveedor xmlns=”http://host.com/productos” xmlns:cont=”http://otrohost.com/contactos”><producto>

<nombre>...</nombre>...</producto><contacto>

<cont:nombre>...</cont:nombre>...

</contacto></proveedor>

<nombre>...</nombre>

<nombre>...</nombre>

© Diego C. Martínez - DCIC-UNS

Si hay libertad de definir tags¿cómo sabemos cuál es la estructura correcta de un XML?

<telefono tipo=”cel”>12345678</telefono><telefono tipo=”cell”>12345678</telefono><telefono tipo=”celular”>12345678</telefono>

XML - validez

Un documento XML es válido si es contrastado exitosamente contra un conjunto de reglas, especificadas en

un documento DTD – Document Type Definition, o Un XSD - XML Schema Definitions.

Estos documentos dicen cómo es la estructura correcta del documento XML.Define el tipo de dato.

DTD – Document Type Definition XML Schema

Descripción simple de qué elementos y Descripción de qué elementos y

© Diego C. Martínez - DCIC-UNS

Descripción simple de qué elementos y atributos pueden existir en el XML

NO utiliza la misma sintaxis que XML.

Simple, pero con algunas limitaciones.e.g, no es posible restringir valores a enteros.

Descripción de qué elementos y atributos pueden existir en el XML

XSD y XML se almacenan separados

Más poderoso que DTD, pero más complejo.e.g, es posible definir tipos numéricos con subrangos, o el orden de los elementos dentro de un nodo.

Utiliza la misma sintaxis que XML

DTD- Document Type Definition - ejemplo

<!ELEMENT recipes (recipe+)><!ELEMENT recipe (recipe_head, recipe_body, recipe_footer?,

document_info)><!ELEMENT recipe_head (recipe_name, recipe_author?, meal_type)><!ELEMENT recipe_name (#PCDATA)><!ELEMENT recipe_author (#PCDATA)><!ELEMENT meal_type (#PCDATA)><!ELEMENT recipe_body (ingredients, directions)><!ELEMENT ingredients (ingredient+)><!ELEMENT ingredient (#PCDATA)><!ELEMENT directions (direction)+ >!ELEMENT di ti (#PCDATA)

© Diego C. Martínez - DCIC-UNS

<!ELEMENT direction (#PCDATA)><!ELEMENT recipe_footer (serving?, preparation_time?,

cooking_time?)><!ELEMENT serving (#PCDATA)><!ELEMENT preparation_time (#PCDATA)><!ELEMENT cooking_time (#PCDATA)><!ELEMENT document_info (document_author, date_updated, source)><!ELEMENT document_author (#PCDATA)><!ELEMENT date_updated (#PCDATA)><!ELEMENT source (#PCDATA)>

Interoperabilidad y servicios web FACEN - UNCaJunio de 2013

© Diego C. Martínez - DCIC-UNS 3

XSD – XML Schema Definitions

Al ser un documento XML, la estructura del XSD es más previsible.Utiliza tags especiales con el prefijo xs:

<?xml version="1.0"?><xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema"><xs:element name="libro"><xs:complexType><xs:sequence>

<xs:element name="titulo" type="xs:string"/><xs:element name="autor" type="xs:string"/>

</xs:sequence></xs:complexType>

</xs:element>

© Diego C. Martínez - DCIC-UNS

/ s:e e e t</xs:schema>

xs:stringxs:decimalxs:integerxs:booleanxs:datexs:timexs:anyURI

Define varios tipos de datos básicos para los elementos del XML:

<xs:element name="autor" type="xs:string"/><xs:element name="precio" type="xs:decimal"/>

XML ventajas - desventajas

Ventajas del uso de XML

Separa la estructura de la información de aspectos de presentación. Fácil de leer y comprender. Los tags personalizados ofrecen flexibilidad para diversos problemas. Es un formato abierto, que puede ser procesado por cualquier aplicación. XML puede ser utilizado para intercambiar datos entre aplicaciones

Desventajas del uso de XML

© Diego C. Martínez - DCIC-UNS

XML a veces no es adecuado para manipular grandes cantidades de datos XML puede ser difícil de comprender si mucha información participa de la estructura No pueden representarse bien ciertos tipos de datos (imagenes, datos binarios). Los tags generan un overhead que debe observarse en algunas transmisiones

electrónicas de datos

XHTML

XHTML es un lenguaje de la familia de XML, considerado a veces una versión más estricta y limpia que HTML. Básicamente, es HTML definido con XML.

XHTML significa eXtensive HyperText Markup Language.

XHTML es una recomendación W3C desde el año 2000.Es compatible con HTML 4.01.

XHTML es la evolución natural, reforzando la noción de que el lenguaje de marcado es para describir datos, no para visualizarlos.

Los elementos XHTML deben estar propiamente anidados

© Diego C. Martínez - DCIC-UNS

Los elementos XHTML deben estar propiamente anidados.

Los elementos XHTML deben estar cerrados siempre.

Los elementos XHTML deben escribirse en minúsculas.

Los elementos XHTML deben tener un solo elemento raíz.

Los tags vacios deben terminar en />

XHTML

Mas reglas XHTML: Los nombres de los atributos deben estar en minúsculas Los valores de los atributos deben estar entre comillas El atributo id reemplaza el atributo name Todo documento XHTML debe tener declaración DOCTYPE.

Deben estar presentes los tags html, head, title y body.

<!DOCTYPE ... ><html xmlns="http://www.w3.org/1999/xhtml">

<head><title>Titulo de la Pagina</title>

</head>

© Diego C. Martínez - DCIC-UNS

</head>

<body>...

</body>

</html>

El DOCTYPE especifica el DTD: el tipo de documento que prosigue. Puede ser XHTML Strict XHTML Transitional (con algo de html) XHTML Frameset (usando frames)

Interoperabilidad y servicios web FACEN - UNCaJunio de 2013

© Diego C. Martínez - DCIC-UNS 4

XHTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML Strict

XHTML Transitional

XHTML Frameset

© Diego C. Martínez - DCIC-UNS

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML Frameset

Validador on-line de la W3C:http://validator.w3.org/

Estructurando documentos

HTML, XML y XHTML son estándares orientados principalmente a la representación y estructuración de información con algún fin particular

<producto><nombre>PS3</nombre><descrip>Buenisima</descrip><precio>3000</precio></producto>

producto

nombre descrip precio

<ht l>

© Diego C. Martínez - DCIC-UNS

HTML incluye algunos tags con semántica de presentación incorporada

<html><head>

<title></title></head><body>

<h2>Blog</h2><div>Bla bla bla</div>

</body></producto>

html

head body

h2 divtitle

Estructura vs. presentación

La W3C presenta algunas guías para la visualización de documentos HTML, basada en la interpretación de algunos tags.

un elemento strong se verá en font bold un elemento h1 se verá de mayor tamaño que uno de h2.

El estándar XML no incluye nada de aspectos de presentación , pues es un lenguaje de marcado de propósito general.Tal vez no sea información destinada a la visualización.

Sin embargo, cuando estructuramos información destinada (de alguna manera u otra) a una interfaz visual, es deseable poder estilizarla adecuadamente.

© Diego C. Martínez - DCIC-UNS

<xyz><abc></abc></xyz>

XMLHTML

XYZabc

Presentación

xyz=

abc=

A

A

Estilos

Estilos

Existen dos mecanismos para agregar estilos a documentos de tags.

CSS – Cascading Style Sheets

Documento de texto con sintaxis simple. Es aplicable a HTML y a XML. Permite aplicar formato a elementos (tags)

– por tipo, nombre o identificador Permite heredar formatos de elementos

contenedores.

p {margin-top: 8pt;margin-bottom: 8pt;font-size: 75%}

© Diego C. Martínez - DCIC-UNS

XSL – Extensible Stylesheet Language

Documento de texto con sintaxis XML. Más que un mecanismo de estilos:

transforma documentos XMLs. Por ser un mecanismo de

transformación, se centra más en el uso de templates que en formatos de elementos individuales.

<xsl:template match=”p”><fo:block

space-before=”8pt”space-after=”8pt”font-size=”75%”>

<xsl:apply-templates/></fo:block></xsl:template>

Interoperabilidad y servicios web FACEN - UNCaJunio de 2013

© Diego C. Martínez - DCIC-UNS 5

Estilos

CSS

CSS

CSS

<html><p></p></html>

HTML

© Diego C. Martínez - DCIC-UNS

XSLT

<xyz><abc></abc></xyz>

XML

<html><p></p></html>

XML o HTML

CSS – Cascading Style Sheets

Los estilos CSS nacen varios años después que HTML, a mediados de los 90.

Sin embargo, la separación HTML-estilos de presentación ya era considerada por Berners-Lee desde un comienzo.El primer browser implementaba una lista de estilos universales. Berners-Lee suponia que todos los futuros browsers harían lo mismo.

NCSA mosaic permitía ciertas personalizaciones de estilo

<html>...</html> +

<html><p></p>

© Diego C. Martínez - DCIC-UNS

En 1994 sale el primer borrador de CSS, hojas de estilo aplicables a HTML.

Servidor HTTP(web server) <html>

...</html> +

BrowserB

/html

BrowserA/p

</html>

Cascading Style Sheets

selector {property: value};

Un documento CSS es simplemente una colección de reglas de la forma:

A qué tag HTML se le aplican las modificaciones

indicadas.

El nombre de una cualidad del elemento elegido

El valor aplicable a esa propiedad

© Diego C. Martínez - DCIC-UNS

Por ejemplo,

p {color: blue;text-align: right;font-family: courier;}

hr {color : #91B2C5;height : 1px;width : 100%;

}

td, tr, div {font-family : Arial;font-size : x-small;color : #000;

}

Son características heredables.Se puede indicar un font para un párrafo, y aparte un color para los links. Luego, cada link usa sus propiedades y las del párrafo.

Cascading Style Sheets

p.bodytext {color: black;}p.alert {color: red;}

Pueden categorizarse diferentes usos de un mismo elemento:

Luego se indica, para ese elemento, de qué categoría es:

<p class=”bodytext”>Esto va de color negro</p>

<p class=”alert”>E t d l j

© Diego C. Martínez - DCIC-UNS

Esto va de color rojo.</p>

.highlight {color: blue;}

También pueden definirse elementos aplicables a cualquier tag. En este caso no se nombra el tag específico sino la clase de formato aplicada:

Esto se puede aplicar a cualquier tag!

<p class=”highlight”>Esto es texto azul</p><h2 class=”highlight”>Esto es un encabezado azul</h2>

Interoperabilidad y servicios web FACEN - UNCaJunio de 2013

© Diego C. Martínez - DCIC-UNS 6

Procesando XML

La especificación XML asume que el documento será procesado de manera especial

documento XML

procesador XML

aplicación

© Diego C. Martínez - DCIC-UNS

tree-based processing event-based processing

también conocido como DOM Parser

también conocido como SAX Parser

representación arbóreafácil read-write

consumo de memoria

operación secuencialmenor consumo de

memoria

más fáciles de implementar

más complejos y de mayor esfuerzo para el programador

if()thenelsewhile

Procesando XML/HTML - modelo web

<html><p></p></html>

Vista del documentoDocumento + código

© Diego C. Martínez - DCIC-UNS

Estructura del documento

JavaScript

La idea de permitir la ejecución de pequeños programas (scripts) que están incrustados en los documentos web, y que pueden a su vez manipularlos, permite generar mayor dinamismo en las páginas.

JavaScript es el más popular de los lenguajes de script para la programación del lado cliente.

Fue creado en sus comienzos por Netscape y luego en conjunto con Sun. Microsoft implementó también el lenguaje, pero como es habitual lo hizo a su manera (Browsers Wars!).

Se incluyen por medio de tags especiales sentencias en un lenguaje de alto nivel

© Diego C. Martínez - DCIC-UNS

Se incluyen, por medio de tags especiales, sentencias en un lenguaje de alto nivel, que serán interpretadas, esta vez, por el navegador.

Este escenario crea varias limitaciones. Los lenguajes de este tipo son lenguajes simples, usualmente basados en objetos.

Fué evolucionando con los años. Al principio se utilizaba para efectos simples, actualmente es esencial para la mayoría de las aplicaciones Web (AJAX)

JavaScript

JavaScript fué creado por Brendan Eich a mediados de los 90, para la empresa Netscape Communications.

Se llamaba inicialmente Mocha, luego Livescript.

Brendan Eich luego fundó Mozilla.

Javascript es en realidad una implementación de ECMAScript, la creación original de Brendan Eich.

Brendan Eich

© Diego C. Martínez - DCIC-UNS

Algunas de las características de JavaScript:

Sintaxis simple, sin tipos de datos. Puede modificar dinámicamente el documento en el que se encuentra, por

medio de una interfaz especial denominada DOM. Puede reaccionar ante eventos ocurriendo en la página en la que se encuentra

(onMouseOver,onClick,onLoad,etc). Puede ser utilizado para la validación de datos. Puede detectar el browser del visitante y ayudar a optimizar la visualización Puede realizar pedidos adicionales a un servidor, en background, en forma

asincrónica (AJAX).

Interoperabilidad y servicios web FACEN - UNCaJunio de 2013

© Diego C. Martínez - DCIC-UNS 7

JavaScript - ejemplo

<HTML><HEAD><TITLE>Ejemplo JS</TITLE></HEAD>

<BODY>

A continuación, Javascript…<BR>

<SCRIPT>document.write("Hola Javascript!<BR>");</SCRIPT>

¿Cómo incluimos código dentro de un documento de tags?

con un tag :)

<SCRIPT>//código

</SCRIPT>

El código será interpretado por el

© Diego C. Martínez - DCIC-UNS

Esto fue Javascript.

</BODY></HTML>

El código será interpretado por el navegador.El elemento tiene el código o una referencia a un recurso con código.

¿qué pasa cuando hay más de un tag SCRIPT en el mismo documento?¿qué relación hay entre el código que se encuentra en ellos?

JavaScript - ejemplo

<HTML><HEAD>

<TITLE>Ejemplo JS</TITLE></HEAD>

<BODY>

<SCRIPT>var mostrar=true

</SCRIPT>

© Diego C. Martínez - DCIC-UNS

<p>Bienvenidos!</p>

<SCRIPT LANGUAGE="JavaScript">if(mostrar==true){ document.write("Hola! "); }

</SCRIPT>

<p>Fin.</p>

</BODY></HTML>

JavaScript

Ventajas principales del uso de JavaScript

Menos interacción con el servidorPueden validarse datos antes de enviar el request al servidor.

Respuesta inmediata al usuarioParte del procesamiento puede “adelantarse” al lado cliente

Reparación automática y de superficie de errores menoresPrincipalmente formato de datos, como las fechas

Mejor experiencia de usoMenues desplegables o colapsables, ayudas contextuales, etc

Mayor interacción con el usuario

© Diego C. Martínez - DCIC-UNS

yLe otorga mayor reacción al uso del mouse.

Interfaces enriquecidasDrag-and-drop, sliders, etc.

Optimización de la interacción cliente-servidorParte de la información puede obtenerse en background, actualizando parcialmente la página en vista.

Principal desventaja: Compatibilidad.

Si bien es cada vez mayor, muchos user-agents no admiten JavaScript correctamente

Procesando XML/HTML

<html><p></p></html>

DocumentoXML-HTML

API

© Diego C. Martínez - DCIC-UNS

if()thenelsewhileend

Código ejecutable

Interoperabilidad y servicios web FACEN - UNCaJunio de 2013

© Diego C. Martínez - DCIC-UNS 8

Procesando XML/HTML

DocumentoXML-HTML

API

Modelo de objetos del documento

DOMDocument Object Model

© Diego C. Martínez - DCIC-UNS

if()thenelsewhileend

Código ejecutable

Document Object Model

if()thenelsewhile

Procesando XML/HTML

<html><p></p></html>

Vista del documentoDocumento + código

© Diego C. Martínez - DCIC-UNS

Estructura del documento

Document Object Model - DOM

DOM es una interfaz de acceso y manipulación de documentos XML y HTML bien formados.

Es independiente de la plataforma, del navegador y del lenguaje que lo utiliza.

Es un estándar que surge de la unión de diferentes propuestas.Es un estándar de la W3C desde 1998.

<table> <table>

Ve el documento de tags como una estructura de árbol y define notaciones uniformes para acceder a sus nodos.

© Diego C. Martínez - DCIC-UNS

table<tbody> <tr>

<td>San Fierro</td><td>Los Santos</td>

</tr> <tr>

<td>Las Venturas</td> <td>San Andreas!</td>

</tr> </tbody>

</table>

<tbody>

<tr> <tr>

<td> <td> <td> <td>

San Fierro Los Santos Las VenturasSan

Andreas!

Document Object Model - ejemplo

<html><head><title></title></head><body><p>Este es un párrafo</p></body></html>

document.documentElement.lastChild.firstChild.tagName

La siguiente expresión

es equivalente al nombre “P” el tag representado por el nodo referenciado:

© Diego C. Martínez - DCIC-UNS

es equivalente al nombre “P”, el tag representado por el nodo referenciado:

document.documentElement.lastChild.firstChild.tagName

Tag HTML de la página Tag BODY 1er. Elemento del tag BODY

Nombre del 1er. elemento del tag BODY

Un acceso más simple puede conseguirse ante la posibilidad de nombrar los elementos de un documento HTML...

Interoperabilidad y servicios web FACEN - UNCaJunio de 2013

© Diego C. Martínez - DCIC-UNS 9

Document Object Model - ejemplo

...<p id="miParrafo">Este es un párrafo.</p>...

document.getElementById("miParrafo").tagName

En este caso la expresión para acceder al tag es:

© Diego C. Martínez - DCIC-UNS

var nodeList = document.getElementsByTagName("A");for (var i = 0; i < nodeList.length; i++)nodeList[i].style.color = "#ff0000";

También pueden accederse a todos los tags de un mismo tipo....

DOM – Propiedades de nodos

Propiedad Descripción

nodeName Nombre de nodo. Usualmente el nombre del tag

nodeValue Valor del nodo. Dependiente del tipo del nodo

nodeType Tipo del nodo, indicado como un entero.

childNodes Un arreglo de los nodos hijos de un nodo

© Diego C. Martínez - DCIC-UNS

parentNode El ancestro inmediato de un nodo

firstChild,lastChild

El primer hijo de un nodoEl último hijo de un nodo

nextSibling,previousSibling

Hermanos de un nodo

attributes Un arreglo de atributos del nodo, si es un elementoSi no, vacío.

DOM – Propiedades de nodos

Propiedad Descripción

documentElement Referencia al nodo raíz del documento.

createElement() Crea un nuevo elemento que puede insertarse en el documento. Solo creación.

createTextNode() Crea un nuevo elemento de tipo texto que puede insertarse en el documento.

createCDATASection() Crea una nueva sección CDATA que puede

© Diego C. Martínez - DCIC-UNS

q pinsertarse en el documento

getElementsByTagName() Devuelve un arreglo de elementos que coinciden con el nombre indicado.

getElementById() Devuelve una referencia a un nodo elemento en el documento, identificado por un Id particular.

innerHTML El contenido HTML dentro de un dado elemento

Procesando una respuesta – Server Side Includes

HTML con directivas

incrustadas (SSI)

Parsing +

ejecución de directivas

© Diego C. Martínez - DCIC-UNS

HTMLLas directivas son indicaciones puntuales al servidor sobre procesamientos simples

<!--#directiva parametro=valor -->

No ofrecen las estructuras de datos ni de control de un lenguaje de alto nivel.

Interoperabilidad y servicios web FACEN - UNCaJunio de 2013

© Diego C. Martínez - DCIC-UNS 10

Procesando una respuesta – Aplicaciones CGI

Aplicación

© Diego C. Martínez - DCIC-UNS

Ejecución de la aplicación en el S.O.

Output de la aplicación

La aplicación puede estar implementada en cualquier lenguaje de programación moderno.

La integración con el servidor es simple pero rústica, por medio de la entrada-salida estándar :(

La aplicación no necesariamente está basada en tecnologías para la web o Internet.

Procesando una respuesta – Scripting

HTML con directivas

incrustadas (lenguaje de

alto nivel)

El servidor es asociado con un intérprete de un lenguaje de alto nivel.

El l j d i t d tili

Parsing +

ejecución de directivas de

I té t

© Diego C. Martínez - DCIC-UNS

HTML

El lenguaje de script puede utilizarse directamente en los documentos HTML

Las directivas de procesamiento son ahora segmentos de código.

Se dispone de estructuras de control y datos de un lenguaje de alto nivel. Mayor poder de procesamiento.

procesamientoIntérprete

PHP

El lenguaje PHP surge en 1995 bajo el nombre PHP/FI, creado por Rasmus Lerdorf.

Originalmente Rasmus creó el lenguaje como reemplazo de unos scripts Perl que había hecho para su página personal.PHP significaba “Personal Home Page” y FI “Form Interpreter”.

Rasmus Lerdorf

Luego de liberar PHP, junto con Zeev Suraski y Andi Gutmans reecriben el intérprete y nace PHP3 en 1997, siendo testeado publicamente en 1998.

© Diego C. Martínez - DCIC-UNS

En 1999 reescriben el núcleo de PHP para obtener Zend Engine. Actualmente este es el núcleo de PHP4, la versión que popularizó finalmente a PHP.

En 2004 sale PHP5, con varias modificaciones, entre ellas un mejor modelo de objetos, deficiente en la versión anterior.

Hoy es usado por muchos sitios gracias al desarrollo de varios productos, la mayoría GNU: phpBB, WordPress, MediaWiki, Joomla, Mambo, etc.

Visitar: Probar, bajar, instalar!!

PHP

La sintaxis y las características orientadas a objetos del lenguaje PHP(5) son fáciles de aprender, pues guardan similitud con lenguajes vistos anteriormente.

Por lo general, la confusión inicial reside en ciertos detalles que hacen a la utilización de los scripts, por lo que requiere algo de práctica poder dominar claramente estos lenguajes.

Los archivos que contienen tags con código PHP residen en el servidor, con extensión .php y se ejecutarán en cuanto son solicitados.

El preprocesador PHP se limita a ejecutar el script.

El output del programa (el código HTML que nuestro cliente espera) debe ser

© Diego C. Martínez - DCIC-UNS

generado por el script. Podemos pensar que imprimimos en una pantalla que finalmente verá nuestro cliente, al estilo PERL

La sintaxis es básicamente la misma que la de los lenguajes “parientes” del C...

for ($i=1; $i<=5; $i++){...

}

if (cond) { ... }

else{ ...}

while (cond) {...}

do{...} while (cond)

http://ar.php.net/manual/es/

Interoperabilidad y servicios web FACEN - UNCaJunio de 2013

© Diego C. Martínez - DCIC-UNS 11

PHP Si bien TODO el archivo es considerado “ejecutable”, las sentencias específicas de PHP se encierran con tags especiales. Todo código restante HTML se envía tal cual al cliente.

<html>

Tag inicial Tag final

<?php ?>

<? ?>

<script language=”php”> ?>

<% %>

© Diego C. Martínez - DCIC-UNS

<html><head><title>Ejemplo</title>

</head><body><?php

echo “Hola Mundo!"; ?>

</body></html>

hola.php

<html><head><title>Ejemplo</title>

</head><body>Hola Mundo!

</body></html>

Resultado recibido por

el cliente

PHP

<?php echo "<HTML>";echo "<TITLE>Ejemplo</TITLE>"; echo "<BODY>";echo "Hola Mundo!"; if date('w')=5

{ echo "Hoy es sabado"; }else

{ echo "Hoy no es sabado";}

El script .php no necesariamente debe incluir código HTML...

<HTML><TITLE>Ejemplo</TITLE><BODY>Hola Mundo! Hoy no es sabado</BODY></HTML>

© Diego C. Martínez - DCIC-UNS

{ echo Hoy no es sabado ;}echo "</BODY></HTML>";

?>

todophp.php

Resultado recibido por

el cliente

El exceso de mezcla HTML-PHP en general no es adecuado para aplicaciones grandes, pues es dificil de mantener. Veremos luego qué técnicas se utilizan para poner orden en este sentido.

Java

Java es un lenguaje de programación orientado a objetos, creado en 1990 por Sun Microsystems.

Su escenario de trabajo es mayoritariamente el de las aplicaciones distribuídas y la programación en red.

Sus premisas iniciales son:Uso de la metodología OOEjecutar un mismo programa en diferentes SOSoporte para redes de computadoras Diseñado para ejecutar código remotamente con seguridad

© Diego C. Martínez - DCIC-UNS

Fácil de usar

Típicos Programas Java:

Applets : se ejecutan en browsers, incrustados en páginas web.

Applications : se ejecutan directamente sobre la Java Virtual Machine.

Servlets: se ejecutan en un servidor que posee un Contenedor Web.

Midlets: se ejecutan en la JVM para dispositivos móviles.Cada cual posee una estructura particular, con ciertos métodos específicos.

Java 2 Platform

© Diego C. Martínez - DCIC-UNS

Interoperabilidad y servicios web FACEN - UNCaJunio de 2013

© Diego C. Martínez - DCIC-UNS 12

Servlets

Los servlets son extensiones a la funcionalidad de un servidor, como un servidor Web.

Son módulos de código Java corriendo en un servidor de aplicaciones.

Si bien no necesariamente están asociados a un protocolo particular, suelen usarse bajo HTTP (Servlets HTTP)

Un servlet está mapeado a uno o más URLs, y cuando el servidor recibe un pedido (request) un método especial en el servlet es invocado y responde a ese pedido.

© Diego C. Martínez - DCIC-UNS

responde a ese pedido.

Al estar escrito en Java, puede recibir todos los beneficios del JAVA API y los elementos mencionados anteriormente para J2EE, como JDBC y EJB.

Además es portable y altamente reusable.

Servlet Containers

Los servlets se alojan e interactúan con un contenedor web (Web Container).

Servlet Containers no comerciales:

Apache Tomcat, Enhydra, Java Mini Daemon, Jetty, Winstone

Servlet Containers comerciales

BEA WebLogic Server or Weblogic ExpressB l d E t i S

© Diego C. Martínez - DCIC-UNS

Borland Enterprise ServerCaucho Resin ServerIBM's WebSphereiPlanet Sun/NetscapeSun Java System Web ServerOracle Application Server

Commercial Open Source Servlet Containers

JBossApache Tomcat

Servlets HTTPAlgunos usos típicos de un Servlet HTTP:

• Procesar y/o almacenar datos recibidos desde un formulario HTML.

• Proveer contenido dinámico, por ejemplo, mostrar resultados de una consulta a una base de datos al cliente.

• Administrar información de estado sobre las sesiones de los clientes en nuestro sitio, por ejemplo, shopping carts.

Actualmente existe mucho desarrollo en torno a esta tecnología, más el agregado de JSP. Algunos se encuadran dentro del Proyecto Jakarta, del Apache Group, como Struts.

© Diego C. Martínez - DCIC-UNS

St uts

Los servlets en realidad ofrecen varias ventajas sobre CGI:

• Un servlet no corre en un proceso separado, eliminando el overhead de crear procesos ante pedidos.

• Un servlet permanece en memoria entre pedidos.

• Existe una única instancia que responde pedidos en forma concurrente. Esto ahorra memoria y permite administrar datos persistentes

Servlets

Ciclo de vida:

1. El servlet se inicializa ante el primer pedido (init)

Un servlet es una instancia de una clase que implementa la interfaz javax.servlet.Servlet.

La mayoría de los servlet en realidad extienden la funcionalidad de implementaciones estándar de servlets: javax.servlet.GenericServlet y javax.servlet.http.HttpServlet

© Diego C. Martínez - DCIC-UNS

2. El servlet atiende pedidos y genera respuestas (service). Esto puede provocar la creación de diferentes hilos de ejecución.

3. El servlet es destruido del servidor (destroy).

Es fácil ver que un servlet es básicamente la implementación de un servidor en Java!

Interoperabilidad y servicios web FACEN - UNCaJunio de 2013

© Diego C. Martínez - DCIC-UNS 13

GenericServlets

Cliente

Servidor

service()

GenericServlet

request

response

© Diego C. Martínez - DCIC-UNS

Para implementar un servlet genérico, basta con heredar de la clase GenericServlet y redefinir el método service()

El método service() acepta dos parámetros: un objeto requestque informa al servlet del pedido, y un objeto response usado para retornar respuestas.

GenericServlet

import java.io.*;import javax.servlet.*;import javax.servlet.http.*;

public class Fecha extends GenericServlet {

public void service( ServletRequest request, ServletResponse response )

throws ServletException, IOException {

response.setContentType("text/html");i t it t t it ()

© Diego C. Martínez - DCIC-UNS

PrintWriter out = response.getWriter();java.util.Date fechita= new java.util.Date();out.println(fechita);

}}

HttpServlets

Los servlets HTTP extienden la clase HttpServlet. Esta clase redefine el método service() para diferenciar entre las peticiones típicas recibidas desde un navegador Web cliente.

El protocolo HTTP define varios tipos de pedidos, pero los más comunes son get() (que obtiene información del servidor, como imágenes) y post()(que envía información al servidor, por ejemplo como resultado del submitde un formulario).

© Diego C. Martínez - DCIC-UNS

La clase HttpServlet define los métodos doGet() y doPost() para responder a estos pedidos.

Estos métodos son invocados por service(), el cual determina el tipo de pedido y deriva el flujo de control al método correspondiente.

El método service() no debería redefinirse, a menos que debamos implementar pedidos adicionales.

HTTPServlet

HttpServlet

Cliente

Servidor

service() request

response

doGet()

doPost()

© Diego C. Martínez - DCIC-UNS

Para implementar un servlet HTTP, basta con heredar de la clase HttpServlet y redefinir los métodos doGet() y/o doPost()

Nuevamente se aceptan dos parámetros en cada método: un objeto request que informa al servlet del pedido, y un objeto response usado para retornar respuestas.

Interoperabilidad y servicios web FACEN - UNCaJunio de 2013

© Diego C. Martínez - DCIC-UNS 14

Request & Response

Cliente

Servidor

service()

Servlet

request

req

res

Los objetos implementan la interfaz ServletRequest, ServletResponse, HttpServletRequest o HttpServletResponse

© Diego C. Martínez - DCIC-UNS

Cookie[] getCookies() java.lang.String getHeader(java.lang.String name) java.lang.String getQueryString()

java.lang.String getMethod()

void addCookie(Cookie cookie) void addHeader(java.lang.String name, java.lang.String value) void setStatus(int sc)

java.io.PrintWriter getWriter()

Algunas operaciones de HttpServletRequest

Algunas operaciones de HttpServletResponse

Servlet HelloWorld

public class HelloWorldServlet extends HttpServlet {

public void doGet( HttpServletRequest request,HttpServletResponse response )throws IOException, ServletException

{response.setContentType("text/html");PrintWriter out = response.getWriter();

String nombre = request.getParameter("USER_NAME");

© Diego C. Martínez - DCIC-UNS

out.println("<html>");out.println("<head>");out.println("<title>Hola</title>");out.println("</head>");out.println("<body bgcolor=\"white\">");out.println("<h1> Hola "+nombre+"</h1>");out.println("</body>");out.println("</html>");

}}

Web Service

A Web service is a software system designed to support interoperable machine-to-machine interaction over a network. It has an interface described in a machine-processable format (specifically WSDL).Other systems interact with the Web service in a manner prescribed byits description using SOAP messages typically conveyed using HTTP with

¿qué es un servicio web?

En general, no existe una única definición.La W3C ha definido previamente la noción de web service.

© Diego C. Martínez - DCIC-UNS

its description using SOAP messages, typically conveyed using HTTP with an XML serialization in conjunction with other Web-related standards

Sin embargo, se entiende que no necesariamente debe haber SOAP de por medio.

En términos generales, un servicio web es una aplicación accedida remotamente usando protocolos de Internet, y que utiliza XML como mecanismo de mensajes.No tiene dependencias de ningún sistema operativo o lenguaje de programación.

Web Service

solicitud de servicio

respuesta del servicio

© Diego C. Martínez - DCIC-UNS

Interoperabilidad y servicios web FACEN - UNCaJunio de 2013

© Diego C. Martínez - DCIC-UNS 15

Web Service – la web para los humanos

HTTP GET recursoX

200 OK recursoX

La web es en realidad una red de servicios centrados en el humano.El consumidor final de los recursos de la web es el usuario humano.

© Diego C. Martínez - DCIC-UNS

La web utiliza un protocolo de comunicación específico (HTTP) y la información que se recibe posee una estructura orientada a la presentación de la información (HTML)

El servidor web provee un servicio concreto: ofrece recursos (páginas web, imágenes, audio, etc).En este servicio puede ser asistido por diferentes aplicaciones (CGI, scripts, etc)

Web Service – la web para las aplicaciones

solicitud de servicio

respuesta del servicio

De manera análoga, la idea de los servicios web es el ofrecimiento de servicios centrados en las aplicaciones.Los consumidores del servicio no son humanos sino programas sin importar la

© Diego C. Martínez - DCIC-UNS

Se utiliza el protocolo de comunicación de la web (HTTP) y la información que se envía y recibe posee una estructura orientada a la facilidad de procesamiento, no de presentación.

Por esta razón el principal protagonista de los servicios web es XML.

Los consumidores del servicio no son humanos sino programas, sin importar la plataforma ni la tecnología nativa.

Hay varias formas de lograr la provisión de servicios web con este nivel de abstracción y generalidad esperado...

Web Service – XML-RPC

<?xml version="1.0"?><methodCall>

<methodName>circleArea</methodName><params>

<param><value><double>2.41</double></value>

</param></params>

</methodCall>

XML-RPC es simplemente la invocación remota de funciones via web.

© Diego C. Martínez - DCIC-UNS

<?xml version="1.0"?><methodResponse><params>

<param><value><double>18.24668429131</double></value>

</param></params>

</methodResponse>

Web Service – SOAP

<?xml version='1.0' encoding='UTF-8'?><SOAP-ENV:Envelopexmlns:SOAP-ENV="http://schemas.xmlsoap.org/soap/envelope/"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xmlns:xsd="http://www.w3.org/2001/XMLSchema"><SOAP-ENV:Body>

<ns1:getTemp xmlns:ns1="urn:xmethods-Temperature"SOAP-ENV:encodingStyle="http://schemas.xmlsoap.org/soap/encoding/"><zipcode xsi:type="xsd:string">10016</zipcode>

</ns1:getTemp></SOAP-ENV:Body>

</SOAP-ENV:Envelope>

SOAP es un mecanismo general para la interoperabilidad de sistemas.

© Diego C. Martínez - DCIC-UNS

<?xml version='1.0' encoding='UTF-8'?><SOAP-ENV:Envelope

xmlns:SOAP-ENV="http://schemas.xmlsoap.org/soap/envelope/"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xmlns:xsd="http://www.w3.org/2001/XMLSchema"><SOAP-ENV:Body>

<ns1:getTempResponse xmlns:ns1="urn:xmethods-Temperature"SOAP-ENV:encodingStyle="http://schemas.xmlsoap.org/soap/encoding/">

<return xsi:type="xsd:float">71.0</return></ns1:getTempResponse>

</SOAP-ENV:Body></SOAP-ENV:Envelope>

Interoperabilidad y servicios web FACEN - UNCaJunio de 2013

© Diego C. Martínez - DCIC-UNS 16

Web Service – REST

http://miserviciosrest.com/alumnos/dcic/materia/rpa

REST es una metodología simple para la implementación de web services.

© Diego C. Martínez - DCIC-UNS

<?xml version='1.0' encoding='UTF-8'?><alumnos>

<alumno>

<nombre>Millhouse</nombre><lu>12345</lu>

</alumno><alumno>

<nombre>Bart</nombre><lu>67890</lu>

</alumno><alumno>

<nombre>Nelson</nombre><lu>24680</lu>

</alumno></alumnos>

XML – algunas tecnologías asociadas

XML

XPathDTD

XML Schema

Descripciones formales de la

estructura del XML

Lenguaje para selección de nodos en un XML

Lenguaje de consultas para XML

© Diego C. Martínez - DCIC-UNS

XQuery

XLink

XSLT

Transformaciones de XML en otros

formatos XPointer

Lenguaje para referenciamiento entre XMLs

XFormsLenguaje de formularios en XML