Lenguajes de marcado

Tecnología Multimedia
Profesor Coordinador:
Manuel Castro – Antonio Colmenar, UNED
Profesores de la asignatura:
Manuel Castro, UNED
Lenguajes de Marcado
Máster en Ingeniería de la Web
Índice
LENGUAJES DE MARCADO ........................................................... 3
Lenguajes de marcado genéricos.................................................. 4
SGML................................................................................ 4
HTML (Hypertextual Markup Language) ...................................... 5
HyTime (Hypermedia/Time-Based Structuring Language) ................. 6
XML (Extensible Markup Language) ............................................ 6
XHTML (The Extensible Hypertext Markup Language) ...................... 6
SMIL (Synchronized Multimedia Integration Language)..................... 7
WML (Wireless Markup Language) ............................................. 7
Medios digitales. Edición, codificación e integración
2 de 8
Máster en Ingeniería de la Web
LENGUAJES DE MARCADO
En el mundo de los documentos en papel, el término marcado hace referencia a la
manera en la que el editor anota los manuscritos con especificaciones tipográficas y
otros datos sobre su presentación. En los documentos electrónicos, el marcado es el
término empleado para describir los códigos, denominados también etiquetas,
añadidos al texto electrónico que definen la estructura y el formato en el que tiene
que aparecer. Puede ser utilizado, además, para propósitos muy diferentes como son
la escritura, la impresión, el intercambio, la presentación de pantallas, etc.
La gran variedad de lenguajes de marcado y su patente incompatibilidad constituyen
la causa de los problemas que se plantean al intercambiar un documento entre
plataformas heterogéneas. Los lenguajes estándar proporcionan una manera de
solventar este hecho, ya que son independientes de la aplicación y de la plataforma
hardware, empleando para marcar el documento, en la mayoría de los casos, código
ASCII.
Cuando se habla de lenguajes de marcado, es importante distinguir entre la
estructura lógica y física del documento.
DEFINICIÓN: La estructura lógica.
•
La estructura lógica está formada por las partes que lo componen y por
sus relaciones.
DEFINICIÓN: La estructura física.
•
La estructura física indica la apariencia del documento, ya sea en el
papel o sobre la pantalla, incluyendo sus componentes físicos, el
posicionamiento de los elementos y la tipografía empleada.
En la figura 1 se pueden ver algunos de los componentes que describen la lógica y la
estructura física del documento.
En este capítulo se presentan un conjunto de lenguajes de marcado que se utilizan
habitualmente en los entornos Web y algunos lenguajes de presentación que
permiten adaptar la presentación de la información contenida en esos documentos.
Además, y para finalizar, se presenta el VRML como lenguaje de modelado que
permite la definición de mundos virtuales que permiten al usuario navegar por la
información en tres dimensiones.
Medios digitales. Edición, codificación e integración
3 de 8
Máster en Ingeniería de la Web
Tipos de Marcado
Estructura Lógica
Identificador de Capítulo
Capítulo Diecinueve
Título
Nombre Capítulo
Párrafo Capítulo
Este es el primer párrafo del capítulo diecinueve.
Identificador de Sección
Sección 1
Título Sección 1
Nombre Sección
Lista de
Elementos
Etiqueta 1:
Etiqueta 2:
Etiqueta 3:
Elemento 1 de la lista.
Elemento 2 de la lista.
Elemento 3 de la lista.
Etiqueta n:
Elemento n de la lista
Sección 2
Identificador de Sección
Nombre Sección
Título Sección 2
Párrafo Sección
Aquí vendría un texto explicativo de lo que viene
a continuación.
Lista de
Elementos
Etiqueta 1:
Etiqueta 2:
Etiqueta 3:
Elemento 1 de la lista.
Elemento 2 de la lista.
Elemento 3 de la lista.
Etiqueta 4:
Elemento n de la lista
Estructura Física
Palatino 14. Centrado
Palatino 14. Centrado. Negrita
Courier 12.
Helvética 14. Centrado
Helvética 14. Centrado. Negrita
Courier 10.
Courier 10. Izquierda. Negrita
Helvética 14. Centrado
Helvética 14. Centrado. Negrita
Courier 12. Izquierda
Courier 10.
Courier 10. Izquierda. Negrita
Figura 1.
Estructura lógica vs estructura física en el documentos
Lenguajes de marcado genéricos
Los lenguajes de marcado genérico describen la estructura de un documento y sus
atributos, sin especificar el proceso que se debe realizar sobre él.
DEFINICIÓN: Los lenguajes de marcado genéricos.
•
Los lenguajes de marcado genéricos son aquellos que sirven para
especificar la estructura de cualquier documento sin tener en cuenta
los aspectos relativos a la presentación.
Esto supone que el mismo documento se puede presentar de muchas maneras, de
acuerdo con las normas de estilo que se le apliquen. A continuación se presentan los
lenguajes más conocidos y que se utilizan para la publicación en Web.
SGML
SGML (Standard Generalized Markup Language) es un ejemplo de lenguaje genérico
que apareció con el identificador 8879 como norma ISO (International Organization
for Standardization) en 1986. La comunidad editorial fue la que dio origen a esta
norma, al considerar que la flexibilidad en el diseño de los documentos era de
máxima importancia. El objetivo que perseguía era proporcionar una manera
normalizada de transmitir los documentos en un formato adecuado para los procesos
de edición e impresión. SGML es apropiado para describir texto altamente
estructurado, aunque también se pueden incluir en los documentos otros elementos,
como por ejemplo diagramas y gráficos, independientemente de su formato de
codificación.
SGML contiene las reglas para crear una infinita variedad de lenguajes de marcado,
pero no describe el formato de los documentos marcados. Una definición similar
clasifica a SGML como un sistema para especificar lenguajes de marcado, es decir, un
metalenguaje. Esto hace posible que, mediante la utilización de una definición de
tipo de documento (denominada DTD Document Type Definition), se pueda
especificar la estructura lógica de una clase de escrito.
Medios digitales. Edición, codificación e integración
4 de 8
Máster en Ingeniería de la Web
DEFINICIÓN: DTD (Document Type Definition).
•
Una DTD es una definición formal que indica qué elementos se incluyen
como contenidos de los documentos y en qué orden.
Cada elemento en el documento se marca mediante una etiqueta de comienzo y otra
de final. Estas etiquetas vienen especificadas mediante un identificador genérico,
que define el tipo del elemento (por ejemplo, párrafo, cabecera o figura) y unas
características, o atributos, que cualifican al identificador. En concreto una DTD
define:
• los identificadores genéricos de los elementos que se permiten en un tipo
de documento,
• para cada elemento, los posibles atributos y sus rangos de valores, así como
el que toma por defecto; su estructura y su contenido, incluyendo los
subelementos que pueden ocurrir y en qué orden.
Una DTD considera un documento como un árbol, cuya raíz es el propio documento.
Antología, poema, título, estrofa y línea son los identificadores genéricos de los
elementos.
A partir de la definición de SGML se han generado diversos lenguajes de marcado que
sirven, o han servido, para el desarrollo de aplicaciones hipermedia/Web. Es cierto
que normalmente estos lenguajes no se utilizan directamente, sino que normalmente
se usan herramientas de autor que generan el código en alguno(s) de los lenguajes
que se mencionan a continuación (por ejemplo, Macromedia DreamWeaver). De esta
forma el programador no se preocupa ni de la sintaxis ni de la semántica asociada a
los códigos concretos si no que mediante lenguajes visuales establece la estructura,
el contenido y la apariencia de los hiperdocumentos que conforman su aplicación.
Algunos de los lenguajes de marcado más conocidos son: HTML, XML, XHTML, HyTime
y SMIL.
HTML (Hypertextual Markup Language)
HTML es una aplicación de SGML que incluye tipos de documentos predefinidos. Por
ello, todos los documentos de tipo HTML contienen los mismos elementos y los
mismos atributos, es decir todos los documentos de este tipo tienen la misma
estructura pero no los mismos contenidos. La última versión de HTML es la 4.01
siendo una recomendación no una especificación ya que no se llegó a un acuerdo
total sobre ella. Esta norma ha ido desvirtuándose de tal manera que además de
elementos conceptuales como pueden ser los enlaces, contiene también elementos
de presentación (por ejemplo, el elemento para poner en negrita un texto).
Todos los documentos que cumplen la norma HTML, por tanto, siguen la
especificación de una DTD concreta que es interpretable por los navegadores que
existen en la actualidad. En este proceso de interpretación, el navegador se encarga
de transformar cada una de las marcas que definen la estructura del documento en
una representación física que el usuario pueda comprender.
Todo documento HTML está formado por una cabecera (HEAD) y un cuerpo (BODY).
En la cabecera se incluye toda la información relativa al documento como puede ser
meta-información que es información sobre la información o un título que se utilizará
por el navegador en la lista de páginas visitadas o como título de la ventana que
muestra el documento. En la parte del cuerpo se incluirá toda la información relativa
al documento junto con las etiquetas que dan forma al mismo. En el ejemplo
anterior, la etiqueta <BR> sirve para que la imagen que aparece a continuación del
Medios digitales. Edición, codificación e integración
5 de 8
Máster en Ingeniería de la Web
texto se muestre en la línea siguiente, mientras que la etiqueta <IMG> se utiliza para
incluir la imagen que se indica en el atributo src.
HyTime (Hypermedia/Time-Based Structuring Language)
HyTime es una extensión de SGML que especifica un conjunto de conceptos básicos
con los que se puede definir la estructura lógica de documentos hipertextuales y
multimedia. HyTime normaliza aquellos mecanismos que se refieren a la localización
de porciones de documentos hipermedia y sus componentes multimedia de
información, incluyendo enlaces, alineamiento en el espacio y sincronización en el
tiempo, es decir, proporciona una manera homogénea de enlazar a un documento
cualquier tipo de elemento, en cualquier parte y en cualquier instante. Sirve como
base de intercambio de informaciones hipermedia, independientemente de la
aplicación que las haya creado, y se ocupa de normalizar la estructura del
documento y la identificación de los objetos de información que lo conforman.
HyTime, por tanto, no establece los contenidos del hiperdocumento, ni la
codificación de la información, ni los objetos, ni la aplicación que trabaja sobre
ellos, ni arquitecturas de documentos particulares, ni tipos de enlaces, ni tipos de
documentos. Debido a la dificultad en su uso, esta norma no ha sido utilizada de una
forma masiva, aunque muchas de sus ideas se encuentran en las normas que en la
actualidad se están imponiendo.
XML (Extensible Markup Language)
XML es una aplicación de SGML, lo que significa que en su especificación se indican
como se deben describir los elementos que participan en el hiperdocumento pero no
los elementos en sí. Por tanto, cuando se quiere describir un documento mediante
XML hay que describir en primer lugar el tipo de documento en que se basa, es decir
la DTD, y a continuación los contenidos concretos asociados a cada elemento. Un
ejemplo de construcción de aplicaciones con XML es el desarrollo de normas para
tipos concreto de documentos, como puede ser un libro electrónico. Una iniciativa en
este campo, el desarrollo de una DTD para libros electrónicos a partir de XML, es
OpenEBook, un estándar en el que numerosas empresas del sector bibliográfico están
trabajando de manera que con una misma plataforma se puedan leer, comprar,
distribuir, etc. libros electrónicos que tengan un formato común.
XHTML (The Extensible Hypertext Markup Language)
XHTML es una nueva definición de HTML a partir de XML. Este lenguaje se basa en la
redefinición de las DTDs de HTML versión 4 mediante XML lo que permite entre otras
cosas que los documentos siguiendo XHTML se puedan visualizar tanto en
navegadores de HTML como en los de XML. Por otro lado, como los documentos
XHTML son documentos XML deben estar bien formados, es decir deben cumplir
exactamente con la especificación, cosa que no ocurre con los documentos HTML que
los navegadores lo visualizan correctamente aunque el documento no cumpla
exactamente la norma.
Otras diferencias entre un documento HTML y un documento XHTML son:
• El orden de apertura de un elemento debe corresponder con el orden de
cerrado del mismo.
• Las etiquetas deben de estar escritas en minúsculas.
Medios digitales. Edición, codificación e integración
6 de 8
Máster en Ingeniería de la Web
• Todos los elementos de XHTML deben cerrarse, incluidos aquellos que sean
una única etiqueta.
Además, permite la inclusión de programas dentro de su contenido siguiendo el
modelo de objetos que define la especificación DOM (Document Object Model), la
cual permite actualizar y modificar los contenidos, estructura y estilo de los
documentos de forma dinámica.
SMIL (Synchronized Multimedia Integration Language)
SMIL es un lenguaje basado en XML para la definición de aplicaciones multimedia
interactivas, de manera que un autor puede describir el comportamiento temporal de
presentaciones multimedia, asociar enlaces a contenidos de cualquier tipo (por
ejemplo, vídeos, sonidos, programas, etc.) y describir la presentación en la pantalla.
SMIL (se pronuncia smile –sonrisa–) no es una solución que intente competir con
tecnologías existentes de representación multimedia (por ejemplo, Quicktime o
Flash) sino que lo que pretende es integrar esas tecnologías de manera estándar para
que puedan combinarse.
Existen numerosos visualizadores de documentos SMIL que permiten mostrar todas
sus características. Algunos de los más conocidos son: RealPlayer, Quicktime Player
(la versión gratuita sólo permite ver documentos muy sencillos) y GRINS Player.
Además, algunos navegadores Web, como Internet Explorer, permiten visualizar
también estos documentos.
Un documento SMIL se compone de una cabecera (HEAD) y un cuerpo (BODY). En la
cabecera se definen tanto la metainformación del documento como información
relativa a como deben aparecer en la pantalla los elementos de información. En el
cuerpo del documento se incluirán los contenidos del documento así como las
relaciones entre ellos. En el siguiente ejemplo, se muestra un documento SMIL que
muestra las dos partes que se han mencionado anteriormente. En la primera se
establece el nombre del autor del documento (“pepe”) y se divide la pantalla en dos
zonas, una denominada “video” y la otra “imagen”, definiendo el punto superior
izquierda de la zona (“top” y “left”) y el ancho y alto de la misma (width y height).
En el cuerpo del documento se indica que se muestren de forma simultánea (“par”)
tres contenidos, un vídeo, una imagen y un sonido. Además, se indica que el video se
muestre en la región que se ha denominado “video” y la imagen en la que ha
denominado “imagen”.
WML (Wireless Markup Language)
El denominado protocolo WAP (Wireless Application Protocol) permite el desarrollo
de aplicaciones sobre dispositivos móviles a través de redes inalámbricas. Se verá
cómo se desarrollan aplicaciones WAP sencillas, sin entrar en detalles sobre la
arquitectura de sus protocolos subyacentes. Para ello, se verá exclusivamente en los
lenguajes WML y WMLScript, que son los equivalentes dentro del mundo
“inalámbrico” al HTML y al JavaScript (o lenguajes similares, como VBScript o
ECMAScript) dentro de las redes que usan el protocolo TCP/IP como hace Internet.
Los documentos WML pueden mostrarse en teléfonos móviles, pero también en
cualquier otro dispositivo que contenga un micronavegador (es decir, un dispositivo
que sepa interpretar WML y WMLScript), como puede ser una agenda personal (PDA)
o una aplicación en nuestro ordenador personal. Por ello, en ocasiones se hará
Medios digitales. Edición, codificación e integración
7 de 8
Máster en Ingeniería de la Web
referencia a cualquiera de estos dispositivos con el término general “agente de
usuario” en lugar de hablar exclusivamente de los teléfonos móviles.
Los documentos escritos en WML pueden accederse mediante URLs, de manera
similar a cómo se hace con las páginas HTML. Para ello, se necesita un navegador
WML, que puede estar empotrado en un teléfono móvil o ser un emulador que se
utiliza desde un ordenador personal. En la figura 2se puede ver uno de estos
emuladores de teléfono móvil, en concreto del teléfono “Nokia 6210”, el cual se
puede utilizar para navegar por esas páginas.
Figura 2.
Ejemplo de emulador de un teléfono móvil para acceder a documentos WAP
El lenguaje WML es un lenguaje de descripción de páginas que permite definir la
presentación de la información en el teléfono móvil, solicitar entradas del usuario y
responder a ciertas interacciones del usuario con el móvil, como puede ser la
pulsación de una tecla. Este lenguaje se basa en una DTD de XML por lo que todo
documento WML es a su vez un documento XML tabla 14.9.
Los documentos WML están formados una definición de tipo de documento, y un
mazo de cartas que se corresponden con las pantallas que se visualizan en el visor
del dispositivo. A continuación, se presenta una ejemplo de documento WML que
incluye una única carta en el mazo y su visualización (dependiendo de las
dimensiones y tipos de letra del mismo).
Todos estos ejemplos de lenguajes de marcado se basan en la definición de la
estructura de los elementos, indicando cuáles existen en el dominio del documento y
como participan en él, es decir lo que anteriormente se ha denominado lenguajes de
marcado genéricos. Pero estos lenguajes de marcado se complementan con otros
lenguajes que se utilizan para describir cual es la apariencia final en el soporte físico
de visualización.
Medios digitales. Edición, codificación e integración
8 de 8