Introducció als llenguatges de marques

Què resol un llenguatge de marques?

Un llenguatge de marques combina dades i etiquetes que les marquen i que contenen informació addicional sobre l'estructura del text o la seva presentació.

Els llenguatges de marques s'utilitzen per estructurar i presentar informació de manera coherent, estandarditzada i comprensible per humans i màquines.

Les marques estan barrejades amb el propi text.

<persona>
    <nom>
        Sergi
    </nom>
    <cognom>
        Coll
    </cognom>
</persona>

Compartició d'informació

Les empreses necessiten compartir la informació entre elles (factures, comandes, etc).

La informació pot estar en diversos formats (fulles de càlcul, bases de dades, fitxer pdf, etc.).

Problema:

La informació no està estructurada.
Fa difícil l'automatització d'aquesta informació amb un sistema informàtic.

Solució:

Acordar quin format o estructura ha tenir la informació.
A més, podrem utilitzar eines estàndards per validar si el document compleix amb l'especificació acordada.

Llenguatges com XML, JSON i YAML permeten l'intercanvi de dades estructurades entre aplicacions diferents. També asseguren que els continguts siguin accessibles en diversos dispositius.

Característiques dels llenguatges de marques

Els llenguatges de marques estan basats en text.
- Poden ser creats i editats amb qualsevol editor de textos.
Són fàcilment transportables.
- La utilització de sistemes de codificació estàndards (UNICODE), fa els documents fàcilment transportables entre diferents sistemes (Linux, Windows,etc).
Però no estan pensats per ser llegits per una persona.
A diferència d'HTML si que es pot determinar de forma automàtica què signifiquen les dades.

Per exemple:

HTML

<html>
   <head><title>Professors</title></head>
   <body>
     <p>Pere Pi</p>
     <p>Marta Mata</p>
    <body>
</html>

XML

<professors>
  <professor>
    <nom>Pere</nom>
    <cognom>Pi</cognom>
  </professor>
  <professor>
    <nom>Marta</nom>
    <cognom>Mata</cognom>
  </professor>
</professors>

Es pot determinar automàticament:

Quina informació conté el fitxer?
Quina és l'estructura de la informació?
Quines etiquetes s'han creat per descriure'n la informació?

HTML (HyperText Markup Language)

El llenguatge de marques més conegut és l'HTML destinat a l'intercanvi d'informació a través d'Internet.

Definició: HTML és el llenguatge de marques més comú utilitzat per crear pàgines web. Defineix l'estructura bàsica d'una pàgina web mitjançant elements com títols, paràgrafs, enllaços i imatges.

Aplicabilitat: S'utilitza per estructurar el contingut web, definir hipervincles, imatges i proporcionar una base per a fulls d'estil (CSS) i JavaScript.

HTML: Exemple de Codi

<!DOCTYPE html>
<html>
  <head>
    <title>La Meva Pàgina Web</title>
  </head>
  <body>
    <h1>Benvinguts</h1>
    <p>Aquesta és una pàgina d'exemple.</p>
  </body>
</html>

Markdown

Definició: Markdown és un llenguatge de marques lleuger que s'utilitza comunament per escriure documentació, arxius README i contingut per a blocs o wikis.

Aplicabilitat: És ideal per a documents lleugers i fàcilment llegibles, i s'utilitza molt en plataformes com GitHub i altres gestors de versions.

Markdown: Exemple de Codi

# Títol Principal

Aquest és un paràgraf amb **negretes** i _cursives_.

- Element de llista
- Un altre element

[Enllaç a GitHub](https://github.com)

XML (Extensible Markup Language)

Definició: XML és un llenguatge de marques dissenyat per emmagatzemar i transportar dades.

A diferència d'HTML, XML no defineix etiquetes predefinides, sinó que permet als usuaris crear les seves pròpies etiquetes per adaptar-se a la informació que es vol representar.
És autodescriptiu i està dissenyat per ser tant llegible per màquines com per humans.

Aplicabilitat: És utilitzat en la transmissió de dades entre sistemes, especialment en entorns empresarials i governamentals, així com en arxius de configuració, documents estructurats i serveis web (com ara SOAP).

XML: Exemple

<llibre>
  <títol>El Petit Príncep</títol>
  <autor>Antoine de Saint-Exupéry</autor>
  <any>1943</any>
</llibre>

JSON (JavaScript Object Notation)

Definició: JSON és un format lleuger per a l'intercanvi de dades, basat en una estructura de parells clau-valor. Tot i que tècnicament no és un llenguatge de marques, s'utilitza àmpliament per a la transmissió de dades en aplicacions web.

Aplicabilitat: És molt utilitzat en APIs, en l'intercanvi de dades entre aplicacions i com a format per a arxius de configuració.

JSON: Exemple de Codi

{
  "nom": "Joan",
  "edat": 30,
  "ocupació": "Desenvolupador"
}

YAML (YAML Ain't Markup Language)

Definició: YAML és un format de serialització de dades que és més llegible i simple que JSON o XML. Es fa servir sovint en fitxers de configuració per la seva claredat i senzillesa.

Aplicabilitat: S'utilitza principalment en configuracions de programari, automatització de scripts i descripcions d'infraestructura com ara Kubernetes.

YAML: Exemple de Codi

persona:
  nom: "Anna"
  edat: 25
  ocupació: "Enginyera"

YAML: Exemple d'arxiu de configuració netplan (xarxa de linux)

network:
  version: 2
  renderer: networkd
  ethernets:
    enp3s0:
      addresses:
        - 10.10.10.2/24
      nameservers:
        search:
          - "mycompany.local"
        addresses:
          - 10.10.10.253
          - 8.8.8.8

LaTeX

Definició: LaTeX és un llenguatge de marques utilitzat per a la creació de documents científics i matemàtics. És especialment útil per incloure fórmules i equacions complexes de manera clara i estructurada.

Aplicabilitat: S'utilitza en la redacció d'articles acadèmics, tesis, llibres científics i qualsevol document que necessiti una composició tipogràfica precisa, especialment en matemàtiques.

LaTeX: Exemple de Codi

\documentclass{article}
\begin{document}
\title{El meu Document en LaTeX}
\author{Autor}
\date{\today}
\maketitle

\section{Introducció}
Aquest és un document d'exemple.

\end{document}

SVG (Scalable Vector Graphics)

Definició: SVG és un llenguatge de marques basat en XML per descriure gràfics vectorials escalables. Permet crear imatges i gràfics que es poden ampliar sense perdre qualitat.

Aplicabilitat: És útil per a il·lustracions, gràfics, i animacions en llocs web, ja que els gràfics vectorials poden ser redimensionats sense pèrdua de resolució.

SVG: Exemple de Codi

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

MathML (Mathematical Markup Language)

Definició: MathML és un llenguatge basat en XML dissenyat per descriure notacions matemàtiques i la seva estructura. És especialment útil per mostrar equacions matemàtiques en pàgines web de manera estructurada i comprensible.

Aplicabilitat: S'utilitza per incloure fórmules matemàtiques en documents interactius i llocs web que requereixen presentar contingut matemàtic de manera precisa.

MathML: Exemple de Codi

<math xmlns="http://www.w3.org/1998/Math/MathML">
  <msup>
    <mi>x</mi>
    <mn>2</mn>
  </msup>
</math>

CSV

Antigament per representar dades es feia separant els valors amb comes o algun altre símbol.

CSV: Exemple de Codi

"Nom","Cognom","Ofici","Naixament","Poblacio","Punts"
"Pere","Pi","Professor","10/04/1978","Olot",12
"Marta","Mata","Inforàtica","19/05/1990","Girona",20

S'ha de saber que la primera línia són metadades
Afegir-hi noves dades pot ser molt problemàtic pel programa que les llegeixi --> Probablement haurem de canviar el programa.
El format CSV (Comma separated value) encara s'utilitza molt en el món de la informàtica, per exportar/importar dades normalment.
- Es tracta d'enviar la informació utilitzant un caràcter per a separar cada un dels conceptes. Tot i que el nom pugui suggerir que sigui una coma, molts sistemes deixen definir el caràcter a utilitzar (punt i coma, salt de línia, ...)

AnteriorCSS SiguienteMarkdown

Última actualización hace 11 días

¿Te fue útil?