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

1 Tecnologías para creación de aplicaciones basadas en we...
Author: Joaquin Nunez
0 downloads 2 Views

1 Tecnologías para creación de aplicaciones basadas en webCarlos Rojas Kramer Universidad Cristóbal Colón

2 Agenda W3C HTML CSS XML XML DTD XML Schema Visualizando XML XSL XHTMLDOM SOAP Referencias

3 W3C

4 Qué es el W3C? W3C = World Wide Web ConsortiumCreado 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 )

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

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

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

8 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

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

10 HTML

11 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

12 Documento HTML de ejemplo Documento de ejemplo

Documento de ejemplo

Esto es un párrafo de texto con la palabra negrita más intensa.

13 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 Su característica más importante es la introducción de hojas de estilo (CSS). W3C, finales de Solamente algunas correcciones menores. No habrá versiones posteriores, en favor de XHTML (nuevo modelo).

14 CSS

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

16 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 y atributos de color se hace difícil separar la presentación del documento de su contenido. Las hojas de estilo resuelven este conflicto.

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

18 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 del documento HTML) 4) Estilo en línea (declarado en elemento HTML) Cada declaración actualiza el estilo acumulado

19 Ejemplo de hoja de estilo externaEn el archivo miestilo.css : body {background-color: yellow} h1 {font-size: 36pt} h2 {color: blue} p {margin-left: 50px}

20 Uso de hoja de estilo externaEn el archivo ejemplo.html :

Este encabezado es de 36 puntos

Este encabezado es azul

Esto tiene un margen izquierdo de 50 pixels

21 Ejemplo de hoja de estilo interna

Párrafo con margen de 20 pixels

22 Ej. de hoja de estilo en línea

Párrafo con margen izquierdo de 20 pixels

23 XML

24 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

25 Diferencias ente XML y HTMLXML 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.

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

27 El siguiente es un ejemplo de un mensaje, almacenado como XML: Carlos Lupita Recordatorio Hoy tienes cita con tu dentista! Esto es sólo una pieza de información. Alguien debe escribir un programa que haga algo con ella!!

28 XML es libre y extensibleLas 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.

29 XML es complemento de HTMLXML 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.

30 XML puede separar datos de HTMLAl 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.

31 XML para intercambio de datosLa 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.

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

33 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

34 Otras características de XMLLos 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

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

36 XML DTD

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

38 Documento XML con DTD en línea ]> Carlos Lupita Recordatorio Hoy tienes cita con el dentista!

39 Documento XML con DTD externa Carlos Lupita Recordatorio Hoy tienes cita con el dentista!

40 DTD externa En el archivo nota.dtd :

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

42 XML Schema

43 Qué es XML Schema? Estándar propuesto por el W3C en mayo de 2001Un 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).

44 Propósito de un XML Schemadefine 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

45 XML Schemas: sucesores de las DTDEn 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

46 Ejemplo de un XML Schema targetNamespace="http://www.dominio.com" xmlns="http://www.dominio.com" elementFormDefault="qualified">

47 Referencia a XML Schema xmlns="http://www.dominio.com" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.dominio.com nota.xsd"> Carlos Lupita Recordatorio Hoy tienes cita con el dentista!

48 Visualizando XML

49 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

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

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

52 Ejemplo de XML con CSS Empire Burlesque Bob Dylan USA Columbia 10.90 1985 Hide your heart Bonnie Tyler UK CBS Records 9.90 1988 .

53 Data binding con islas de datosEs 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 . 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.

54 Ejemplo de data binding

55 XSL

56 Qué es XSL XSL = eXtensible Stylesheet LanguageEs 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

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

58 Ejemplo de XML que usa XSLEste archivo XML usa XSL para transformar datos en XHTML Belgian Waffles $5.95 two of our famous Belgian Waffles 650

59 Archivo “simple.xsl” (usa XSLT)

-
( calories per serving)

60 XHTML

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

62 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

63 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

64 Documento XHTML de ejemplo PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> simple document

a simple paragraph

65 DOM

66 Qué es DOM? DOM = Document Object ModelEs 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

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

68 El XML Parser de MicrosoftEs 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.

69 Uso del parser desde VBScriptset 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

70 Uso del parser con JavaScriptvar 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

71 Usando elementos por su nombrevar 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

72 SOAP

73 Qué es SOAP? SOAP = Simple Object Access ProtocolEs 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

74 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

75 Ejemplo de requerimiento SOAPEste es un documento XML simplificado, conteniendo un requerimiento SOAP por el precio de las mazanas : Apples

76 Un requerimiento SOAP completoPOST /InStock HTTP/1.1 Host: Content-Type: application/soap; charset=utf-8 xmlns:soap="http://www.w3.org/2001/12/soap-envelope" soap:encodingStyle="http://www.w3.org/2001/12/soap-encoding"> IBM

77 Respuesta SOAP al requerimientoHTTP/ OK Connection: close Content-Type: application/soap; charset=utf-8 Date: Sat, 12 May :09:04 GMT xmlns:soap="http://www.w3.org/2001/12/soap-envelope" soap:encodingStyle="http://www.w3.org/2001/12/soap-encoding"> 34.5

78 Referencias para profundizar

79 W3Schools Online Web Tutorials, en la URL: 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!