Salta el contingut

Introducció als Llenguatges de Marques

Qué és un llenguatge de marques?

Un llenguatge de marques (markup language) és un sistema de codificació que permet anotar un document amb informació adicional sobre el seu contingut, estructura o presentació. Aquestes anotacions (les "marques" o tags) s'intercalen amb el text pla i un processador pot interpretar-les per mostrar, transformar o intercanviar la informació.

La idea central és la separació entre contingut i forma: el document conté el text i les marques descriuen com s'ha d'interpretar, però la decisió de com presentar-lo pot canviar sense tocar el contingut.

Exemple senzill:
  Text pla:     Títol del document
  Amb marques:  <h1>Títol del document</h1>

Breu història

timeline
    title Evolució dels Llenguatges de Marques
    1969 : GML (IBM)
         : Generalised Markup Language
    1986 : SGML (ISO 8879)
         : Standard Generalized Markup Language
    1991 : HTML (Tim Berners-Lee)
         : Hipertext Markup Language per al web
    1998 : XML 1.0 (W3C)
         : Extensible Markup Language
    1999 : XHTML 1.0
         : HTML reformulat com a XML
    2001 : RSS/Atom
         : Sindicacio de continguts
    2006 : JSON (Douglas Crockford)
         : JavaScript Object Notation
    2008 : HTML5 (WHATWG)
         : Nova versio d'HTML
    2009 : Markdown
         : LM lleugero per a documentacio
    2014 : HTML5 (W3C recomanacio)
         : Estandard oficial

Avantatges dels Llenguatges de Marques

Els LM ofereixen beneficis clau respecte als formats binaris o propietaris:

Avantatge Descripció
Llegibilitat Els documents son text pla, llegibles per humans i màquines
Interoperabilitat Formats estàndards intercanviables entre sistemes heterogenis
Separació contingut/presentació El contingut és independent de com es mostra
Portabilitat No depenen de programari ni plataforma concreta
Extensibilitat XML permet definir vocabularis propis per a qualsevol domini
Validació Es pot comprovar formalment si un document és correcte

Miniactivitat AC03731

Cerca un exemple real de cada tipus de LM (HTML, XML, JSON, Markdown) i identifica: quin tipus d'informació representa, qui el genera, qui el consumeix.

Classificació dels Llenguatges de Marques

Per propòsit

flowchart TD
    LM[Llenguatges de Marques]
    LM --> PP[Propòsit General]
    LM --> PW[Presentació Web]
    LM --> DI[Intercanvi de Dades]
    LM --> DO[Documentació]

    PP --> XML[XML]
    PW --> HTML[HTML5]
    PW --> CSS[CSS3]
    DI --> JSON[JSON]
    DI --> YAML[YAML]
    DO --> MD[Markdown]
    DO --> RST[reStructuredText]

    style LM fill:#00695c,color:#fff
    style XML fill:#0277bd,color:#fff
    style HTML fill:#e65100,color:#fff
    style JSON fill:#558b2f,color:#fff
    style MD fill:#4527a0,color:#fff

Taula comparativa

LM Origen Propòsit principal Sintaxi Us actual
SGML ISO 1986 Meta-LM, base de tot <tag att="val"> Obsolet, base de HTML/XML
HTML W3C 1991 Presentació web <tag> Web (frontend)
XML W3C 1998 Intercanvi de dades <tag att="val"/> Serveis web, configuració
XHTML W3C 1999 HTML estricte com XML <tag/> Poc usat avui
JSON RFC 2006 Intercanvi dades web {"clau": valor} APIs REST, config
YAML 2001 Configuració clau: valor Kubernetes, CI/CD
Markdown 2004 Documentació ## Títol README, wikis, docs
RSS/Atom 2003/2005 Sindicació XML especialitzat Feeds de notícies

SGML: el pare de tots

SGML (Standard Generalized Markup Language, ISO 8879:1986) és el meta-llenguatge del qual deriven HTML i XML. Va ser creat per IBM per estructurar documents tècnics complexos.

Característiques principals: - Permet definir nous vocabularis de marques (DTDs) - Molt potent però també molt complex - HTML és un vocabulari SGML concret - XML és un subconjunt simplificat de SGML

<!-- Fragment SGML/HTML clàssic -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<HEAD><TITLE>Exemple</TITLE></HEAD>
<BODY>
<P>Un paràgraf
<P>Un altre (les etiquetes de tancament eren opcionals!)
</BODY>
</HTML>

HTML: el web

HTML (HyperText Markup Language) va ser creat per Tim Berners-Lee el 1991 per compartir documents científics. Avui és la base de qualsevol pàgina web.

HTML5 (2014) va incorporar: - Etiquetes semàntiques: <header>, <nav>, <main>, <article>, <footer> - Suport natiu per àudio i vídeo: <audio>, <video> - APIs JavaScript: Canvas, WebStorage, Geolocation - Formularis avançats: nous tipus d'input

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <title>Exemple HTML5</title>
</head>
<body>
    <header>
        <h1>El meu lloc web</h1>
        <nav>
            <a href="/">Inici</a>
            <a href="/contacte">Contacte</a>
        </nav>
    </header>
    <main>
        <article>
            <h2>Un article</h2>
            <p>Contingut de l'article.</p>
        </article>
    </main>
</body>
</html>

XML: l'intercanvi universal

XML (eXtensible Markup Language) va ser publicat pel W3C el 1998. A diferència d'HTML, XML no defineix etiquetes fixes: cada aplicació pot definir les seves pròpies.

Casos d'ús comuns: - Serveis web (SOAP, REST amb XML) - Fitxers de configuració (Maven pom.xml, AndroidManifest.xml) - Formats de documents (OOXML per a .docx, .xlsx) - Sindicació de continguts (RSS, Atom) - Intercanvi entre sistemes empresarials (ERP, facturació electrònica)

<?xml version="1.0" encoding="UTF-8"?>
<factura id="F2024001">
    <emissor>
        <nom>Empresa SA</nom>
        <nif>A12345678</nif>
    </emissor>
    <receptor>
        <nom>Client SL</nom>
        <nif>B87654321</nif>
    </receptor>
    <linia producte="P001" quantitat="5" preu="10.50"/>
    <total>52.50</total>
</factura>

JSON: lleugero i omnipresent

JSON (JavaScript Object Notation) va ser popularitzat per Douglas Crockford vers el 2006. Tot i ser menys expressiu que XML, la seva simplicitat l'ha convertit en el format preferit per a les APIs REST.

La mateixa factura en JSON:

{
  "factura": {
    "id": "F2024001",
    "emissor": {
      "nom": "Empresa SA",
      "nif": "A12345678"
    },
    "receptor": {
      "nom": "Client SL",
      "nif": "B87654321"
    },
    "linies": [
      { "producte": "P001", "quantitat": 5, "preu": 10.50 }
    ],
    "total": 52.50
  }
}

XML vs JSON

XML és més expressiu (atributs, namespaces, comentaris, CDATA) i té més eines de validació i transformació (XSD, XSLT). JSON és més compacte i fàcil de processar en JavaScript. Per a APIs web modernes s'usa JSON; per a sistemes empresarials complexos, XML.

Markdown: documentació àgil

Markdown va ser creat per John Gruber el 2004. S'usa massivament per a documentació tècnica (GitHub, GitLab, Confluence, MkDocs).

# Títol principal

## Secció

Un paràgraf amb **negreta** i *cursiva*.

- Element de llista
- Altre element

```python
print("Hola món")

Un enllaç ```

Miniactivitat AC03732

Crea un document XML que representi una llista de 3 alumnes del teu grup amb nom, cognoms i nota final. Assegura't que el document sigui ben format.