Está en la página 1de 54

UT1: LENGUAJE

DE MARCAS
Curso 19-20
1º DAMEL
ÍNDICE
× 1. ¿Qué es un lenguaje de Marcas?
× 1.1. Clasificación y uso de los principales lenguajes de marcas.
× 1.2 Evolución de los lenguajes de marcas
× 1.3. Organizaciones desarrolladoras.

× 2. ¿Qué es XML?
× 2.1 Para que se emplea XML
× 2.2 Estructura de un documento XML
× 2.2.1 Documentos bien formados.
× 2.2.2 Documentos validos.

× 3. Declaración de un DTD

× Apéndices y Repaso
2
1. ¿Qué es un lenguaje de Marcas?

× Las páginas web ofrecen la posibilidad de


tener, además de texto, columnas, colores,
subrayados, negritas…, imágenes, enlaces,
tablas, listados, etc.
× Pero todas las páginas web están
constituidas por texto plano, o sea, texto sin
más..

3
1. ¿Qué es un lenguaje de Marcas?

× Un Texto plano (plain text), son aquellos archivos


formados exclusivamente por texto (sólo caracteres),
sin ningún formato
× En otras palabras, no hay información sobre el tipo de
letra, ni formas (negrita, subrayados...), ni tamaños,
ni columnas, ni enlaces, ni imágenes….

Texto plano : Esta es mi segunda clase


4
1. ¿Qué es un lenguaje de Marcas?

× ¿Cómo incluimos todos estos elementos en una


pagina sabiendo que el resultado debe seguir siendo
texto plano? : Mediante el lenguaje de marcas.
Lenguaje de marcas :
Esta es mi <negrita>segunda</negrita>clase.

5
1. ¿Qué es un lenguaje de Marcas?

× Todas las marcas necesitan una indicación de final de


marca, pero algunas no, por ejemplo en un salto de
línea. En este caso, la marca de finalización la llevan al
final.
× <parrafo>
Esta es mi <negrita>segunda </negrita> clase.
<salto/>
Pero mañana será la <cursiva>tercera</cursiva>.
</parrafo>

6
1.1. Clasificacion y uso de los principales lenguajes de marcas

Lenguajes o marcado de presentación


Indican como ha de presentarse el formato del texto, Las etiquetas
de marcado están ocultas. Ej: Microsoft word
Lenguajes o marcado de procedimiento
También enfocado hacia la presentación del texto, sin embargo, las marcas que
formatean el texto son visibles para el usuario y permiten procesamiento (realizar
un conjunto de acciones) según el tipo de etiqueta. Ej: Latex, Poscript, HTML

Lenguajes o marcado descriptivos


Utiliza las marcas o etiquetas para describir los fragmentos de texto.
Ej. SGML y su derivado XML
7
1.1. Clasificacion y uso de los principales lenguajes de marcas
Área Lenguaje Descripción / Ejemplo
Matemática: MathML y OpenMath Su objetivo es expresar notación matemática

Geomática: Geography ML Su objetivo es el modelaje, transporte y


almacenamiento de información geográfica

Aeronáutica: Spacecraft ML
Multimedia: Synchronized El lenguaje SMIL permite integrar audio, video,
Multimedia Integration imágenes, texto o cualquier otro contenido multimedia
Language

Voz: VoiceXML
Mensajería XMPP Con el protocolo XMPP queda establecida una
instantánea: plataforma para el intercambio de datos XML que puede
ser usada en aplicaciones de mensajería instantánea

Gráficos 3D: VRML/X3D, STEP formato de archivo normalizado que tiene como objetivo
la representación de escenas u objetos interactivos
tridimensionales 8
1.2 Evolución de los lenguajes de marcas
• A partir de los años 60. Introducir anotaciones en documentos electrónicos
igual que se hacían en papel.
• IBM crea GML(Generalized Markup Language).
• Su descendiente SGML (Estándar GML) no se asienta: Muy complejo.

• Finales 80. CERN (Organización Europea para la Investigación Nuclear) crea un


lenguaje para redes de ordenadores. HTML (Hiper Text Markup Languaje).
• Tiene sencillez de Sintaxis y software y por lo tanto crece rápidamente.

• 1998. El consorcio W3C (World Wide Web Consortium) encargado de crear


recomendaciones y estándares que aseguren el crecimiento de WWW, crea
XML (eXtended Markup Language).
• Mas sencillo que SGML y potente que HTML
9
1.3. Organizaciones desarrolladoras

✓ ISO (Organización Internacional para la Estandarizacion

• Se crea en1947. Su finalidad es estandarizar normas de productos y


seguridad en empresas en las ramas industriales excepto la eléctrica
y electrónica.
• La forman 163 países y la Secretaría Central está en Ginebra (Suiza)
• 1986 → publica el Estandar Generalized Markup Language (SGML),
con código ISO 8879

10
1.3. Organizaciones desarrolladoras

✓ W3C (World Wide Web Consortium)


• Tutela el crecimiento y organización de la WEB. Creado en 1994 por Tim Bernes-Lee.
Su sede esta en MIT (Massachusetts Institute of Tecnhology)
• Normaliza el HTML (lenguaje para crear páginas web).
• Crea XML como reglas para poder crear nuevos leguajes de marcas con estructura y
sintaxis común (metalenguaje) y usar las mismas herramientas.
• Un metalenguaje es un lenguaje que se usa para hablar acerca de otro lenguaje.
• Con XML puedo crear otros lenguajes (matematico, sanitario, financiero, etc)

11
2. ¿Qué es XML?

XML es:
• XML eXtensible Markup Languaje (Lenguaje de Marcado Extensible).
• Es un lenguaje abierto, que sigue el estándar (W3 Consortium) derivado de SGML y
optimizado para su uso en la WWW.
• Permite describir el sentido o la semántica de los datos.
• A diferencia de HTML, separa el contenido de la presentación.
• Es un Meta-Lenguaje, que permite la definición de lenguajes concretos de
representación de documentos.
XML no es:
• No es una "versión mejorada de HTML"
• No es un lenguaje para hacer mejores páginas web
• No es un lenguaje sustituto de HTML
• No es difícil

12
2. ¿Qué es XML?
✓ Html no indica lo que está representando
✓ XML describe el contenido de lo que esta dentro de etiqueta

Un Ejemplo de HTML: Observamos como:

1 <b>Pepito Pérez</b> • HTML se centra en colocar


2 <b><i>XML. Empezando </i></b> etiquetas para presentar la
3 <b>precio: 30 €</b> información. <b>: negrita, <i>
cursiva….
El mismo Ejemplo en XML:
1 <libro> • XML utiliza etiquetas para definir
2 <autor>Pepito Pérez</autor> el contenido y el significado de la
3 <titulo>XML. Empezando</titulo> información.
4 <precio moneda=“euros”>30</precio>
5 </libro>

13
2. ¿Qué es XML?
El lenguaje XML en sí mismo es un lenguaje para organizar
contenidos. No está diseñado para ser visualizado o
procesado por ningún programa, navegador, o aplicación. Su
utilidad está en poder organizar una serie de contenidos de
una forma estructurada (por ejemplo contactos de una
agenda, o artículos de un comercio).

Sin embargo esto no quiere decir que no podamos utilizarlo


en ninguna aplicación, al contrario, cada tipo de aplicación
tiene una forma de incorporarlo, ya sea mediante archivos
intermedios, funciones, etc, que hacen que los archivos XML
puedan verse en varios tipos de formato, (PDF, procesador
de texto, navegador web, etc.).

14
2.1¿Para que se emplea XML?
Podemos usar XML en muchos campos:

➢ Si transmitimos la información en XML, es decir, estamos escribiendo que significan esos


datos, con lo cual otra aplicación puede recibir estos datos, entender su significado y
trabajar con ellos (por ejemplo, Word permite guardar en formato XML)

➢ XML simplifica los procesos de migración de datos de una base de datos a otra, siendo un
formato ideal para esto.

➢ Como comprobareis mas adelante, cada navegador interpreta la información de


forma distinta, y a la hora de programar, tenemos que tener en cuenta el
navegador con el que se va a trabajar. Con XML se soluciona este problema,
pues solo tendríamos que cambiar la hoja de estilo si cambiamos de browser.

15
2.1¿Para que se emplea XML?

• En general, se puede decir que el XML ha tenido un gran éxito y se ha


convertido en una herramienta básica para el intercambio y
almacenamiento de información en muchos sectores de la informática.
• Al utilizar XML, se facilita ampliamente la transmisión de datos,
ya que al trabajar con texto plano, es más sencillo el envío de
información a través de la red.
• XML ahorra tiempo y trabajo a los desarrolladores, ya que no es
necesario realizar varios códigos fuentes para crear el mismo
efecto o aplicación, con un solo programa basta.

16
2.2 Estructura de un documento XML

Un documento XML esta formado por el prólogo y el cuerpo.

El prólogo es opcional. Añade


información sobre el documento xml y se
puede dividir en dos partes:

• La declaración XML → Nos dice la


versión de xml, el tipo de
codificación y si es un documento
autónomo.
• La declaración de tipo de
documento (DTD) → no dice que
tipo de documento es.

El cuerpo que contiene la información del


documento , con los elementos que lo forman
que se pueden disponer en forma de árbol.

17
Documentos bien formados y válidos

Los documentos XML pueden ser correctos a dos niveles:

Bien formados → Cumplen todas las reglas sintácticas y puede ser analizado `por
cualquier analizador sintáctico.

Validos → Tiene que estar primero bien formado, y después especificar la relación
entre todos los elementos del documento. Debe ser validado por un procesador XML.

Utilizaremos Notepad++ para escribir documento xml.

➢ Para ver si un documento esta bien formado o es valido usamos xml copy editor o el mismo Notepad++ . Para este ultimo
debemos añadir el plugin XML tools (Al final del tema se indica como hacerlo)
➢ También podemos usar el validador https://validator.w3.org/

➢ Al final del documento se indica como comprobar que un documento está bien formado y es válido.

18
2.2.1 Documentos bien formados
Un documento XML debe estar bien formado, es decir debe cumplir las reglas de sintaxis de la
recomendación XML. Para que un documento esté bien formado, al menos debe cumplir los
siguientes puntos:

• El documento contiene únicamente caracteres Unicode válidos.


• Hay un elemento raíz que contiene al resto de elementos.
• Los nombres de los elementos y de sus atributos no contienen espacios.
• El primer carácter de un nombre de elemento o de atributo puede ser una letra, dos puntos
(:) o subrayado (_).
• El resto de caracteres pueden ser también números, guiones (-) o puntos (.).
• Los caracteres "<" y "&" sólo se utilizan como comienzo de marcas.
• Las etiquetas de apertura, de cierre y vacías están correctamente anidadas (no se solapan) y
no falta ni sobra ninguna etiqueta de apertura o cierre.
• Las etiquetas de cierre coinciden con las de apertura (incluso en el uso de mayúsculas y
minúsculas).

19
2.2.1 Documentos bien formados

• Las etiquetas de cierre no contienen atributos.


• Ninguna etiqueta tiene dos atributos con el mismo nombre.
• Todos los atributos tienen algún valor.
• Los valores de los atributos están entre comillas.
• Si un documento XML no está bien formado, no es un documento XML. Los procesadores
XML deben rechazar cualquier documento que contenga errores.

La mayoría de los navegadores nos muestran el código igual que lo hemos escrito nosotros, es
decir con sus etiquetas. Mozilla y 0pera y Chrome nos indican además que les falta algun tipo de
estilo o información asociada. Internet Explorer no nos lo dice pero nos muestra también el
documento con sus etiquetas. Sólamente Safari nos muestra el texto todo seguido en una línea.

20
2.2 Documentos bien formados. Declaración XML

• La declaración XML es una etiqueta que comienza por <?xml y termina por ?> y que
proporciona información sobre el propio documento XML.
• Aunque no es obligatoria es conveniente que aparezca, y debe aparecer siempre al
principio del documento. <?xml version="1.0" encoding="UTF-8“ ?>

• En esta declaración, también se indica el juego de caracteres del documento. El juego de


caracteres que se utiliza en este curso es UTF-8
• Se pueden utilizar otros juegos de caracteres, como ISO-8859-1 (Europeo occidental):
<?xml version="1.0" encoding=“ISO-8859-1"?>
• El juego de caracteres se debe escribir en mayúsculas (UTF-8 en vez de utf-8).
• La declaración xml también indica la versión XML utilizada. Aunque existe la versión XML 1.1, la
versión más común sigue siendo la versión XML 1.0.
La codificación puede ser UTF-8 o ISO-8859-1. UTF-8 representa todos los caracteres UNICODE y usa de uno a cuatro bytes. ISO-8859-1
usa solo un byte para representar los caracteres y solo representa los 256 caracteres primeros de UNICODE.
UNICODE es un estándar de codificación de caracteres que incluye todos los caracteres de uso común en la actualidad. Es el más usado
en informática. Abarca 137.374 caracteres.
21
2.2 Documentos bien formados. Declaración XML

EJEMPLO En una declaración XML, además de los atributos version y encoding, también se puede escribir
el atributo standalone, que puede tomar dos valores ("yes" o "no"):

<?xml version="1.0" encoding=“UTF-8“ standalone=“yes”?>

Al escribir standalone="yes" se está indicando que el documento es independiente de


otros, como por ejemplo de una DTD (Document Type Definition, Definición de Tipo de
Documento) externa. En caso contrario, significará que el documento no es independiente.

En un documento XML, escribir la declaración XML es opcional. Pero, si se escribe, el


atributo version es obligatorio indicarlo. Sin embargo, los
atributos encoding y standalone son opcionales y, por defecto, sus valores son "UTF-
8" y "no", respectivamente.

Por otra parte, cuando se escriba el atributo encoding, siempre deberá aparecer después
de version. Y, respecto al atributo standalone, siempre que se escriba, deberá ser en último
lugar.
22
2.2.1 Documentos bien formados. Declaración XML
• Es importante que el juego de caracteres que aparece en la declaración sea
el juego de caracteres en que realmente está guardado el documento,
porque si no el procesador XML puede tener problemas leyendo el
documento.

23
2.2.1Documentos bien formados. Elemento Raíz

Elemento raíz de un documento XML


Todo documento XML tiene que tener un único elemento raíz (padre) del que
desciendan todos los demás. En este caso, el elemento raíz es "persona".
Gráficamente, la estructura de elementos de este documento se puede representar
como se muestra a continuación:
<persona>
<nombre>Elsa</nombre>
<mujer/>
<fecha-de-nacimiento>
<día>18</día>
<mes>6</mes>
<año>1996</año>
</fecha-de-nacimiento>
<ciudad>Pamplona</ciudad>
</persona>
24
2.2.1 Documentos bien formados. Etiquetas (tags)

× Una etiqueta es un identificador que empieza por el carácter < y termina por >.
× Existen tres tipos de etiquetas:
× las etiquetas de apertura (start-tag), que empiezan por el carácter < y
terminan por >.
Por ejemplo:<apartado>
× las etiquetas de cierre (end-tag), que empiezan por los caracteres </ y
terminan por >.
Por ejemplo:</apartado>
× las etiquetas vacías (empty tag),
× Las que no contienen nada: <elemento></elemento>
× Y las que tienen autocierre : <elemento />. Pueden tener atributos.
Ambas producen el mismo resultado.

25
2.2.1 Documentos bien formados. Etiquetas (tags)

El lenguaje XML no tiene etiquetas predefinidas.

Las etiquetas en el ejemplo anterior (como <fecha_de_nacimiento>


y <dia>) no están definidas en ningún estándar XML. Estas
etiquetas son "inventadas" por el autor del documento XML.

HTML funciona con etiquetas predefinidas como <p>, <h1>,


<table>, etc.

Con XML, el autor debe definir tanto las etiquetas como la estructura
del documento.

26
2.2.1 Documentos bien formados. Atributos

• Un atributo es un componente de las etiquetas que incorpora características a los


elementos de un documento que se puede encontrar en las etiquetas de apertura o en
las etiquetas vacías, pero no en las de cierre.
• En una etiqueta no puede haber dos atributos con el mismo nombre.
• Los valores de atributo siempre se deben citar. Se pueden usar comillas simples o dobles.
Si el atributo contiene dobles comilla, entonces usaremos comillas simples

27
2.2.1 Documentos bien formados. Atributos (attribute)

28
2.2.1 Documentos bien formados. Atributos (attribute)

Un elemento expandido <fecha>


Los siguientes tres documentos XML contienen se utiliza en el tercer ejemplo
exactamente la misma información: (ESTE ES MI FAVORITO):

Un atributo de fecha se usa en el primer ejemplo: <note>


<nota date="2008-01-10"> <date>
<to>Tove</to> <year>2008</year>
<from>Jani</from> <month>01</month>
</nota> <day>10</day>
</date>
Un elemento <date> se usa en el segundo <to>Tove</to>
ejemplo: <from>Jani</from>
<nota> </note>
<date>2008-01-10</date>
<to>Tove</to>
<from>Jani</from>
</nota>

29
2.2.1 Documentos bien formados. Comentarios.Secciones CDATA

Un comentario es una etiqueta que comienza por <!-- y acaba por -->.
Los comentarios no pueden estar dentro de otras marcas y no pueden contener los
caracteres "--".
Dentro de un comentario las entidades de carácter no se reconocen, es decir, sólo se
pueden utilizar los caracteres del juego de caracteres del documento.

Por ejemplo: <!-- Esto es un comentario -->

Secciones CDATA: Permite que el analizados ignore cierta secciones del documento.
Podemos usar los caracteres especiales (&, <, >…) sin ser interpretados por el
analizador.

SINTASIX: <![CDATA[
. …

]]>
30
2.2.1 Documentos bien formados. Secciones CDATA

31
2.2.1 Documentos bien formados. Entidades predefinidas
Entidades de carácter
En XML se utilizan varias entidades de carácter de HTML, para poder escribir en
cadenas de texto los caracteres que delimitan las marcas o las cadenas de texto :

Esto generará un error de XML: <mensaje>salario < 1000</mensaje>

Para evitar este error, reemplace el carácter "<" con una referencia de entidad :

<mensaje>salary &lt; 1000</mensaje>

32
2.2.2 Documentos validos

• Un documento XML bien formado puede ser válido. Para ser válido, un documento XML debe:

Incluir una referencia a una gramática


Incluir únicamente elementos y atributos definidos en la gramática,
Cumplir las reglas gramaticales definidas en la gramática.

• Existen varias formas de definir una gramática para documentos XML, las más empleadas son :

- DTD (Document Type Definition = Definición de Tipo de


Documento). Es el modelo más antiguo, heredado del SGML.
- XML Schema (XSD) . Es un modelo creado por el W3C como sucesor de las DTDs. Es
mas potente
- Relax NG. Es un modelo creado por OASIS, más sencillo que XML Schema.

33
2.2.2 Documentos validos. DTD y DOCtYPE

× Definición de tipo de documento (DTD, Document Type Definition)

× Una DTD es un documento que define la estructura de un documento


XML: los elementos, atributos, entidades, notaciones, etc., que
pueden aparecer, el orden y el número de veces que pueden aparecer,
cuáles pueden ser hijos de cuáles, etc. El DTD debemos de realizarlo
nosotros, pues incluirá todos los elementos que aparecen en el
programa que hemos desarrollado. Hay paginas que nos hacen el
DTD a partir de documento xml.

× El procesador XML la utiliza para verificar si un documento es válido,


es decir, si el documento cumple las reglas del DTD.

34
2.2.2 Documentos validos. DTD y DOCtYPE

Para declarar una DTD usamos la siguiente nomenclatura en el


prólogo del programa:
<!DOCTYPE nom_etiqueta_raíz SYSTEM “nom_dtd.dtd">

Ejemplo : <!DOCTYPE libreria SYSTEM "ejemplo1.dtd">

Este DTD llamado ejemplo1.dtd iría en un programa xml cuya etiqueta raíz es librería.

Existen en internet multitud de paginas que generan el DTD automáticamente a partir del código xml, solo con
poner DTD generador en Google. Son herramientas interesantes, pues simplifican la tarea, pero no hay que
quitarle importancia a la creación de un DTD de forma manual.

Además de estas páginas hay también herramientas que lo hacen, como Trang .

35
2.2.2 Documentos validos. El procesador XML
Procesador XML (XML parser)

• Cuando una aplicación necesita leer un documento XML, la


aplicación recurre a un procesador XML (en inglés XML parser).
Este es el que lee el documento, analiza el contenido y le pasa la
información en un formato estructurado a la aplicación.

• Un procesador XML es pues, aquel que se encarga de validar el


documento.

36
Ejemplo documentos validado. DTD y DOCtYPE

<?xml version="1.0" encoding="UTF-8"?>


<!DOCTYPE nota SYSTEM "Nota.dtd">
<nota>
<para>Ana</para>
<de>Javier</de>
<asunto>Recordatorio</asunto>
<cuerpo>No te olvides de mi este fin
de semana</cuerpo>
</nota>
La declaración DOCTYPE en este ejemplo es una referencia a un
archivo DTD externo

37
Ejercicios para practicar

× Los siguientes documentos no están bien formados porque cada uno


contiene dos errores (dos errores del mismo tipo cuentan como uno
sólo). Corrija los errores y compruebe con XML Copy Editor que ya
son documentos bien formados
× Si para corregir algún error hay que inventarse una etiqueta o
atributo, utilice un nombre que tenga relación con la información
contenida en el documento.
× Te aconsejo visualizar el siguiente video:
https://www.youtube.com/watch?v=_lD3e6s6H1Q

38
Ejercicio 1

39
XML copy editor. Comprobamos

40
Ejercicio 1. Solución

41
Dos posibles soluciones.
Ejercicio 2

42
Ejercicio 2. Solución

43
Ejercicio 3

44
Ejercicio 3. Solucion

× Las etiquetas de apertura y cierre no


coinciden
× Se podría corregir modificando la
etiqueta de apertura o la de cierre,
por ejemplo:
<titulo>XML explicado a los
niños</titulo>
× Los caracteres :// no están
permitidos en las etiquetas
× Se podría corregir eliminando esos
caracteres, por ejemplo:
<http>www.example.org</http>
45
Ejercicio 4. Encuentra la solución y comprueba que esta bien formado. Si tienes alguna duda
comunícaselo al profesor.

46
Ejercicio 5. Encuentra la solución y comprueba que esta bien formado. Si tienes alguna duda
comunícaselo al profesor.

47
Ejercicio 6. Encuentra la solución y comprueba que esta bien formado. Si tienes alguna duda
comunícaselo al profesor.

48
Ejercicio 7. Encuentra la solución y comprueba que esta bien formado. Si tienes alguna duda
comunícaselo al profesor.

49
3. Declaración de un DTD
A continuación se indica donde consultar la sintaxis de una DTD.
Este punto 3 no será evaluable. Es meramente informativo y como
amplificador de conocimientos.
Se aconseja leerlo para entender la estructura de un DTD y como se forma,
si bien, cabe recordar que hay herramientas que hacen las DTD de forma
automática.

Para ello visita la siguiente página:


http://www.mclibre.org/consultar/xml/lecciones/xml-dtd.html

50
Apéndice: Como ver si un archivo xml está bien formado y es válido.
ARCHIVO XML BIEN FORMADO
× Para ver si un archivo xml esta bien formado, basta con
escribirlo en Notepad ++ y guardarlo. Hay que tener la
precaución de guardarlo como html. Si no me da ningún
error, el fichero estará bien formado.
× También podemos ver si esta bien formado pinchando en
la opción Plugins→SML Tools→ check XML syntax now.

VALIDAR ARCHIVO XML


× En Notepad++ ir a : Plugins→SML Tools→ Validate now.
× En https://validator.w3.org/

51
Apéndice: Instalar Notepad ++ y añadir plugin XML tool.

× Para descargar Notepad++ nos vamos a su pagina de


descarga: https://notepad-plus-plus.org/downloads/
× Tener en cuenta si vuestro equipo es de 32 o 64 bits,
y descargaros la versión correspondiente.
× Una vez instalado os vais al menú:

× Plugins>Plugin Manager o Administrar


Plugins> e instala el plugin XML Tools.
× Una vez instalado, os aparecerá en el menú de
Plugins.

52
Para repasar:

1. Visualizar los siguientes videos:


Videotutorial parte 1: https://www.youtube.com/watch?v=UcJFo-CQWTQ&feature=youtu.be
Videotutorial parte 2: https://www.youtube.com/watch?v=pGCeqW530us&feature=youtu.be

2. Realizar el siguiente test


https://www.w3schools.com/quiztest/quiztest.asp?qtest=XML

53
This template is free to use under Creative Commons Attribution license. Thanks to SlidesCarnival
The information written in this document has been obtained from www.ecured.cu, http://formacion.educalab.es,
https://www.abrirllave.com, http://docencia.taboadaleon.es, Sergio Lujan Mora and Bartolomé Sintes Marco websites.

Estos materiales se distribuyen con licencia Creative Commons