Conexión legislativa

En esta Unidad de Trabajo nos centraremos en:

Introducción

Los lenguajes de marcas surgieron para cubrir una necesidad muy concreta: la comunicación en la interconexión de sistemas. La mejor manera de justificar su necesidad es con un ejemplo práctico.

Concepto y características de los Lenguajes de Marcas

Un lenguaje de marcas (o markup language) es un sistema para codificar documentos de texto de manera que, junto con los datos que contiene, se pueda especificar información adicional sobre su estructura o su representación visual haciendo uso de etiquetas (o marcas).

El ejemplo más común de lenguaje de marcas es HTML (HyperText Markup Language - lenguaje de marcas de hipertexto). Las etiquetas empleadas en un documento HTML le indican al navegador web cómo debe representar la información. Es decir, que, junto con la información que se quiere representar también se incluye cómo debe representarse. Por ejemplo:

<h1>Esto es un título</h1>
<p>Esto es un párrafo</p>

Queda representado de la siguiente manera en un navegador:

Las etiquetas le indican al navegador que el texto "Esto es un título" debe representarse con el formato correspondiente con la etiqueta h1, mientras que el texto "Esto es un párrafo" debe representarse con el formato corrrespondiente a la etiqueta p

Características de los Lenguajes de Marcas

Todos los lenguajes de marcas cumplen las siguientes características:

• Basados en texto plano: los documentos se componen de caracteres de texto y pueden crearse o modificarse con cualquier editor. Esto evita la dependendica de formatos binarios propietarios. Un contraejemplo típico son los documentos de Microsoft Word: aunque en ellos podemos especificar diferentes formatos visuales, toda la información (tanto el texto como sus estilos) queda confinada a un fichero con extensión .docx que requiere software específico para ser leído.
• Independencia de la plataforma y software: son totalmente neutros con respecto al sistema operativo (Windows, Linux, macOS, Android, iOS...) y el software o lenguaje de programación que lo procesa. Cualquier entorno que pueda leer un archivo de texto plano puede trabajar con lenguajes de marcas.
• Legibles por personas y máquinas: cualquier desarrollador puede abrir el archivo, leer el contenido y comprender la organización de los datos a simple vista, mientras que un ordenador puede procesarlo de manera automatizada con un programa.
• Uso de etiquetas: emplean delimitadores explícitos (habitualmente las parejas de símbolos < y > para indicar dónde empieza y termina un dato y cuál es su función dentro del documento.
• Separación entre dato y metadato: las etiquetas facilitan distinguir qué parte del documento es información real y qué parte información adicional.
• Jerarquía y anidación de elementos: las etiquetas se organizan unas dentro de otras siguiendo una estructura de árbol (relación padre-hijo). Esto permite representar relaciones complejas y evitar ambigüedades, exigiendo que todo elemento que se abra dentro de otro deba cerrarse antes de que se cierre el contenedor padre.

Es muy importante diferenciarlos de los lenguajes de programación. Los lenguajes de marcas no son lenguajes de programación, ya que no cuentan con instrucciones ni estructuras de control, sólo contienen texto con información y cómo se organiza o representa.

Fuente: Digitalogy en X

Clasificación de los Lenguajes de Marcas

Según la finalidad para la que fueron diseñadas sus marcas o etiquetas, podemos clasificarlos en tres categorías:

1. Lenguajes de presentación: su objetivo principal es especificar la apariencia visual del texto (fuentes, colores, márgenes, tamaños)
   • Ejemplos: HTML, Markdown, $LATEX$.
2. Lenguajes descriptivos o semánticos: describen el significado y la estructura de los datos, de forma completamente independiente a cómo se vayan a mostrar en pantalla. Separan estrictamente el qué es del cómo se ve.
   • Ejemplos: XML (eXtensible Markup Language).
3. Lenguajes específicos: diseñados para dominios concretos y tipos específicos de información.
   • Ejemplos: SVG (Scalable Vector Graphics) para gráficos vectoriales o MathML para notación matemática.

Origen de los Lenguajes de Marcas

GML (años 60)

A finales de los años 60, un grupo de investigadores de IBM diseñó lo que se considera el precursor de los lenguajes de marcas modernos: GML (Generalized Markup Language, aunque estas iniciales también coinciden con las de sus apellidos: Goldfarb, Mosher y Lorie).

Surgió para resolver un problema que tenían gestionando grandes volúmenes de documentos legales y técnicos en IBM. GML se diseñó para utilizarse en editores de texto. Las marcas están precedidas de 2 puntos : y seguidas de 1 .. Siguiendo el ejemplo anterior de HTML, esta sería su representación en GML:

:h1.Esto es un título
:p.Esto es un párrafo

Sin embargo, conviene destacar que GML no era un lenguaje presentacional, sino semántico, por lo que el código anterior no generaba un documento con un formato visual concreto de forma directa. En su lugar, las marcas :h1. y :p. servían para indicar el significado y la función del texto dentro del documento (un encabezado de nivel 1 y un párrafo).

SGML (1986)

Debido al éxito y la utilidad de GML, la ISO (International Organization for Standardization) estandarizó en 1986 este trabajo bajo la norma ISO 8879, dando lugar a SGML (Standard Generalized Markup Language).

SGML, como tal, no es un lenguaje de marcas, sino un lenguaje diseñado específicamente para definir otros lenguajes de marcas mediante DTD (Document Type Definition). Tanto HTML como XML están basados directamente en SGML, aunque las versiones modernas de HTML ya no se consideran aplicaciones directas de SGML, sino que se definen bajo su propio estándar vivo (HTML Living Standard de la WHATWG).

A pesar de su enorme flexibilidad, SGML resulta excesivamente complejo para ser procesado eficientemente en ordenadores personales, por lo que surgen las simplificaciones de HTML para representación y XML para almacenamiento, comunicación y estructuración de datos.

HTML (1991)

El Internet de los años 80 era muy rudimentario. Prácticamente consistía en conectarse a servidores mediante terminales de comantos (como telnet o ftp) para transferir ficheros de texto sin formato visual ni enlaces.

En 1989, Tim Berners-Lee propuso un lenguaje de marcas específico para mejorar la experiencia en la navegación por Internet. Él había trabajado bastante con SGML y lo tomó como base para dar lugar a la primera especificación de HTML (HyperText Markup Language) y, posteriormente, a la WWW (World Wide Web).

Las claves del éxito de HTML se pueden resumir en los siguientes puntos:

• Nacimiento del Hipertexto: gracias las etiquetas <a> (anchor), es posible crear hipervínculos para saltar de un punto del documento a otro, o incluso a archivos y documentos ubicados en cualquier otro servidor del mundo.
• Etiquetas predefinidas: a diferencia de SGML, HTML tiene es un lenguaje cerrado con un conjunto de etiquetas estándar. La primera versión de HTML sólo tenía 22 etiquetas, limitando muchísimo las posibilidades (en comparación con lo que se consigue a día de hoy). ¿Ventajas? Es muy fácil de aprender. ¿Desventajas? Hay que memorizar las etiquetas del lenguaje.
• Tolerancia a errores y compatibilidad: se diseñó con una filosofía que se mantiene a día de hoy: no rompas la Web. Esto se consigue mediante 2 mecanismos clave:
  • Compatibilidad hacia atrás (backward compatibility): los cambios en versiones modernas del lenguaje mantienen el soporte para las etiquetas y estándares antiguos, garantizando su funcionamiento hoy en día.
  • Compatibilidad hacia adelante (forward compatibility): los navegadores ignoran fallos de sintaxis y etiquetas que no reconocen, intentando renderizar los documentos lo mejor posible en lugar de mostrar una pantalla de error. De esta manera, un navegador desactualizado puede mostrar una página web moderna.

La web tiene como objetivo principal simplificar el acceso a la información, tanto desde el punto de vista formal (estructura) como funcional (acceso). Estas dos perspectivas consiguen que la información sea accesible desde cualquier sistema operativo, y la obtención de información relacionada es sencilla gracias a los hipervínculos. Tim Berners-Lee es, por tanto, el padre de la navegación en Internet tal y como la conocemos hoy en día.

XML (1998)

Cuando se masificó el uso de Internet en los años 90, las empresas empezaron a intercambiar información para extender sus servicios en red. No podían compartir directamente sus bases de datos por motivos obvios, pero sí necesitaban compartir datos en algún formato. Se encontraron con la siguiente encrucijada:

• HTML no sirve para el intercambio de datos semánticos, ya que está enfocado exclusivamente a la maquetación visual de documentos web en navegadores. No existían etiquetas como <cliente>, <factura> o <pedido>
• SGML es complejo: aunque permite definir nuevos lenguajes usando DTD, su especificación es tediosa y muy costosa de procesar en términos de recursos informáticos.

<!DOCTYPE lista_alumnos [
  <!ELEMENT lista_alumnos - - (alumno+)>
  <!ELEMENT alumno        - O (nombre, edad, modulo)>
  <!ELEMENT nombre        - - (#PCDATA)>
  <!ELEMENT edad          - O (#PCDATA)>
  <!ELEMENT modulo        O O (#PCDATA)>
]>
<lista_alumnos>
<alumno>
<nombre>Ignacio Mascarell</nombre>
<edad>34
Lenguajes de Marcas
</lista_alumnos>

<?xml version="1.0" encoding="UTF-8"?>
<lista_alumnos>
  <alumno>
    <nombre>Ignacio Mascarell</nombre>
    <edad>34</edad>
    <modulo>Lenguajes de Marcas</modulo>
  </alumno>
</lista_alumnos>

Por ello, el W3C (World Wide Web Consortium) publicó en 1998 el estándar de XML (eXtensible Markup Language). Este no es sino una simplificación de SGML, manteniendo la capacidad de crear lenguajes a medida. Su propósito no es mostrar datos en pantalla, sino almacenar, estructurar e intercambiar información de entre sistemas heterogénemos.

Estructura y sintaxis de los Lenguajes de Marcas

A pesar de que existen multitud de Lenguajes de Marcas, la mayoría comparte un modelo sintáctico común basado en la idea de etiquetar el texto para darle estructura, contexto o formato. A continuación se muestra una estructura muy básica:

<coche estado="nuevo">
    <marca>Seat</marca>
    <modelo>
	    <nombre>Ibiza</nombre>
	    <anyo>2008</anyo>
    </modelo>
    
    <sin_stock/>
    
    El modelo más vendido este año.
</coche>

Nota: aunque usemos de ejemplo un código XML, nos sirve para analizar las características generales de los lenguajes derivados de SGML. Más adelante estudiaremos las particularidades de cada uno de ellos

Estructura

Etiquetas

Son los delimitadores o marcas del lenguaje. Indican dónde empieza y termina un bloque de información.

• Delimitados por los caracteres especiales < y >.
• La etiqueta de apertura indica el inicio de un elemento <coche>.
• La etiqueta de cierre indica el final de un elemento </coche>.
• Entre la etiqueta de apertura y la de cierre está el contenido o el valor.
• Hay un tipo especial de etiquetas utilizadas en elementos vacíos. Están delimitadas por < y />. Por ejemplo: <sin_stock/>.

Elementos

Representa un bloque completo de información.

• Está formado por las etiquetas, los atributos y el contenido.
• Los elementos vacíos son aquellos que no tienen contenido, pero sí pueden tener atributos. Hay 2 formas de representarlos:
  • Sintaxis explícita: <sin_stock></sin_stock>
  • Sintaxis abreviada (la más común): <sin_stock/>

Atributos

Son parejas de nombre="valor". Su función es la de proporcionar información adicional sobre el propio elemento o cómo debe procesarse.

• Se colocan en la etiqueta de apertura. <coche estado="nuevo">
• En el caso de los elementos vacíos con sintaxis abreviada, se colocan en la única etiqueta.
• Un elemento no puede tener 2 o más atributos con el mismo nombre.

Contenido

Es la información que se desea almacenar, estructurar o representar.

• Se ubica entre la etiqueta de apertura y la etiqueta de cierre.
• Puede estar formado por:
  • Texto plano. Por ejemplo:

    <marca>Seat</marca>
    

  • Otros elementos anidados (hijos). Por ejemplo:

    <modelo>
        <nombre>Ibiza</nombre>
        <anyo>2008</anyo>
    </modelo>
    

  • Una combinación de ambos (o contenido mixto). Por ejemplo:

    <coche estado="nuevo">
        <marca>Seat</marca>    
        El modelo más vendido este año.
    </coche>
    

Sintaxis

La sintaxis de un lenguaje de marcas define el conjunto de reglas que establecen cómo deben combinarse los elementos, atributos y texto para construir un documento válido y procesable. Mientras que la estructura define qué piezas componen el documento, la sintaxis determina cómo deben escribirse exactamente esas piezas para que el analizador pueda interpretarlas sin ambigüedades.

Organización jerárquica

La combinación de elementos anidados unos dentro de otros genera una representación en forma de árbol (arborescente) en la que aparece un único elemento raíz que "se expande" en multitud de descendientes, conformando la estructura del documento. En esta estructura se definen las siguientes relaciones:

• Elemento raíz (root): es el nodo principal, del que cuelgan todos los demás elementos. Sólo puede existir 1 único elemento raíz.
• Padre (parent): elemento que contiene directamente a otro. Por ejemplo: modelo es el padre de nombre y anyo. Todos los elementos tienen 1 único padre excepto el elemento raíz, que no tiene ninguno.
• Hijo (child): elemento contenido directamente dentro de otro. Por ejemplo: nombre es hijo de modelo.
• Hermanos (siblings): elementos que comparten el mismo padre. Por ejemplo: nombre y anyo son hermanos.

Comentarios

Son anotaciones que se introducen en el documento pero que no influyen en su procesado.

• No se procesan ni se muestran al usuario final, aunque se puede acceder a ellas inspeccionando el código fuente del documento.
• Se delimitan entre <!-- y -->.

<coche estado="nuevo">
    <marca>Seat</marca>
	<modelo> <!-- Icónico, ya no se hacen como antes -->
	    <nombre>Ibiza</nombre>
	    <anyo>2008</anyo>
    </modelo>
</coche>

Caracteres especiales y Entidades

Hay ciertos caracteres especiales que está reservados por la propia sintaxis. Por ejemplo, los símbolos < y >. Estos no pueden utilizarse en el contenido directamente porque el analizador del documento pensaría que estás intentando abrir o cerrar una etiqueta. Para poder incluirlos es necesario utilizar entidades.

Una entidad es una secuencia especial de caracteres que empieza con el símbolo ampersand & y termina con el punto y coma ;. Al procesar el documento, el analizador lo traduce y muestra el símbolo real.

Hay 5 entidades predefinidas en SGML/XML, aunque en HTML hay muchas más:

Reglas sintácticas generales

Existen algunas reglas sintácticas que se aplican a los lenguajes de marcas derivados de SGML y que conviene adelantar ahora aunque estas tengan un tratamiento específico en cada uno de estos.

• Sensibilidad a mayúsculas (case-sensitive): por lo general, las mayúsculas y minúsculas se consideran letras diferentes, por lo que la etiqueta de apertura y la de cierre deben coincidir de manera exacta.
  • XML es estrictamente case-sensitive. Por ejemplo:

    <marca>Seat</marca> <!-- Válido -->
    <marca>Seat</MARCA> <!-- Inválido -->
    

  • HTML, sin embargo, no lo es (<h1> y <H1>) se consideran idénticos aunque, por buenas prácticas, se exige escribir en minúsculas.
• Nombrado: el nombre tanto de los elementos como de los atributos no puede contener espacios.
  • Correcto: <anio_nacimiento>
  • Incorrecto: <anio nacimiento>
• Uso obligatorio de comillas en atributos: los valores asignados a los atributos deben ir delimitados explícitamente entre comillas dobles ("...") o simples ('...').
  • Correcto: <coche estado="nuevo">
  • Incorrecto: <coche estado=nuevo> (permitido en ciertas situaciones de HTML, pero completamente prohibido en sintaxis XML).
• Tratamiento del espacio en blanco: los procesadores y analizadores sintácticos no interpretan múltiples espacios, tabulaciones o saltos de línea consecutivos como espacios reales. En su lugar, los colapsan y los convierten en un único espacio en blanco. Si se necesita respetar el formateo literal:
  • En XML se puede añadir una directiva xml:space="preserve".
  • En HTML se pueden emplear elementos de texto preformateado <pre> .