tecnologías para creación de aplicaciones basadas en web carlos rojas kramer universidad...

Tecnologías para creación de aplicaciones basadas en web

Carlos Rojas Kramer

Universidad Cristóbal Colón

Agenda

W3C HTML CSS XML XML DTD XML Schema Visualizando XML XSL XHTML DOM SOAP Referencias

Qué es el W3C?

W3C = World Wide Web Consortium Creado en octubre de 1994 por Tim

Berners-Lee, el inventor de la Web Es una organización de miembros Su trabajo es la creación de estándares para

la WWW (conocidos como W3C Recommendations )

Cómo comenzó el W3C?

La WWW comenzó como un proyecto en el CERN (Organización Europea para Investigación Nuclear), donde Tim Berners-Lee desarrolló una visión de la WWW.

El W3C fue creado en 1994 como un esfuerzo colaborativo del MIT (Massachusetts Institute of Technology) y el CERN, con apoyo de la DARPA (Defense Advanced Research Projects Agency) de los Estados Unidos y de la Comisión Europea.

Hoy Tim Berners-Lee es director del W3C.

Qué está haciendo el W3C?

El W3C está trabajando para hacer la Web accesible a todos los usuarios, sin importar diferencias en cultura, educación, capacidades, recursos y limitaciones físicas.

Coordina sus trabajos con muchas otras organizaciones de estándares, tales como la IETF (Internet Engineering Task Force), el foro WAP (Wireless Application Protocols) y el Consorcio Unicode.

Quiénes forman el W3C?

Más de 400 organizaciones son miembros, incluyendo vendedores de software, proveedores de contenidos, usuarios corporativos, instituciones académicas, empresas de telecomunicaciones, laboratorios de investigación, organizaciones de estándares y gobiernos.

Algunos miembros bien conocidos son IBM, Microsoft, America On Line, Netscape, Apple, Adobe, Macromedia y Sun.

Sedes del W3C

El W3C tiene tres sedes (todas son Universidades):– El MIT (Massachusetts Institute of

Technology) en los EEUU.– El French National Research Institute en

Europa– La Universidad Keio en Japón

W3C Recommendations

El trabajo más importante del W3C es el desarrollo de especificaciones estándar, llamadas W3C Recommendations.

Cada una es desarrollada por un grupo formado por miembros y expertos invitados.

Algunas de las más destacadas son HTML, XHTML, XML, CSS, XML, DOM y SOAP.

Qué es HTML?

HTML es la lingua franca para la publicación en WWW. HTML = HyperText Markup Language (lenguaje de

marcas de hipertexto) Un documento HTML es un archivo de texto que contiene

etiquetas HTML Las etiquetas le indican al visualizador cómo desplegar la

página Un archivo HTML debe tener extensión htm o html Los archivos HTML pueden crearse usando un simple

editor de texto

Documento HTML de ejemplo

<html>

<head>

<title>Documento de ejemplo</title>

</head>

<body>

<h1>Documento de ejemplo</h1>

<p>Esto es un párrafo de texto con la

palabra <strong>negrita</strong> más intensa.</p>

</body>

</html>

Versiones de HTML

2.0 - desarrollada en 1996 por el HTML Working Group de la IETF, se considera obsoleta en la actualidad.

3.2 - desarrollada a principios de 1997 por el W3C incorpora nuevos elementos como tablas, applets, fuentes y otros.

4.0 - desarrollada por el W3C a finales de 1997 y actualizada a mediados de 1998. Su característica más importante es la introducción de hojas de estilo (CSS).

4.01 - W3C, finales de 1999. Solamente algunas correcciones menores. No habrá versiones posteriores, en favor de XHTML (nuevo modelo).

Qué es CSS?

CSS = Cascading Styling Sheets (hojas de estilo en cascada) Los estilos definen cómo desplegar los elementos HTML Normalmente, los estilos son almacenados en Style Sheets

(hojas de estilo) Puede ahorrarse mucho trabajo usando External Style

Sheets (hojas de estilo externas) Las hojas de estilo externas son guardadas en archivos CSS Múltiples definiciones de estilo forman en cascada una sola. Los estilos fueron agregados en HTML 4.0 para resolver un

problema.

Qué resuelven las CSS?

Las etiquetas HTML fueron diseñadas originalmente para definir funcionalmente el contenido de un documento (“esto es un párrafo”, “esto es una tabla”, etc), dejando al visualizador decidir la presentación final del documento, sin necesidad de etiquetas de formato.

Con la introducción de algunas etiquetas como <font> y atributos de color se hace difícil separar la presentación del documento de su contenido.

Las hojas de estilo resuelven este conflicto.

Cómo ahorran trabajo las CSS?

Los estilos pueden ser guardados en archivos CSS, independientes de los documentos HTML

Los documentos pueden hacer uso de hojas de estilo así guardadas

Una misma hoja de estilo puede usarse desde muchos documentos HTML

La modificación de una hoja de estilo afecta de un golpe la presentación de todos los documentos que la utilicen.

Cómo funcionan “en cascada”?

Los estilos pueden declararse de diferentes maneras, mismas que se combinarán siguiendo este orden:1) Default del visualizador

2) Hoja de estilo externa (archivo CSS)

3) Hoja de estilo interna (declarada en línea en la sección <head> del documento HTML)

4) Estilo en línea (declarado en elemento HTML)

Cada declaración actualiza el estilo acumulado

Ejemplo de hoja de estilo externa

En el archivo miestilo.css :

body {background-color: yellow}

h1 {font-size: 36pt}

h2 {color: blue}

p {margin-left: 50px}

Uso de hoja de estilo externa

En el archivo ejemplo.html :<html>

<head>

<link rel="stylesheet" type="text/css" href=”miestilo.css" />

</head>

<body>

<h1>Este encabezado es de 36 puntos</h1>

<h2>Este encabezado es azul</h2>

<p>Esto tiene un margen izquierdo de 50 pixels</p>

</body>

</html>

Ejemplo de hoja de estilo interna

<html> <head> <style type="text/css"> hr {color: sienna} p {margin-left: 20px} body {background-image: url("images/fondo.gif")} </style> </head> <body> <p>Párrafo con margen de 20 pixels</p> </body></html>

Ej. de hoja de estilo en línea

<html> <body> <p style="color: sienna; margin-left: 20px" > Párrafo con margen izquierdo de 20 pixels </p> </body></html>

Qué es XML?

XML = EXtensible Markup Language (lenguaje de marcas extensible)

XML es un lenguaje de marcas al estilo de HTML XML fue diseñado para describir datos Las etiquetas en XML no están predefinidas. Uno debe

definir las propias!! XML utiliza una DTD (Document Type Definition) o un

XML Schema para describir los datos XML con una DTD o un XML Schema está diseñado para

ser auto-descriptivo

Diferencias ente XML y HTML

XML fue diseñado para llevar datos. XML no es un sustituto de HTML. XML y HTML fueron diseñados para

propósitos diferentes:– XML fue diseñado para definir datos y

enfocarse en lo que son los datos.– HTML fue diseñado para desplegar datos y

enfocarse en cómo lucen los datos.

XML no hace de todo!!

XML no fue diseñado para hacer cualquier cosa.

XML ha sido creado para estructurar, guardar y enviar información.

El siguiente es un ejemplo de un mensaje, almacenado como XML:

<nota>

<para>Carlos</para>

<de>Lupita</de>

<tema>Recordatorio</tema>

<cuerpo>Hoy tienes cita con tu dentista!</cuerpo>

</nota>

Esto es sólo una pieza de información. Alguien debe escribir un programa que

haga algo con ella!!

XML es libre y extensible

Las etiquetas XML no están predefinidas. Uno debe “inventar” sus propias etiquetas. A diferencia de HTML, donde uno tiene

que usar solamente las etiquetas predefinidas y respetar un formato de documento, XML permite al autor definir nuevas etiquetas y su propia estructura de documento.

XML es complemento de HTML

XML no es un sustituto de HTML. XML se usa para describir los datos,

mientras HTML se usa para formatearlos y desplegarlos.

XML es una herramienta independiente de plataforma de hardware y software para transmitir información.

XML puede separar datos de HTML

Al desplegar datos con HTML estos están inmersos en el documento.

Con XML los datos pueden residir en archivos separados, permitiendo enfocar el código HTML al formateo y despliegue de los mismos.

También es posible incrustar XML en el código HTML en forma de “islas de datos” que también permiten la separación de los datos y su formato.

XML para intercambio de datos

La conversión de datos a XML simplifica el intercambio de estos entre sistemas cuyos formatos originales son incompatibles.

Dado que los datos en XML son almacenados en archivos de texto, XML provee un modo de compartir datos de forma independiente a las plataformas de hardware y software.

Si todo esto hace sentido...

...podemos esperar que en un futuro cercano, los fabricantes de software de uso común, como hojas de cálculo, editores de documentos, etc., utilicen XML para almacenar sus datos, permitiendo un intercambio de datos sin necesidad de utilerías para convertirlos de un formato a otro. Veamos si se ponen de acuerdo....

Algunas reglas de XML

Todos los elementos deben tener etiquetas de cierre. Las etiquetas son sensibles a mayúsculas/minúsculas Todos los elementos deben estar debidamente anidados (sin

traslapes) Todos los documentos deben tener una etiqueta “raíz”. Los valores de atributos deben estar entre comillas siempre. El espaciamiento es respetado La secuencias CR/LF son convertidas en LF Los comentarios son iguales que en HTML

Otras características de XML

Los documentos XML son extensibles Los elementos XML son también extensibles Los elementos tienen relaciones entre ellos en

forma de padre-hijo Los elementos pueden tener contenido y atributos Se pueden usar comillas o apóstrofos de manera

indistinta

Validación de XML

Dos simples reglas:

– XML con sintaxis correcta es XML bien formado.

– XML bien formado, validado con una DTD (Data Type Definition) es XML válido.

XML DTD

Para qué sirve la DTD?

El propósito de una DTD (Data Type Definition) es definir los bloques de construcción legales para un documento XML.

Define la estructura del documento con una lista de elementos legales.

Una DTD puede declararse en línea dentro de un documento XML, o como una referencia externa.

Documento XML con DTD en línea

<?xml version="1.0"?><!DOCTYPE nota [ <!ELEMENT nota (para,de,tema,cuerpo)> <!ELEMENT para (#PCDATA)> <!ELEMENT de (#PCDATA)> <!ELEMENT tema (#PCDATA)> <!ELEMENT cuerpo (#PCDATA)>]><nota> <para>Carlos</para> <de>Lupita</de> <tema>Recordatorio</tema> <cuerpo>Hoy tienes cita con el dentista!</cuerpo></nota>

Documento XML con DTD externa

<?xml version="1.0"?>

<!DOCTYPE note SYSTEM "nota.dtd"><nota> <para>Carlos</para> <de>Lupita</de> <tema>Recordatorio</tema> <cuerpo>Hoy tienes cita con el dentista!</cuerpo></nota>

DTD externa

En el archivo nota.dtd :

<!ELEMENT nota (para,de,tema,cuerpo)> <!ELEMENT para (#PCDATA)> <!ELEMENT de (#PCDATA)> <!ELEMENT tema (#PCDATA)> <!ELEMENT cuerpo (#PCDATA)>

Para qué usar una DTD

Con DTD, cada documento XML lleva consigo una descripción de su propio formato.

Grupos independientes de personas pueden convenir el uso de una DTD común para intercambiar datos.

Una aplicación puede usar una DTD estándar para verificar validez de los datos recibidos de una fuente externa.

Puede usarse para verificar los datos propios también.

XML Schema

Qué es XML Schema?

Estándar propuesto por el W3C en mayo de 2001 Un XML Schema describe la estructura de un

documento XML XML Schema es una alternativa a DTD XML Schema es un lenguaje basado en XML El lenguaje de XML Schema es conocido también

como XSD (XML Schema Definition).

Propósito de un XML Schema

Un XML Schema:

– define elementos que pueden aparecer en un documento

– define atributos que pueden aparecer en un documento

– define qué elementos son elementos hijo

– define el orden de los elementos hijo

– define el número de elementos hijo

– define si un elemento es vacío o puede incluir texto

– define tipos de datos para elementos y atributos

– define valores por omisión y valores fijos para elementos y atributos

XML Schemas: sucesores de las DTD

En un futuro cercano, los XML Schemas serán empleados como sustitutos de las DTDs debido a que:– son extensibles para futuras adiciones– son más ricos y útiles que las DTDs– están escritos en XML !!!– Soportan tipos de datos– soportan espacios de nombres

Ejemplo de un XML Schema

<?xml version="1.0"?><xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema"targetNamespace="http://www.dominio.com"xmlns="http://www.dominio.com"elementFormDefault="qualified"><xs:element name="nota"> <xs:complexType> <xs:sequence>

<xs:element name="para" type="xs:string"/><xs:element name="de" type="xs:string"/><xs:element name="tema" type="xs:string"/><xs:element name="cuerpo" type="xs:string"/>

</xs:sequence> </xs:complexType></xs:element></xs:schema>

Referencia a XML Schema

<?xml version="1.0"?><notaxmlns="http://www.dominio.com"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://www.dominio.com nota.xsd">

<nota> <para>Carlos</para> <de>Lupita</de> <tema>Recordatorio</tema> <cuerpo>Hoy tienes cita con el dentista!</cuerpo></nota>

Visualizando XML

Alternativas

Usar una aplicación especialmente diseñada para procesar los datos y desplegarlos en pantalla al gusto.

Dejar que un browser muestre los datos a su gusto Usar una hoja de estilo en cascada (CSS) Aplicar data binding incrustando islas de datos en

un documento HTML Usar XSL

Uso de browsers

Los visualizadores de web más recientes (MSIE 5.0 en adelante y Netscape 6.0) pueden mostrar, de manera muy rudimentaria, los datos de un archivo XML.

El despliegue es muy similar al de un árbol de elementos de datos, con la posibilidad de expandir y colapsar ramas.

Visualizar XML con CSS

Es posible agregar una declaración de hoja de estilo a un documento XML.

Un browser desplegará los datos del archivo XML usando los estilos definidos por CSS.

Lo único que se puede controlar es la apariencia (fuentes, colores y alineación) de los elementos al mostrarse.

No parece una alternativa útil en general.

Ejemplo de XML con CSS<?xml version="1.0" encoding="ISO-8859-1"?><?xml-stylesheet type="text/css" href="cd_catalog.css"?><CATALOG> <CD> <TITLE>Empire Burlesque</TITLE> <ARTIST>Bob Dylan</ARTIST> <COUNTRY>USA</COUNTRY> <COMPANY>Columbia</COMPANY> <PRICE>10.90</PRICE> <YEAR>1985</YEAR> </CD> <CD> <TITLE>Hide your heart</TITLE> <ARTIST>Bonnie Tyler</ARTIST> <COUNTRY>UK</COUNTRY> <COMPANY>CBS Records</COMPANY> <PRICE>9.90</PRICE> <YEAR>1988</YEAR> </CD>..

</CATALOG>

Data binding con islas de datos

Es una alternativa más configurable. Los datos pueden ir incrustados en el documento HTML

directamente o incrustados por referencia a algún archivo XML, mediante la etiqueta <xml>.

En el documento HTML se hace referencia por nombre a los elementos de datos XML como atributos asociados a celdas de una tabla.

La representación de datos es tabular y puede combinarse también con hojas de estilo normales para el formato del documento HTML resultante.

Ejemplo de data binding

<html><body>

<xml id="cdcat" src="cd_catalog.xml"></xml>

<table border="1" datasrc="#cdcat" ><tr><td><span datafld="ARTIST" ></span></td><td><span datafld="TITLE" ></span></td></tr></table>

</body></html>

Qué es XSL

XSL = eXtensible Stylesheet Language Es el lenguaje de definición de estilos preferido para

XML. Consiste de tres partes:

– XSLT (XSL Transformations) - un lenguaje para transformar documentos XML

– XPath - un lenguaje para definir partes de un documento XML

– XSL Formatting Objects - un vocabulario para formatear documentos XML

Qué puede hacerse con XSL?

Podemos pensar en XSL como un lenguaje que puede:– transformar XML en XHTML

– filtrar y clasificar datos XML

– definir partes de un documento XML

– formatear datos XML basado en valores (por ejemplo: desplegar números negativos en rojo)

– producir datos XML sobre diversos dispositivos, como pantalla, papel o voz.

Ejemplo de XML que usa XSL

Este archivo XML usa XSL para transformar datos en XHTML

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

<?xml-stylesheet type="text/xsl" href="simple.xsl"?>

<breakfast_menu>

<food>

<name>Belgian Waffles</name>

<price>$5.95</price>

<description>

two of our famous Belgian Waffles

</description>

<calories>650</calories>

</food>

</breakfast_menu>

Archivo “simple.xsl” (usa XSLT)<?xml version="1.0" encoding="ISO-8859-1"?>

<html xsl:version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns="http://www.w3.org/TR/xhtml1/strict">

<body style="font-family:Arial,helvetica,sans-serif;font-size:12pt;

background-color:#EEEEEE">

<xsl:for-each select="breakfast_menu/food">

<div style="background-color:teal;color:white;padding:4px">

<span style="font-weight:bold;color:white">

<xsl:value-of select="name"/></span>

- <xsl:value-of select="price"/>

</div>

<div style="margin-left:20px;margin-bottom:1em;font-size:10pt">

<xsl:value-of select="description"/>

<span style="font-style:italic">

(<xsl:value-of select="calories"/> calories per serving)

</span>

</div>

</xsl:for-each>

</body>

</html>

Qué es XHTML?

Es la generación más reciente de HTML. Consiste en una reformulación de HTML

versión 4.01 en XML. Liberado por el W3C en enero de 2000. XHTML Second Edition, liberado por el

W3C en agosto de 2002, no es realmente una nueva versión sino un bug fix.

Qué es XHTML? (cont)

XHTML = EXtensible HyperText Markup Language (lenguaje extensible de marcas de hipertexto)

Se definió para reemplazar a HTML Es casi idéntico a HTML 4.01, aunque más estricto y más

limpio Es HTML definido como una aplicación de XML Es una combinación de XML y HTML 4.01 Consiste de todos los elementos de HTML 4.01

combinados con la sintaxis de XML

XHTML vs HTML

Las diferencias más importantes son:– Los elementos en XHTML deben estar debidamente

anidados

– Deben ser documentos bien formados

– Todas las etiquetas y los nombres de atributos deben estar en minúsculas

– Todos los valores de atributos debe estar entre comillas

– Todos los elementos deben ser cerrardos

– La DTD de XHTML define elementos obligatorios

Documento XHTML de ejemplo

<!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>

<title>simple document</title>

</head>

<body>

<p>a simple paragraph</p>

</body>

</html>

Qué es DOM?

DOM = Document Object Model Es una interfaz de programación para

documentos XML Define la manera en que un documento XML

puede ser accesado y manipulado Los elementos del documento pueden ser

utilizados por código de scripting como JavaScript o VBScript

Cómo funciona DOM?

Un programa, conocido como XML Parser puede ser usado para cargar un documento XML en memoria.

Una vez cargado, su información puede ser obtenida y manipulada por medio de accesos al DOM

El DOM representa una vista de árbol de los elementos del documento XML.

El XML Parser de Microsoft

Es un control ActiveX que puede ser invocado desde JavaScript o VBScript incrustado en una página Web.

También puede invocarse desde aplicaciones en VisualBasic, C++, PERL y otros lenguajes.

Uso del parser desde VBScript

set xmlDoc=CreateObject("Microsoft.XMLDOM")xmlDoc.async="false"xmlDoc.load("note.xml")

for each x in xmlDoc.documentElement.childNodes document.write(x.nodename) document.write(": ") document.write(x.text)next

Uso del parser con JavaScript

var xmlDoc = new ActiveXObject("Microsoft.XMLDOM")

xmlDoc.async="false"

xmlDoc.load("note.xml")

nodes = xmlDoc.documentElement.childNodes

to.innerText = nodes.item(0).text

from.innerText = nodes.item(1).text

header.innerText = nodes.item(2).text

body.innerText = nodes.item(3).text

Usando elementos por su nombre

var xmlDoc = new ActiveXObject("Microsoft.XMLDOM")

xmlDoc.async="false"

xmlDoc.load("nota.xml")

para.innerText=

xmlDoc.getElementsByTagName("para").item(0).text

de.innerText=

xmlDoc.getElementsByTagName("de").item(0).text

tema.innerText=

xmlDoc.getElementsByTagName("tema").item(0).text

cuerpo.innerText=

xmlDoc.getElementsByTagName("cuerpo").item(0).text

Qué es SOAP?

SOAP = Simple Object Access Protocol Es un protocolo simple basado en XML para permitir que

aplicaciones intercambien datos sobre la internet. Es un protocolo de comunicación Diseñado para comunicación entre aplicaciones Es un formato para enviar mensajes Diseñado para comunicarse sobre la internet Es independiente de plataforma Es independiente de lenguaje Está basado en XML Es simple y extensible

Elementos de SOAP

Un mensaje SOAP es un documento XML ordinario, que contiene los siguientes tres elementos:– Una envoltura SOAP, que define el contenido del

mensaje– Un encabezado SOAP (opcional), que contiene

información de encabezamiento– Un cuerpo SOAP, que contiene información de

llamada y respuesta

Ejemplo de requerimiento SOAP

Este es un documento XML simplificado, conteniendo un requerimiento SOAP por el precio de las mazanas :

<soap:Envelope>

<soap:Body>

<GetPrice>

<Item>Apples</Item>

</GetPrice>

</soap:Body>

</soap:Envelope>

Un requerimiento SOAP completo

POST /InStock HTTP/1.1

Host: www.stock.org

Content-Type: application/soap; charset=utf-8


<soap:Envelope

xmlns:soap="http://www.w3.org/2001/12/soap-envelope"

soap:encodingStyle="http://www.w3.org/2001/12/soap-encoding">

<soap:Body xmlns:m="http://www.stock.org/stock">

<m:GetStockPrice>

<m:StockName>IBM</m:StockName>

</m:GetStockPrice>

</soap:Body>

</soap:Envelope>

Respuesta SOAP al requerimiento

HTTP/1.1 200 OK

Connection: close

Content-Type: application/soap; charset=utf-8

Date: Sat, 12 May 2002 08:09:04 GMT


<soap:Envelope

xmlns:soap="http://www.w3.org/2001/12/soap-envelope"

soap:encodingStyle="http://www.w3.org/2001/12/soap-encoding">

<soap:Body xmlns:m="http://www.stock.org/stock">

<m:GetStockPriceResponse>

<m:Price>34.5</m:Price>

</m:GetStockPriceResponse>

</soap:Body>

</soap:Envelope>

Referencias para profundizar

W3Schools Online Web Tutorials, en la URL:

http://www.w3schools.com

Es un sitio Web con mucha información sobre estas tecnologías y material didáctico muy bueno para quienes deseen profundizar estos temas.

Acceso libre de cargos!

tecnologías para creación de aplicaciones basadas en web carlos rojas kramer universidad...

Documents