eXtensible Hypertext Markup Language
Anuncio
XHTML 1 eXtensible Hypertext Markup Language XHTML Es el lenguaje de marcado pensado para sustituir a HTML como estándar para las páginas web. En su versión 1.0, XHTML es solamente la versión XML de HTML, por lo que tiene, básicamente, las mismas funcionalidades, pero cumple las especificaciones, más estrictas, de XML. 2 VERSIONES (I) http://www.w3.org/2003/03/recsslide.svg GML (Generalized Markup Language) SGML (Standard Generalized Markup Language). La ISO lo normalizó en 1986. HTML es una instancia de SGML. HTML Nivel 0 : Contenedor principal <HTML>. Secciones principales <head> y <body>. Estilo lógicos, listas, enlaces, imágenes, cabeceras y conj. caracteres. HTML 1.0 (1992): Estilo físicos y nuevos estilos lógicos. HTML 2.0 (1995): Formularios (CGIs). HTML 3.0 (1996): A partir de las propuestas de Netscape. Demasiado extenso. HTML 3.2 (1997): Creado por W3C. Tablas, applets, etc. 3 VERSIONES (II) HTML 4.01 (1999): Frames, CSS, scripts. http://www.w3.org/TR/html401 HTML 5.0: en desarrollo. Esta especificación está destinada a sustituir las especificaciones HTML4, XHTML 1.0 y DOM2 HTML. http://www.w3.org/TR/html5/ XHTML 1.0 (2000): reformulación de html 4.0 en XML 1.0. http://www.w3.org/TR/xhtml1 XHTML 1.1 (2001): reformulación de XHTML 1.0 Strict incluyéndole el uso de módulos XHTML http://www.w3.org/TR/xhtml11/ XHTML 2.0: Siguiente versión en desarrollo (Working Draft - 8). http://www.w3.org/TR/xhtml2/ 4 DIFERENCIAS ENTRE HTML Y XHTML (I) La sintaxis de XHTML es mucho más rígida Las etiquetas y los atributos siempre se ponen en minúsculas. Los valores de los atributos van entrecomillados. Ej. HTML: <BODY BgColor=“#ff00ff”> Ej. XHTML: <body bgcolor=“#ff00ff”> Ej. HTML: <TABLE BORDER=0 align=“center”> Ej. XHTML: <table border=“0” align=“center”> No se pueden dejar instrucciones por cerrar Ej. HTML: Ej. XHTML: <P>Un párrafo. <p>Otro párrafo. <p>Un párrafo</p> <p>Otro párrafo</p> Deben cerrarse correctamente. Ej. HTML: <p>Ejemplo<b>caracteres en negrita</p></b> Ej. XHTML: <p>Ejemplo<b>caracteres negrita</b></p> 5 DIFERENCIAS ENTRE HTML Y XHTML (II) XHTML añade nuevos elementos (XML). Al igual que en cualquier otro documento XML, la primera línea del documento índica la versión de XML empleada. <?xml version="1.0" encoding="UTF-8"?> A continuación se indica el tipo de documento (DTD). <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Strict//EN" Y a continuación se define el espacio de nombres con el atributo xmlns de la directiva <html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang=“es" lang=“es"> Es obligatorio cerrar todas las directivas, incluso las vacías. Ej. HTML: <img src=“http://www.san.gva.es/images/home/base.gif”> Ej. XHTML: <img src=“http://www.san.gva.es/images/home/base.gif” /> 6 EJERCICIO Valida los siguientes xhtml http://jorbartu.webcindario.com/xhtml_correcto.xhtml http://jorbartu.webcindario.com/xhtml_incorrecto.xhtml 7 XHTML 1.0 – CABECERA Version de xml: <?xml version="1.0" encoding="UTF-8"?> La declaración XML de la primera línea es obligatoria cuando la codificación del documento es diferente de UTF-8 o UTF-16. En cualquier caso siempre es recomendable incluirla. Tipo de documento. Comentario especial SGML que hace referencia al DTD (Data Type Document) Strict DTD: Todos los componentes estándares menos frames, y aquellos desaconsejables de versiones anteriores (para usar con CSS). <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Transitional DTD: Incluye todos los elementos (incluidos los desaconsejables pero validos en HTML 4) menos frames. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Frameset DTD: Todos los componentes estándares y frames. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> 8 XHTML 1.0 – ETIQUETA HTML Elemento documento (<html> ... </html>) Atributos: xmlns (obligatorio), xml:lang y lang. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang=“es" lang=“es"> El atributo xmlns asocia los elementos y atributos XML con su definición de tipo correspondiente. Es posible especificar más de uno, por ejemplo en un documento que incluya elementos de SVG o MathML. 9 XHTML 1.1 – CABECERA Reformulación de XHTML 1.0 Strict incluyéndole el uso de módulos XHTML. Diferencias entre XHTML 1.1 y XHTML 1.0 Strict En cada elemento, el atributo “lang” ha sido eliminado en favor del atributo “xml:lang”. En los elementos “a” y “map”, el atributo “name” ha sido eliminado en favor del atributo “id”. Se ha añadido la colección de elmentos “ruby“: ruby, rbc, rtc, rb, rt, rp (sirve para realizar anotaciones breves sobre un texto base, muy usado en Japón y China para mostrar la pronunciación). Declaración DOCTYPE correspondiente a XHTML 1.1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> El empleo de los módulos se realiza declarándolos como DTDs en el encabezado del documento XHTML. 10 XHTML 1.1 (I) Elementos desaprobados applet basefont center dir font frame (F) frameset (F) iframe (T) isindex menu noframes (F) s strike u T: Elementos permitidos en los documentos de tipo XHTML 1.0 transitional F: Elementos permitidos en los documentos de tipo XHTML 1.0 frameset. 11 XHTML 1.1 (II) Atributos desaprobados align, en: caption, img, input, object, legend, table, hr, div, h1, h2, h3, h4, h5, h6, p alink background bgcolor border, en: img, object clear, en: br compact height, en: td, th. hspace lang (1.1) language link name (1.1 en: a, map) noshade nowrap size, en: hr start style (1.1) target (T) text type, en: li, ol, ul. value, en: li. version vlink vspace width, en: hr, td, th, pre T: Atributos permitidos en los documentos de tipo XHTML 1.0 transitional. 1.1: Atributos obsoletos en la especificación XHTML 1.1. No se incluyen los atributos correspondientes a elementos obsoletos. 12 MODULARIZACIÓN DE XHTML 1.1 Conjuntos bien definidos de elementos XHTML que se pueden combinar y ampliar por los autores del documento. Permite la extensión de la distribución XHTML y las capacidades de presentación, con la extensibilidad de XML, sin romper el estándar XHTML. Un tipo de documento XHTML se define como un conjunto de módulos resumen. Esta jerarquía permite definir nuevas versiones que utilicen unos u otros módulos en función del propósito del documento y de las posibilidades de las plataformas de destino, como es el caso del XHTML basic, encauzado a su utilización en dispositivos con limitaciones, como los teléfonos móviles. http://www.w3.org/TR/2001/REC-xhtml-modularization20010410 http://www.w3.org/TR/2009/PER-xhtml11-20090507/ 13 MÓDULOS DEFINIDOS PARA XHTML 1.1 Y SUS CORRESPONDIENTES ELEMENTOS Modulo Estructural: body, head, html, title Modulo Texto: abbr, acronym, address, blockquote, br, cite, code, dfn, div, em, h1, h2, h3, h4, h5, h6, kbd, p, pre, q, samp, span, strong, var. Modulo Hipertexto: a Modulo Lista: dl, dt, dd, ol, ul, li Modulo Objeto: object, param Modulo Presentación: b, big, hr, i, small, sub, sup, tt Modulo Editar: del, ins Modulo Texto Bidireccional: bdo Modulo Formas: button, fieldset, form, input, label, legend, select, optgroup, option, textarea Modulo Tablas: caption, col, colgroup, table, tbody, td, tfoot, th, thead, tr. Modulo imagen: img Modulo Mapa lado Cliente: area, map Modulo Mapa lado Servidor: Attribute ismapon img Modulo eventos intrínsecos: Atributos Events Modulo Metainformación: meta Modulo de Scripts: noscript, script Modulo Hoja de estilos: elementos style Modulo Atributo Style: Deprecated : atributo style Modulo link: link Modulo base: base 14 XHTML 1.1 DTD <!-- ....................................................................... --> <!-- XHTML 1.1 DTD ........................................................ --> <!-- file: xhtml11.dtd--> .................... <!-- Modular Framework Module (required) ......................... --> <!ENTITY % xhtml-framework.module "INCLUDE" ><![%xhtml-framework.module;[<!ENTITY % xhtmlframework.mod PUBLIC "-//W3C//ENTITIES XHTML Modular Framework 1.0//EN" "http://www.w3.org/TR/xhtml-modularization/DTD/xhtml-framework-1.mod" > %xhtml-framework.mod;]]> .................... <!-- Hypertext Module (required) ................................. --> <!ENTITY % xhtml-hypertext.module "INCLUDE" ><![%xhtml-hypertext.module;[<!ENTITY % xhtmlhypertext.mod PUBLIC "-//W3C//ELEMENTS XHTML Hypertext 1.0//EN" "http://www.w3.org/TR/xhtml-modularization/DTD/xhtml-hypertext-1.mod" > %xhtml-hypertext.mod;]]> .................... <!-- Lists Module (required) .................................... --> <!ENTITY % xhtml-list.module "INCLUDE" ><![%xhtml-list.module;[<!ENTITY % xhtml-list.mod PUBLIC "-//W3C//ELEMENTS XHTML Lists 1.0//EN" "http://www.w3.org/TR/xhtml-modularization/DTD/xhtml-list-1.mod" > %xhtml-list.mod;]]> 15 TECNOLOGÍAS XML (I) XSL : Lenguaje Extensible de Hojas de Estilo, es una familia de lenguajes basados en el estándar XML que permite describir cómo la información contenida en un documento XML debe ser transformada o formateada para su presentación, por ejemplo en una ventana de un navegador Web o un dispositivo móvil, o un conjunto de páginas de un catálogo, informe o libro. Es capaz de transformar, ordenar y filtrar datos XML, y darles formato basándolo en sus valores. Esta familia está formada por tres lenguajes: XSLT: eXtensible Stylesheet Language Transformations, es un lenguaje de transformación. Se basa en Xpath. XSL-FO: lenguaje de formateo de objetos, permite especificar el formato visual con el cual se quiere presentar un documento XML, es usado principalmente para generar documentos PDF. XPath, es una sintaxis (no basada en XML) para acceder o referirse a porciones de un documento XML, identifica partes de un documento XML concreto, como pueden ser sus atributos, elementos, etc. XLink : Lenguaje de Enlace XML, es un lenguaje que permite insertar elementos en documentos XML para crear enlaces entre recursos XML. Xlink describe un camino estándar para añadir hiperenlaces en un archivo XML. Es decir, es un mecanismo de vinculación a otros documentos XML. Funciona de forma similar a un enlace en una página Web, es decir, funciona como lo haría <a href="">, sólo que a href es un enlace unidireccional. Sin embargo, XLink permite crear vínculos bidireccionales, lo que implica la posibilidad de moverse en dos direcciones. <link xlink:type="simple" xlink:href=“trick1.xml">Hot trick #1</link> 16 TECNOLOGÍAS XML (II) XPointer : Lenguaje de Direccionamiento XML, es un lenguaje que permite el acceso a la estructura interna de un documento XML, esto es, a sus elementos, atributos y contenido. Funciona como una sintaxis que apunta a ciertas partes de un documento XML, es como una extensión de XPath. Se utiliza para llegar a ciertas partes de un documento XML. Primero, XLink permite establece el enlace con el recurso XML y luego es XPointer el que va a un punto específico del documento. Su funcionamiento es muy similar al de los identificadores de fragmentos en un documento HTML ya que se añade al final de una URI y después lo que hace es encontrar el lugar especificado en el documento XML. Al ser XPointer una extensión de XPath, XPointer tiene todas las ventajas de XPath y además permite establecer un rango en un documento XML, es decir, con XPointer es posible establecer un punto final y un punto de inicio, lo que incluye todos los elementos XML dentro de esos dos puntos. XQL : Lenguaje de Consulta XML, es un lenguaje que facilita la extracción de datos desde documentos XML. Ofrece la posibilidad de realizar consultas flexibles para extraer datos de documentos XML en la Web. Se basa en operadores de búsqueda de un modelo de datos para documentos XML que puede realizar consultas en infinidad de tipos de documentos como son documentos estructurados, colecciones de documentos, bases de datos, estructuras DOM, catálogos, etc. 17 EJERCICIO La Web construida en el capítulo anterior, reconvertirla a XHTML 1.0 Strict DTD (alojarla en el servidor en “carpeta raiz/xhtml”. 1. 2. 3. Realizar la “trasformación” manualmente. Validarla: utilizando el navegador contra el DTD o con herramientas online como http://validator.w3.org/. Realizar la trasformación utilizando herramientas que manipulan xml: Amaya (o Tidy). 18 ENLACES El W3C ofrece un servicio de validación en: http://validator.w3.org/ HTML Tidy ofrece la opción de transformar cualquier documento HTML en uno XHTML: http://tidy.sourceforge.net/ Amaya es un navegador/editor que guarda documentos HTML como XHTML, también se asegura de que el etiquetado sea correcto: http://www.w3.org/Amaya/ Guía de Referencia XHTML: http://www.w3c.es/Divulgacion/GuiasReferencia/XHTML1/ Guía breve: http://www.w3c.es/divulgacion/guiasbreves/XHTML 19
