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 <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 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"?> <nota xmlns="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> <TITLE>Hide your heart</TITLE> <ARTIST>Bonnie Tyler</ARTIST> <COUNTRY>UK</COUNTRY> <COMPANY>CBS Records</COMPANY> <PRICE>9.90</PRICE> <YEAR>1988</YEAR> . </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> </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!