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
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 textoo 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>[email protected] (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, 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 por parte de 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: http://www.w3.org/MarkUp/SGML/
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
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 explorador. Pulsa el botón derecho del ratón y marca la opción “Ver código fuente”.
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
<direccion> <nombre>
<titulo>Mrs.</titulo> <nombre> Mary </nombre>
<apellidos> McGoon </apellidos> </nombre>
<calle> 1401 Main Street </calle> <ciudad estado="NC"> Anytown</ciudad> <codigo-postal> 34829 </codigo-postal> </direccion>
El elemento <nombre> contiene tres elementos hijos: <titulo>, <nombre> y <apellidos>
UT1: Introducción a los Lenguajes de
Marcas
Actividades
Fíjate en el siguiente texto.
<noticia tipo=“nacional”> <lugar>Madrid</lugar> <fecha>27/08/2010</fecha>
<desc>Se ha inaugurado una estación de tren</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, comercioy
comunicaciónpara 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
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
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
Esquema XML Relax NG
Un
esquema
es un conjunto de
reglas que establece cómo debe ser
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 sonsintá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, …
Gramáticas
DTD
Ejemplo:<!ELEMENT editoriales (editorial+)> <!ELEMENT editorial
(nombre,direccion,email,homepage,telefono,fax)> <!ELEMENT nombre (#PCDATA)>
<!ELEMENT direccion
(calle,numero?,piso?,puerta?,localidad,codpostal,provincia) >
<!ELEMENT calle (#PCDATA)> <!ELEMENT numero (#PCDATA)> <!ELEMENT piso (#PCDATA)> <!ELEMENT puerta (#PCDATA)> <!ELEMENT localidad (#PCDATA)> <!ELEMENT codpostal (#PCDATA)> <!ELEMENT provincia (#PCDATA)> <!ELEMENT email (#PCDATA)> <!ELEMENT homepage (#PCDATA)> <!ELEMENT telefono (#PCDATA)>
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE editoriales SYSTEM "editoriales1.dtd"> <editoriales> <editorial> <nombre>SM</nombre> <direccion> <calle>Calle Alta</calle> <numero>9</numero> <piso>1º</piso> <puerta>A</puerta> <localidad>Madrid</localidad> <codpostal>28080</codpostal> <provincia>Madrid</provincia> </direccion> <email>[email protected]</email> <homepage>www.sm.es</homepage> <telefono>919886655</telefono> <fax>919886654</fax> </editorial> <editorial> <nombre>CANAYA</nombre> <direccion> <calle>Calle Baja</calle> <numero>9</numero> <localidad>Salamanca</localidad> <codpostal>37008</codpostal> <provincia>Salamanca</provincia> </direccion> <email>[email protected]</email> <homepage>www.canaya.es</homepage> <telefono>959886655</telefono> <fax>959886654</fax>
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
Gramáticas
Esquema XML (
XML Schema
)
<?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"> <xs:enumeration value="chocolate"/> <xs:enumeration value="fresa"/> </xs:restriction> </xs:simpleType> </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> </xs:element> </xs:schema> <?xml version="1.0" encoding="UTF-8"?> <helado xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="Helado2.xsd"> <sabor>chocolate</sabor>
