Introducción a los Lenguajes de Marcas PDF

FUNDAMENTOS DE DESARROLLO WEB Curso académico 2024 – 2025  Fundamentos de Desarrollo Web/LM 2 Introducción LM: Índice 1. Definición 2. Evolución 3. Clasificación y uso  Lenguajes orientados a la presentación...

FUNDAMENTOS DE DESARROLLO WEB Curso académico 2024 – 2025  Fundamentos de Desarrollo Web/LM 2 Introducción LM: Índice 1. Definición 2. Evolución 3. Clasificación y uso  Lenguajes orientados a la presentación  Lenguajes procedurales  Lenguajes descriptivos 4. Conceptos  Etiquetas  Elementos  Atributos 5. Gramáticas 6. Estructura  Fundamentos de Desarrollo Web/LM 3 INTRODUCCIÓN A LOS LM Lenguajes de Marcas  Fundamentos de Desarrollo Web/LM 4 Introducción LM: Definición  Los lenguajes de marcas son aquellos que combinan la información que contiene un documento con anotaciones relativas a:  La estructura del texto.  La forma de presentarlo.  La forma de procesarlo.  A las anotaciones se les llama marcas o etiquetas (tags), y siguen una estructura jerárquica en forma de árbol.  Ejemplo direccion calle cod_postal poblacion  Fundamentos de Desarrollo Web/LM 5 Introducción LM: Definición  Fundamentos de Desarrollo Web/LM 6 Introducción LM: Evolución  Origen  Falta de estandarización en los formatos de información usados por distintos programas.  Surge en IBM por la necesidad para almacenar grandes cantidades de información.  Se crea un sistema de edición, almacenamiento y búsqueda de documentos para establecer un formato estándar para todos los documentos de la empresa, esto es, un formato flexible que se ajuste a cualquier tipo de documento.  Objetivo  Describir documentos con independencia de la plataforma o aplicación utilizada.  Fundamentos de Desarrollo Web/LM 7 Introducción LM: Evolución  Comienzan a usarse a finales de los 60 con el objetivo de separar presentación y estructura. GML (IBM, 1969)  GML – Generalized Markup Language.  SGML – Standard Generalized Markup Language. SGML (ISO  Extenso y completo, pero muy complicado. 8879:1986) HTML XML (1989) (W3C,1998)  Fundamentos de Desarrollo Web/LM 8 Introducción LM: Evolución  A finales de los 80 se crea HTML.  HyperText Markup Language. GML  Tim Berners-Lee (1.989). (IBM, 1969)  ISO 15445:2000  HTML se convierte en un estándar general para la creación de páginas webs.  Compartir información a través de internet. SGML (ISO  Papel fundamental en el crecimiento de internet. 8879:1986)  Sintaxis sencilla.  No es flexible.  Las etiquetas son limitadas. HTML XML (1989) (W3C,1998)  Fundamentos de Desarrollo Web/LM 9 Introducción LM: Evolución  A mediados de los 90 se elabora XML.  eXtensible Markup Language. GML  Más sencillo que SGML. (IBM, 1969)  Más potente que HTML (semántica).  Las etiquetas indican el significado de los datos.  Flexible, extensible.  No limita el número de marcas o etiquetas posibles. SGML (ISO  Muchos usos: lenguajes derivados. 8879:1986)  W3C – World Wide Web.  Consorcio internacional creado por Tim HTML XML Berners-Lee, que crea recomendaciones para la www. (1989) (W3C,1998)  Fundamentos de Desarrollo Web/LM 10 Introducción LM: Evolución  HTML  HTTP  URL  Fundamentos de Desarrollo Web/LM 11 Introducción LM: Evolución HTML 1989 1995 1997 1998 2009 HTML HTML2 HTML 3.2 HTML4 HTML5 Insertar textos, Primer estándar Soporta applets Soporta scripts, Incluye mejoras encabezados, oficial. No de Java, y tablas complejas, para multimedia. listas soportaba tablas manejo de capas separa la Nueva estructura estructura del del documento documento de la representación visual  Fundamentos de Desarrollo Web/LM 12 Introducción LM: HTML vs XML  ¿HTML o XML?  Fundamentos de Desarrollo Web/LM 13 Introducción LM: HTML vs XML  HTML  Las etiquetas presentan la información.  XML  Las etiquetas definen el contenido y significado de la información.  Fundamentos de Desarrollo Web/LM 14 INTRODUCCIÓN A LOS LM Clasificación * De presentación * De procedimiento * Descriptivo o semántico  Fundamentos de Desarrollo Web/LM 15 Introducción LM: Clasificación  Lenguajes orientados a la presentación.  El marcado de presentación define el formato del texto (negrita, interlineado,…), esto es, cómo se presenta el documento.  Formato del texto Marcas o etiquetas se pueden ocultar al usuario.  WYSIWYG (What You See Is What You Get).  Insuficiente para el procesamiento automático de información.  No son flexibles ni reusables.  Ej.: procesadores de texto (MSWord), DreamWeaver.  Fundamentos de Desarrollo Web/LM 16 Introducción LM: Clasificación  Lenguajes procedurales o marcado de procedimiento.  También orientado a presentación.  Funciona mediante secuencia de acciones.  Etiquetas visibles para el usuario que edita el texto.  Permiten procesamiento según el tipo de etiqueta.  Pueden ser muy complejos.  Ej.: LaTex, Postscript, HTML.  Fundamentos de Desarrollo Web/LM 17 Introducción LM: Clasificación  Lenguajes descriptivos.  También llamados de marcado semántico.  Significado de las expresiones lingüísticas.  Las marcas indican qué es la información, detallan lo que se está representando.  No especifican cómo representarla.  Son flexibles y reusables.  Ej.: XML y derivados.  En general, los lenguajes tienen características de más de una clase.  Fundamentos de Desarrollo Web/LM 18 Introducción LM: Uso  Objetivo general  Describir documentos con independencia de la plataforma o aplicación utilizada.  Procesamiento automático de la información representada.  Cualquier tipo de documento  Textos  Presentaciones  Gráficos  Música  Matemáticas  Entornos Web  Almacenamiento de información  Fundamentos de Desarrollo Web/LM 19 INTRODUCCIÓN A LOS LM Conceptos * Etiquetas * Elementos * Atributos  Fundamentos de Desarrollo Web/LM 20 Introducción LM: Conceptos  Etiquetas  Se utilizan para organizar un archivo de texto dentro de una estructura.  Etiqueta de inicio  Compuesta por el símbolo menor ‘’.  Etiqueta de fin  Contiene el símbolo ‘’.  El texto debe ser igual que el de la etiqueta de inicio.  Ej. Jaime  Fundamentos de Desarrollo Web/LM 21 Introducción LM: Conceptos  Ejemplos incorrectos  Fundamentos de Desarrollo Web/LM 22 Introducción LM: Conceptos  Elementos  Constan de etiqueta de inicio, un contenido y etiqueta de fin.  Puede haber elementos vacíos.  No tienen contenido ni etiqueta de fin.  Los elementos pueden ser:  Simples: el contenido está formado por texto o números.  Complejos: formados por más elementos ‘hijos’.  Fundamentos de Desarrollo Web/LM 23 Introducción LM: Conceptos  Elementos  Fundamentos de Desarrollo Web/LM 24 Introducción LM: Conceptos  Atributos  Dupla nombre-valor.  Indican propiedades de los elementos.  Se encuentran dentro de la etiqueta de inicio.  El valor suele ir entre comillas.  Valor obligatorio en muchos lenguajes.  Las comillas pueden ser simples (‘ ‘) o dobles (“ “).  Fundamentos de Desarrollo Web/LM 25 Introducción LM: Conceptos  Ejemplo  Fundamentos de Desarrollo Web/LM 26 Introducción LM: Conceptos  Ejemplo  Etiquetas, Elementos y Atributos.  Fundamentos de Desarrollo Web/LM 27 Introducción LM: Conceptos  Ejemplo  Fundamentos de Desarrollo Web/LM 28 Introducción LM: Conceptos  Ejemplo  Fundamentos de Desarrollo Web/LM 29 Introducción LM: Conceptos  Ejemplo  Fundamentos de Desarrollo Web/LM 30 Introducción LM: Conceptos  Elementos vs. Atributos  Los elementos se utilizan para encapsular porciones de datos.  Los atributos se utilizan para proporcionar información adicional (propiedades).  El uso de uno u otro depende de las necesidades.  No hay una regla fija sólo ‘buenas prácticas’.  Depende del lenguaje de marcas utilizado.  Fundamentos de Desarrollo Web/LM 31 Introducción LM: Conceptos  Etiquetas: Recomendaciones XML  Utilizar nombres descriptivos.  Utilizar nombres cortos.  Evitar acentos y caracteres extraños.  Evitar caracteres de puntuación.  Fundamentos de Desarrollo Web/LM 32 INTRODUCCIÓN A LOS LM Gramáticas  Fundamentos de Desarrollo Web/LM 33 Introducción LM: Gramáticas  Conjunto de reglas de un lenguaje  Las gramáticas definen el marcado permitido, el marcado requerido, y cómo debe ser utilizado en la instancia del documento.  Especifican cuáles serán las etiquetas posibles, las obligatorias.  Dónde deben colocarse las etiquetas y el significado que tiene cada una de ellas.  Documentos bien formados  Aquellos que son sintácticamente correctos según las siguientes reglas:  Etiquetas de inicio y fin han de ser iguales.  Elementos correctamente cerrados y anidados.  Atributos en la etiqueta de inicio.  Cuidado con las mayúsculas y los caracteres especiales.  En muchos casos (XML y HTML) deben tener un único elemento raíz.  Fundamentos de Desarrollo Web/LM 34 Introducción LM: Gramáticas  Documentos válidos  Aquellos que, además de estar bien formados, cumplen los requisitos de una definición de estructura (gramática).  Existen distintas formas de definir la gramática de un lenguaje:  DTD (Definición de Tipo de Documento)  Formalismo para especificar un lenguaje.  Descripción de la estructura y sintaxis, proporcionando un formato común.  Es un fichero aparte vinculado.  Esquemas  Similar a DTD.  Mayor especificación del tipo de datos.  Fundamentos de Desarrollo Web/LM 35 Introducción LM: Gramáticas  Aclaración  La tabulación y el nombre de las etiquetas (XML) no influye en que el documento esté bien formado ni sea válido.  Simplemente facilitan la lectura del documento por parte de un humano.  Fundamentos de Desarrollo Web/LM 36 INTRODUCCIÓN A LOS LM Estructura  Fundamentos de Desarrollo Web/LM 37 Introducción LM: Estructura  Muchos documentos de marcas, como XML o HTML, tienen estructura en forma de ‘árbol’.  En primer lugar aparece una o varias instrucciones de procesamiento.  Dependen del lenguaje concreto.  A continuación el elemento raíz que es el ‘ancestro’ del resto de elementos.  Los elementos pueden tener subelementos.  Elementos hijos.  Fundamentos de Desarrollo Web/LM 38 Introducción LM: Estructura  Ejemplo  Fundamentos de Desarrollo Web/LM 39 Introducción LM: Estructura  Ejercicio  Escribir el lenguaje de marcas correspondiente al siguiente árbol.  Fundamentos de Desarrollo Web/LM 40 Introducción LM: Estructura  Ejercicio  Solución  Fundamentos de Desarrollo Web/LM 41 Grado en Ingeniería del Software Asignatura: Fundamentos de Desarrollo Web Curso: 2024 – 2025 [email protected]