class: center, middle, inverse

# Llenguatges de marques
### Introducció

.footnote[Mateu Yábar]

---
# Exercici 1
- Us voleu guardar en un fitxer de text simple, sense estils, (useu pluma) la informació d'una pel·lícula (títol, any i argument). Crea un fitxer i posa-hi les dades d'una pel·lícula.

---
# Exercici 1 - preguntes
- Si passeu el fitxer a un company l'entendrà?
- Creieu que és fàcil de llegir per un programa informàtic?

---
# Exercici 2
- Teniu una petita biblioteca a casa i voleu guardar en un fitxer de text els llibres que teniu. Creeu un fitxer de text i escriviu la informació de 5 llibres.

---
# Exercici 2 - preguntes
- Si passeu el fitxer a un company l'entendrà?
- Creieu que és fàcil de llegir per un programa informàtic?

---
# Exercici 3
- Voleu fer una partida d'enfonsar la flota entre dos amics a quilometres de distància i us voleu enviar els torns per correu. Fes un exemple de comunicacíó.

---
# Exercici 3 - preguntes
- Si passeu el fitxer a un tercer company l'entendrà?
- Creieu que és fàcil de llegir per un programa informàtic?

---
# Exercici 4
- Voleu guardar en un fitxer de text un petit text amb format (amb un títol, un subtítol i un llistat). Crea un fitxer de text pla que contingui la informació següent:

## títol
### subtítol

- ítem 1
- ítem 2

---
# Exercici 4 - preguntes
- Si passeu el fitxer a un tercer company l'entendrà?
- Creieu que és fàcil de llegir per un programa informàtic?

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

---
# Llenguatge de marques extensible

Un format que ens defineix un llenguatge de marques genèric, que podem usar per emmagatzemar diferents problemes.

---
# XML - exercici 1
```xml
<pelicula>
  <titol>Snatch (porcs i diamants)</titol>
  <any>2000</any>
  <argument>El destí creuat de diversos personatges, entre 
  els quals Franky anomenat "Franky quatre dits" que ha de 
  lliurar al "Cosí Avi", un mafiós novaiorquès, un enorme 
  diamant que acaba de robar.</argument>
</pelicula>
```
---
# JSON - exercici 1
```json
{
  "titol": "Snatch (porcs i diamants)",
  "any": 2000,
  "argument": "El destí creuat de diversos personatges, (...)"
}
```
---
# YAML - exercici 1
```yaml
titol: Snatch (porcs i diamants)
any: 2000
argument: El destí creuat de diversos personatges, entre (...)
```
---
# XML - exercici 2
```xml
<biblioteca>
  <llibre>
    <titol>Xml for dummies</titol>
    <autor>John Johnson</autor>
  </llibre>
  <llibre>
    <titol>Llenguatges de marques per experts</titol>
    <autor>Pere Guarch</autor>
  </llibre>
</biblioteca>
```
---
# JSON - exercici 2
```json
[
  {
    "titol": "Xml for dummies",
    "autor": "John Johnson"
  },
  {
    "titol": "Llenguatges de marques per experts", 
    "autor": "Pere Guarch"
  }
]
```
---
# YAML - exercici 2
```yaml
- titol: Xml for dummies
  autor: John Johnson
- titol: Llenguatges de marques per experts
  autor: Pere Guarch
```
---
# HTML - exercici 4
```html
<h1>títol</h1>
<h2>subtítol</h2>
<ul>
  <li>item1</li>
  <li>item2</li>
</ul>
```
---
# Markdown  - exercici 4
```markdown
# Títol
## Subtítol

- item1
- item2
```
---
# Enmagatzematge i utilitats
- Fitxer local
- Dins d'una base de dades
- Intercanvi d'informació (API, socket...)

---
# Classificació dels llenguatges de marques

- __Llenguatges procedimentals i de presentació__: orientats a especificar com s'ha de representar la informació.
- __Llenguatges descriptius o semàntics__: orientats a descriure l'estructura de les dades que conté.
---
# Exercici
Classifica els llenguatges dels exemples segons els si són de presentació o descriptius.