UT1: Introducción a los
Lenguajes de Marcas
1º ADMINISTRACIÓN DE SISTEMAS INFORMÁTICOS EN RED
Contenidos
Definición y clasificación de lenguajes de marcas
Tipos de lenguajes de marcas
Evolución de los lenguajes de marcas
Etiquetas, elementos y atributos
Organizaciones desarrolladoras
Utilización de lenguajes de marcas en entornos web
Gramáticas
UT1.Introducción a los Lenguajes de Marcas
Definición y clasificación de
lenguajes de marcas
Lenguajes de marcas, lenguajes de marcado o lenguajes de
etiquetas (Markup Languages):
Combinan la información (generalmente textual) que
contiene un documento con marcas o anotaciones:
Estas marcas o anotaciones hacen referencia a la estructura
del texto o a la forma de representarlo
Cada lenguaje de marcas debe especificar:
Cuáles serán las marcas o etiquetas posibles
Dónde deben colocarse
Qué significado tendrá cada una de ellas
Definición y clasificación de
lenguajes de marcas
Las marcas o etiquetas normalmente no se hacen visibles
al usuario final del documento, que suele estar más
interesado por el contenido.
Ejemplo:
<?xml version="1.0" encoding="ISO-8859-1"?>
<rss version="2.0">
<channel>
<title>Un feed simple</title>
<link>http://informatica.iesbeniajan.es</link>
<description>Un canal RSS hipotético</description>
<item>
<title>Noticias de ASIR</title>
<link>http://informatica.iesbeniajan.es/joom/</link>
<description>La previsión de alumnos para el próximo curso indica que habrá una masiva presencia
de …
</description>
<category>Informática</category>
<author>jmrubira@hotmail.com (José Manuel Rubira)</author>
</item>
</channel>
</rss>
Definición y clasificación de
lenguajes de marcas
Otro ejemplo:
<!DOCTYPE html>
<html lang="es">
<head>
<title>Ejemplo de HTML</title>
</head>
<body>
<p>Esto es un ejemplo del lenguaje de marcas <b>HTML</b></p>
</body>
</html>
Práctica: abre un editor de texto
(Notepad++), copia este documento,
guárdalo con el nombre ejemplo.html y
ábrelo con un navegador
Definición y clasificación de
lenguajes de marcas
Los lenguajes de marcas no son lenguajes de
programación:
No poseen funciones aritméticas
No utilizan variables
No utilizan sentencias de control
…
Pero sí se pueden combinar en el mismo documento con
otros lenguajes que sí sean lenguajes de programación,
como JavaScript o PHP
Tipos de lenguajes de marcas
Podemos clasificarlos en tres tipos, aunque algunos
pueden pertenecer a más de un tipo:
Lenguajes orientados a presentación.
Lenguajes procedurales.
Lenguajes descriptivos.
Tipos de lenguajes de marcas
Lenguajes orientados a presentación:
Se utilizan para especificar el formato del texto
Son los usados tradicionalmente por los procesadores de
texto
Codifican cómo ha de presentarse el documento
Por ejemplo, indicando que una determinada palabra debe
presentarse en cursiva o que se debe dejar un espacio de 10 puntos
al terminar el párrafo.
Las herramientas que los implementan suelen ser
WYSIWYG
Tipos de lenguajes de marcas
Lenguajes procedurales:
Son también orientados a presentación, pero se indican los
procedimientos que deberá realizar el SW de representación
Entre los ejemplos más comunes de lenguajes procedurales
podemos encontrar TeX, LaTeX y Postcript
Ejemplo de Tex:
La f\'ormula cuadr\'atica es $x_{1,2}={-b\pm\sqrt{b^2-4\cdot a\cdot
c} \over {2 \cdot a}}$ \bye
Tipos de lenguajes de marcas
Lenguajes descriptivos:
Describen las diferentes partes en las que se estructura el
documento pero sin especificar cómo deben representarse.
No definen qué se debe hacer con un trozo o sección del
documento, sino que las marcas sirven para indicar qué es
esa información
Describen qué es lo que se está representando
La mayoría de los lenguajes de marcas que se usan hoy en día
se encuentran dentro de este grupo: SGML y sus derivados
(HTML, XML, etc.)
Evolución de los lenguajes de
marcas
Se comenzaron a usar a finales de la década de los 60
En principio se empleaban para incluir anotaciones en los
documentos electrónicos
En esa década apareció el lenguaje SGML(Standard
Generalized Markup Language)
Es un descendiente directo del lenguaje GML propuesto por
IBM
Este lenguaje surgió para permitir compartir información
entre diferentes sistemas informáticos
SGML es un metalenguaje, es decir, un conjunto de normas
que permiten definir otros lenguajes de marcas
Evolución de los lenguajes de
marcas
El estándar SGML tuvo una gran aceptación pero no
consiguió asentarse:
Era muy complejo, por lo que el software necesario para
procesarlo era extenso y complejo
La industria de la publicación de documentos constituye uno
de los principales usuarios del lenguaje SGML
Empleando este lenguaje, se crean y mantienen documentos que
luego son llevados a otros formatos finales como HTML, Postscript,
RTF, etc.
Puedes ver una descripción de SGML en la web del W3C:
https://www.w3.org/MarkUp/SGML/
Evolución de los lenguajes de
marcas
A finales de los 80 dentro del CERN se creó un lenguaje de
marcado pensado para compartir información usando las
redes de ordenadores (especialmente Internet)
Se basaba en algunos principios de SGML y lo
denominaron HTML (Hyper-Text Markup Language).
HTML supuso una revolución en la forma de compartir
información:
Sus reglas son muy simples
El software necesario para interpretarlo es sencillo
Sobre todo por los VÍNCULOS o ENLACES
Evolución de los lenguajes de
marcas
Pero su rápido crecimiento provocó un desarrollo
descontrolado
El consorcio W3C (World Wide Web Consortium) se
propuso desarrollar un lenguaje para la Web más potente y
estándar, basándose en SGML
En 1998, W3C hizo público un nuevo estándar que
denominaron XML (eXtended Markup Language)
Más sencillo que SGML
Más potente que HTML
Características de los Lenguajes de
Marcas
TEXTO PLANO
Los documentos creados con lenguajes de marcas están
compuestos únicamente por caracteres de texto
Se pueden codificar con distintos códigos, dependiendo del
alfabeto que se necesite. Normalmente se usa UTF-8
Los documentos se pueden editar con un simple editor de
texto (por ejemplo Notepad++)
Los documentos son independientes del sistema operativo y
del programa con el que fueron creados
COMPACIDAD
Las instrucciones de marcado (marcas o etiquetas) se
mezclan con el contenido (<title>Documento inicial</title>)
Características de los Lenguajes de
Marcas
INDEPENDENCIA DEL DISPOSITIVO FINAL
El mismo documento puede ser interpretado de diferentes
formas, dependiendo del dispositivo final: navegador de un
PC, móvil, impresora, …
ESPECIALIZACIÓN
Existen diferentes lenguajes de marcas para diferentes áreas:
gráficos vectoriales, redifusión de contenidos, notación
científica, …
FLEXIBILIDAD
Se pueden combinar en el mismo documento con otros
lenguajes: HTML con PHP y JavaScript, …
UT1: Introducción a los Lenguajes de
Marcas
Actividades
Abre la página www.google.es en tu navegador. Pulsa
el botón derecho del ratón y marca la opción “Ver
código fuente de la página” u “Origen de página”
Abre ahora las “Herramientas de desarrollador”
(F12) de tu navegador y explóralas
Etiquetas, elementos y atributos
En los lenguajes de marcas para entornos Web se emplean
sobre todo tres términos:
Etiquetas
Elementos
Atributos
Etiquetas, elementos y atributos
Etiquetas:
Una etiqueta (tag) es un texto que va
(normalmente) entre el símbolo menor que (<) y
el símbolo mayor que (>).
<empleado>, <html>, </body>
Existen etiquetas de inicio (como <nombre>) y
etiquetas de fin (como </nombre>).
Etiquetas, elementos y atributos
Elementos:
Representan:
Estructuras mediante las que se organizará el contenido del
documento
O acciones que se desencadenan cuando un programa interpreta el
documento
Constan de la etiqueta de inicio, la etiqueta de fin y de todo
aquello que se encuentra entre ambas
Algunos elementos no tienen contenido. Se les denomina
elementos vacíos y no deben llevar etiqueta de fin
Etiquetas, elementos y atributos
Atributos:
Es un par nombre-valor que se encuentra dentro de la
etiqueta de inicio de un elemento
Indican las propiedades que pueden llevar asociadas
los elementos
Etiquetas, elementos y atributos
EJEMPLO
<datos_postales>
<persona>
<titulo>Señora</titulo>
<nombre>Mercedes</nombre>
<apellidos>Carcelén Ortiz</apellidos>
</persona>
<direccion>
<calle>Primavera</calle>
<poblacion provincia="Murcia">Alcantarilla</poblacion>
<codigo-postal>30820</codigo-postal>
</direccion>
</datos_postales>
El elemento persona contiene tres elementos hijos: <titulo>, <nombre> y
<apellidos>
provincia es un atributo del elemento <poblacion>
UT1: Introducción a los Lenguajes de
Marcas
Actividades
Fíjate en el siguiente texto.
<noticia tipo="local">
<lugar>Alcantarilla</lugar>
<fecha>15/09/2023</fecha>
<desc>Se ha inaugurado la estación de tren del AVE</desc>
</noticia>
Indica el nombre de una etiqueta, de dos elementos y de algún
atributo
Organizaciones desarrolladoras
Las más importantes son:
ISO
W3C
Organizaciones desarrolladoras
Organización Internacional para la Estandarización (ISO,
International Organization for Standardization)
Se formó después de la Segunda Guerra Mundial (23 de
febrero de 1947)
Es el organismo encargado de promover el desarrollo de
normas internacionales de fabricación, comercio y
comunicación para todas las ramas industriales a excepción
de la eléctrica y la electrónica.
Su función principal es la de buscar la estandarización de
normas de productos y seguridad para las empresas u
organizaciones a nivel internacional.
Organizaciones desarrolladoras
Organización Internacional para la Estandarización (ISO,
International Organization for Standardization)
Está formada por los institutos de normas nacionales de 163
países
La sede central está en Ginebra
Las normas que desarrolla son voluntarias (es un organismo
no gubernamental)
El contenido de los estándares está protegido por derechos
de copyright
ISO 8879: SGML
Organizaciones desarrolladoras
World Wide Web Consortium (W3C)
El W3C se creó en 1994 por Tim Berners-Lee en el MIT,
actual sede central del consorcio
Posteriormente se unió, en abril de 1995, el INRIA en
Francia, reemplazado por el ERCIM en el 2003 como el
colaborador europeo del consorcio
En septiembre de 1996 se unió la Universidad de Keio
(Shonan Fujisawa Campus) como miembro asiático
Su función principal es tutelar el crecimiento y organización
de la Web
Organizaciones desarrolladoras
World Wide Web Consortium (W3C)
Su primer trabajo fue normalizar el lenguaje HTML
En vez de ampliar HTML para cubrir las necesidades del
enorme desarrollo de la Web, el W3C decidió …
Desarrollar unas reglas para que cualquiera pudiera crear lenguajes
de marcas adecuados a sus necesidades
Pero respetando unas estructuras y una sintaxis comunes
De esta forma serán compatibles y podrán ser procesados por el
mismo software
Esto dio lugar a XML: la primera versión apareció en 1998
Utilización de lenguajes de marcas
en entornos Web
Una página web es un documento electrónico
adaptado para la World Wide Web que, normalmente,
forma parte de un sitio web
Está compuesta, principalmente, por:
Información (sólo texto o módulos multimedia)
Hiperenlaces
Puede contener o asociar datos de estilo para especificar
cómo debe visualizarse, y también aplicaciones embebidas
para hacerla interactiva
Utilización de lenguajes de marcas
en entornos Web
Las páginas web están escritas en un lenguaje de marcas
que proporciona la capacidad de manejar e insertar
hiperenlaces, generalmente, HTML
El contenido de la página puede ser:
Predeterminado (página web estática)
O generado en el momento de su visualización o al solicitarla
a un servidor web (página web dinámica)
Estructura de las páginas web
Algunos organismos (W3C) establecen directivas para
normalizar el diseño y facilitar y simplificar la visualización e
interpretación del contenido
Gramáticas
Los documentos desarrollados con los lenguajes de marcas
deben respetar una determinada GRAMÁTICA
Define las etiquetas o marcas permitidas
Las etiquetas o marcas necesarias o requeridas
Cómo se deben usar esas marcas o etiquetas
Para definir estas gramáticas, podemos utilizar diferentes
lenguajes de esquemas, por ejemplo:
DTD Un esquema es un conjunto de
Esquema XML reglas que establece cómo debe ser
Relax NG un documento
Gramáticas
DTD (Definición de Tipo de Documento)
Es el formato de esquema inicial que se desarrolló para
validar documentos XML
Utiliza una sintaxis no-XML para definir la estructura de
un documento XML válido:
Define todos los elementos
Define las relaciones entre los elementos
Proporciona información adicional (atributos, entidades,
notaciones)
Incluye instrucciones para procesar los documentos y
representar los formatos de datos
Gramáticas
DTD (Definición de Tipo de Documento)
Podemos utilizar un DTD para definir estas gramáticas
Establece las reglas de formación del lenguaje formal, es decir,
qué combinaciones de símbolos elementales son
sintácticamente correctas
En un DTD:
Se identifica la estructura del documento: los elementos que son
necesarios
Se incluyen las reglas de dichos elementos: nombre, significado,
dónde se pueden utilizar, qué pueden contener, …
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE editoriales SYSTEM "editoriales1.dtd">
<editoriales>
<editorial>
<nombre>SM</nombre>
<direccion>
<calle>Calle Alta</calle>
Gramáticas <numero>9</numero>
<piso>1º</piso>
<puerta>A</puerta>
<localidad>Madrid</localidad>
DTD <codpostal>28080</codpostal>
<provincia>Madrid</provincia>
</direccion>
Ejemplo: <email>sm@sm.es</email>
<homepage>www.sm.es</homepage>
<!ELEMENT editoriales (editorial+)> <telefono>919886655</telefono>
<!ELEMENT editorial <fax>919886654</fax>
(nombre,direccion,email,homepage,telefono,fax)> </editorial>
<!ELEMENT nombre (#PCDATA)> <editorial>
<!ELEMENT direccion <nombre>CANAYA</nombre>
(calle,numero?,piso?,puerta?,localidad,codpostal,provincia) <direccion>
> <calle>Calle Baja</calle>
<!ELEMENT calle (#PCDATA)> <numero>9</numero>
<!ELEMENT numero (#PCDATA)> <localidad>Salamanca</localidad>
<!ELEMENT piso (#PCDATA)> <codpostal>37008</codpostal>
<!ELEMENT puerta (#PCDATA)> <provincia>Salamanca</provincia>
<!ELEMENT localidad (#PCDATA)> </direccion>
<!ELEMENT codpostal (#PCDATA)> <email>canaya@canaya.es</email>
<!ELEMENT provincia (#PCDATA)> <homepage>www.canaya.es</homepage>
<!ELEMENT email (#PCDATA)> <telefono>959886655</telefono>
<!ELEMENT homepage (#PCDATA)> <fax>959886654</fax>
<!ELEMENT telefono (#PCDATA)> </editorial>
<!ELEMENT fax (#PCDATA)> </editoriales>
Gramáticas
DTD (Definición de Tipo de Documento)
EJEMPLO: La especificación del W3C para HTML 4.0 contempla
tres DTD:
DTD estricta (HTML 4.0 Strict DTD): incluye todos los elementos y
atributos que no han sido declarados “desaprobados” (deprecated).
DTD transicional o flexible (loose) (HTML 4.0 Transitional DTD): incluye
todo lo que incluye la anterior más los elementos y atributos
desaprobados (deprecated).
DTD para documentos con marcos (HTML 4.0 Frameset DTD): engloba
todo lo incluido en la transicional más lo relativo a la creación de
documentos con marcos (frames).
La recomendación es ajustarse a la DTD estricta,
pero usar el resto de elementos no es incorrecto
Gramáticas
Esquema XML (XML Schema)
Es la evolución de la DTD descrita por el W3C
Se le llama también XSD (XML Schema Definition)
Es un lenguaje de esquema más complejo y más
potente, basado en la gramática para proporcionar
una potencia expresiva mayor que la DTD
Utiliza sintaxis XML que le permite especificar de
forma más detallada un extenso sistema de tipos de
datos
Gramáticas
Esquema XML (XML Schema)
El modelo de datos de XML Schema incluye:
El vocabulario (nombres de elementos y atributos)
El contenido modelo (relaciones y estructuras)
Los tipos de datos
Debido a su gran complejidad, la validación de
un documento con XML Schema supone un
gran consumo en recursos y tiempo
<?xml version="1.0" encoding="UTF-8"?>
<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema" elementFormDefault="qualified“ attributeFormDefault="unqualified">
<xs:element name="helado">
<xs:complexType>
<xs:sequence>
<xs:element name="sabor">
<xs:simpleType>
<xs:restriction base="xs:string">
Gramáticas <xs:enumeration value="chocolate"/>
<xs:enumeration value="fresa"/>
</xs:restriction>
</xs:simpleType>
Esquema XML (XML Schema)</xs:element>
<xs:element name="tipo">
<xs:simpleType>
<xs:restriction base="xs:string">
<xs:enumeration value="cono"/>
<xs:enumeration value="tarrina"/>
</xs:restriction>
</xs:simpleType>
</xs:element>
<xs:element name="tamaño">
<xs:simpleType>
<xs:restriction base="xs:string">
<xs:enumeration value="grande"/>
<xs:enumeration value="mediano"/>
<xs:enumeration value="pequeño"/>
</xs:restriction>
</xs:simpleType>
</xs:element>
</xs:sequence>
</xs:complexType>
<?xml version="1.0" encoding="UTF-8"?>
</xs:element> <helado xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
</xs:schema> xsi:noNamespaceSchemaLocation="Helado2.xsd">
<sabor>chocolate</sabor>
<tipo>cono</tipo>
<tamaño>mediano</tamaño>
</helado>
Gramáticas
Relax NG
Es un lenguaje de esquema basado en la
gramática, muy intuitivo y más fácil de
entender que el XML Schema
Tiene un alto poder expresivo:
Por ejemplo, permite validar elementos
intercalados que pueden aparecer en cualquier
orden
Gramáticas
Relax NG
Las aplicaciones de definición de documentos y
validación para RELAX NG son más sencillas que en
XML Schema, haciéndolo más fácil de utilizar e
implementar.
También tiene la capacidad de usar plug-ins de
definiciones de tipos de dato de XML Schema,
combinando así las ventajas de ambos lenguajes.
Se ha convertido recientemente en un estándar ISO
como la parte 2 de DSDL (Document Schema
Definition Language).
UT1: Introducción a los Lenguajes de
Marcas
Test de conocimientos
