class: center, middle, inverse
# Llenguatges de marques
### Xml

.footnote[Mateu Yábar]

---
# Xml
- Llenguatge de marques extensible
- Llenguatge descriptiu o semàntic

---
# Usos del XML
- OpenOffice.org  i Office
  - Zip amb xmls
- HTML (pàgines web)
- SVG - imatges vectorials
- MPEG-7 - representació estàndard de la informació audiovisual
- Progamació Android
- (...)

---
# Etiquètes
```xml
<etiqueta>contingut</etiqueta>
```

```xml
<nom>Pere Martí</nom>
```
---
# Contingut - text

```xml
<etiqueta>
  text de contingut
</etiqueta>
```

```xml
<nom>Pere Martí</nom>
```
---
# Contingut - altres etiquetes

```xml
<etiqueta>
  <subetiqueta>
  </subetiqueta>
</etiqueta>
```

```xml
<treballador>
  <nom>Pere Martí</nom>
  <adreca>Av Meridiana 222</adreca>
</treballador>
```
---
# Contingut - mixte

```xml
<treballador>
  <nom>Pere Martí</nom>
  <descripcio>
    Pot treballar de <treball>paleta</treball>
  </descripcio>
</treballador>
```
---
# Contingut - sense contingut
Podem abreviar 
```xml
<etiqueta></etiqueta>
```

com a

```xml
<etiqueta/>
```

---
# Atributs
```xml
<nom càrrec="director">Pere Marti</nom>
```

- L'ordre en què apareixen els atributs no té cap importància

---
class: long_code
# Exercicis basics

- Exercici 1
<div class="countdown" data-countdown="8"></div>
- Exercici 2
<div class="countdown" data-countdown="8"></div>
- Exercici 3
<div class="countdown" data-countdown="8"></div>

---
# Pregunta
- Quan has usat atributs i quan etiquetes?

---
# Caracters reservats
```
<  & lt;
>  & gt;
&  & amp;
```

En atributs
```
”  & quot;
’  & apos;
```

---
# Seccions CDATA
El que estigui dins d’una secció CDATA no serà interpretat per cap programa
  - No haurem de escapar caràcters reservats

```xml
<titol>
  <![CDATA[
    Els documents HTML comencen per <HTML>
  ]]>
</titol>
```
---
# Comentaris
```xml
<professors>
<nom>Marcel Alaba</nom>
</professors>
<!−− Llista d’alumnes −−>
<alumnes>
<nom>Frederic Garcia</nom>
<nom>Federicu Pi</nom>
</alumnes>
```
---
# Exercicis XML escapats
- Exercici 4
<div class="countdown" data-countdown="8"></div>

---
# Instruccions de procés
Les instruccions de procés són una manera de donar instruccions als programes que llegiran el document. Es defineixen dins dels símbols ”<?” i posteriorment sempre s'hi ha d'especificar a quin programa van dirigides amb l'única restricció que no poden ser les lletres “XML” en qualsevol combinació de majúscules o minúscules.
```xml
<?php ... ?>
```
---
# Declaració XML
- És opcional, tot i que es considera recomanable
- La declaració ha d'estar en la primera línia del document i ha de començar en el primer caràcter del document.
- Ha de tenir obligatòriament l'atribut version, que actualment només pot ser 1.0 o 1.1 .
```xml
<?xml version="1.0"?>
```
---
# Declaració XML - encoding
- És opcional
- L'atribut encoding permet definir amb quin codi de caràcters s'han codificat les
dades.
```xml
<?xml version="1.0" encoding="UTF-8"?>
```
---
# Correctesa
Només hi pot haver un element arrel.
El següent és incorrecte

```xml
<persona>
  <nom>Pere Garcia</nom>
</persona>
<gos>
  <nom>Rufy</nom>
</gos>
```
---
# Correctesa
Totes les etiquetes que sobrin han de ser tancades obligatòriament.

```xml
<persona>
  <nom>Pere Garcia
</persona>
```
---
# Correctesa
Les etiquetes han d'estar imbricades correctament
```xml
<persona><nom>Pere</persona></nom>
```
---
# Correctesa
Els noms de les etiquetes i dels atributs han de ser correctes

- No es poden posar noms que no comencin per un caràcter ni que continguin
espais dins seu.
```xml
<incorrectes>
  <3nocaracter/>
  <amb espais/>
</amb>
```

---
# Correctesa
Els noms de les etiquetes i dels atributs han de ser correctes

- Les majúscules i les minúscules són caràcters diferents per a XML.
```xml
<persona>Pere</Persona>
```

---
# Correctesa
Els noms de les etiquetes i dels atributs han de ser correctes

- Els noms que comencin per xml estan reservats.
```xml
<persona xmlpersona="si">Pere</persona>
```

---
# Correctesa
Els valors dels atributs han d'estar entre cometes
```xml
<alumne nom=Pere aprovat />
```

---
# Exercici correctesa
- Exercici 1
<div class="countdown" data-countdown="8"></div>

---
# Exercici
- Qualitat de l'aire XML
- Obrir docx

---
# Exercici Receptes

- Exercici Xml receptes
<div class="countdown" data-countdown="20"></div>

---
# Namespaces
- El següent xml és un HTML. Cada etiqueta té un significat de com s'ha de mostrar el text a un usuari.
  - __h1__ es titol-1
  - __h2__ és titol2
  - __a__ és un link

```html
<h1>títol</h1>
<h2>subtítol</h2>
<a href="http://itb.cat">link</a>
```

---
# Namespaces
- Suposem que nosaltres creem un xml per guardar correus electronics amb el següent format, on
  - __email__ conté el contingut d'un correu
  - __de__ és l'origen
  - __a__ és el destí
  - __missatge__ és el text del correu

```html
<email>
  <de>otelbruixot@itb.cat</de>
  <a>felixelgat@itb.cat</a>
  <missatge>Hola Felix!</missatge>
</email>
```

---
# Namespaces
- Si algú intenta enviar un correu amb html a dins, pot passar el següent:

```html
<email>
  <de>otelbruixot@itb.cat</de>
  <a>felixelgat@itb.cat</a>
  <missatge>
    <h2>subtítol</h2>
    <a href="http://itb.cat">link</a>
  </missatge>
</email>
```

- Tenim un conflicte. No sabem si la `<a>` és el destí o un link.

---
# Namespaces
- Els Namespaces ens serveixen per evitar conflictes de noms

```xml
<etiqueta xmlns:CODI="URL_DEL_NAMESPACE">
  <CODI:etiqueta2/>
</etiqueta>
```

```xml
<email:email xmlns:email="http://itb.mateuyabar.cat/M04/UF1/exemple_mail">
  <email:de>otelbruixot@itb.cat</email:de>
  <email:a>felixelgat@itb.cat</email:a>
  <email:missatge>
    <h2>subtítol</h2>
    <a href="http://itb.cat">link</a>
  </email:missatge>
</email:email>
```

---
# Namespaces

```html
<email:email xmlns:email="http://itb.mateuyabar.cat/M04/UF1/exemple_mail" xmlns:h="http://www.w3.org/TR/html4/">
  <email:de>otelbruixot@itb.cat</email:de>
  <email:a>felixelgat@itb.cat</email:a>
  <email:missatge>
    <h:h2>subtítol</h:h2>
    <h:a href="http://itb.cat">link</h:a>
  </email:missatge>
</email:email>
```