Ingeniería de Aplicaciones Web

Transcripción

1 Ingeniería de Aplicaciones Web Clase 3 Diego C. Martínez Departamento de Ciencias e Ingeniería de la Computación Universidad Nacional del Sur

2 Protocolo HTTP HTTP (Hypertext Transfer Protocol) es el protocolo de red para la Web. Como protocolo de comunicación, define el tipo y estructura de los mensajes que se envían y las reglas del diálogo entre los dos participantes. HTTP HTTP request GET Cliente HTTP (browser) OK HTTP response Servidor HTTP (web server) Qué es lo que se transfiere realmente? Para qué tipo de información fué diseñado este protocolo?

3 Documentos Recordemos: la Web surge como un servicio de Internet para estudiar y explorar documentos multimediales. documentos de texto, con imágenes y/o sonido. facilidades de exploración de información relacionada. The frontiers of a book are never clear-cut, because it is caught up in a system of references to other books, other texts, other sentences: it is a node within a network, a network of references" The archeology of knowledge Michel Foucault 1969 Esto requiere una forma especial de estructurar la información, para interrelacionarla y visualizarla adecuadamente.

4 Hipertexto La idea de hipertexto es anterior al surgimiento de la web, e incluso de las redes globales... Hypertext is a non-sequential writing, a text that branches and allows choices to the reader, best read at an interactive screen. As popularly conceived, this is a series of text chunks connected by links which offer the reader different pathways" Theodor Nelson (1960) En los 80, Tim Berners-Lee idea la World Wide Web como respuesta a la necesidad de investigadores del CERN y del mundo de compartir información.

5 HTML Propuesta de Berners-Lee: Enriquecer un documento con marcas especiales para estructurar, vincular y componer la información, de manera tal de convertirlo en hipertexto. + <marcas> Así surge HTML : HyperText Markup Language. El aporte de Berners-Lee no se limita al HTML. De hecho, ya existían lenguajes de marcado (SGML- Standard generalized markup language). Su propuesta es una red global de documentos, unidos por global hypertext links Berners-Lee implementa el primer browser de documentos HTML y el primer servidor HTML de la historia, en una computadora NeXT.

6 Estructura de HTML Las marcas (tags) se encierran entre < y > La versión original (de Berners-Lee) era simple, pero con posterioridad diferentes navegadores comenzaron a agregar su propias modificaciones (parte de la famosa browsers-war ). Actualmente la definición de HTML de la W3C es estricta, pero los navegadores siguen procesando documentos sin la estructura apropiada. Cada tag tiene un nombre y posiblemente varios atributos (attr=valor) Los tags usualmente se asocian de a dos: opening tag y closing tag, delimitando secciones del documento (elemento), dándoles un significado especial. datos<tag>contenido</tag>datos datos<tag attr1=valor1 attr2=valor2>contenido</tag>datos datos<tag_unario>datos

7 Primera versión de HTML Tags de la primera versión de HTML: <TITLE>... </TITLE> Título del documento <A NAME=xxx HREF=XXX>... </A> Hipervínculo. <ISINDEX> Indicador de una página índice <PLAINTEXT> <LISTING>... </LISTING> Texto a ser tomado en forma literal Texto de font de tamaño fijo, tomado literalmente <P>, <H1>, <H2>, <H3>, <H4>, <H5>, <H6> Párrafo y encabezados <ADDRESS> text... </ADDRESS> <HP1>...</HP1> <HP2>... </HP2> Direcciones, contacto, footers Texto resaltado. Ya no se usa. Listas descriptivas <DL> <DT>Term<DD>definition pagagraph <DT>Term2<DD>Definition of term2 </DL> Listas no numeradas <UL> <LI> list element <LI> another list element </UL>

8 HTML - ejemplos <HTML> <HEAD> <TITLE>Este es el titulo!</title> </HEAD> <BODY> <P> </BODY> </HTML> <FONT SIZE=3 COLOR=white>Hola Mundo!</FONT> <FONT SIZE=1 COLOR=#1FFF00>Chau Mundo!</FONT>... <table border="1"> <tr> <td>cell 1</td><td>cell 2</td> </tr> <tr> <td>cell 3</td><td>cell 4</td> </tr> </table> <b>this text is bold</b> <br> <strong>this text is strong</strong> <br> <big>this text is big</big> <br> <em>this text is emphasized</em> <br> <i>this text is italic</i> <br> <small>this text is small</small> <br> This text contains<sub>subscript</sub> <br> This text contains<sup>superscript</sup>...

9 HTML - ejemplos <p> <a href="otra.htm"> Este texto</a> es un link a una página local </p> <p> <a href=" texto</a> es un link a una página externa </p> <a href="otra.htm"> <img border="0" src="buttonnext.gif" width="65" height="38"> </a> <ul> <li>primer item</li> <li>segundo item</li> <li>tercer item</li> </ul> <ol> <li>primer item</li> <li>segundo item</li> <li>tercer item</li> </ol>

10 Evolución de HTML SGML HTML 1.0 HTML 2.0 HTML 3.2 Estándar inicial para la definición de marcados Versión inicial. Tags elementales para marcar datos de manera independiente de la plataforma. Primera versión estandarizada. Formaliza la sintaxis y varias reglas ya implementadas Estándar de la W3C. Reconcilia algunos tags propietarios. Fué ignorado como estandar por varios browsers Web Standards Project 1999 HTML 4.0 Estandariza la estructura y sintaxis de HTML. Tiene tres variantes: strict, transitional, frameset XHTML 1.0 Diseñado como aproximación a XML HTML 5.0 Promovido por la WHATWG - Web Hypertext Application Technology Working Group Actualización debido a mayor contenido multimedial. Participación de Apple y Google. Actualmente Candidate Recommendation

11 Estándares actuales HTML 4 XML HTML 5 XHTML 1.0

12 Estándares actuales HTML 4 XML HTML 5 XHTML 1.0 Define mecanismos para hojas de estilo, scripts, objetos embebidos, mejoras en acessibilidad, internacionalización. Ofrece una mejor distinción entre la estructura del documento y su presentación. HTML 4 es todavia considerado un estándar para el desarrollo de aplicaciones web. Se entiende, sin embargo, que es antiguo y en camino a ser reemplazado.

13 Estándares actuales HTML 4 XML HTML 5 XHTML 1.0 XML es el lenguaje de marcado extensible. Es extensible porque los tags son definibles por el usuario. Orientado exclusivamente a la estructuración y descripción de datos. Es la base de la interoperabilidad de muchos sistemas. Es el estándar para muchas tecnologías web (Ajax, Servicios web, etc) Es una recomendación de la W3C desde 1998.

14 Estándares actuales HTML 4 XML HTML 5 XHTML 1.0 HTML5 es una evolución y actualización del HTML. Han surgido muchas tecnologías desde la aparición de HTML4: la web es mas multimedial e interactiva (Flash, Ajax, Web 2.0). Inicialmente no fue concebido por la W3C. Incluye algoritmos detallados para el manejo de errores (antes librado a los browsers) Incluye nuevos elementosy atributos semánticos (como <section>). Agrega soporte para audio y video. Reduce la necesidad de plug-ins. Soporta mi navegador HTML5? Ver

15 Estándares actuales HTML 4 XML HTML 5 XHTML 1.0 XHTML es una implementación de HTML en XML. NO es un reemplazo de HTML. Facilita la integración con otros lenguajes tipo SGML, tales como MathML o SVG. Al seguir reglas XML, es más estricto en su estructura que HTML. Como es XML, requiere un DTD. Es un estándar ampliamente usado, al igual que HTML4.

16 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. Incluyen la declaración inicial: <?xml version= 1.0 encoding= UTF-8?> <producto> <nombre> Flatron L17 </nombre> <descripcion> Monitor LCD de 17 pulgadas. </descripcion> </producto> <contacto> <nombre> Juan Perugia </nombre> <telefono tipo= cel > </telefono> <telefono tipo= oficina >42346</telefono> </producto> Para evitar colisiones de tags namespaces Colección de vocabularios

17 XML - namespaces <proveedor> <producto> <nombre>...</nombre>... </producto> <contacto> <nombre>...</nombre>... </contacto> </proveedor> <proveedor xmlns= xmlns:cont= > <producto> <nombre>...</nombre>... </producto> <contacto> <cont:nombre>...</cont:nombre>... </contacto> </proveedor> Si hay libertad de definir tags cómo sabemos cuál es la estructura correcta de un XML? <telefono tipo= cel > </telefono> <telefono tipo= cell > </telefono> <telefono tipo= celular > </telefono>

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

19 DTD- Document Type Definition Definición DTD: <!DOCTYPE nombre_nodo_raiz definiciones > Puede incluirse en el mismo XML, o referenciar otro recurso. <!DOCTYPE nombre_nodo_raiz recurso > <!ELEMENT elemento specif_contenido> <!ELEMENT apellido (#PCDATA)> <!ELEMENT contacto (nombre,telefono,direccion)> <!ELEMENT sexo (masc fem)> <!ELEMENT img EMPTY> <!ELEMENT descripcion ANY> <!ELEMENT subseccion (#PCDATA)> <!ELEMENT seccion (#PCDATA subseccion)*>? = cero o uno, * = cero o muchos, + = uno o muchos <!ELEMENT articulo (titulo?, (parrafo+, grafico)*)> <!ATTLIST elemento atributo tipo defauldecl> <!ATTLIST contacto telefono (cel oficina casa)> <!ATTLIST mensaje prioridad (urgente normal) normal> <!ATTLIST producto oferta (si no) #REQUIRED> <!ATTLIST mensaje firma CDATA #IMPLIED> <!ATTLIST texto idioma CDATA>

20 XSD XML Schema Definitions Al ser un documento XML, la estructura del XSD es previsible. Utiliza tags especiales con el prefijo xs: <?xml version="1.0"?> <xs:schema xmlns:xs=" <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> </xs:schema> Define varios tipos de datos básicos para los elementos del XML: xs:string xs:decimal xs:integer xs:boolean xs:date xs:time xs:anyuri <xs:element name="autor" type="xs:string"/> <xs:element name="precio" type="xs:decimal"/>

21 XSD - Ejemplos <xs:element name="edad"> <xs:simpletype> <xs:restriction base="xs:integer"> <xs:mininclusive value="0"/> <xs:maxinclusive value="120"/> </xs:restriction> </xs:simpletype> </xs:element> <xs:element name="auto" type="tipoauto"/> <xs:simpletype name="tipoauto"> <xs:restriction base="xs:string"> <xs:enumeration value="chevrolet"/> <xs:enumeration value="vw"/> <xs:enumeration value="nissan"/> </xs:restriction> </xs:simpletype>

22 XSD Ejemplos <xs:complextype name="direccion"> <xs:sequence> <xs:element name="calle" type="xs:string"/> <xs:element name="ciudad" type="xs:string"/> </xs:sequence> </xs:complextype> <xs:complextype name="direccionarg"> <xs:complexcontent> <xs:extension base="direccion"> <xs:sequence> <xs:element name="provincia" type="xs:string"/> <xs:element name="codigopostal" type="xs:string"/> </xs:sequence> </xs:extension> </xs:complexcontent> </xs:complextype>

23 XSD Ejemplos <?xml version= 1.0?> <xs:schema xmlns:xs= > <xs:element name= listaenteros type= tipolistaenteros > <xs:simpletype name="tipolistaenteros"> <xs:list itemtype="xs:integer"/> </xs:simpletype> <listaenteros> </listaEnteros>

24 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 XML 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

25 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 Es compatible con HTML 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. 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 />

26 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=" <head> <title>titulo de la Pagina</title> </head> </html> <body>... </body> 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)

27 XHTML XHTML Strict <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " XHTML Transitional <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " XHTML Frameset <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" " Validador on-line de la W3C: