LM-UT1: Lenguajes de marcas

Lenguajes de Marcas y SGILenguajes de Marcas y SGI

U.T. 1: Introducción.Lenguajes de marcas y XML.

C.F.G.S. “Administración de SistemasInformáticos en Red”

C.I.F.P. Juan de Colonia (Burgos)

David H. Martín Alonso

- Curso 2010/2011 -

Octubre de 2010 CIFP Juan de Colonia

INTRODUCCIÓN. LENGUAJES DE MARCAS Y XML.

ContenidosContenidos

Perspectiva histórica

Estándares y W3C

Estructura de documento XML

Codificaciones

Herramientas



3/29

Lenguajes de marcasLenguajes de marcasLenguajes de marcas / lenguajes de marcado

Mark-up Language• Modelos de organización de archivos de texto.• Dan estructura al documento mediante anotaciones.

– Etiquetas de texto identificadas entre símbolos < >.

Etiquetas / marcasUtilidad

• Formato estándar muy extendido para gestionar información.

• Potenciado por la popularidad de HTML en la web.

<párrafo>Este es un ejemplo de texto estructurado mediante

marcas.</párrafo>

mark-up: to correct or write notes or instructions on a piece of writing, especially before it is published.tag: a small piece of paper or other material that is fixed to something to give information about it, or is fixed to someone to show who they are.

mark-up: to correct or write notes or instructions on a piece of writing, especially before it is published.tag: a small piece of paper or other material that is fixed to something to give information about it, or is fixed to someone to show who they are.

■Historia□Estándares□Estructura□Codificaciones□Herramientas



4/29

Contexto históricoContexto históricoInternet, DARPA, 1969PC, IBM, 1981SGML, ISO, 1986HTML, Tim Berners-Lee, CERN, 1990W3C, Tim Berners-Lee, MIT, 1994XML, W3C, 1998XHTML, W3C, 2000

WWW: World Wide WebSGML: Standard Generalized Markup LanguageHTML: Hypertext Markup LanguageXML: eXtensible Markup Language.XHTML: eXtensible Hypertext Markup LanguageW3C: World Wide Web Consortium

WWW: World Wide WebSGML: Standard Generalized Markup LanguageHTML: Hypertext Markup LanguageXML: eXtensible Markup Language.XHTML: eXtensible Hypertext Markup LanguageW3C: World Wide Web Consortium




5/29

WWWWWWServicios Internet para distribuir contenidos a usuarios no identificados a lo largo de la historia:

• FTP anónimo – Descarga de ficheros, sin contraseña• Gopher – Estructura distribuida basada en menús• Web – Estructura distribuida basada en hipertexto

Web: World Wide Web• Documentos de texto sencillo• Con marcas/etiquetas para incluir indicaciones• Hipertexto: palabras con enlaces internos o externos• Evolución: páginas estáticas → páginas dinámicas

– Generadas sobre la marcha– Interface único/universal para programadores– Libera al usuario de instalaciones o mantenimiento

• Aplicación “estrella” de Internet




6/29

SGML – HTML – XMLSGML – HTML – XML• SGML

– Etiquetas para describir estructura y recoger propiedades.– No incluye acciones. No es un lenguaje de programación.– Rigor en etiquetado para permitir tratamiento automatizado.

• WWW / HTML– Hipertexto: texto con enlaces a otros documentos.– Flexibilidad en los visores (navegadores).

¿Debilidad o fortaleza?Alejamiento puntual del estándar común.Tendencia a incluir formato, en remisión.

• XML– Modelo de marcas revisado.– Propiciado por la popularidad de HTML en Internet.– Metalenguaje: soporte para crear lenguajes específicos.

• XHTML– Evolución de HTML haciéndolo compatible con XML.

metalenguaje: Lenguaje que se usa para hablar del lenguaje.metalenguaje: Lenguaje que se usa para hablar del lenguaje.

□Historia■Estándares□Estructura□Codificaciones□Herramientas



7/29

XML Metalenguaje - ValidaciónXML Metalenguaje - ValidaciónMetalenguaje:

• Soporte común para crear lenguajes especializados• Estructura genérica común: reglas de etiquetado• Concreción mediante diccionarios y esquemas

– Etiquetas para usos concretos– Reglas de composición– Condiciones sobre contenido

• Corrección necesaria en los dos niveles– Documentos bien formados– Documentos válidos




8/29

Hojas de estilo y otros estándaresHojas de estilo y otros estándares• Estándares complementarios a HTML/XML

– Formato– Transformación

• CSS: Hojas de estilo comunes• XSL: Hojas de estilo para XML• XML Linking: Enlaces entre documentos• DTD: Descripción de estructuras • XML namespaces: Espacios de nombres• XML Schemas: Descripción de estructuras avanzadas

CSS: Cascading Style Sheets.XSL: Extensible Stylesheet Language.DTD: Document Type Definition.

CSS: Cascading Style Sheets.XSL: Extensible Stylesheet Language.DTD: Document Type Definition.




9/29

World Wide Web ConsortiumWorld Wide Web Consortium• Organismo internacional para el desarrollo de las

tecnologías relacionadas con la web.– Fundada en 1994 por Tim Berners-Lee– Estándares abiertos– W3C: http://www.w3.org

• Contenidos:– Documentación: estándares y tutoriales.– Acceso a herramientas de validación en línea.

• Alcance:– HTML/XHTML– CSS– XML– Validadores


The World Wide Web Consortium (W3C) is an international community that develops standards to ensure the long-term growth of the Web.The World Wide Web Consortium (W3C) is an international community that develops standards to ensure the long-term growth of the Web.

http://www.w3.org/



Actividad I: W3CActividad I: W3CAcceder a la web del W3C y localizar:

- Historia y organización.

- Estándares originales HTML, CSS, XML...

- Traducciones.

- Validadores en línea.



Actividad II: Web 2.0Actividad II: Web 2.0Acceder a YouTube y ver algunos vídeos sobre la

web en general y la Web 2.0:

- La Web 2.0: La revolución social de Internet

- Web 2.0

http://www.youtube.com/view_play_list?p=009A10C8D674EC50

Ojear también el Mapa Visual de la Web 2.0:

http://internality.com/web20/

http://www.youtube.com/watch?v=OwWbvdllHVE&p=009A10C8D674EC50

http://www.youtube.com/watch?v=nsa5ZTRJQ5w&feature=related


http://internality.com/web20/



12/29

Modelo de marcas XML (I)Modelo de marcas XML (I)□Historia□Estándares■Estructura□Codificaciones□Herramientas

• Un documento XML está formado por elementos.• Cada elemento contiene texto u otros elementos.

– Formando una estructura en árbol.– No es obligatorio que tenga contenido.– Partiendo del primero, elemento raíz.– El resto de elementos tienen padre y acaso hijos.

• Contenido: texto Unicode (UTF-8 o UTF-16).– Los espacios, tabuladores y saltos de línea se fusionan

• Un elemento queda delimitado por dos etiquetas.– La etiqueta es el nombre del tipo de elemento.– Etiqueta de apertura y cierre.<tipo>...contenido...</tipo>

– En elementos sin contenido se pueden fusionar.<tipo_sin_contenido />

– Etiquetas/elementos se pueden anidar, pero no solapar.

13/29

Modelo de marcas XML (II)Modelo de marcas XML (II)□Historia□Estándares■Estructura□Codificaciones□Herramientas

• Un elemento puede presentar atributos.– Pares nombre/valor incrustados en la etiqueta de inicio.<tipo a1=”valor1” a2=”valor2” />

– Los valores siempre van entrecomillados.• Los nombres empiezan con una letra pero pueden

incluir números y puntuación.– No se admiten dos puntos «:» que se usan para designar

espacios de nombres.– No pueden empezar por «xml» que se reserva para uso

propio.– Caracteres Unicode y sensible a mayúsculas/minúsculas.

• Entidades predefinidas:&nombre;

• Comentarios:

• Secciones de texto preformateadas, no procesables<![CDATA[ ...contenido <<no XML>>... ]]>>



14/29

Modelo de marcas XML (III)Modelo de marcas XML (III)□Historia□Estándares■Estructura□Codificaciones□Herramientas

En el prólogo, al inicio del documento:• Declaración XML, versión y codificación

<?xml version="1.1" encoding="UTF-8" ?>• Enlace o descripción DTD

<!DOCTYPE ejemplo SYSTEM ”ejemplo.dtd” ><ejemplo>...contenido...</ejemplo>



Actividad III: usos de XMLActividad III: usos de XML- Buscar documentos XML en el propio equipo y

observarlos también: imágenes SVG, archivos de

configuración de Notepad++.

- Añadir la extensión «.zip» a cualquier documento

ODF y ver su contenido descomprimiéndolo.

- Abrir páginas web y observar por encima el código

HTML/XHTML identificando el DTD, etiquetas,

atributos, etc.

- Buscar páginas con icono de validación y comprobar

su efecto.



RevisiónRevisión

● ¿Cuál es la relación entre HTML, XML y

XHTML?● ¿Qué significa que XML sea un metalenguaje?● ¿Qué es el DTD? ¿Cual es su finalidad?

¿Dónde se encuentra?● Documentos bien formados frente a

documentos válidos.



17/29

Codificaciones de caracteresCodificaciones de caracteresArchivos de texto:

• Construidos con caracteres– Caracteres alfabéticos y caracteres numéricos.– Símbolos de puntuación.– Caracteres de separación: espacio, tabulador, salto...– Otros símbolos: matemáticos, gráficos, iconos...

• Cada valor almacenado (byte) representaba 1 letra28= 256 combinaciones

– Correspondencia directa: tabla de códigos.– Existen muchas codificaciones distintas.– En alfabetos “universales” puede ocupar más de 1 Byte

• Lectura y edición con programas simples– Editor de textos: vi, bloc de notas, notepad++, kate...– La tipografía usada depende del editor, no del archivo.

Archivos binarios:– No hay relación directa byte ↔ carácter.– Programas, imágenes, documentos de texto con formato...

□Historia□Estándares□Estructura■Codificaciones□Herramientas



18/29

ASCII (I)ASCII (I)ASCII / US-ASCII

• Alfabeto inglés• Código básico común de 7 bits: 128 caracteres.• Se preserva el bit 8

– Por economía: no era necesario– Para paridad: control de errores en las comunicaciones

• Última revisión: ANSI X3.4-1986– Ratificado como ISO/IEC 646:1991 IRV

• Aunque limitado a nivel global, otras codificaciones lo respetan.

– Coincidencia de los 128 valores 0x00-0x7F.

□Historia□Estándares□Estructura■Codificaciones□Herramientas

ASCII: American Standard Code for Information InterchangeANSI: American National Standards InstituteISO: International Organisation for Standardisation

ASCII: American Standard Code for Information InterchangeANSI: American National Standards InstituteISO: International Organisation for Standardisation



19/29

ASCII (II)ASCII (II)□Historia□Estándares□Estructura■Codificaciones□Herramientas

(espacio) ! " # $ % & ' ( ) * +, -. / 0 1 2 3 4 5 6 7 8 9 :; < = > ? @ A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ \ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z { | } ~

• Caracteres imprimibles: 32 a 96• Números: a partir de «0»=48• Mayúsculas: a partir de «A»=65• Minúsculas: a partir de «a»=97



20/29

Códigos de 8 bitsCódigos de 8 bits□Historia□Estándares□Estructura■Codificaciones□Herramientas

• Ampliaciones de ASCII– 8 bits: 128 de ASCII (0x00-0x7F) + 128 (0x80-0xFF)

• ¡Torre de babel!– Uso regional– Códigos propios y códigos estándar.– ASCII extendido: denominación inespecífica no estándar.

• Códigos de Microsoft en DOS y MS Windows– CP437, CP850, CP858...– Windows 1250, 1252...– Mala identificación dentro del propio sistema.– Depende de la tipografía elegida.– Crisis para incorporar el símbolo «€» en 2000– CP858 = CP850 (alfabetos europeos occidentales) + «€»

• Códigos ISO estándar: ISO-8859-X– ISO-8859-1 ó latin1: alfabetos europeos occidentales– ISO-8859-15 = ISO-8859-1 + «€»



21/29

UnicodeUnicode□Historia□Estándares□Estructura■Codificaciones□Herramientas

• Sistema completo de codificación de caracteres.– Tabulación universal de caracteres– Caracteres occidentales, asiáticos, exóticos...– Reglas de composición: «tilde» + «a» = «á»– Contiene rangos reservados para uso privado– Compatibilidad ASCII + ISO-8859-1 en 0x0000-0x00FF

• UCS: Universal Character Set– UCS-2/BMP: versión básica inicial de 16 bits (2 bytes)– UCS-4: versión completa, en evolución, de 31 bits (4 bytes)

Hasta 128 grupos de 256 planos de 216 códigosUnicode abarca BMP y 14 planos ()

– Estándar ISO10646• Trasformaciones en tamaño reducido

– No es operativo multiplicar ×4 todo...– UTF-8 / UTF-16

UCS: Universal Character SetBMP: Basic Multilingual PlaneUTF: Unicode Transformation Format

UCS: Universal Character SetBMP: Basic Multilingual PlaneUTF: Unicode Transformation Format



22/29

UTF-8UTF-8□Historia□Estándares□Estructura■Codificaciones□Herramientas

• Transformación Unicode– Longitud variable: 1-6 bytes por carácter– Compatible ASCII: 1byte– Incremento de tamaño mínimo para textos occidentales– Popularidad: web (HTML, XML, etc.) y GNU/Linux.

• El prefijo de cada byte es crítico para identificar la longitud de cada carácter

Prefijos UTF-8 Lectura Bits0xxxxxxx ASCII: Byte independiente 7

10xxxxxx Byte de continuación +6

110xxxxx 10xxxxxx Primero de dos bytes 8-11

1110xxxx 10xxxxxx 10xxxxxx Primero de tres bytes 12-16

11110xxx 10xxxxxx 10xxxxxx 10xxxxxx Primero de cuatro bytes 17-21

111110xx 10xxxxxx 10xxxxxx 10xxxxxx 10xxxxxx Primero de cinco bytes 22-26

1111110x 10xxxxxx 10xxxxxx 10xxxxxx 10xxxxxx 10xxxxxx Primero de seis bytes 27-31



23/29

UTF-16UTF-16□Historia□Estándares□Estructura■Codificaciones□Herramientas

• Transformación Unicode– Longitud variable: 1-2 pares de bytes por carácter– Compatible UCS-2: 2 bytes para el BMP– Popularidad: Java y MS Windows.

• Subrogados: 2 pares de bytes– Para planos extendidos, fuera del BMP.– No tienen sentido de forma independiente– No representan directamente ningún código

Subrogados UTF-16 Rango Bits Posición110110xx-xxxxxxxx 0xD800 → 0xDB00 +10 alto

110111xx-xxxxxxxx 0xDC00 → 0xDF00 +10 bajo



24/29

BOMBOM□Historia□Estándares□Estructura■Codificaciones□Herramientas

• Sistemas Little-endian / Big-endian• Byte Order Mark

– Carácter Unicode U+FFFE• Primer byte de un archivo de texto Unicode• Permite identificar el orden de los bytes

– En secuencias de varios bytes– Esencial para UTF-8 y UTF-16



25/29

HerramientasHerramientas□Historia□Estándares□Estructura□Codificaciones■Herramientas

• Navegadores web• Notepad++• XML Copy Editor• iconv• xmllint



Actividad IV: herramientasActividad IV: herramientas- Continuando con la Actividad III, emplear

navegadores, editores de texto y editores XML para

volver a ver los archivos anteriores.

- Incorporar a Notepad++ los complementos para

XML.

- Experimentar archivos de texto con caracteres

nacionales, tratando de verlos en la consola de

sistema de Windows. Observar el efecto del cambio a

UTF-8 comenzando por el aumento de tamaño.

- Con la utilidad iconv realizar conversiones.



ReferenciasReferencias

World Wide Web Consortium:http://www.w3.orgManual GNU: Unicode, ASCII, UTF-8http://manpages.ubuntu.com/manpages/lucid/es/man7Galería YouTube:http://www.youtube.com/view_play_list?p=009A10C8D674EC50

Bibliografía actualizada en delicious:http://www.delicious.com/dhmartin/LM-ASIR

http://www.w3.org/

http://manpages.ubuntu.com/manpages/lucid/es/man7


http://www.delicious.com/dhmartin/LM-ASIR



LicenciaLicencia

Este material está disponible bajo una Licencia Creative Commons,

http://creativecommons.org/licenses/by-nc-sa/3.0/es/

http://creativecommons.org/licenses/by-nc-sa/3.0/es/



¿Dudas o cuestiones?¿Dudas o cuestiones?

LM-UT1: Lenguajes de marcas

Education

Transcript of LM-UT1: Lenguajes de marcas