Introducción a los Lenguajes de marcas - Jorge...

LMSGI-Unidad 1-Lenguajes de marcasJorge Sánchez, www.jorgesanchez.net

@jorgesancheznet

Introducción a losLenguajes de marcas

LMSGI, módulo del ciclo de FP de Grado Superior, Administración de Sistemas Informáticos en Red


@jorgesancheznet

[1] ordenador e información



@jorgesancheznet

Formas de representar información en el ordenador

• El ordenador es una máquina binaria• TODA la información que almacena debe ser almacenada de forma

binaria• Nº 9701100001• Letra A01000001

• Color Malva211 174 25211010011 10101110 111111000• Una imagen Pasar todos los píxeles a binario• Vídeo, sonido Muestras de cada sonido e imagen• Codificación=Transformación de información a una forma binaria


@jorgesancheznet

Datos binarios y datos de texto

• En realidad todo es binario• Datos binarios = (Comúnmente) Todo lo que no es texto• Los humanos alfabetizados estamos muy textualizados• Ejemplo. Intentar ver lo siguiente sin entender lo que pone,

como si fuera una mancha de color blanco:


@jorgesancheznet

Datos binarios y datos de texto

• Los humanos no podemos abstraernos así• Para el ordenador la imagen inferior sólo es una secuencia

binaria más• Para el ser humano, alfabetizado en caracteres latinos, es

claramente un texto


@jorgesancheznet

el problema de codificar texto

•Un ordenador solo maneja datos binarios

•Consecuencia: El texto debe de convertirse en binario


@jorgesancheznet

el problema de codificar texto

•Problema:•ñ (en sistema Windows clásico) = 241 = 11101101•ñ (en la consola clásica de Windows) = 164= 10100100

•Cada sistema codificaba de una manera


@jorgesancheznet

[2] codificación de texto a binario



@jorgesancheznet

el problema de codificar texto.código ASCII

•ANSI creó una tabla llamada ASCII que estandarizó la forma de codificar texto•La tabla consta de 128 caracteres•Usa 7 bits para codificar•Problema: Sólo incluyó caracteres del inglés


@jorgesancheznet

el problema de codificar texto.código ASCII•Para los símbolos no ingleses, se añadió un bit más al ASCII = 256 caracteres•ASCII extendido=8 bits•Problema: Hay muchos ASCII extendidos


@jorgesancheznet

el problema de codificar texto.código Unicode• Intenta arreglar el lío de los sistemas ASCII extendidos•Cada símbolo de cada lengua tiene un valor•Usa hasta 32 bits (caben billones de caracteres)•Problema: El tamaño de los archivos de texto se multiplica


@jorgesancheznet

el problema de codificar texto.código Unicode. implementaciones• UTF-8:• Tamaño variable para cada carácter (8,16,24 o 32 bits)• 8 bits Caracteres del código ASCII original• 16 bits Lenguas latinas, cirílicas, griegas, árabes, hebreas

y otras de Europa, Asia Menor y Egipto• 24 bits Resto de símbolos alfabéticos (lenguas de Asia)• 32 bits Símbolos, lenguas muertas,…


@jorgesancheznet

el problema de codificar texto.código Unicode. implementaciones•UTF-16• Ocupan 16 (si son del tipo 1 y 2 anterior) y 32 bits

•UTF-32• Cada carácter ocupa 32 bits


@jorgesancheznet

Códigos. Unicode. Implementaciones

• Ejemplo, texto 取得cigüeña𐐝• En UTF-8 ocupa: 3+3+1+1+1+2+1+2+1+4 = 19 bytes• En UTF-16 ocupa: 4+4+2+2+2+2+2+2+2+4 = 26 bytes• En UTF-32 ocupa: 4+4+4+4+4+4+4+4+4+4 = 40 bytes

• UTF-8 ocupa menos, pero el proceso de los archivos es más lento• UTF-32 es el que más ocupa pero el proceso es simple• UTF-8 es la forma más usada, es el estándar actual para

codificar texto


@jorgesancheznet

Ventajas de los archivos binarios

•Ocupan menos espacio

•Son más rápidos de procesar por la máquina

•Permiten el acceso directo a los datos

•Los datos que almacenan no están expuestos


@jorgesancheznet

Ventajas de los archivos de texto

• Ideales para exportar e importar•Compatibles con cualquier dispositivo•Directamente modificables•Manipulación sencilla•Directamente transportables y entendibles por todo tipo de redes


@jorgesancheznet

[3] exportar/importar datos



@jorgesancheznet

El problema de compartir datos

• Datos que he creado en una aplicación, los quiero en otra

• En binario Conversores de formato

• Ejemplo foto:• JPG• TIFF• PSD• GIF• PNG


@jorgesancheznet


•Primera solución: estándares

•Música MP3

• Imagen JPG

•Documentos PDF

•Todos tienen matices y todos están expuestos a que aparezca un formato mejor

•En muchas ocasiones son propiedad de empresas


@jorgesancheznet


¡El texto siempre es estándar!


@jorgesancheznet


Problema:¿Cómo meter datos no textuales (vídeo, imagen,sonido,…) en archivos de texto?


@jorgesancheznet

[4] lenguajes de marcas



@jorgesancheznet

Historia de los lenguajes de marcas

•Necesidad: Codificar en archivos de texto cosas que no son texto•Primeras aproximaciones, procesadores de texto•Marcado. Markup Language = Lenguaje etiquetado•Siempre se basa en distinguir texto, de lo que no es texto:• Hola soy [[rojo]]Jorge[[finRojo]], ¿qué tal?


@jorgesancheznet


•Charles Goldfarb

• Ideó GML• Padre de SGML• Soy <rojo>Jorge</rojo>


@jorgesancheznet


•Donald Knuth

•Ideó TeX•Tipos METAFONT


@jorgesancheznet


•Leslie Lamport

• Ideó LaTeX• Simplifica TeX


@jorgesancheznet


•Ejemplo LaTeX

• Resultado http://latex.informatik.uni-halle.de/latex-online/latex.php:

\documentclass[12pt]{article}\usepackage{amsmath}\title{\Ejemplo}\begin{document}Este es el texto ejemplo de \LaTeX{}Con datos en \emph{cursiva} o \textbf{negrita}.Ejemplo de f\'ormula\begin{align}E &= mc^2 \end{align}\end{document}


@jorgesancheznet


•RTF

• Formato de proceso de texto desarrollado por Microsoft• Prácticamente estándar• Hoy muy poco usado

{\rtf1\ansi\ansicpg1252\deff0\deflang3082{\fonttbl{\f0\fnil\fcharset0 Calibri;}}\viewkind4\uc1\pard\sa200\sl276\slmult1\lang10\f0\fs22 soy \i cursiva\i0\par}


@jorgesancheznet


•PostScript

• Pruebas: http://online2pdf.com/convert/ps-to-pdf

%!PS/Courier % Elige el tipo de letra20 selectfont % Establece el tamaño de la letra y

% la toma como el tipo de letra en uso72 500 moveto % Coloca el cursor en las coordenadas

% 72, 500 (contando los píxeles desde% la esquina izquierda de la página)

(Hola mundo!) show % Escribe el texto entre paréntesis, showpage % Imprime el resultado


@jorgesancheznet


•HTML• Lenguaje de las páginas web

<!DOCTYPE html><html><head>

<title>Ejemplo de página web</title></head><body><h1>Título principal</h1><h2>Título de segundo nivel</h2><p>Texto de párrafo con <strong>negrita</strong> y

<em>cursiva</em></p></body>


@jorgesancheznet


•XML• Sucesor de SGML• Más estricto y regular• Muy exitoso• Fundamental en importación/exportación• Principal uso: Bases de datos


@jorgesancheznet


•XML <?xml version="1.0" ?><persona>

<nombre>Jorge</nombre><apellido1>Sánchez</apellido1><dirección>

<calle>C/ Falsa nº 0</calle><localidad>Palencia</localidad><código_Postal>34001</código_Postal><pais>España</pais>

</direccion><teléfonos>

<teléfono tipo=”fijo”>999 999 999</teléfono><teléfono tipo=”móvil”>666 666 666</teléfono>

</telefono></persona>


@jorgesancheznet


• JSON• Nacido para JavaScript• Se ha vuelto muy popular• Casi mismas ventajas que XML, pero además está

integrado en JavaScript• Fundamental en importación/exportación• Principal uso: Bases de datos


@jorgesancheznet


• JSON {"nombre": "Jorge","apellido1": "Sánchez","dirección": {"calle": "C/ Falsa nº 0","localidad": "Palencia","código Postal": "34001","país": "España"

},"teléfonos": [{"tipo": "fijo","número": "999 999 999"

},{"tipo": "móvil",“numero": "666 666 666"

}]

}


@jorgesancheznet


•Markdown• Formato aparecido para facilitar crear documentos web• Creado por John Gruber con la ayuda de Aaron Schwartz• El objetivo es la máxima sencillez

# Título principal## Título de segundo nivelTexto de párrafo con *negrita* y **cursiva**


@jorgesancheznet

Tipos de lenguajes de marcas

•Orientados a la presentación. HTML, RTF

•Orientados a la descripción. XML, JSON, HTML 5

•Orientados a procedimientos. LaTeX, PostScript

Introducción a los Lenguajes de marcas - Jorge...

Documents

Transcript of Introducción a los Lenguajes de marcas - Jorge...