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
W3C
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.
HTML
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).
CSS
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>
XML
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>
XSL
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>
XHTML
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>
DOM
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
SOAP
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
<?xml version="1.0"?>
<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
<?xml version="1.0"?>
<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!
Recommended