TocaWiki - User contributions [en]

M3

2024-09-14T16:17:03Z

Jaume: Created page with "RA1"

[[RA1]]

CIBER

2024-09-14T16:16:40Z

Jaume: Created page with "M3"

[[M3]]

Main Page

2024-09-14T16:16:30Z

Jaume:

[[DAW]]

[[ASIX]]

[[CIBER]]

XML Schema

2024-03-22T14:21:07Z

Jaume:

Són una sintàxi alternativa per a les DTDs.
Utilitzen la sintàxi pròpia de XML
Avantatges:
*Fàcils d'aprendre
*Suporten tipus de dades: numérics, dates...
*Procesables igual que els documents XML

=Què hi ha a un esquema XML=
Un esquema XML defineix la estructura válida per un tipus de document XML, es a dir defineix:
*Els elements que poden aparèixer al document.
*Els atributs que es poden utilitzar juntament a cada element.
*Com es poden niuar els elements (Pares i fills)
*L'ordre en el que apareixen els elements fills d'un mateix pare.
*El nombre permès dels elements fills
*Si un element pot ser buit o no.
*Tipus de dades per a elements i atributs.
*Valors per defecte i fixos per a elements i atributs.
==Altres avantatges dels esquemes==
*Més precisió que en les DTD en la definició de tipus de dades mitjançant formats i restriccions.
*Per exemple, en una data:
<source language="html">
<date type="date">1999-03-11</date>
</source>
*Els esquemes es defineixen com a documents XML. En un document a part amb l'extensió .xsd.
*Els documents XML es basen en aquest esquema, incluirem una referència a l'arxiu .xsd
==Com associar esquemes a documents XML==
<source language="xml">
<?xml version="1.0"?>
<note xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="note.xsd">
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>
Don't forget me this weekend!
</body>
</note>
</source>

==Exemple esquema W3C==
<source language="xml">
<?xml version="1.0"?>
<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema”>
<xs:element name="note">
<xs:complexType>
<xs:sequence>
<xs:element name="to" type="xs:string"/>
<xs:element name="from" type="xs:string"/>
<xs:element name="heading" type="xs:string"/>
<xs:element name="body" type="xs:string"/>
</xs:sequence>
</xs:complexType>
</xs:element>
</xs:schema>
</source>
=Esquemes XML – elements schema=
Els elements utilitzats en la creació d'un esquema “procedeixen” de l'espai de noms:
<source language="xml">
http://www.w3.org/2001/XMLSchema
</source>
L'element Schema es l'element arrel del document que defineix l'esquema:
<source language="xml">
<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema">
</xs:schema>
</source>
==Esquemes XML – elements “simples”==
Un element simple és un element que només pot contenir text (qualsevol tipus de dada), però no altres elements ni atributs.
Per a definir un element simple utilitzem la sintaxis:
<source language="xml">
<xs:element name="xxx" type="yyy"/>
</source>
==Exemples==
<source language="xml">
<xs:element name=“apellido” type="xs:string"/>
<xs:element name=“edad" type="xs:integer"/>
<xs:element name=“fecNac" type="xs:date"/>
</source>
=Esquemes XML – elements “simples”,tipus de dades=
Els tipus de dades més utilitzats són:
*xs:string
*xs:decimal
*xs:integer
*xs:boolean
*xs:date
*xs:time
Un element simple pot tenir un valor per defecte I
un valor “fixe”.
S'indica mitjançant els atributs default I fixed:
<source language="xml">
<xs:element name="color" type="xs:string" default="red"/>
</source>

==Restriccions - Enumeració==
<source language="xml">
<xs:element name="car">
<xs:simpleType>
<xs:restriction base="xs:string">
<xs:enumeration value="Audi"/>
<xs:enumeration value="Golf"/>
<xs:enumeration value="BMW"/>
</xs:restriction>
</xs:simpleType>
</xs:element>
</source>

==Restriccions - Pattern string==
<source language="xml">
<xs:element name="letter">
<xs:simpleType>
<xs:restriction base="xs:string">
<xs:pattern value="[a-z]"/>
</xs:restriction>
</xs:simpleType>
</xs:element>
</source>
En aquest exemple, l'element “letter” ha de prendre
com a valor una lletra minúscula.

==Restriccions - Pattern string==
<source language="xml">
<xs:element name="initials">
<xs:simpleType>
<xs:restriction base="xs:string">
<xs:pattern value="[a-zA-Z][a-zA-Z][a-zA-Z]"/>
</xs:restriction>
</xs:simpleType>
</xs:element>
</source>
En aquest exemple l'element “initials” ha de prendre com a valor 3 lletres majúscules o minúscules.

==Restriccions - Pattern string==
<source language="xml">
<xs:element name="choice">
<xs:simpleType>
<xs:restriction base="xs:string">
<xs:pattern value="[xyz]"/>
</xs:restriction>
</xs:simpleType>
</xs:element>
</source>
En aquest exemple, l'element “choice” ha de prendre com a
valor una d'aquestes lletres: x, y o z

==Restriccions - Pattern integer==
<source language="xml">
<xs:element name="prodid">
<xs:simpleType>
<xs:restriction base="xs:integer">
<xs:pattern value="[0-9][0-9][0-9][0-9][0-9]"/>
</xs:restriction>
</xs:simpleType>
</xs:element>
</source>

==Restriccions - Pattern string==
<source language="xml">
<xs:element name="letter">
<xs:simpleType>
<xs:restriction base="xs:string">
<xs:pattern value="([a-z])*"/>
</xs:restriction>
</xs:simpleType>
</xs:element>
</source>

==Restriccions - Pattern string==
<source language="xml">
<xs:element name="password">
<xs:simpleType>
<xs:restriction base="xs:string">
<xs:pattern value="[a-zA-Z0-9]{8}"/>
</xs:restriction>
</xs:simpleType>
</xs:element>
</source>
En aquest exemple, el valor del camp “password” ha de ser
de 8 caràcters.

==Restriccions - Longitud string==
<source language="xml">
<xs:element name="password">
<xs:simpleType>
<xs:restriction base="xs:string">
<xs:length value="8"/>
</xs:restriction>
</xs:simpleType>
</xs:element>
</source>
Els elements length, minLength y maxLength permeten
indicar el número exacte, mínim i màxim de caràcters que
pot tenir un valor d'un element.
==Restriccions - Restriccions per valor==
Si volem restringir un valor de l'xml, com per exemple que sigui més gran que 5, que sigui més petit que 2, etc... Podem utilitzar els element minInclusive, maxInclusive, minExclusive i maxExclusive.
Per exemple, per declarar que volem que un valor tingui un valor superior o igual a 4, podriem especificar-ho:
<source language="xml">
<xs:element name="numRodes">
<xs:simpleType>
<xs:restriction base="xs:integer">
<xs:minInclusive value="4"/>
</xs:restriction>
</xs:simpleType>
</xs:element>
</source>
So volguéssim especificar que el valor sigui més gran que 4 i mes petit o igual a 8:
<source language="xml">
<xs:element name="numRodes">
<xs:simpleType>
<xs:restriction base="xs:integer">
<xs:minExclusive value="4"/>
<xs:maxInclusive value="8"/>
</xs:restriction>
</xs:simpleType>
</xs:element>
</source>

=Declarar elements complexos=
Els elements complexos són aquells que dins seu contenen altres elements simples o complexos.<br />
Donat un xml com per exemple:
<source>
<employee>
<firstname>John</firstname>
<lastname>Smith</lastname>
</employee>
</source>
Els elements complexos els podem declarar de dues maneres diferents:
* '''Dins del mateix element'''
En el moment de definir l'element complex, dins seu ja definim l'estructura del tipus complex.
<source>
<xs:element name="employee">
<xs:complexType>
<xs:sequence>
<xs:element name="firstname" type="xs:string"/>
<xs:element name="lastname" type="xs:string"/>
</xs:sequence>
</xs:complexType>
</xs:element>
</source>
* '''Creant un tipus personalitzat'''
Podem definir un tipus complex personalitzat, i assignar a l'element que volem definir aquest tipus personalitzat que hem creat.
<source>
<xs:element name="employee" type="personinfo"/>

<xs:complexType name="personinfo">
<xs:sequence>
<xs:element name="firstname" type="xs:string"/>
<xs:element name="lastname" type="xs:string"/>
</xs:sequence>
</xs:complexType>
</source>
D'aquesta segona manera podem "reaprofitar" el tipus personalitzat que hem creat en diversos elements del nostre xml, de manera que el codi ens quedarà més curt i ben organitzat. Serà, per tant, la manera en la que declararem els tipus complexos en els nostres exercicis.
<source>
<xs:element name="employee" type="personinfo"/>
<xs:element name="student" type="personinfo"/>
<xs:element name="member" type="personinfo"/>

<xs:complexType name="personinfo">
<xs:sequence>
<xs:element name="firstname" type="xs:string"/>
<xs:element name="lastname" type="xs:string"/>
</xs:sequence>
</xs:complexType>
</source>
=Atributs=
Els elements que contenen atributs son considerats com elements complexos. Per tant la seva definició serà semblants a la d'un element complex afegint l'etiqueta '''''xs:attribute'''''.<br/>
Caldrà diferenciar entre tres diferents tipus d'elements complexes amb atributs:
* '''Element buit'''
En el següent xml:
<source>
<Author>
<Name>
<FirstName>Mark</FirstName>
<LastName>Twain</LastName>
</Name>
<HomePage URL="http://www.marktwain.com"/>
</Author>
</source>
El codi XML Schema que validaria que l'element '''HomePage''' té un atribut ''URL'' seria els següent:
<source>
<xs:element name="HomePage">
<xs:complexType>
<xs:attribute name="URL" type="xs:anyURI"/>
</xs:complexType>
</xs:element>
</source>
* '''Element simple'''
Si l'element a definir és de tipus simple com el següent:
<source>
<Author>
<Name Pseudonym="true" HomePage="http://www.nathanielhawthorne.com">
<FirstName Full="false">Nat</FirstName>
<LastName>Hawthorne</LastName>
</Name>
</Author>
</source>
El codi XML Schema que validaria que l'element ''FirstName'' té un atribut ''Full'' seria:
<source>
<xs:element name="FirstName">
<xs:complexType>
<xs:simpleContent>
<xs:extension base="xs:string">
<xs:attribute name="Full" type="xs:boolean"/>
</xs:extension>
</xs:simpleContent>
</xs:complexType>
</xs:element>
</source>
* '''Element complex'''
Si l'atribut a validar es troba en un element de tipus complex, com per exemple:
<source>
<Author>
<Name Pseudonym="true" HomePage="http://www.marktwain.com">
<FirstName>Mark</FirstName>
<LastName>Twain</LastName>
</Name>
</Author>
</source>
S'hauria de validar de la següent manera:
<source>
<xs:element name="Name">
<xs:complexType>
<xs:sequence>
<xs:element name="FirstName" type="xs:string"/>
<xs:element name="LastName" type="xs:string"/>
</xs:sequence>
<xs:attribute name="Pseudonym" type="xs:boolean"/>
<xs:attribute name="HomePage" type="xs:anyURI"/>
</xs:complexType>
</xs:element>
</source>
=Indicadors=
En els exemples anteriors hem utilitzat l'element
xs:sequence com element fill de l'element xs:complexType
xs:sequence indica que els elements anidats dintre d'ell han d'apareixer en un ordre determinat.
Altres opcions o indicadors són: xs:all y xs:choice
==Indicador xs:all==
L'indicador xs:all indica que els elements que conté poden
aparèixer en cualsevol ordre però com a màxim una vegada.
<source language="xml">
<xs:element name="person">
<xs:complexType>
<xs:all>
<xs:element name="firstname" type="xs:string"/>
<xs:element name="lastname" type="xs:string"/>
</xs:all>
</xs:complexType>
</xs:element>
</source>

==Indicador xs:choice==
L'indicador xs:choice indica que pot aparèixer només un els delements que conté:
<source language="xml">
<xs:element name="person">
<xs:complexType>
<xs:choice>
<xs:element name="firstname" type="xs:string"/>
<xs:element name="lastname" type="xs:string"/>
</xs:choice>
</xs:complexType>
</xs:element>
</source>

==maxOccurs i minOccurs==
Aquests indidcadors s'utilitzen per a indicar el nombre máxim I mínim de vegades que pot aparèixer un element fill d'un element compelx.
L'atribut maxOccurs pot prendre el valor “unbounded”, que indica que no existeix cap limit.
<source language="xml">
<xs:element name="person">
<xs:complexType>
<xs:sequence>
<xs:element name="full_name" type="xs:string"/>
<xs:element name="child_name" type="xs:string" maxOccurs="10"/>
</xs:sequence>
</xs:complexType>
</xs:element>
</source>

XML Schema

2024-03-22T14:20:25Z

Jaume: Created page with "Són una sintàxi alternativa per a les DTDs. Utilitzen la sintàxi pròpia de XML Avantatges: *Fàcils d'aprendre *Suporten tipus de dades: numérics, dates... *Procesables..."

Són una sintàxi alternativa per a les DTDs.
Utilitzen la sintàxi pròpia de XML
Avantatges:
*Fàcils d'aprendre
*Suporten tipus de dades: numérics, dates...
*Procesables igual que els documents XML

=Qué hi ha a un esquema XML=
Un esquema XML defineix la estructura válida per un tipus de document XML, es a dir defineix:
*Els elements que poden aparèixer al document.
*Els atributs que es poden utilitzar juntament a cada element.
*Com es poden niuar els elements (Pares i fills)
*L'ordre en el que apareixen els elements fills d'un mateix pare.
*El nombre permès dels elements fills
*Si un element pot ser buit o no.
*Tipus de dades per a elements i atributs.
*Valors per defecte i fixos per a elements i atributs.
==Altres avantatges dels esquemes==
*Més precisió que en les DTD en la definició de tipus de dades mitjançant formats i restriccions.
*Per exemple, en una data:
<source language="html">
<date type="date">1999-03-11</date>
</source>
*Els esquemes es defineixen com a documents XML. En un document a part amb l'extensió .xsd.
*Els documents XML es basen en aquest esquema, incluirem una referència a l'arxiu .xsd
==Com associar esquemes a documents XML==
<source language="xml">
<?xml version="1.0"?>
<note xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="note.xsd">
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>
Don't forget me this weekend!
</body>
</note>
</source>

==Exemple esquema W3C==
<source language="xml">
<?xml version="1.0"?>
<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema”>
<xs:element name="note">
<xs:complexType>
<xs:sequence>
<xs:element name="to" type="xs:string"/>
<xs:element name="from" type="xs:string"/>
<xs:element name="heading" type="xs:string"/>
<xs:element name="body" type="xs:string"/>
</xs:sequence>
</xs:complexType>
</xs:element>
</xs:schema>
</source>
=Esquemes XML – elements schema=
Els elements utilitzats en la creació d'un esquema “procedeixen” de l'espai de noms:
<source language="xml">
http://www.w3.org/2001/XMLSchema
</source>
L'element Schema es l'element arrel del document que defineix l'esquema:
<source language="xml">
<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema">
</xs:schema>
</source>
==Esquemes XML – elements “simples”==
Un element simple és un element que només pot contenir text (qualsevol tipus de dada), però no altres elements ni atributs.
Per a definir un element simple utilitzem la sintaxis:
<source language="xml">
<xs:element name="xxx" type="yyy"/>
</source>
==Exemples==
<source language="xml">
<xs:element name=“apellido” type="xs:string"/>
<xs:element name=“edad" type="xs:integer"/>
<xs:element name=“fecNac" type="xs:date"/>
</source>
=Esquemes XML – elements “simples”,tipus de dades=
Els tipus de dades més utilitzats són:
*xs:string
*xs:decimal
*xs:integer
*xs:boolean
*xs:date
*xs:time
Un element simple pot tenir un valor per defecte I
un valor “fixe”.
S'indica mitjançant els atributs default I fixed:
<source language="xml">
<xs:element name="color" type="xs:string" default="red"/>
</source>

==Restriccions - Enumeració==
<source language="xml">
<xs:element name="car">
<xs:simpleType>
<xs:restriction base="xs:string">
<xs:enumeration value="Audi"/>
<xs:enumeration value="Golf"/>
<xs:enumeration value="BMW"/>
</xs:restriction>
</xs:simpleType>
</xs:element>
</source>

==Restriccions - Pattern string==
<source language="xml">
<xs:element name="letter">
<xs:simpleType>
<xs:restriction base="xs:string">
<xs:pattern value="[a-z]"/>
</xs:restriction>
</xs:simpleType>
</xs:element>
</source>
En aquest exemple, l'element “letter” ha de prendre
com a valor una lletra minúscula.

==Restriccions - Pattern string==
<source language="xml">
<xs:element name="initials">
<xs:simpleType>
<xs:restriction base="xs:string">
<xs:pattern value="[a-zA-Z][a-zA-Z][a-zA-Z]"/>
</xs:restriction>
</xs:simpleType>
</xs:element>
</source>
En aquest exemple l'element “initials” ha de prendre com a valor 3 lletres majúscules o minúscules.

==Restriccions - Pattern string==
<source language="xml">
<xs:element name="choice">
<xs:simpleType>
<xs:restriction base="xs:string">
<xs:pattern value="[xyz]"/>
</xs:restriction>
</xs:simpleType>
</xs:element>
</source>
En aquest exemple, l'element “choice” ha de prendre com a
valor una d'aquestes lletres: x, y o z

==Restriccions - Pattern integer==
<source language="xml">
<xs:element name="prodid">
<xs:simpleType>
<xs:restriction base="xs:integer">
<xs:pattern value="[0-9][0-9][0-9][0-9][0-9]"/>
</xs:restriction>
</xs:simpleType>
</xs:element>
</source>

==Restriccions - Pattern string==
<source language="xml">
<xs:element name="letter">
<xs:simpleType>
<xs:restriction base="xs:string">
<xs:pattern value="([a-z])*"/>
</xs:restriction>
</xs:simpleType>
</xs:element>
</source>

==Restriccions - Pattern string==
<source language="xml">
<xs:element name="password">
<xs:simpleType>
<xs:restriction base="xs:string">
<xs:pattern value="[a-zA-Z0-9]{8}"/>
</xs:restriction>
</xs:simpleType>
</xs:element>
</source>
En aquest exemple, el valor del camp “password” ha de ser
de 8 caràcters.

==Restriccions - Longitud string==
<source language="xml">
<xs:element name="password">
<xs:simpleType>
<xs:restriction base="xs:string">
<xs:length value="8"/>
</xs:restriction>
</xs:simpleType>
</xs:element>
</source>
Els elements length, minLength y maxLength permeten
indicar el número exacte, mínim i màxim de caràcters que
pot tenir un valor d'un element.
==Restriccions - Restriccions per valor==
Si volem restringir un valor de l'xml, com per exemple que sigui més gran que 5, que sigui més petit que 2, etc... Podem utilitzar els element minInclusive, maxInclusive, minExclusive i maxExclusive.
Per exemple, per declarar que volem que un valor tingui un valor superior o igual a 4, podriem especificar-ho:
<source language="xml">
<xs:element name="numRodes">
<xs:simpleType>
<xs:restriction base="xs:integer">
<xs:minInclusive value="4"/>
</xs:restriction>
</xs:simpleType>
</xs:element>
</source>
So volguéssim especificar que el valor sigui més gran que 4 i mes petit o igual a 8:
<source language="xml">
<xs:element name="numRodes">
<xs:simpleType>
<xs:restriction base="xs:integer">
<xs:minExclusive value="4"/>
<xs:maxInclusive value="8"/>
</xs:restriction>
</xs:simpleType>
</xs:element>
</source>

=Declarar elements complexos=
Els elements complexos són aquells que dins seu contenen altres elements simples o complexos.<br />
Donat un xml com per exemple:
<source>
<employee>
<firstname>John</firstname>
<lastname>Smith</lastname>
</employee>
</source>
Els elements complexos els podem declarar de dues maneres diferents:
* '''Dins del mateix element'''
En el moment de definir l'element complex, dins seu ja definim l'estructura del tipus complex.
<source>
<xs:element name="employee">
<xs:complexType>
<xs:sequence>
<xs:element name="firstname" type="xs:string"/>
<xs:element name="lastname" type="xs:string"/>
</xs:sequence>
</xs:complexType>
</xs:element>
</source>
* '''Creant un tipus personalitzat'''
Podem definir un tipus complex personalitzat, i assignar a l'element que volem definir aquest tipus personalitzat que hem creat.
<source>
<xs:element name="employee" type="personinfo"/>

<xs:complexType name="personinfo">
<xs:sequence>
<xs:element name="firstname" type="xs:string"/>
<xs:element name="lastname" type="xs:string"/>
</xs:sequence>
</xs:complexType>
</source>
D'aquesta segona manera podem "reaprofitar" el tipus personalitzat que hem creat en diversos elements del nostre xml, de manera que el codi ens quedarà més curt i ben organitzat. Serà, per tant, la manera en la que declararem els tipus complexos en els nostres exercicis.
<source>
<xs:element name="employee" type="personinfo"/>
<xs:element name="student" type="personinfo"/>
<xs:element name="member" type="personinfo"/>

<xs:complexType name="personinfo">
<xs:sequence>
<xs:element name="firstname" type="xs:string"/>
<xs:element name="lastname" type="xs:string"/>
</xs:sequence>
</xs:complexType>
</source>
=Atributs=
Els elements que contenen atributs son considerats com elements complexos. Per tant la seva definició serà semblants a la d'un element complex afegint l'etiqueta '''''xs:attribute'''''.<br/>
Caldrà diferenciar entre tres diferents tipus d'elements complexes amb atributs:
* '''Element buit'''
En el següent xml:
<source>
<Author>
<Name>
<FirstName>Mark</FirstName>
<LastName>Twain</LastName>
</Name>
<HomePage URL="http://www.marktwain.com"/>
</Author>
</source>
El codi XML Schema que validaria que l'element '''HomePage''' té un atribut ''URL'' seria els següent:
<source>
<xs:element name="HomePage">
<xs:complexType>
<xs:attribute name="URL" type="xs:anyURI"/>
</xs:complexType>
</xs:element>
</source>
* '''Element simple'''
Si l'element a definir és de tipus simple com el següent:
<source>
<Author>
<Name Pseudonym="true" HomePage="http://www.nathanielhawthorne.com">
<FirstName Full="false">Nat</FirstName>
<LastName>Hawthorne</LastName>
</Name>
</Author>
</source>
El codi XML Schema que validaria que l'element ''FirstName'' té un atribut ''Full'' seria:
<source>
<xs:element name="FirstName">
<xs:complexType>
<xs:simpleContent>
<xs:extension base="xs:string">
<xs:attribute name="Full" type="xs:boolean"/>
</xs:extension>
</xs:simpleContent>
</xs:complexType>
</xs:element>
</source>
* '''Element complex'''
Si l'atribut a validar es troba en un element de tipus complex, com per exemple:
<source>
<Author>
<Name Pseudonym="true" HomePage="http://www.marktwain.com">
<FirstName>Mark</FirstName>
<LastName>Twain</LastName>
</Name>
</Author>
</source>
S'hauria de validar de la següent manera:
<source>
<xs:element name="Name">
<xs:complexType>
<xs:sequence>
<xs:element name="FirstName" type="xs:string"/>
<xs:element name="LastName" type="xs:string"/>
</xs:sequence>
<xs:attribute name="Pseudonym" type="xs:boolean"/>
<xs:attribute name="HomePage" type="xs:anyURI"/>
</xs:complexType>
</xs:element>
</source>
=Indicadors=
En els exemples anteriors hem utilitzat l'element
xs:sequence com element fill de l'element xs:complexType
xs:sequence indica que els elements anidats dintre d'ell han d'apareixer en un ordre determinat.
Altres opcions o indicadors són: xs:all y xs:choice
==Indicador xs:all==
L'indicador xs:all indica que els elements que conté poden
aparèixer en cualsevol ordre però com a màxim una vegada.
<source language="xml">
<xs:element name="person">
<xs:complexType>
<xs:all>
<xs:element name="firstname" type="xs:string"/>
<xs:element name="lastname" type="xs:string"/>
</xs:all>
</xs:complexType>
</xs:element>
</source>

==Indicador xs:choice==
L'indicador xs:choice indica que pot aparèixer només un els delements que conté:
<source language="xml">
<xs:element name="person">
<xs:complexType>
<xs:choice>
<xs:element name="firstname" type="xs:string"/>
<xs:element name="lastname" type="xs:string"/>
</xs:choice>
</xs:complexType>
</xs:element>
</source>

==maxOccurs i minOccurs==
Aquests indidcadors s'utilitzen per a indicar el nombre máxim I mínim de vegades que pot aparèixer un element fill d'un element compelx.
L'atribut maxOccurs pot prendre el valor “unbounded”, que indica que no existeix cap limit.
<source language="xml">
<xs:element name="person">
<xs:complexType>
<xs:sequence>
<xs:element name="full_name" type="xs:string"/>
<xs:element name="child_name" type="xs:string" maxOccurs="10"/>
</xs:sequence>
</xs:complexType>
</xs:element>
</source>

File:HTML5.png

2024-02-29T12:39:42Z

Jaume:

File:Padding.gif

2024-02-29T12:39:32Z

Jaume:

Maquetacio

2024-02-29T12:39:18Z

Jaume: Created page with "La maquetació d'un lloc web determina la distribució dels elements d'aquests. La maquetació acostuma a seguir patrons habituals: *Disseny fixe/líquid/híbrid *Amb/sense..."

La maquetació d'un lloc web determina la distribució dels elements d'aquests.

La maquetació acostuma a seguir patrons habituals:

*Disseny fixe/líquid/híbrid
*Amb/sense capçalera/peu (fixes o no)
*Barres laterals: amb/sense, comportament, quantitat.
*Zones per a menús, barres d'eines, breadcrumbs, publicitat, móduls
*Zones de continguts
*Seguint una quadrícula de referència o no

== Història ==

Durant els anys 90, l'única manera de crear pàgines amb diverses columnes era mitjançant la utilització de taules.
*En ocasions calia incloure taules dins de taules, cosa que complicava especialment el codi
*L'objectiu de les taules no era aquest, si no presentar informació per files, columnes...amb certa lògica.

Per a la maquetacióm utilitzem les ''<div>''

Amb HTML5 s'introdueixen els elements semàntics, que es comporten igual que les ''<div>''.

==HTML <5 vs HTML5==
[[File:HTML5.png]]

==Model de capses==
Els elements HMTL tenen una capsa i, segons el tipus de capsa, diferenciem:
*'''Elements de bloc''': reserven línies completes (h1,p,ul,li,div,...
*'''Elements en línia''': se situen dins d'una línia
Per defecte NO treballen amb marges, espaiats, etc..però podem canviar aquest comportament (''display: inline-block'')
Totes les capses tenen tres propietats que permeten ajustar-ne l'aparença:
*'''margin''': el marge extern de la capsa
*'''border''': la vora de la capsa
*'''padding''': el marge intern de la capsa
[[File:padding.gif]]

==Posicionament==
CSS disposa d'una sèrie d'esquemes de posicionament, entre altres:
*Estàtic
*Relatiu
*Absolut
*Fixe
*Flotant
Podeu trobar informació detallada sobre els esquemes de posicionament en la següent pàgina: http://es.learnlayout.com/

Forms

2024-02-29T12:38:15Z

Jaume:

==Funcions d'un formulari==
Els formularis permeten fer arribar informació als llocs web.

Trobem trobem formularis cada vegada que ens registrem a un lloc web, quan comprem en línia, quan enviem un correu electrònic,...

Els formularis necessiten, generalment, d’una llenguatge de
programació que reculli la informació i faci el tractament:

* Enviar un correu electrònic.
* Emmagatzemar-la a la base de dades.
* Utilitzar-la per a generar una altra pàgina.
* etc.

==Estructura d'un formulari==
Els formularis a HTML es representen amb l’etiqueta '''<form>'''.

Tots els controls que tingui el formulari s’han de situar a l’interior d’un bloc d’aquest tipus.

Acostuma a tenir dos atributs:

*'''action:''' la URL de la pàgina del servidor que rep el formulari.
*'''method:''' un dels dos mètodes d’enviament de formularis.
<source language="">
<form action="subscripcio.php" method="post">
...

...
</form>
</source>

La informació del formulari es pot enviar mitjançant dos mètodes:
*'''POST:''' la informació s’envia com a part de la petició sense ésser visible a de forma directa l’usuari, mitjançant capçaleres HTTP.
*'''GET:''' la informació s’envia mitjançant l’adreça, sent visible per a l’usuari.
{| class="wikitable" style="float:left; margin-right: 10px;"
!|#
!|Etiqueta
|-
|1
|<label>
|-
|2
|<input type="text" />
|-
|3
|<input type="password" />
|-
|4
|<input type="radio" />
|-
|5
|<fieldset> + <legend>
|-
|6
|<select> + <option>
|-
|7
|<textarea>
|-
|8
|<input type="checkbox" />
|-
|9
|<input type="submit" />
|-
|10
|<input type="reset" />
|}
[[File:Forms1.png]]
==Aplicació d'estils als formularis==
Els formularis es poden complementar amb estils CSS:
*Podem utilitzar totes les propietats ja estudiades: fonts, colors, fons, vores, marges interns i externs, dimensions, etc.
*L'única diferència és el selector d’etiqueta: input és massa genèric, i a vegades volem discriminar aquells d’un tipus específic (type).
[[File:Forms2.png]]
*Aquest mecanisme combina amb la resta de selectors: id, class,...
*Per a fer diverses columnes i alinear-les correctament, haurem d’utilitzar taules (mètode no del tot correcte).

File:Forms2.png

2024-02-29T12:37:39Z

Jaume:

File:Forms1.png

2024-02-29T12:37:30Z

Jaume:

Forms

2024-02-29T12:37:07Z

Jaume: Created page with "==Funcions d'un formulari== Els formularis permeten fer arribar informació als llocs web. Trobem trobem formularis cada vegada que ens registrem a un lloc web, quan comprem..."

==Funcions d'un formulari==
Els formularis permeten fer arribar informació als llocs web.

Trobem trobem formularis cada vegada que ens registrem a un lloc web, quan comprem en línia, quan enviem un correu electrònic,...

Els formularis necessiten, generalment, d’una llenguatge de
programació que reculli la informació i faci el tractament:

* Enviar un correu electrònic.
* Emmagatzemar-la a la base de dades.
* Utilitzar-la per a generar una altra pàgina.
* etc.

==Estructura d'un formulari==
Els formularis a HTML es representen amb l’etiqueta '''<form>'''.

Tots els controls que tingui el formulari s’han de situar a l’interior d’un bloc d’aquest tipus.

Acostuma a tenir dos atributs:

*'''action:''' la URL de la pàgina del servidor que rep el formulari.
*'''method:''' un dels dos mètodes d’enviament de formularis.
<source language="">
<form action="subscripcio.php" method="post">
...

...
</form>
</source>

La informació del formulari es pot enviar mitjançant dos mètodes:
*'''POST:''' la informació s’envia com a part de la petició sense ésser visible a de forma directa l’usuari, mitjançant capçaleres HTTP.
*'''GET:''' la informació s’envia mitjançant l’adreça, sent visible per a l’usuari.
{| class="wikitable" style="float:left; margin-right: 10px;"
!|#
!|Etiqueta
|-
|1
|<label>
|-
|2
|<input type="text" />
|-
|3
|<input type="password" />
|-
|4
|<input type="radio" />
|-
|5
|<fieldset> + <legend>
|-
|6
|<select> + <option>
|-
|7
|<textarea>
|-
|8
|<input type="checkbox" />
|-
|9
|<input type="submit" />
|-
|10
|<input type="reset" />
|}
[[Fitxer:Forms1.png]]
==Aplicació d'estils als formularis==
Els formularis es poden complementar amb estils CSS:
*Podem utilitzar totes les propietats ja estudiades: fonts, colors, fons, vores, marges interns i externs, dimensions, etc.
*L'única diferència és el selector d’etiqueta: input és massa genèric, i a vegades volem discriminar aquells d’un tipus específic (type).
[[Fitxer:Forms2.png]]
*Aquest mecanisme combina amb la resta de selectors: id, class,...
*Per a fer diverses columnes i alinear-les correctament, haurem d’utilitzar taules (mètode no del tot correcte).

CSS

2024-02-27T19:44:09Z

Jaume: /* Exemple de CSS aplicat a llistes */

=El llenguatge CSS=
CSS és un llenguatge que permet descriure la '''presentació gràfica''' de les pàgines web

CSS aporta una sèrie de beneficis als llocs web:
*'''Menys càrrega:''' s'acostuma a disposar d'un (o varis) fulls associats a totes les pàgines d'un lloc web. Un cop s'han descarregar no es tornes a descarregar.
*'''Menys esforç de modificació''', ja que els estils centralitzars permeten no haver d'anar pàgina a pàgina a realitzar canvis.
*'''Menys esforç per als cercadors''', que poden indexar el contingut ràpidament, sense haver de perdre el temps en estils
*'''Més rapidesa de desenvolupament''', ja que no s'han de repetir els mateixos fragments de codi diverses vegades.
*'''Més accessibilitat''' per als lectors de pantalla, que poden formatar de manera personalitzada les pàgines HTML

==HTML + CSS==
Per a associar un full d'estils a una pàgina web cal incloure el següent fragment de codi:
<source language="html">
<link rel="stylesheet" type="text/css" href="estil.css"/>
</source>
dins de la secció '''<head>''' d'una pàgina.

Es poden associar tants fulls d'estil com es vulgui.

Existeixen dues maneres més d'assignar estils a les pàgines HTML.
* Elements '''<style>'''
* Atribut '''style=""'''

==Arquitectura d'un full d'estils ==
Els fulls d'estils CSS estan constituïts per diverses regles que defineixen com es mostren els elements que especifiquen.

Cada regla té dues parts:
*El '''selector''': determina sobre '''quins''' elements de la pàgina s'aplica l'estil
*La '''declaració''': estableix quins formats s'apliquen sobre la selecció feta
**Cada declaració indica un '''valor''' per a cadascuna de les '''propietats''' de l'element
[[File:ImatgeCSS1.png|center]]
Com es pot veure, una declaració es pot aprofitar per a diversos selectors separant-los per comes.

==Selectors bàsics de CSS ==
Els selectors CSS més utilitzats són:
{| class="wikitable"
!|Notació
!|Ús
!|Exemple
|-
|*
|Selecciona tots els elements de l'àmbit
|*{...}
|-
|
|Selecciona per tipus d'element
|p, h3{...}
|-
|.
|Selecciona els elements d'una classe concreta
|.titular{...}
|-
|#
|Selecciona l'element que té l'id indicat
|#capsalera{...}
|-
|(espai)
|Selecciona els elements dins de l'arbre HTML
|div span{...}
|-
|>
|Selecciona els elements justament per sota d'un altre element
|div > span{...}
|}
Podem combinar selectors de diversos tipus: '''cal imaginar l'HTML com un arbre i navegar-lo.

Per exemple, el següent codi:
<source language="html>
<!doctype html>
<html>
<head>
<title>My home page</title>
</head>
<body>
<h1>My home page</h1>
<p>Hello, I am Marijn and this is my home page.</p>
<p>I also wrote a book! Read it
<a href="http://eloquentjavascript.net">here</a>.</p>
</body>
</html>
</source>
Està estructurat com indicar el següent arbre:
[[Fitxer:Html-tree.jpg|thumb|center]]
== Declaració d'estils ==
Els selectors que hem vist fins ara no tindrien cap sentit sense una sèrie de propietats que podem modificar.
Aquestes propietats són molt extenses i no és a l'abast d'aquest mòdul estudiar-los tots. En el següent link, podem trobar el llistat de propietats de CSS [http://www.w3.org/TR/CSS Link]
===Estils de text===
{| class="wikitable"
|-
!| Propietat
!| Valors típics
|-
|'''color:'''
|''Color''
|-
|'''font-family:'''
|Família de fonts
|-
|'''font-size:'''
|''Mida''
|-
|'''font-style:'''
|''normal'' | italic
|-
|'''font-weight'''
|''normal'' | bold
|-
|'''line-height:'''
|''Mida''
|-
|'''text-align:'''
|''left'' | right | center | justify
|-
|'''text-decoration:'''
|''none'' | underline | overline | line-through
|-
|'''text-transform'''
|''none'' | uppercase | lowercase
|-
|'''font'''
|Permet establir ''font-style'' - ''font-variant'' - ''font-weight'' - ''font-size/line-height'' - ''font-family'', en una única declaració
|}
===Exemple estils de text ===

<gallery mode=traditional widths=400px heights=300px>
File:ImatgeCSS3.png|Pàgina HTML sense CSS
File:ImatgeCSS2.png|Pàgina HMTL aplicant el CSS inferior
</gallery>

<source language="css">
body {
background-color: #f8f8f8;
font-family: "Lucida Grande", Tahoma, Arial, sans-serif;
font-size:12px;
}

h1, h2 {
border-bottom:1px solid #ccc;
}

div#capsalera h1 {
font: italic bold 50px Georgia, "Times New Roman", serif;
text-align: center;
text-transform: uppercase;
}

span.dolly, a {
color:#7fa3fc;
font-weight: bold;
}

a {
text-decoration:none;
}

div#peu {
text-align:right;
margin-top:40px;
border-top:1px dotted #ccc;
}
</source>

==Colors en CSS==
Les tres maneres més típiques d'indicar colors en CSS són:
*'''En format hexadecimal:#RRGGBB'''.Cada posició representa una xifra de 0 a la F(15) que indica la quantitat d'aquell color.
*'''En format RGB:rgb(r,g,b)'''En cada espai del parèntesi s'indica la quantitat de color del 0 al 255
**Com a derivat d'aquest existeix el format '''format RGBA''', amb un valor de transparència del 0 a l'1 en l'última posició: '''rgb(r,g,b,a)'''
*'''Nom de color''':es proporciona una llista de 147 colors predeterminats que es poden utilitzar directament.
**black, blue, white, red, green, yellow, magenta
**[http://en.wikipedia.org/wiki/Web_colors Colors en CSS]
[[Fitxer:ImatgeCSS4.png|center]]
Els llocs més típics on acostumem a aplicar colors són:
*'''Tipografies''': mitjançant la propietat ''color''
*'''Fons''': mitjançant la propietat ''background-color'' assignen colors de fons a qualsevol tipus d'element
*'''Vores''':''border-color'',''border-left-color'',...

==Unitats de mida==
Les mides es poden indicar en les següents unitats:
{| class="wikitable"
|-
!| Propietat
!| Notació
!| Exemple
|-
|Píxels
|Notació
|Exemple
|-
|Píxels
|'''px'''
|font-size:12px
|-
|Emes(l'equivalent a l'amplada de la lletra m)
|'''em'''
|font-size:1.2em
|-
|Percentatge
|'''%'''
|font-size:120%
|}
Les mides en emes o percentatges són relatives a l'element pare de l'element al qual se li hagi donat estil
*El que s'acostuma a fer és definir la mida del '''body''' i la resta en forma relativa
*El cas que no s'indiqui res al '''body''', s'agafa la mida per defecte del navegador, que acostuma a ser de '''16px''' si no ha estat canviada per l'usuari
==Estils sobre llistats==
{| class="wikitable"
|-
!| Propietat
!| Valors típics
|-
|'''list-style-type:'''
|''none | circle | disc | square | armenian | decimal | decimal-leading-zero | georgian | lower-alpha | lower-greek | lower-latin | lower-roman | upper-alpha | upper-latin | upper-roman | inherit''
|-
|'''list-style-position:'''
|''inside | outside''
|-
|'''list-style:'''
|Permet establir tipus, posició i/o imatge en una única declaració
|}

===Exemple de CSS aplicat a llistes===
<gallery mode=traditional widths=400px heights=300px>
File:ImatgeCSS6.png|Pàgina HTML sense CSS
File:ImatgeCSS5.png|Pàgina HMTL aplicant el CSS inferior
</gallery>

<source language="css">
body {
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
font-size: 14px;
color: rgb(50,50,50);
}

h1 {
font: 2em Georgia, "Times New Roman", serif;
letter-spacing: -.5px;
color:#576673;
text-align: center;
}

h2 {
font: 1.4em Georgia, "Times New Roman", serif;
text-transform: uppercase;
color:#687c8e;
border-bottom: 1px dotted #ccc;
}

ul {
list-style-type: circle;
}

ol {
list-style-type: decimal-leading-zero;
}

ol ol {
list-style-type: lower-roman;
}

li em {
color: #ccc;
}

li strong {
color: #6a8ea4;
text-decoration: underline;
}
</source>

==Precedència de regles==
Quan dues declaracions es contradiuen sobre un mateix element, s'apliquen dues normes:
*Primer s'aplica la regla més local
*Si són igual de locals, s'aplica la regla amb la puntuació més alta.
{| class="wikitable"
|-
!| per cada selector...
!| sumem ... punts
|-
|Etiqueta
|1
|-
|Classe(.)
|10
|-
|Id(#)
|100
|-
|Resta
|0
|}
'''Sempre s'aplica aquella regla més específica'''.Si hi ha empat s'aplicarà aquella que aparegui més tard.
===Exemple de precedència de regles===
<source language="html">
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Herencia</title>
<style type="text/css">
#caja header h1 { color: blue; }
#caja .cabecera h1 { color: red; }
header h1 { color: lime; }
h1 { color:purple; }
</style>
</head><
<body>
<div id="caja">
<header class="cabecera">
<h1>Cabecera: header</h1>
</header>
</div>
</body>
</html>
</source>
Com podeu observar en el codi anterior, existeixen quatre regles CSS que fan referència al mateix element, concretament a l'encapçalament h1 del codi HMTL.
Per saber quina de les regles s'aplicarà, caldrà calcular el pes de cada una d'elles:
*'''#caja header h1 { color: blue; }'''
La puntuació d'aquesta regla és de 102: 100 per la referència a la classe ''caja'', 1 per la referència a ''header'' i 1 per la referència a ''h1''
*'''#caja .cabecera h1 { color: red; }'''
La puntuació d'aquesta regla és de 111 per la referència a la classe ''caja'', 10 per la referència a la classe ''cabecera'' i 1 per la referència a ''h1''
*'''header h1 { color: lime; }'''
La puntuació d'aquesta regla és de 2, 1 per la referència a ''header'' i 1 per la referència a ''h1''
*'''h1 { color:purple; }'''
La puntuació d'aquesta regla és de 1 per la referència a ''h1''
Per tant, la regla que s'aplicarà en aquest cas és '''#caja .cabecera h1 { color: red; }'''

File:ImatgeCSS6.png

2024-02-27T19:43:48Z

Jaume:

File:ImatgeCSS5.png

2024-02-27T19:43:37Z

Jaume:

File:ImatgeCSS3.png

2024-02-27T19:18:19Z

Jaume:

CSS

2024-02-27T19:17:36Z

Jaume: /* Exemple estils de text */

=El llenguatge CSS=
CSS és un llenguatge que permet descriure la '''presentació gràfica''' de les pàgines web

CSS aporta una sèrie de beneficis als llocs web:
*'''Menys càrrega:''' s'acostuma a disposar d'un (o varis) fulls associats a totes les pàgines d'un lloc web. Un cop s'han descarregar no es tornes a descarregar.
*'''Menys esforç de modificació''', ja que els estils centralitzars permeten no haver d'anar pàgina a pàgina a realitzar canvis.
*'''Menys esforç per als cercadors''', que poden indexar el contingut ràpidament, sense haver de perdre el temps en estils
*'''Més rapidesa de desenvolupament''', ja que no s'han de repetir els mateixos fragments de codi diverses vegades.
*'''Més accessibilitat''' per als lectors de pantalla, que poden formatar de manera personalitzada les pàgines HTML

==HTML + CSS==
Per a associar un full d'estils a una pàgina web cal incloure el següent fragment de codi:
<source language="html">
<link rel="stylesheet" type="text/css" href="estil.css"/>
</source>
dins de la secció '''<head>''' d'una pàgina.

Es poden associar tants fulls d'estil com es vulgui.

Existeixen dues maneres més d'assignar estils a les pàgines HTML.
* Elements '''<style>'''
* Atribut '''style=""'''

==Arquitectura d'un full d'estils ==
Els fulls d'estils CSS estan constituïts per diverses regles que defineixen com es mostren els elements que especifiquen.

Cada regla té dues parts:
*El '''selector''': determina sobre '''quins''' elements de la pàgina s'aplica l'estil
*La '''declaració''': estableix quins formats s'apliquen sobre la selecció feta
**Cada declaració indica un '''valor''' per a cadascuna de les '''propietats''' de l'element
[[File:ImatgeCSS1.png|center]]
Com es pot veure, una declaració es pot aprofitar per a diversos selectors separant-los per comes.

==Selectors bàsics de CSS ==
Els selectors CSS més utilitzats són:
{| class="wikitable"
!|Notació
!|Ús
!|Exemple
|-
|*
|Selecciona tots els elements de l'àmbit
|*{...}
|-
|
|Selecciona per tipus d'element
|p, h3{...}
|-
|.
|Selecciona els elements d'una classe concreta
|.titular{...}
|-
|#
|Selecciona l'element que té l'id indicat
|#capsalera{...}
|-
|(espai)
|Selecciona els elements dins de l'arbre HTML
|div span{...}
|-
|>
|Selecciona els elements justament per sota d'un altre element
|div > span{...}
|}
Podem combinar selectors de diversos tipus: '''cal imaginar l'HTML com un arbre i navegar-lo.

Per exemple, el següent codi:
<source language="html>
<!doctype html>
<html>
<head>
<title>My home page</title>
</head>
<body>
<h1>My home page</h1>
<p>Hello, I am Marijn and this is my home page.</p>
<p>I also wrote a book! Read it
<a href="http://eloquentjavascript.net">here</a>.</p>
</body>
</html>
</source>
Està estructurat com indicar el següent arbre:
[[Fitxer:Html-tree.jpg|thumb|center]]
== Declaració d'estils ==
Els selectors que hem vist fins ara no tindrien cap sentit sense una sèrie de propietats que podem modificar.
Aquestes propietats són molt extenses i no és a l'abast d'aquest mòdul estudiar-los tots. En el següent link, podem trobar el llistat de propietats de CSS [http://www.w3.org/TR/CSS Link]
===Estils de text===
{| class="wikitable"
|-
!| Propietat
!| Valors típics
|-
|'''color:'''
|''Color''
|-
|'''font-family:'''
|Família de fonts
|-
|'''font-size:'''
|''Mida''
|-
|'''font-style:'''
|''normal'' | italic
|-
|'''font-weight'''
|''normal'' | bold
|-
|'''line-height:'''
|''Mida''
|-
|'''text-align:'''
|''left'' | right | center | justify
|-
|'''text-decoration:'''
|''none'' | underline | overline | line-through
|-
|'''text-transform'''
|''none'' | uppercase | lowercase
|-
|'''font'''
|Permet establir ''font-style'' - ''font-variant'' - ''font-weight'' - ''font-size/line-height'' - ''font-family'', en una única declaració
|}
===Exemple estils de text ===

<gallery mode=traditional widths=400px heights=300px>
File:ImatgeCSS3.png|Pàgina HTML sense CSS
File:ImatgeCSS2.png|Pàgina HMTL aplicant el CSS inferior
</gallery>

<source language="css">
body {
background-color: #f8f8f8;
font-family: "Lucida Grande", Tahoma, Arial, sans-serif;
font-size:12px;
}

h1, h2 {
border-bottom:1px solid #ccc;
}

div#capsalera h1 {
font: italic bold 50px Georgia, "Times New Roman", serif;
text-align: center;
text-transform: uppercase;
}

span.dolly, a {
color:#7fa3fc;
font-weight: bold;
}

a {
text-decoration:none;
}

div#peu {
text-align:right;
margin-top:40px;
border-top:1px dotted #ccc;
}
</source>

==Colors en CSS==
Les tres maneres més típiques d'indicar colors en CSS són:
*'''En format hexadecimal:#RRGGBB'''.Cada posició representa una xifra de 0 a la F(15) que indica la quantitat d'aquell color.
*'''En format RGB:rgb(r,g,b)'''En cada espai del parèntesi s'indica la quantitat de color del 0 al 255
**Com a derivat d'aquest existeix el format '''format RGBA''', amb un valor de transparència del 0 a l'1 en l'última posició: '''rgb(r,g,b,a)'''
*'''Nom de color''':es proporciona una llista de 147 colors predeterminats que es poden utilitzar directament.
**black, blue, white, red, green, yellow, magenta
**[http://en.wikipedia.org/wiki/Web_colors Colors en CSS]
[[Fitxer:ImatgeCSS4.png|center]]
Els llocs més típics on acostumem a aplicar colors són:
*'''Tipografies''': mitjançant la propietat ''color''
*'''Fons''': mitjançant la propietat ''background-color'' assignen colors de fons a qualsevol tipus d'element
*'''Vores''':''border-color'',''border-left-color'',...

==Unitats de mida==
Les mides es poden indicar en les següents unitats:
{| class="wikitable"
|-
!| Propietat
!| Notació
!| Exemple
|-
|Píxels
|Notació
|Exemple
|-
|Píxels
|'''px'''
|font-size:12px
|-
|Emes(l'equivalent a l'amplada de la lletra m)
|'''em'''
|font-size:1.2em
|-
|Percentatge
|'''%'''
|font-size:120%
|}
Les mides en emes o percentatges són relatives a l'element pare de l'element al qual se li hagi donat estil
*El que s'acostuma a fer és definir la mida del '''body''' i la resta en forma relativa
*El cas que no s'indiqui res al '''body''', s'agafa la mida per defecte del navegador, que acostuma a ser de '''16px''' si no ha estat canviada per l'usuari
==Estils sobre llistats==
{| class="wikitable"
|-
!| Propietat
!| Valors típics
|-
|'''list-style-type:'''
|''none | circle | disc | square | armenian | decimal | decimal-leading-zero | georgian | lower-alpha | lower-greek | lower-latin | lower-roman | upper-alpha | upper-latin | upper-roman | inherit''
|-
|'''list-style-position:'''
|''inside | outside''
|-
|'''list-style:'''
|Permet establir tipus, posició i/o imatge en una única declaració
|}

===Exemple de CSS aplicat a llistes===
<gallery mode=traditional widths=400px heights=300px>
Fitxer:ImatgeCSS6.png|Pàgina HTML sense CSS
Fitxer:ImatgeCSS5.png|Pàgina HMTL aplicant el CSS inferior
</gallery>

<source language="css">
body {
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
font-size: 14px;
color: rgb(50,50,50);
}

h1 {
font: 2em Georgia, "Times New Roman", serif;
letter-spacing: -.5px;
color:#576673;
text-align: center;
}

h2 {
font: 1.4em Georgia, "Times New Roman", serif;
text-transform: uppercase;
color:#687c8e;
border-bottom: 1px dotted #ccc;
}

ul {
list-style-type: circle;
}

ol {
list-style-type: decimal-leading-zero;
}

ol ol {
list-style-type: lower-roman;
}

li em {
color: #ccc;
}

li strong {
color: #6a8ea4;
text-decoration: underline;
}
</source>
==Precedència de regles==
Quan dues declaracions es contradiuen sobre un mateix element, s'apliquen dues normes:
*Primer s'aplica la regla més local
*Si són igual de locals, s'aplica la regla amb la puntuació més alta.
{| class="wikitable"
|-
!| per cada selector...
!| sumem ... punts
|-
|Etiqueta
|1
|-
|Classe(.)
|10
|-
|Id(#)
|100
|-
|Resta
|0
|}
'''Sempre s'aplica aquella regla més específica'''.Si hi ha empat s'aplicarà aquella que aparegui més tard.
===Exemple de precedència de regles===
<source language="html">
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Herencia</title>
<style type="text/css">
#caja header h1 { color: blue; }
#caja .cabecera h1 { color: red; }
header h1 { color: lime; }
h1 { color:purple; }
</style>
</head><
<body>
<div id="caja">
<header class="cabecera">
<h1>Cabecera: header</h1>
</header>
</div>
</body>
</html>
</source>
Com podeu observar en el codi anterior, existeixen quatre regles CSS que fan referència al mateix element, concretament a l'encapçalament h1 del codi HMTL.
Per saber quina de les regles s'aplicarà, caldrà calcular el pes de cada una d'elles:
*'''#caja header h1 { color: blue; }'''
La puntuació d'aquesta regla és de 102: 100 per la referència a la classe ''caja'', 1 per la referència a ''header'' i 1 per la referència a ''h1''
*'''#caja .cabecera h1 { color: red; }'''
La puntuació d'aquesta regla és de 111 per la referència a la classe ''caja'', 10 per la referència a la classe ''cabecera'' i 1 per la referència a ''h1''
*'''header h1 { color: lime; }'''
La puntuació d'aquesta regla és de 2, 1 per la referència a ''header'' i 1 per la referència a ''h1''
*'''h1 { color:purple; }'''
La puntuació d'aquesta regla és de 1 per la referència a ''h1''
Per tant, la regla que s'aplicarà en aquest cas és '''#caja .cabecera h1 { color: red; }'''

File:ImatgeCSS2.png

2024-02-27T19:16:49Z

Jaume:

CSS

2024-02-22T15:37:36Z

Jaume:

=El llenguatge CSS=
CSS és un llenguatge que permet descriure la '''presentació gràfica''' de les pàgines web

CSS aporta una sèrie de beneficis als llocs web:
*'''Menys càrrega:''' s'acostuma a disposar d'un (o varis) fulls associats a totes les pàgines d'un lloc web. Un cop s'han descarregar no es tornes a descarregar.
*'''Menys esforç de modificació''', ja que els estils centralitzars permeten no haver d'anar pàgina a pàgina a realitzar canvis.
*'''Menys esforç per als cercadors''', que poden indexar el contingut ràpidament, sense haver de perdre el temps en estils
*'''Més rapidesa de desenvolupament''', ja que no s'han de repetir els mateixos fragments de codi diverses vegades.
*'''Més accessibilitat''' per als lectors de pantalla, que poden formatar de manera personalitzada les pàgines HTML

==HTML + CSS==
Per a associar un full d'estils a una pàgina web cal incloure el següent fragment de codi:
<source language="html">
<link rel="stylesheet" type="text/css" href="estil.css"/>
</source>
dins de la secció '''<head>''' d'una pàgina.

Es poden associar tants fulls d'estil com es vulgui.

Existeixen dues maneres més d'assignar estils a les pàgines HTML.
* Elements '''<style>'''
* Atribut '''style=""'''

==Arquitectura d'un full d'estils ==
Els fulls d'estils CSS estan constituïts per diverses regles que defineixen com es mostren els elements que especifiquen.

Cada regla té dues parts:
*El '''selector''': determina sobre '''quins''' elements de la pàgina s'aplica l'estil
*La '''declaració''': estableix quins formats s'apliquen sobre la selecció feta
**Cada declaració indica un '''valor''' per a cadascuna de les '''propietats''' de l'element
[[File:ImatgeCSS1.png|center]]
Com es pot veure, una declaració es pot aprofitar per a diversos selectors separant-los per comes.

==Selectors bàsics de CSS ==
Els selectors CSS més utilitzats són:
{| class="wikitable"
!|Notació
!|Ús
!|Exemple
|-
|*
|Selecciona tots els elements de l'àmbit
|*{...}
|-
|
|Selecciona per tipus d'element
|p, h3{...}
|-
|.
|Selecciona els elements d'una classe concreta
|.titular{...}
|-
|#
|Selecciona l'element que té l'id indicat
|#capsalera{...}
|-
|(espai)
|Selecciona els elements dins de l'arbre HTML
|div span{...}
|-
|>
|Selecciona els elements justament per sota d'un altre element
|div > span{...}
|}
Podem combinar selectors de diversos tipus: '''cal imaginar l'HTML com un arbre i navegar-lo.

Per exemple, el següent codi:
<source language="html>
<!doctype html>
<html>
<head>
<title>My home page</title>
</head>
<body>
<h1>My home page</h1>
<p>Hello, I am Marijn and this is my home page.</p>
<p>I also wrote a book! Read it
<a href="http://eloquentjavascript.net">here</a>.</p>
</body>
</html>
</source>
Està estructurat com indicar el següent arbre:
[[Fitxer:Html-tree.jpg|thumb|center]]
== Declaració d'estils ==
Els selectors que hem vist fins ara no tindrien cap sentit sense una sèrie de propietats que podem modificar.
Aquestes propietats són molt extenses i no és a l'abast d'aquest mòdul estudiar-los tots. En el següent link, podem trobar el llistat de propietats de CSS [http://www.w3.org/TR/CSS Link]
===Estils de text===
{| class="wikitable"
|-
!| Propietat
!| Valors típics
|-
|'''color:'''
|''Color''
|-
|'''font-family:'''
|Família de fonts
|-
|'''font-size:'''
|''Mida''
|-
|'''font-style:'''
|''normal'' | italic
|-
|'''font-weight'''
|''normal'' | bold
|-
|'''line-height:'''
|''Mida''
|-
|'''text-align:'''
|''left'' | right | center | justify
|-
|'''text-decoration:'''
|''none'' | underline | overline | line-through
|-
|'''text-transform'''
|''none'' | uppercase | lowercase
|-
|'''font'''
|Permet establir ''font-style'' - ''font-variant'' - ''font-weight'' - ''font-size/line-height'' - ''font-family'', en una única declaració
|}
===Exemple estils de text ===

<gallery mode=traditional widths=400px heights=300px>
Fitxer:ImatgeCSS3.png|Pàgina HTML sense CSS
Fitxer:ImatgeCSS2.png|Pàgina HMTL aplicant el CSS inferior
</gallery>

<source language="css">
body {
background-color: #f8f8f8;
font-family: "Lucida Grande", Tahoma, Arial, sans-serif;
font-size:12px;
}

h1, h2 {
border-bottom:1px solid #ccc;
}

div#capsalera h1 {
font: italic bold 50px Georgia, "Times New Roman", serif;
text-align: center;
text-transform: uppercase;
}

span.dolly, a {
color:#7fa3fc;
font-weight: bold;
}

a {
text-decoration:none;
}

div#peu {
text-align:right;
margin-top:40px;
border-top:1px dotted #ccc;
}
</source>
==Colors en CSS==
Les tres maneres més típiques d'indicar colors en CSS són:
*'''En format hexadecimal:#RRGGBB'''.Cada posició representa una xifra de 0 a la F(15) que indica la quantitat d'aquell color.
*'''En format RGB:rgb(r,g,b)'''En cada espai del parèntesi s'indica la quantitat de color del 0 al 255
**Com a derivat d'aquest existeix el format '''format RGBA''', amb un valor de transparència del 0 a l'1 en l'última posició: '''rgb(r,g,b,a)'''
*'''Nom de color''':es proporciona una llista de 147 colors predeterminats que es poden utilitzar directament.
**black, blue, white, red, green, yellow, magenta
**[http://en.wikipedia.org/wiki/Web_colors Colors en CSS]
[[Fitxer:ImatgeCSS4.png|center]]
Els llocs més típics on acostumem a aplicar colors són:
*'''Tipografies''': mitjançant la propietat ''color''
*'''Fons''': mitjançant la propietat ''background-color'' assignen colors de fons a qualsevol tipus d'element
*'''Vores''':''border-color'',''border-left-color'',...

==Unitats de mida==
Les mides es poden indicar en les següents unitats:
{| class="wikitable"
|-
!| Propietat
!| Notació
!| Exemple
|-
|Píxels
|Notació
|Exemple
|-
|Píxels
|'''px'''
|font-size:12px
|-
|Emes(l'equivalent a l'amplada de la lletra m)
|'''em'''
|font-size:1.2em
|-
|Percentatge
|'''%'''
|font-size:120%
|}
Les mides en emes o percentatges són relatives a l'element pare de l'element al qual se li hagi donat estil
*El que s'acostuma a fer és definir la mida del '''body''' i la resta en forma relativa
*El cas que no s'indiqui res al '''body''', s'agafa la mida per defecte del navegador, que acostuma a ser de '''16px''' si no ha estat canviada per l'usuari
==Estils sobre llistats==
{| class="wikitable"
|-
!| Propietat
!| Valors típics
|-
|'''list-style-type:'''
|''none | circle | disc | square | armenian | decimal | decimal-leading-zero | georgian | lower-alpha | lower-greek | lower-latin | lower-roman | upper-alpha | upper-latin | upper-roman | inherit''
|-
|'''list-style-position:'''
|''inside | outside''
|-
|'''list-style:'''
|Permet establir tipus, posició i/o imatge en una única declaració
|}

===Exemple de CSS aplicat a llistes===
<gallery mode=traditional widths=400px heights=300px>
Fitxer:ImatgeCSS6.png|Pàgina HTML sense CSS
Fitxer:ImatgeCSS5.png|Pàgina HMTL aplicant el CSS inferior
</gallery>

<source language="css">
body {
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
font-size: 14px;
color: rgb(50,50,50);
}

h1 {
font: 2em Georgia, "Times New Roman", serif;
letter-spacing: -.5px;
color:#576673;
text-align: center;
}

h2 {
font: 1.4em Georgia, "Times New Roman", serif;
text-transform: uppercase;
color:#687c8e;
border-bottom: 1px dotted #ccc;
}

ul {
list-style-type: circle;
}

ol {
list-style-type: decimal-leading-zero;
}

ol ol {
list-style-type: lower-roman;
}

li em {
color: #ccc;
}

li strong {
color: #6a8ea4;
text-decoration: underline;
}
</source>
==Precedència de regles==
Quan dues declaracions es contradiuen sobre un mateix element, s'apliquen dues normes:
*Primer s'aplica la regla més local
*Si són igual de locals, s'aplica la regla amb la puntuació més alta.
{| class="wikitable"
|-
!| per cada selector...
!| sumem ... punts
|-
|Etiqueta
|1
|-
|Classe(.)
|10
|-
|Id(#)
|100
|-
|Resta
|0
|}
'''Sempre s'aplica aquella regla més específica'''.Si hi ha empat s'aplicarà aquella que aparegui més tard.
===Exemple de precedència de regles===
<source language="html">
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Herencia</title>
<style type="text/css">
#caja header h1 { color: blue; }
#caja .cabecera h1 { color: red; }
header h1 { color: lime; }
h1 { color:purple; }
</style>
</head><
<body>
<div id="caja">
<header class="cabecera">
<h1>Cabecera: header</h1>
</header>
</div>
</body>
</html>
</source>
Com podeu observar en el codi anterior, existeixen quatre regles CSS que fan referència al mateix element, concretament a l'encapçalament h1 del codi HMTL.
Per saber quina de les regles s'aplicarà, caldrà calcular el pes de cada una d'elles:
*'''#caja header h1 { color: blue; }'''
La puntuació d'aquesta regla és de 102: 100 per la referència a la classe ''caja'', 1 per la referència a ''header'' i 1 per la referència a ''h1''
*'''#caja .cabecera h1 { color: red; }'''
La puntuació d'aquesta regla és de 111 per la referència a la classe ''caja'', 10 per la referència a la classe ''cabecera'' i 1 per la referència a ''h1''
*'''header h1 { color: lime; }'''
La puntuació d'aquesta regla és de 2, 1 per la referència a ''header'' i 1 per la referència a ''h1''
*'''h1 { color:purple; }'''
La puntuació d'aquesta regla és de 1 per la referència a ''h1''
Per tant, la regla que s'aplicarà en aquest cas és '''#caja .cabecera h1 { color: red; }'''

CSS

2024-02-22T15:37:20Z

Jaume:

=El llenguatge CSS=
CSS és un llenguatge que permet descriure la '''presentació gràfica''' de les pàgines web

CSS aporta una sèrie de beneficis als llocs web:
*'''Menys càrrega:''' s'acostuma a disposar d'un (o varis) fulls associats a totes les pàgines d'un lloc web. Un cop s'han descarregar no es tornes a descarregar.
*'''Menys esforç de modificació''', ja que els estils centralitzars permeten no haver d'anar pàgina a pàgina a realitzar canvis.
*'''Menys esforç per als cercadors''', que poden indexar el contingut ràpidament, sense haver de perdre el temps en estils
*'''Més rapidesa de desenvolupament''', ja que no s'han de repetir els mateixos fragments de codi diverses vegades.
*'''Més accessibilitat''' per als lectors de pantalla, que poden formatar de manera personalitzada les pàgines HTML

==HTML + CSS==
Per a associar un full d'estils a una pàgina web cal incloure el següent fragment de codi:
<source language="html">
<link rel="stylesheet" type="text/css" href="estil.css"/>
</source>
dins de la secció '''<head>''' d'una pàgina.

Es poden associar tants fulls d'estil com es vulgui.

Existeixen dues maneres més d'assignar estils a les pàgines HTML.
* Elements '''<style>'''
* Atribut '''style=""'''

==Arquitectura d'un full d'estils ==
Els fulls d'estils CSS estan constituïts per diverses regles que defineixen com es mostren els elements que especifiquen.

Cada regla té dues parts:
*El '''selector''': determina sobre '''quins''' elements de la pàgina s'aplica l'estil
*La '''declaració''': estableix quins formats s'apliquen sobre la selecció feta
**Cada declaració indica un '''valor''' per a cadascuna de les '''propietats''' de l'element
[[File:ImatgeCSS1.png]]
Com es pot veure, una declaració es pot aprofitar per a diversos selectors separant-los per comes.

==Selectors bàsics de CSS ==
Els selectors CSS més utilitzats són:
{| class="wikitable"
!|Notació
!|Ús
!|Exemple
|-
|*
|Selecciona tots els elements de l'àmbit
|*{...}
|-
|
|Selecciona per tipus d'element
|p, h3{...}
|-
|.
|Selecciona els elements d'una classe concreta
|.titular{...}
|-
|#
|Selecciona l'element que té l'id indicat
|#capsalera{...}
|-
|(espai)
|Selecciona els elements dins de l'arbre HTML
|div span{...}
|-
|>
|Selecciona els elements justament per sota d'un altre element
|div > span{...}
|}
Podem combinar selectors de diversos tipus: '''cal imaginar l'HTML com un arbre i navegar-lo.

Per exemple, el següent codi:
<source language="html>
<!doctype html>
<html>
<head>
<title>My home page</title>
</head>
<body>
<h1>My home page</h1>
<p>Hello, I am Marijn and this is my home page.</p>
<p>I also wrote a book! Read it
<a href="http://eloquentjavascript.net">here</a>.</p>
</body>
</html>
</source>
Està estructurat com indicar el següent arbre:
[[Fitxer:Html-tree.jpg|thumb|center]]
== Declaració d'estils ==
Els selectors que hem vist fins ara no tindrien cap sentit sense una sèrie de propietats que podem modificar.
Aquestes propietats són molt extenses i no és a l'abast d'aquest mòdul estudiar-los tots. En el següent link, podem trobar el llistat de propietats de CSS [http://www.w3.org/TR/CSS Link]
===Estils de text===
{| class="wikitable"
|-
!| Propietat
!| Valors típics
|-
|'''color:'''
|''Color''
|-
|'''font-family:'''
|Família de fonts
|-
|'''font-size:'''
|''Mida''
|-
|'''font-style:'''
|''normal'' | italic
|-
|'''font-weight'''
|''normal'' | bold
|-
|'''line-height:'''
|''Mida''
|-
|'''text-align:'''
|''left'' | right | center | justify
|-
|'''text-decoration:'''
|''none'' | underline | overline | line-through
|-
|'''text-transform'''
|''none'' | uppercase | lowercase
|-
|'''font'''
|Permet establir ''font-style'' - ''font-variant'' - ''font-weight'' - ''font-size/line-height'' - ''font-family'', en una única declaració
|}
===Exemple estils de text ===

<gallery mode=traditional widths=400px heights=300px>
Fitxer:ImatgeCSS3.png|Pàgina HTML sense CSS
Fitxer:ImatgeCSS2.png|Pàgina HMTL aplicant el CSS inferior
</gallery>

<source language="css">
body {
background-color: #f8f8f8;
font-family: "Lucida Grande", Tahoma, Arial, sans-serif;
font-size:12px;
}

h1, h2 {
border-bottom:1px solid #ccc;
}

div#capsalera h1 {
font: italic bold 50px Georgia, "Times New Roman", serif;
text-align: center;
text-transform: uppercase;
}

span.dolly, a {
color:#7fa3fc;
font-weight: bold;
}

a {
text-decoration:none;
}

div#peu {
text-align:right;
margin-top:40px;
border-top:1px dotted #ccc;
}
</source>
==Colors en CSS==
Les tres maneres més típiques d'indicar colors en CSS són:
*'''En format hexadecimal:#RRGGBB'''.Cada posició representa una xifra de 0 a la F(15) que indica la quantitat d'aquell color.
*'''En format RGB:rgb(r,g,b)'''En cada espai del parèntesi s'indica la quantitat de color del 0 al 255
**Com a derivat d'aquest existeix el format '''format RGBA''', amb un valor de transparència del 0 a l'1 en l'última posició: '''rgb(r,g,b,a)'''
*'''Nom de color''':es proporciona una llista de 147 colors predeterminats que es poden utilitzar directament.
**black, blue, white, red, green, yellow, magenta
**[http://en.wikipedia.org/wiki/Web_colors Colors en CSS]
[[Fitxer:ImatgeCSS4.png|center]]
Els llocs més típics on acostumem a aplicar colors són:
*'''Tipografies''': mitjançant la propietat ''color''
*'''Fons''': mitjançant la propietat ''background-color'' assignen colors de fons a qualsevol tipus d'element
*'''Vores''':''border-color'',''border-left-color'',...

==Unitats de mida==
Les mides es poden indicar en les següents unitats:
{| class="wikitable"
|-
!| Propietat
!| Notació
!| Exemple
|-
|Píxels
|Notació
|Exemple
|-
|Píxels
|'''px'''
|font-size:12px
|-
|Emes(l'equivalent a l'amplada de la lletra m)
|'''em'''
|font-size:1.2em
|-
|Percentatge
|'''%'''
|font-size:120%
|}
Les mides en emes o percentatges són relatives a l'element pare de l'element al qual se li hagi donat estil
*El que s'acostuma a fer és definir la mida del '''body''' i la resta en forma relativa
*El cas que no s'indiqui res al '''body''', s'agafa la mida per defecte del navegador, que acostuma a ser de '''16px''' si no ha estat canviada per l'usuari
==Estils sobre llistats==
{| class="wikitable"
|-
!| Propietat
!| Valors típics
|-
|'''list-style-type:'''
|''none | circle | disc | square | armenian | decimal | decimal-leading-zero | georgian | lower-alpha | lower-greek | lower-latin | lower-roman | upper-alpha | upper-latin | upper-roman | inherit''
|-
|'''list-style-position:'''
|''inside | outside''
|-
|'''list-style:'''
|Permet establir tipus, posició i/o imatge en una única declaració
|}

===Exemple de CSS aplicat a llistes===
<gallery mode=traditional widths=400px heights=300px>
Fitxer:ImatgeCSS6.png|Pàgina HTML sense CSS
Fitxer:ImatgeCSS5.png|Pàgina HMTL aplicant el CSS inferior
</gallery>

<source language="css">
body {
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
font-size: 14px;
color: rgb(50,50,50);
}

h1 {
font: 2em Georgia, "Times New Roman", serif;
letter-spacing: -.5px;
color:#576673;
text-align: center;
}

h2 {
font: 1.4em Georgia, "Times New Roman", serif;
text-transform: uppercase;
color:#687c8e;
border-bottom: 1px dotted #ccc;
}

ul {
list-style-type: circle;
}

ol {
list-style-type: decimal-leading-zero;
}

ol ol {
list-style-type: lower-roman;
}

li em {
color: #ccc;
}

li strong {
color: #6a8ea4;
text-decoration: underline;
}
</source>
==Precedència de regles==
Quan dues declaracions es contradiuen sobre un mateix element, s'apliquen dues normes:
*Primer s'aplica la regla més local
*Si són igual de locals, s'aplica la regla amb la puntuació més alta.
{| class="wikitable"
|-
!| per cada selector...
!| sumem ... punts
|-
|Etiqueta
|1
|-
|Classe(.)
|10
|-
|Id(#)
|100
|-
|Resta
|0
|}
'''Sempre s'aplica aquella regla més específica'''.Si hi ha empat s'aplicarà aquella que aparegui més tard.
===Exemple de precedència de regles===
<source language="html">
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Herencia</title>
<style type="text/css">
#caja header h1 { color: blue; }
#caja .cabecera h1 { color: red; }
header h1 { color: lime; }
h1 { color:purple; }
</style>
</head><
<body>
<div id="caja">
<header class="cabecera">
<h1>Cabecera: header</h1>
</header>
</div>
</body>
</html>
</source>
Com podeu observar en el codi anterior, existeixen quatre regles CSS que fan referència al mateix element, concretament a l'encapçalament h1 del codi HMTL.
Per saber quina de les regles s'aplicarà, caldrà calcular el pes de cada una d'elles:
*'''#caja header h1 { color: blue; }'''
La puntuació d'aquesta regla és de 102: 100 per la referència a la classe ''caja'', 1 per la referència a ''header'' i 1 per la referència a ''h1''
*'''#caja .cabecera h1 { color: red; }'''
La puntuació d'aquesta regla és de 111 per la referència a la classe ''caja'', 10 per la referència a la classe ''cabecera'' i 1 per la referència a ''h1''
*'''header h1 { color: lime; }'''
La puntuació d'aquesta regla és de 2, 1 per la referència a ''header'' i 1 per la referència a ''h1''
*'''h1 { color:purple; }'''
La puntuació d'aquesta regla és de 1 per la referència a ''h1''
Per tant, la regla que s'aplicarà en aquest cas és '''#caja .cabecera h1 { color: red; }'''

CSS

2024-02-22T15:36:20Z

Jaume:

=El llenguatge CSS=
CSS és un llenguatge que permet descriure la '''presentació gràfica''' de les pàgines web

CSS aporta una sèrie de beneficis als llocs web:
*'''Menys càrrega:''' s'acostuma a disposar d'un (o varis) fulls associats a totes les pàgines d'un lloc web. Un cop s'han descarregar no es tornes a descarregar.
*'''Menys esforç de modificació''', ja que els estils centralitzars permeten no haver d'anar pàgina a pàgina a realitzar canvis.
*'''Menys esforç per als cercadors''', que poden indexar el contingut ràpidament, sense haver de perdre el temps en estils
*'''Més rapidesa de desenvolupament''', ja que no s'han de repetir els mateixos fragments de codi diverses vegades.
*'''Més accessibilitat''' per als lectors de pantalla, que poden formatar de manera personalitzada les pàgines HTML

==HTML + CSS==
Per a associar un full d'estils a una pàgina web cal incloure el següent fragment de codi:
<source language="html">
<link rel="stylesheet" type="text/css" href="estil.css"/>
</source>
dins de la secció '''<head>''' d'una pàgina.

Es poden associar tants fulls d'estil com es vulgui.

Existeixen dues maneres més d'assignar estils a les pàgines HTML.
* Elements '''<style>'''
* Atribut '''style=""'''

==Arquitectura d'un full d'estils ==
Els fulls d'estils CSS estan constituïts per diverses regles que defineixen com es mostren els elements que especifiquen.

Cada regla té dues parts:
*El '''selector''': determina sobre '''quins''' elements de la pàgina s'aplica l'estil
*La '''declaració''': estableix quins formats s'apliquen sobre la selecció feta
**Cada declaració indica un '''valor''' per a cadascuna de les '''propietats''' de l'element
[[Fitxer:ImatgeCSS1.png]]
Com es pot veure, una declaració es pot aprofitar per a diversos selectors separant-los per comes.

==Selectors bàsics de CSS ==
Els selectors CSS més utilitzats són:
{| class="wikitable"
!|Notació
!|Ús
!|Exemple
|-
|*
|Selecciona tots els elements de l'àmbit
|*{...}
|-
|
|Selecciona per tipus d'element
|p, h3{...}
|-
|.
|Selecciona els elements d'una classe concreta
|.titular{...}
|-
|#
|Selecciona l'element que té l'id indicat
|#capsalera{...}
|-
|(espai)
|Selecciona els elements dins de l'arbre HTML
|div span{...}
|-
|>
|Selecciona els elements justament per sota d'un altre element
|div > span{...}
|}
Podem combinar selectors de diversos tipus: '''cal imaginar l'HTML com un arbre i navegar-lo.

Per exemple, el següent codi:
<source language="html>
<!doctype html>
<html>
<head>
<title>My home page</title>
</head>
<body>
<h1>My home page</h1>
<p>Hello, I am Marijn and this is my home page.</p>
<p>I also wrote a book! Read it
<a href="http://eloquentjavascript.net">here</a>.</p>
</body>
</html>
</source>
Està estructurat com indicar el següent arbre:
[[Fitxer:Html-tree.jpg|thumb|center]]
== Declaració d'estils ==
Els selectors que hem vist fins ara no tindrien cap sentit sense una sèrie de propietats que podem modificar.
Aquestes propietats són molt extenses i no és a l'abast d'aquest mòdul estudiar-los tots. En el següent link, podem trobar el llistat de propietats de CSS [http://www.w3.org/TR/CSS Link]
===Estils de text===
{| class="wikitable"
|-
!| Propietat
!| Valors típics
|-
|'''color:'''
|''Color''
|-
|'''font-family:'''
|Família de fonts
|-
|'''font-size:'''
|''Mida''
|-
|'''font-style:'''
|''normal'' | italic
|-
|'''font-weight'''
|''normal'' | bold
|-
|'''line-height:'''
|''Mida''
|-
|'''text-align:'''
|''left'' | right | center | justify
|-
|'''text-decoration:'''
|''none'' | underline | overline | line-through
|-
|'''text-transform'''
|''none'' | uppercase | lowercase
|-
|'''font'''
|Permet establir ''font-style'' - ''font-variant'' - ''font-weight'' - ''font-size/line-height'' - ''font-family'', en una única declaració
|}
===Exemple estils de text ===

<gallery mode=traditional widths=400px heights=300px>
Fitxer:ImatgeCSS3.png|Pàgina HTML sense CSS
Fitxer:ImatgeCSS2.png|Pàgina HMTL aplicant el CSS inferior
</gallery>

<source language="css">
body {
background-color: #f8f8f8;
font-family: "Lucida Grande", Tahoma, Arial, sans-serif;
font-size:12px;
}

h1, h2 {
border-bottom:1px solid #ccc;
}

div#capsalera h1 {
font: italic bold 50px Georgia, "Times New Roman", serif;
text-align: center;
text-transform: uppercase;
}

span.dolly, a {
color:#7fa3fc;
font-weight: bold;
}

a {
text-decoration:none;
}

div#peu {
text-align:right;
margin-top:40px;
border-top:1px dotted #ccc;
}
</source>
==Colors en CSS==
Les tres maneres més típiques d'indicar colors en CSS són:
*'''En format hexadecimal:#RRGGBB'''.Cada posició representa una xifra de 0 a la F(15) que indica la quantitat d'aquell color.
*'''En format RGB:rgb(r,g,b)'''En cada espai del parèntesi s'indica la quantitat de color del 0 al 255
**Com a derivat d'aquest existeix el format '''format RGBA''', amb un valor de transparència del 0 a l'1 en l'última posició: '''rgb(r,g,b,a)'''
*'''Nom de color''':es proporciona una llista de 147 colors predeterminats que es poden utilitzar directament.
**black, blue, white, red, green, yellow, magenta
**[http://en.wikipedia.org/wiki/Web_colors Colors en CSS]
[[Fitxer:ImatgeCSS4.png|center]]
Els llocs més típics on acostumem a aplicar colors són:
*'''Tipografies''': mitjançant la propietat ''color''
*'''Fons''': mitjançant la propietat ''background-color'' assignen colors de fons a qualsevol tipus d'element
*'''Vores''':''border-color'',''border-left-color'',...

==Unitats de mida==
Les mides es poden indicar en les següents unitats:
{| class="wikitable"
|-
!| Propietat
!| Notació
!| Exemple
|-
|Píxels
|Notació
|Exemple
|-
|Píxels
|'''px'''
|font-size:12px
|-
|Emes(l'equivalent a l'amplada de la lletra m)
|'''em'''
|font-size:1.2em
|-
|Percentatge
|'''%'''
|font-size:120%
|}
Les mides en emes o percentatges són relatives a l'element pare de l'element al qual se li hagi donat estil
*El que s'acostuma a fer és definir la mida del '''body''' i la resta en forma relativa
*El cas que no s'indiqui res al '''body''', s'agafa la mida per defecte del navegador, que acostuma a ser de '''16px''' si no ha estat canviada per l'usuari
==Estils sobre llistats==
{| class="wikitable"
|-
!| Propietat
!| Valors típics
|-
|'''list-style-type:'''
|''none | circle | disc | square | armenian | decimal | decimal-leading-zero | georgian | lower-alpha | lower-greek | lower-latin | lower-roman | upper-alpha | upper-latin | upper-roman | inherit''
|-
|'''list-style-position:'''
|''inside | outside''
|-
|'''list-style:'''
|Permet establir tipus, posició i/o imatge en una única declaració
|}

===Exemple de CSS aplicat a llistes===
<gallery mode=traditional widths=400px heights=300px>
Fitxer:ImatgeCSS6.png|Pàgina HTML sense CSS
Fitxer:ImatgeCSS5.png|Pàgina HMTL aplicant el CSS inferior
</gallery>

<source language="css">
body {
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
font-size: 14px;
color: rgb(50,50,50);
}

h1 {
font: 2em Georgia, "Times New Roman", serif;
letter-spacing: -.5px;
color:#576673;
text-align: center;
}

h2 {
font: 1.4em Georgia, "Times New Roman", serif;
text-transform: uppercase;
color:#687c8e;
border-bottom: 1px dotted #ccc;
}

ul {
list-style-type: circle;
}

ol {
list-style-type: decimal-leading-zero;
}

ol ol {
list-style-type: lower-roman;
}

li em {
color: #ccc;
}

li strong {
color: #6a8ea4;
text-decoration: underline;
}
</source>
==Precedència de regles==
Quan dues declaracions es contradiuen sobre un mateix element, s'apliquen dues normes:
*Primer s'aplica la regla més local
*Si són igual de locals, s'aplica la regla amb la puntuació més alta.
{| class="wikitable"
|-
!| per cada selector...
!| sumem ... punts
|-
|Etiqueta
|1
|-
|Classe(.)
|10
|-
|Id(#)
|100
|-
|Resta
|0
|}
'''Sempre s'aplica aquella regla més específica'''.Si hi ha empat s'aplicarà aquella que aparegui més tard.
===Exemple de precedència de regles===
<source language="html">
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Herencia</title>
<style type="text/css">
#caja header h1 { color: blue; }
#caja .cabecera h1 { color: red; }
header h1 { color: lime; }
h1 { color:purple; }
</style>
</head><
<body>
<div id="caja">
<header class="cabecera">
<h1>Cabecera: header</h1>
</header>
</div>
</body>
</html>
</source>
Com podeu observar en el codi anterior, existeixen quatre regles CSS que fan referència al mateix element, concretament a l'encapçalament h1 del codi HMTL.
Per saber quina de les regles s'aplicarà, caldrà calcular el pes de cada una d'elles:
*'''#caja header h1 { color: blue; }'''
La puntuació d'aquesta regla és de 102: 100 per la referència a la classe ''caja'', 1 per la referència a ''header'' i 1 per la referència a ''h1''
*'''#caja .cabecera h1 { color: red; }'''
La puntuació d'aquesta regla és de 111 per la referència a la classe ''caja'', 10 per la referència a la classe ''cabecera'' i 1 per la referència a ''h1''
*'''header h1 { color: lime; }'''
La puntuació d'aquesta regla és de 2, 1 per la referència a ''header'' i 1 per la referència a ''h1''
*'''h1 { color:purple; }'''
La puntuació d'aquesta regla és de 1 per la referència a ''h1''
Per tant, la regla que s'aplicarà en aquest cas és '''#caja .cabecera h1 { color: red; }'''

File:ImatgeCSS1.png

2024-02-22T15:33:37Z

Jaume:

CSS

2024-02-22T08:09:57Z

Jaume:

=El llenguatge CSS=
CSS és un llenguatge que permet descriure la '''presentació gràfica''' de les pàgines web

CSS aporta una sèrie de beneficis als llocs web:
*'''Menys càrrega:''' s'acostuma a disposar d'un (o varis) fulls associats a totes les pàgines d'un lloc web. Un cop s'han descarregar no es tornes a descarregar.
*'''Menys esforç de modificació''', ja que els estils centralitzars permeten no haver d'anar pàgina a pàgina a realitzar canvis.
*'''Menys esforç per als cercadors''', que poden indexar el contingut ràpidament, sense haver de perdre el temps en estils
*'''Més rapidesa de desenvolupament''', ja que no s'han de repetir els mateixos fragments de codi diverses vegades.
*'''Més accessibilitat''' per als lectors de pantalla, que poden formatar de manera personalitzada les pàgines HTML

==HTML + CSS==
Per a associar un full d'estils a una pàgina web cal incloure el següent fragment de codi:
<source language="html">
<link rel="stylesheet" type="text/css" href="estil.css"/>
</source>
dins de la secció '''<head>''' d'una pàgina.

Es poden associar tants fulls d'estil com es vulgui.

Existeixen dues maneres més d'assignar estils a les pàgines HTML.
* Elements '''<style>'''
* Atribut '''style=""'''

==Arquitectura d'un full d'estils ==
Els fulls d'estils CSS estan constituïts per diverses regles que defineixen com es mostren els elements que especifiquen.

Cada regla té dues parts:
*El '''selector''': determina sobre '''quins''' elements de la pàgina s'aplica l'estil
*La '''declaració''': estableix quins formats s'apliquen sobre la selecció feta
**Cada declaració indica un '''valor''' per a cadascuna de les '''propietats''' de l'element
[[Fitxer:ImatgeCSS1.png|center]]
Com es pot veure, una declaració es pot aprofitar per a diversos selectors separant-los per comes.

==Selectors bàsics de CSS ==
Els selectors CSS més utilitzats són:
{| class="wikitable"
!|Notació
!|Ús
!|Exemple
|-
|*
|Selecciona tots els elements de l'àmbit
|*{...}
|-
|
|Selecciona per tipus d'element
|p, h3{...}
|-
|.
|Selecciona els elements d'una classe concreta
|.titular{...}
|-
|#
|Selecciona l'element que té l'id indicat
|#capsalera{...}
|-
|(espai)
|Selecciona els elements dins de l'arbre HTML
|div span{...}
|-
|>
|Selecciona els elements justament per sota d'un altre element
|div > span{...}
|}
Podem combinar selectors de diversos tipus: '''cal imaginar l'HTML com un arbre i navegar-lo.

Per exemple, el següent codi:
<source language="html>
<!doctype html>
<html>
<head>
<title>My home page</title>
</head>
<body>
<h1>My home page</h1>
<p>Hello, I am Marijn and this is my home page.</p>
<p>I also wrote a book! Read it
<a href="http://eloquentjavascript.net">here</a>.</p>
</body>
</html>
</source>
Està estructurat com indicar el següent arbre:
[[Fitxer:Html-tree.jpg|thumb|center]]
== Declaració d'estils ==
Els selectors que hem vist fins ara no tindrien cap sentit sense una sèrie de propietats que podem modificar.
Aquestes propietats són molt extenses i no és a l'abast d'aquest mòdul estudiar-los tots. En el següent link, podem trobar el llistat de propietats de CSS [http://www.w3.org/TR/CSS Link]
===Estils de text===
{| class="wikitable"
|-
!| Propietat
!| Valors típics
|-
|'''color:'''
|''Color''
|-
|'''font-family:'''
|Família de fonts
|-
|'''font-size:'''
|''Mida''
|-
|'''font-style:'''
|''normal'' | italic
|-
|'''font-weight'''
|''normal'' | bold
|-
|'''line-height:'''
|''Mida''
|-
|'''text-align:'''
|''left'' | right | center | justify
|-
|'''text-decoration:'''
|''none'' | underline | overline | line-through
|-
|'''text-transform'''
|''none'' | uppercase | lowercase
|-
|'''font'''
|Permet establir ''font-style'' - ''font-variant'' - ''font-weight'' - ''font-size/line-height'' - ''font-family'', en una única declaració
|}
===Exemple estils de text ===

<gallery mode=traditional widths=400px heights=300px>
Fitxer:ImatgeCSS3.png|Pàgina HTML sense CSS
Fitxer:ImatgeCSS2.png|Pàgina HMTL aplicant el CSS inferior
</gallery>

<source language="css">
body {
background-color: #f8f8f8;
font-family: "Lucida Grande", Tahoma, Arial, sans-serif;
font-size:12px;
}

h1, h2 {
border-bottom:1px solid #ccc;
}

div#capsalera h1 {
font: italic bold 50px Georgia, "Times New Roman", serif;
text-align: center;
text-transform: uppercase;
}

span.dolly, a {
color:#7fa3fc;
font-weight: bold;
}

a {
text-decoration:none;
}

div#peu {
text-align:right;
margin-top:40px;
border-top:1px dotted #ccc;
}
</source>
==Colors en CSS==
Les tres maneres més típiques d'indicar colors en CSS són:
*'''En format hexadecimal:#RRGGBB'''.Cada posició representa una xifra de 0 a la F(15) que indica la quantitat d'aquell color.
*'''En format RGB:rgb(r,g,b)'''En cada espai del parèntesi s'indica la quantitat de color del 0 al 255
**Com a derivat d'aquest existeix el format '''format RGBA''', amb un valor de transparència del 0 a l'1 en l'última posició: '''rgb(r,g,b,a)'''
*'''Nom de color''':es proporciona una llista de 147 colors predeterminats que es poden utilitzar directament.
**black, blue, white, red, green, yellow, magenta
**[http://en.wikipedia.org/wiki/Web_colors Colors en CSS]
[[Fitxer:ImatgeCSS4.png|center]]
Els llocs més típics on acostumem a aplicar colors són:
*'''Tipografies''': mitjançant la propietat ''color''
*'''Fons''': mitjançant la propietat ''background-color'' assignen colors de fons a qualsevol tipus d'element
*'''Vores''':''border-color'',''border-left-color'',...

==Unitats de mida==
Les mides es poden indicar en les següents unitats:
{| class="wikitable"
|-
!| Propietat
!| Notació
!| Exemple
|-
|Píxels
|Notació
|Exemple
|-
|Píxels
|'''px'''
|font-size:12px
|-
|Emes(l'equivalent a l'amplada de la lletra m)
|'''em'''
|font-size:1.2em
|-
|Percentatge
|'''%'''
|font-size:120%
|}
Les mides en emes o percentatges són relatives a l'element pare de l'element al qual se li hagi donat estil
*El que s'acostuma a fer és definir la mida del '''body''' i la resta en forma relativa
*El cas que no s'indiqui res al '''body''', s'agafa la mida per defecte del navegador, que acostuma a ser de '''16px''' si no ha estat canviada per l'usuari
==Estils sobre llistats==
{| class="wikitable"
|-
!| Propietat
!| Valors típics
|-
|'''list-style-type:'''
|''none | circle | disc | square | armenian | decimal | decimal-leading-zero | georgian | lower-alpha | lower-greek | lower-latin | lower-roman | upper-alpha | upper-latin | upper-roman | inherit''
|-
|'''list-style-position:'''
|''inside | outside''
|-
|'''list-style:'''
|Permet establir tipus, posició i/o imatge en una única declaració
|}

===Exemple de CSS aplicat a llistes===
<gallery mode=traditional widths=400px heights=300px>
Fitxer:ImatgeCSS6.png|Pàgina HTML sense CSS
Fitxer:ImatgeCSS5.png|Pàgina HMTL aplicant el CSS inferior
</gallery>

<source language="css">
body {
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
font-size: 14px;
color: rgb(50,50,50);
}

h1 {
font: 2em Georgia, "Times New Roman", serif;
letter-spacing: -.5px;
color:#576673;
text-align: center;
}

h2 {
font: 1.4em Georgia, "Times New Roman", serif;
text-transform: uppercase;
color:#687c8e;
border-bottom: 1px dotted #ccc;
}

ul {
list-style-type: circle;
}

ol {
list-style-type: decimal-leading-zero;
}

ol ol {
list-style-type: lower-roman;
}

li em {
color: #ccc;
}

li strong {
color: #6a8ea4;
text-decoration: underline;
}
</source>
==Precedència de regles==
Quan dues declaracions es contradiuen sobre un mateix element, s'apliquen dues normes:
*Primer s'aplica la regla més local
*Si són igual de locals, s'aplica la regla amb la puntuació més alta.
{| class="wikitable"
|-
!| per cada selector...
!| sumem ... punts
|-
|Etiqueta
|1
|-
|Classe(.)
|10
|-
|Id(#)
|100
|-
|Resta
|0
|}
'''Sempre s'aplica aquella regla més específica'''.Si hi ha empat s'aplicarà aquella que aparegui més tard.
===Exemple de precedència de regles===
<source language="html">
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Herencia</title>
<style type="text/css">
#caja header h1 { color: blue; }
#caja .cabecera h1 { color: red; }
header h1 { color: lime; }
h1 { color:purple; }
</style>
</head><
<body>
<div id="caja">
<header class="cabecera">
<h1>Cabecera: header</h1>
</header>
</div>
</body>
</html>
</source>
Com podeu observar en el codi anterior, existeixen quatre regles CSS que fan referència al mateix element, concretament a l'encapçalament h1 del codi HMTL.
Per saber quina de les regles s'aplicarà, caldrà calcular el pes de cada una d'elles:
*'''#caja header h1 { color: blue; }'''
La puntuació d'aquesta regla és de 102: 100 per la referència a la classe ''caja'', 1 per la referència a ''header'' i 1 per la referència a ''h1''
*'''#caja .cabecera h1 { color: red; }'''
La puntuació d'aquesta regla és de 111 per la referència a la classe ''caja'', 10 per la referència a la classe ''cabecera'' i 1 per la referència a ''h1''
*'''header h1 { color: lime; }'''
La puntuació d'aquesta regla és de 2, 1 per la referència a ''header'' i 1 per la referència a ''h1''
*'''h1 { color:purple; }'''
La puntuació d'aquesta regla és de 1 per la referència a ''h1''
Per tant, la regla que s'aplicarà en aquest cas és '''#caja .cabecera h1 { color: red; }'''

HTML

2024-02-22T08:00:55Z

Jaume:

== Introducció ==
Un document (pàgina) de Web pot incloure diferents tipus d'informació: text,imatges i enllaços hipertextuals.<br />
Aquests enllaços poden activar la recuperació d'una altra pàgina o la recepció d'un fitxer: una imatge, un programa, una animació...<br />
Per a la creació d'aquestes pàgines s'utilitza el llenguatge HTML, que permet definir els atributs del text, la posició de les imatges i els enllaços mitjançant unes marques que s'insereixen en el document.
Estructura d'un document HTML
Les marques que s'utilitzen en el llenguatge HTML són textos tancats entre els signes < >.<br />
Generalment, funcionen per parelles, l'una en començar i l'altra al final. Normalment, la marca de tancar és la mateixa que la d'obrir amb el caràcter / al davant.
Per identificar un document cal inserir la marca <HTML> al començament i </HTML> al final.

== Estructura d'un document HTML ==

Tot document HTML consta de dues parts:

La capçalera conté informació sobre el propi document. Entre les marques <HEAD> i </HEAD>.

Dins de la capçalera es posa el títol del document, entre les marques <TITLE> i </TITLE>. És el text que es pot llegir a la barra de títol del navegador.
El cos conté el text i les imatges visibles del document. Entre les marques <BODY> i </BODY>.

Exemple
<source language="html">
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
</source>

== Etiquetes d'un document HTML ==

=== Encapçalaments ===

Títols HTML es defineixen amb les etiquetes <nowiki><h1></nowiki> a <nowiki><h6></nowiki>.Etiquetes d'un document HTML

=== Paràgrafs. ===

Paràgrafs HTML es defineixen amb l'etiqueta <nowiki><p></nowiki>.
<source language="html">
<p>Benvinguts a M4</p>
</source>
Els navegadors afegeixen automàticament una línia en blanc abans i després d'un paràgraf.
El navegador traurà espais addicionals i línies addicionals quan es mostra la pàgina.
Qualsevol nombre d'espais, i qualsevol nombre de línies noves, compten com un sol espai.Etiquetes d'un document HTML

=== Enllaços ===

Enllaços HTML es defineixen amb l'etiqueta <a>.

<a href="http://www.w3schools.com/" target="_blank">Visit W3Schools!</a>
– L'atribut href especifica la destinació de l'enllaç.
– L'atribut target especifica on obrir el document vinculat.
– Aquest exemple s'obrirà el document vinculat a una nova
finestra o en una nova pestanya.
*_blank Obre en una nova finestra o pestanya
*_self
*_parent
*_top
*(default) en la mateixa finestra o frame

En el frame pare.
Obre al cos complert de la finestra
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_links_target_top

=== Imatges ===
Les imatges HTML es defineixen amb l'etiqueta <img>.
<img src="url" alt="some_text">
*src és el fitxer d'origen, alt és el text alternatiu.
*L'etiqueta <img> està buida, conté atributs només, i no té una etiqueta de tancament.
*L'atribut alt especifica un text alternatiu que s'utilitzarà, quan un element HTML no es pot visualitzar.
*El valor de l'atribut pot ser llegida pels lectors de pantalla "".
D'aquesta manera, algú "escoltar" a la pàgina web, és a dir, una persona cega, pot "sentir" l'element.
*Si un navegador no pot trobar una imatge, es mostrarà el text alternatiu:
*Es requereix que l'atribut alt. Una pàgina web que no valida correctament sense.Etiquetes d'un document HTML
Imatges.
<source language="html"><img src="html5.gif" alt="HTML5 Icon" width="128" height="128"></source>
*La mida width and height donen la grandaria.
*La mida de la imatge s'especifica en píxels: width = "104" significa 104 píxels de pantalla ampla.
<source language="html"><img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;border:0;"></source>
*Podeu utilitzar l'atribut style per especificar l'amplada i alçada d'una imatge.
*Els valors s'especifiquen en píxels (fes servir px després del valor).
*Afegir "border: 0;" per evitar que IE9 (i anteriors) mostri una vora al voltant de la imatge.Etiquetes d'un document HTML

Les imatges poden estar al nostre directori de feina, o en un directori diferent.

Si l'imatge es troba l'imatge en un subdirectori del nostre directori:
<source language="html"><img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;"></source>
Si es troben en altre ordinador o servidor:
<source language="html"><img src="http://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com"></source>
Podeu inserir imatges animades, amb la mateixa estructura.

=== Taules ===
Les taules es defineixen amb l'etiqueta <nowiki><table></nowiki>.
Les taules es divideixen en files de la taula amb l'etiqueta <nowiki><tr></nowiki>.
Les files es divideixen en columnes que contenen les dades de la taula amb l'etiqueta <nowiki><td></nowiki>.
Una fila de la taula també pot dividir-se en capçaleres de la taula amb el <nowiki><th></nowiki> etiqueta.
Els <nowiki><td></nowiki> poden contenir tot tipus d'elements HTML com a text,imatges, llistes, altres taules, etc.
Si no especifica una vora de la taula, es mostrarà sense vores.
Una vora es pot afegir mitjançant l'atribut border, però és millor utilitzar un full d'estil.Etiquetes d'un document HTML
<source language="html">
<table border="1">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
</source>
Per defecte, tots els navegadors visualitzen la fila <nowiki><th></nowiki> en negreta i centrada.
Per afegir un títol a una taula, utilitzeu l'etiqueta <nowiki><caption></nowiki>.

==== Colapsar cel·les ====
Per a colapsar més d'una columna, utilitzeu l'atribut colspan.
<source language="html">
<table>
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</source>

Per a colapsar més d'una filera,
utilitzeu l'atribut rowspan.
<source language="html">
<table>
<tr>
<th>Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>
</tr>
</table>
</source>

=== Llistes ===

==== Llistes no ordenades ====
Una llista desordenada comença amb l'etiqueta <nowiki><ul></nowiki>. Cada element de la llista comença amb l'etiqueta <nowiki><li></nowiki>.
Els elements de la llista es marcaran amb bales (petits cercles negres).

==== Llistes ordenades ====
Una llista ordenada comença amb l'etiqueta <nowiki><ol></nowiki>. Cada element de la llista comença amb l'etiqueta <nowiki><li></nowiki>.
Els elements de la llista seran marcats amb els números.
==== Llistes amb descripció ====
Una llista de descripció és una llista de termes, amb una descripció de cada terme.
L'etiqueta <nowiki><dl></nowiki> defineix la llista de vista general, l'etiqueta <nowiki><dt></nowiki> defineix el terme (nom), i <nowiki><dd></nowiki> etiqueta descriu cada terme

Llistes no ordenades.
<source language="html">
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</source>
Llistes ordenades.
<source language="html">
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</source>
Llistes amb descripció.
<source language="html">
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl >
</source>

HTML

2024-02-22T07:59:26Z

Jaume: Protected "HTML" ([Edit=Allow only administrators] (indefinite) [Move=Allow only administrators] (indefinite))

== Introducció ==
Un document (pàgina) de Web pot incloure diferents tipus d'informació: text,imatges i enllaços hipertextuals.<br />
Aquests enllaços poden activar la recuperació d'una altra pàgina o la recepció d'un fitxer: una imatge, un programa, una animació...<br />
Per a la creació d'aquestes pàgines s'utilitza el llenguatge HTML, que permet definir els atributs del text, la posició de les imatges i els enllaços mitjançant unes marques que s'insereixen en el document.
Estructura d'un document HTML
Les marques que s'utilitzen en el llenguatge HTML són textos tancats entre els signes < >.<br />
Generalment, funcionen per parelles, l'una en començar i l'altra al final. Normalment, la marca de tancar és la mateixa que la d'obrir amb el caràcter / al davant.
Per identificar un document cal inserir la marca <HTML> al començament i </HTML> al final.

== Estructura d'un document HTML==

Tot document HTML consta de dues parts:

La capçalera conté informació sobre el propi document. Entre les marques <HEAD> i </HEAD>.

Dins de la capçalera es posa el títol del document, entre les marques <TITLE> i </TITLE>. És el text que es pot llegir a la barra de títol del navegador.
El cos conté el text i les imatges visibles del document. Entre les marques <BODY> i </BODY>.

Exemple
<source language="html">
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
</source>

== Etiquetes d'un document HTML ==

=== Encapçalaments ===

Títols HTML es defineixen amb les etiquetes <nowiki><h1></nowiki> a <nowiki><h6></nowiki>.Etiquetes d'un document HTML

=== Paràgrafs. ===

Paràgrafs HTML es defineixen amb l'etiqueta <nowiki><p></nowiki>.
<source language="html">
<p>Benvinguts a M4</p>
</source>
Els navegadors afegeixen automàticament una línia en blanc abans i després d'un paràgraf.
El navegador traurà espais addicionals i línies addicionals quan es mostra la pàgina.
Qualsevol nombre d'espais, i qualsevol nombre de línies noves, compten com un sol espai.Etiquetes d'un document HTML

=== Enllaços ===

Enllaços HTML es defineixen amb l'etiqueta <a>.

<a href="http://www.w3schools.com/" target="_blank">Visit W3Schools!</a>
– L'atribut href especifica la destinació de l'enllaç.
– L'atribut target especifica on obrir el document vinculat.
– Aquest exemple s'obrirà el document vinculat a una nova
finestra o en una nova pestanya.
*_blank Obre en una nova finestra o pestanya
*_self
*_parent
*_top
*(default) en la mateixa finestra o frame

En el frame pare.
Obre al cos complert de la finestra
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_links_target_top

=== Imatges ===
Les imatges HTML es defineixen amb l'etiqueta <img>.
<img src="url" alt="some_text">
*src és el fitxer d'origen, alt és el text alternatiu.
*L'etiqueta <img> està buida, conté atributs només, i no té una etiqueta de tancament.
*L'atribut alt especifica un text alternatiu que s'utilitzarà, quan un element HTML no es pot visualitzar.
*El valor de l'atribut pot ser llegida pels lectors de pantalla "".
D'aquesta manera, algú "escoltar" a la pàgina web, és a dir, una persona cega, pot "sentir" l'element.
*Si un navegador no pot trobar una imatge, es mostrarà el text alternatiu:
*Es requereix que l'atribut alt. Una pàgina web que no valida correctament sense.Etiquetes d'un document HTML
Imatges.
<source language="html"><img src="html5.gif" alt="HTML5 Icon" width="128" height="128"></source>
*La mida width and height donen la grandaria.
*La mida de la imatge s'especifica en píxels: width = "104" significa 104 píxels de pantalla ampla.
<source language="html"><img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;border:0;"></source>
*Podeu utilitzar l'atribut style per especificar l'amplada i alçada d'una imatge.
*Els valors s'especifiquen en píxels (fes servir px després del valor).
*Afegir "border: 0;" per evitar que IE9 (i anteriors) mostri una vora al voltant de la imatge.Etiquetes d'un document HTML

Les imatges poden estar al nostre directori de feina, o en un directori diferent.

Si l'imatge es troba l'imatge en un subdirectori del nostre directori:
<source language="html"><img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;"></source>
Si es troben en altre ordinador o servidor:
<source language="html"><img src="http://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com"></source>
Podeu inserir imatges animades, amb la mateixa estructura.

=== Taules ===
Les taules es defineixen amb l'etiqueta <nowiki><table></nowiki>.
Les taules es divideixen en files de la taula amb l'etiqueta <nowiki><tr></nowiki>.
Les files es divideixen en columnes que contenen les dades de la taula amb l'etiqueta <nowiki><td></nowiki>.
Una fila de la taula també pot dividir-se en capçaleres de la taula amb el <nowiki><th></nowiki> etiqueta.
Els <nowiki><td></nowiki> poden contenir tot tipus d'elements HTML com a text,imatges, llistes, altres taules, etc.
Si no especifica una vora de la taula, es mostrarà sense vores.
Una vora es pot afegir mitjançant l'atribut border, però és millor utilitzar un full d'estil.Etiquetes d'un document HTML
<source language="html">
<table border="1">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
</source>
Per defecte, tots els navegadors visualitzen la fila <nowiki><th></nowiki> en negreta i centrada.
Per afegir un títol a una taula, utilitzeu l'etiqueta <nowiki><caption></nowiki>.

==== Colapsar cel·les ====
Per a colapsar més d'una columna, utilitzeu l'atribut colspan.
<source language="html">
<table>
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</source>

Per a colapsar més d'una filera,
utilitzeu l'atribut rowspan.
<source language="html">
<table>
<tr>
<th>Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>
</tr>
</table>
</source>

=== Llistes ===

==== Llistes no ordenades ====
Una llista desordenada comença amb l'etiqueta <nowiki><ul></nowiki>. Cada element de la llista comença amb l'etiqueta <nowiki><li></nowiki>.
Els elements de la llista es marcaran amb bales (petits cercles negres).

==== Llistes ordenades ====
Una llista ordenada comença amb l'etiqueta <nowiki><ol></nowiki>. Cada element de la llista comença amb l'etiqueta <nowiki><li></nowiki>.
Els elements de la llista seran marcats amb els números.
==== Llistes amb descripció ====
Una llista de descripció és una llista de termes, amb una descripció de cada terme.
L'etiqueta <nowiki><dl></nowiki> defineix la llista de vista general, l'etiqueta <nowiki><dt></nowiki> defineix el terme (nom), i <nowiki><dd></nowiki> etiqueta descriu cada terme

Llistes no ordenades.
<source language="html">
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</source>
Llistes ordenades.
<source language="html">
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</source>
Llistes amb descripció.
<source language="html">
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl >
</source>

Introducció llenguatges de marques

2024-02-22T07:59:11Z

Jaume: Protected "Introducció llenguatges de marques" ([Edit=Allow only administrators] (indefinite) [Move=Allow only administrators] (indefinite))

= Introducció als llenguatges de marques =

Els llenguatges de marques(també anomenats llenguatges de marcat) són aquells que combinen la informació,generalment textual, que conté un document amb marques o anotacions relatives a l’estructura del text o la forma de representar-lo. El llenguatge de marques és el que especifica quines seran les etiquetes possibles, on s’han de col·locar i el significat que tindrà cadascuna d’elles.

== Tipus de llenguatges ==

=== Llenguatges orientats a presentació ===

Usats pels processadors de text com pot ser Microsoft Word® i codifiquen com ha de presentar el document, per exemple, indicant que una determinada paraula s’ha de presentar en font itàlica o que s’ha de deixar un espai de 10 punts en acabar el paràgraf.

=== Llenguatges descriptius ===

Aquest tipus de llenguatges les marques serveixen per indicar què és aquesta informació, és a dir, descriuen que és el que s’està representant. La majoria dels llenguatges de marques que es fan servir avui dia es troben dins aquest grup com per exemple, el SGML i els seus derivats (HTML, XML, etc.)

=== Llenguatges procedurals ===

En aquest tipus de llenguatges les etiquetes són també orientades a presentació però s’integren dins d’un marc procedural que permet definir macros (seqüències d’accions) i subrutines. Entre els exemples més comuns de llenguatges procedurals podem trobar Et X, LaTeX i Postcript.

Durant aquest mòdul veurem els llenguatges descriptius.

== Evolució dels llenguatges de marques ==

A la dècada dels 60 va aparèixer el llenguatge SGML (Standard Generalized Markup Language), que és un descendent directe del llenguatge GML proposat per IBM.

Aquest llenguatge va sorgir per permetre compartir informació per part de sistemes informàtics.

Aquest estàndard va tenir una gran acceptació però no va aconseguir assentar-del tot a causa principalment a la seva complexitat el que provocava que el programari que farà servir SGML acabava sent excessivament extens i complex.

Al final dels 80, dins del CERN, es va crear un llenguatge de marcat pensat per compartir informació fent servir les xarxes de computadors i, de forma més general, mitjançant Internet. Aquest llenguatge es basava en alguns principis de SGML i ho van denominar HTML (Hyper-text Markup Language).

Finalment, en el 1998, W3C va fer públic un nou estàndard que van denominar XML (eXtended Markup Language), més senzill que SGML i més potent que HTML.

== Evolució de l’HTML ==

El W3C ha definit com a successor d’HTML al llenguatge XHTML.

XHTML aplica les regles de sintaxi estricta de XML al llenguatge HTML, facilitant d’aquesta manera el manteniment i processament dels documents.

Amb l’HTML5 conviu una variant de l’HTML i l’XHTML coneguda com sintaxi XHTML5. Aquesta és la primera vegada que HTML i XHTML s’han desenvolupat en paral·lel. La versió definitiva de la cinquena revisió de l’Estàndard es va publicar a l’octubre de 2014.

{|
!align="center"| HTML
!align="center"| 1991
|-
|align="center"| HTML 2.0
|align="center"| 1995
|-
|align="center"| HTML 3.2
|align="center"| 1997
|-
|align="center"| HTML 4.01
|align="center"| 1999
|-
|align="center"| XHTML
|align="center"| 2000
|-
|align="center"| HTML 5.0
|align="center"| 2014
|}

=== Les pàgines web ===

Una pàgina web és un document electrònic adaptat per a la World Wide Web que, normalment, forma part d’un lloc web.

Les pàgines web estan escrites en un llenguatge de marques que proporciona la capacitat de gestionar i inserir hiperenllaços, generalment, HTML.

El contingut de la pàgina pot ser predeterminat (pàgina web estàtica) o generat en el moment de la seva visualització o en sol·licitar-la a un servidor web (pàgina web dinàmica).

Pel que fa a l’estructura de les pàgines web, alguns organismes, especialment el W3C, estableix directives amb la intenció de normalitzar el disseny, per així facilitar i simplificar la visualització i interpretació del contingut.

Exemples de llenguatges de marques

<pre><!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html> </pre>
<pre>
<bookstore> <book category=“COOKING”> <title lang=“en”>Everyday Italian</title> <author>Giada De Laurentiis</author> <year>2005</year> <price>30.00</price> </book> <book category=“WEB”> <title lang=“en”>Learning XML</title> <author>Erik T. Ray</author> <year>2003</year> <price>39.95</price> </book> </bookstore>
</pre>

CSS

2024-02-22T07:58:57Z

Jaume: Protected "CSS" ([Edit=Allow only administrators] (indefinite) [Move=Allow only administrators] (indefinite))

=El llenguatge CSS=
CSS és un llenguatge que permet descriure la '''presentació gràfica''' de les pàgines web

CSS aporta una sèrie de beneficis als llocs web:
*'''Menys càrrega:''' s'acostuma a disposar d'un (o varis) fulls associats a totes les pàgines d'un lloc web. Un cop s'han descarregar no es tornes a descarregar.
*'''Menys esforç de modificació''', ja que els estils centralitzars permeten no haver d'anar pàgina a pàgina a realitzar canvis.
*'''Menys esforç per als cercadors''', que poden indexar el contingut ràpidament, sense haver de perdre el temps en estils
*'''Més rapidesa de desenvolupament''', ja que no s'han de repetir els mateixos fragments de codi diverses vegades.
*'''Més accessibilitat''' per als lectors de pantalla, que poden formatar de manera personalitzada les pàgines HTML

==HTML + CSS==
Per a associar un full d'estils a una pàgina web cal incloure el següent fragment de codi:
<source language="html">
<link rel="stylesheet" type="text/css" href="estil.css"/>
</source>
dins de la secció '''<head>''' d'una pàgina.

Es poden associar tants fulls d'estil com es vulgui.

Existeixen dues maneres més d'assignar estils a les pàgines HTML.
* Elements '''<style>'''
* Atribut '''style=""'''

==Arquitectura d'un full d'estils ==
Els fulls d'estils CSS estan constituïts per diverses regles que defineixen com es mostren els elements que especifiquen.

Cada regla té dues parts:
*El '''selector''': determina sobre '''quins''' elements de la pàgina s'aplica l'estil
*La '''declaració''': estableix quins formats s'apliquen sobre la selecció feta
**Cada declaració indica un '''valor''' per a cadascuna de les '''propietats''' de l'element
[[Fitxer:ImatgeCSS1.png|center]]
Com es pot veure, una declaració es pot aprofitar per a diversos selectors separant-los per comes.

==Selectors bàsics de CSS ==
Els selectors CSS més utilitzats són:
{| class="wikitable"
!|Notació
!|Ús
!|Exemple
|-
|*
|Selecciona tots els elements de l'àmbit
|*{...}
|-
|
|Selecciona per tipus d'element
|p, h3{...}
|-
|.
|Selecciona els elements d'una classe concreta
|.titular{...}
|-
|#
|Selecciona l'element que té l'id indicat
|#capsalera{...}
|-
|(espai)
|Selecciona els elements dins de l'arbre HTML
|div span{...}
|-
|>
|Selecciona els elements justament per sota d'un altre element
|div > span{...}
|}
Podem combinar selectors de diversos tipus: '''cal imaginar l'HTML com un arbre i navegar-lo.

Per exemple, el següent codi:
<source language="html>
<!doctype html>
<html>
<head>
<title>My home page</title>
</head>
<body>
<h1>My home page</h1>
<p>Hello, I am Marijn and this is my home page.</p>
<p>I also wrote a book! Read it
<a href="http://eloquentjavascript.net">here</a>.</p>
</body>
</html>
</source>
Està estructurat com indicar el següent arbre:
[[Fitxer:Html-tree.jpg|thumb|center]]
== Declaració d'estils ==
Els selectors que hem vist fins ara no tindrien cap sentit sense una sèrie de propietats que podem modificar.
Aquestes propietats són molt extenses i no és a l'abast d'aquest mòdul estudiar-los tots. En el següent link, podem trobar el llistat de propietats de CSS [http://www.w3.org/TR/CSS Link]
===Estils de text===
{| class="wikitable"
|-
!| Propietat
!| Valors típics
|-
|'''color:'''
|''Color''
|-
|'''font-family:'''
|Família de fonts
|-
|'''font-size:'''
|''Mida''
|-
|'''font-style:'''
|''normal'' | italic
|-
|'''font-weight'''
|''normal'' | bold
|-
|'''line-height:'''
|''Mida''
|-
|'''text-align:'''
|''left'' | right | center | justify
|-
|'''text-decoration:'''
|''none'' | underline | overline | line-through
|-
|'''text-transform'''
|''none'' | uppercase | lowercase
|-
|'''font'''
|Permet establir ''font-style'' - ''font-variant'' - ''font-weight'' - ''font-size/line-height'' - ''font-family'', en una única declaració
|}
===Exemple estils de text ===

<gallery mode=traditional widths=400px heights=300px>
Fitxer:ImatgeCSS3.png|Pàgina HTML sense CSS
Fitxer:ImatgeCSS2.png|Pàgina HMTL aplicant el CSS inferior
</gallery>

<source language="css">
body {
background-color: #f8f8f8;
font-family: "Lucida Grande", Tahoma, Arial, sans-serif;
font-size:12px;
}

h1, h2 {
border-bottom:1px solid #ccc;
}

div#capsalera h1 {
font: italic bold 50px Georgia, "Times New Roman", serif;
text-align: center;
text-transform: uppercase;
}

span.dolly, a {
color:#7fa3fc;
font-weight: bold;
}

a {
text-decoration:none;
}

div#peu {
text-align:right;
margin-top:40px;
border-top:1px dotted #ccc;
}
</source>
==Colors en CSS==
Les tres maneres més típiques d'indicar colors en CSS són:
*'''En format hexadecimal:#RRGGBB'''.Cada posició representa una xifra de 0 a la F(15) que indica la quantitat d'aquell color.
*'''En format RGB:rgb(r,g,b)'''En cada espai del parèntesi s'indica la quantitat de color del 0 al 255
**Com a derivat d'aquest existeix el format '''format RGBA''', amb un valor de transparència del 0 a l'1 en l'última posició: '''rgb(r,g,b,a)'''
*'''Nom de color''':es proporciona una llista de 147 colors predeterminats que es poden utilitzar directament.
**black, blue, white, red, green, yellow, magenta
**[http://en.wikipedia.org/wiki/Web_colors Colors en CSS]
[[Fitxer:ImatgeCSS4.png|center]]
Els llocs més típics on acostumem a aplicar colors són:
*'''Tipografies''': mitjançant la propietat ''color''
*'''Fons''': mitjançant la propietat ''background-color'' assignen colors de fons a qualsevol tipus d'element
*'''Vores''':''border-color'',''border-left-color'',...

==Unitats de mida==
Les mides es poden indicar en les següents unitats:
{| class="wikitable"
|-
!| Propietat
!| Notació
!| Exemple
|-
|Píxels
|Notació
|Exemple
|-
|Píxels
|'''px'''
|font-size:12px
|-
|Emes(l'equivalent a l'amplada de la lletra m)
|'''em'''
|font-size:1.2em
|-
|Percentatge
|'''%'''
|font-size:120%
|}
Les mides en emes o percentatges són relatives a l'element pare de l'element al qual se li hagi donat estil
*El que s'acostuma a fer és definir la mida del '''body''' i la resta en forma relativa
*El cas que no s'indiqui res al '''body''', s'agafa la mida per defecte del navegador, que acostuma a ser de '''16px''' si no ha estat canviada per l'usuari
==Estils sobre llistats==
{| class="wikitable"
|-
!| Propietat
!| Valors típics
|-
|'''list-style-type:'''
|''none | circle | disc | square | armenian | decimal | decimal-leading-zero | georgian | lower-alpha | lower-greek | lower-latin | lower-roman | upper-alpha | upper-latin | upper-roman | inherit''
|-
|'''list-style-position:'''
|''inside | outside''
|-
|'''list-style:'''
|Permet establir tipus, posició i/o imatge en una única declaració
|}

===Exemple de CSS aplicat a llistes===
<gallery mode=traditional widths=400px heights=300px>
Fitxer:ImatgeCSS6.png|Pàgina HTML sense CSS
Fitxer:ImatgeCSS5.png|Pàgina HMTL aplicant el CSS inferior
</gallery>

<source language="css">
body {
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
font-size: 14px;
color: rgb(50,50,50);
}

h1 {
font: 2em Georgia, "Times New Roman", serif;
letter-spacing: -.5px;
color:#576673;
text-align: center;
}

h2 {
font: 1.4em Georgia, "Times New Roman", serif;
text-transform: uppercase;
color:#687c8e;
border-bottom: 1px dotted #ccc;
}

ul {
list-style-type: circle;
}

ol {
list-style-type: decimal-leading-zero;
}

ol ol {
list-style-type: lower-roman;
}

li em {
color: #ccc;
}

li strong {
color: #6a8ea4;
text-decoration: underline;
}
</source>
==Precedència de regles==
Quan dues declaracions es contradiuen sobre un mateix element, s'apliquen dues normes:
*Primer s'aplica la regla més local
*Si són igual de locals, s'aplica la regla amb la puntuació més alta.
{| class="wikitable"
|-
!| per cada selector...
!| sumem ... punts
|-
|Etiqueta
|1
|-
|Classe(.)
|10
|-
|Id(#)
|100
|-
|Resta
|0
|}
'''Sempre s'aplica aquella regla més específica'''.Si hi ha empat s'aplicarà aquella que aparegui més tard.
===Exemple de precedència de regles===
<source language="html">
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Herencia</title>
<style type="text/css">
#caja header h1 { color: blue; }
#caja .cabecera h1 { color: red; }
header h1 { color: lime; }
h1 { color:purple; }
</style>
</head><
<body>
<div id="caja">
<header class="cabecera">
<h1>Cabecera: header</h1>
</header>
</div>
</body>
</html>
</source>
Com podeu observar en el codi anterior, existeixen quatre regles CSS que fan referència al mateix element, concretament a l'encapçalament h1 del codi HMTL.
Per saber quina de les regles s'aplicarà, caldrà calcular el pes de cada una d'elles:
*'''#caja header h1 { color: blue; }'''
La puntuació d'aquesta regla és de 102: 100 per la referència a la classe ''caja'', 1 per la referència a ''header'' i 1 per la referència a ''h1''
*'''#caja .cabecera h1 { color: red; }'''
La puntuació d'aquesta regla és de 111 per la referència a la classe ''caja'', 10 per la referència a la classe ''cabecera'' i 1 per la referència a ''h1''
*'''header h1 { color: lime; }'''
La puntuació d'aquesta regla és de 2, 1 per la referència a ''header'' i 1 per la referència a ''h1''
*'''h1 { color:purple; }'''
La puntuació d'aquesta regla és de 1 per la referència a ''h1''
Per tant, la regla que s'aplicarà en aquest cas és '''#caja .cabecera h1 { color: red; }'''

==Bibliografia==
José Luís Antúnez, Apunts SMX2-M8

File:Ethernet.jpg

2022-09-07T11:56:05Z

Jaume:

M17

2022-05-09T16:18:15Z

Jaume:

{{DISPLAYTITLE:Seguretat en xarxes}}
=Introducció=
Avui dia trobem un fet normal estar treballant en una xarxa on hi ha connectats milers d'ordinadors entre si, amb una gran quantitat de dades circulant per la xarxa. Accés a internet. Connectivitat amb altres organitzacions mitjançant el correu electrònic, comprar electrònicament, etc..
Tots aquests conceptes que avui dia ens resulten tant familiars, la seva funcionalitat va ser ideada al voltant de la dècada dels anys 60 i 70 del segle passat. Per la gent que ho va idear, aquestes funcionalitats no eren més que suposicions.<br />
Molts anys després, aquestes bases inicials i teòriques segueixen funcionant tal i com es van dissenyar. Fa falta molt de temps per canviar les coses, i més per crear elements que han estat adaptats segons les necessitats. Per exemple la pila OSI, que havia de representar el model a seguir en les xarxes i finalment va prevaler el model TCP/IP ja que tot i els seus problemes a nivell teòric, ja es trobava en explotació.
Aquest model d'evolució basat en la necessitat presenta el problema que encara que resulti adaptatiu, pot fallar en elements tant significatius com és la seguretat. I és que TCP/IP té més en compte la connectivitat que no pas la seguretat. La seguretat ha estat presa en consciència temps després, quan s'han posat al descobert fallades existents.<br />
[[File:PilaOSI.jpg|325px|thumb|Pila OSI i TCP/IP]]
La seguretat és cosa de tots els usuaris, encara que hi hagi qui diu que és únicament cosa dels informàtics. L'ésser humà és reactiu, és a dir fins que no li passa alguna cosa per a que es generi la necessitat.<br />
Per exemple, la idea que un usuari té d'un certificat passa per ser "alguna cosa que fa que la pàgina web sigui segura". A aquesta mateixa persona posteriorment d'explicar-li el que era un atac "man in the middle" se li va preguntar per que acceptava un certificat quan apareixia un error en pantalla. La seva resposta va ser contundent: "això ho he fet moltes vegades i mai passa res. A més si no accepto es tanca la pantalla". Això reflexa que alguna cosa no s'està fent del tot bé. <br />
O es forma a la persona per a poder prendre aquest tipus de decisions, o se li està deixant acceptar una responsabilitat que a la qual no està qualificat.<br />
Sembla que la seguretat acaba recaient en qui menys coneixement té sobre la mateixa. Fins i tot sovint els propis tècnics no estan degudament preparats. Han passat ja anys des de que es van publicar els primers resultats amb atacs que veurem a classe com ara '''ARP poisoning''' i encara resulta eficaç en la majoria de xarxes actuals. Sembla doncs que la seguretat es redueix a simples especulacions o paranoies d'alguns, que finalment no s'acaben produint mai.<br />
Finalment si analitzem el que passa en moltes empreses, on cal que inverteixin recursos (personal, maquinari, diners...) en quelcom que no és tangible, la solució és clara: no s'inverteix. Sovint s'escolta allò de ''"si no posem solució pot arribar a passar que..."''. Aquesta frase queda oblidada, i finalment s'escolta allò de ''"ja vaig dir que podia passar, i ha passat"''.

=Xarxes de dades i els seus dispositius=
[[File:alohanet.jpg|300px|thumb|Topologia d'alohanet]]
[[File:arpanet.jpg|300px|thumb|Topologia d'arpanet]]
[[File:Tokenethernet.jpg|300px|thumb|Topologia token ring i ethernet]]
[[File:ethernet.jpg|300px|thumb|Vampir utilitzat en ethernet]]
Avui dia no es pot concebre que una empresa pugui treballar de forma normal si hi ha una fallada en les seves comunicacions de xarxa. Les infraestructures de xarxa s'han convertit en un punt neuràlgic per la gran quantitat de dades que absorbeixen. <br />
La idea de les xarxes i dels seus protocols és la de comunicar. El seu objectiu és aconseguir que la xarxa sigui funcional. Les xarxes han evolucionat però el seu objectiu primordial és la funcionalitat. La resta queda com a secundari.<br />
L'origen de les xarxes d'ordinadors és quasi tant antic com el dels propis ordinadors. Qui es preocuparia en aquella època de la seguretat quan el principal problema era aconseguir que les màquines es poguessin comunicar? L'important era que funcionés i en aquell entorn la confiança entre terminals es pressuposava. Els models de comunicació es van crear per cavallers i per a cavallers.<br />
El concepte de hacker, privacitat o confidencialitat es trobaven a anys llum. La fiabilitat era el nucli sobre el que es recolzaven les comunicacions.<br />
Una de les primeres grans xarxes va ser ARPANET. Teoritzada els anys 60 tenia com a objectiu la unió de diferents sistemes informàtics d'organitzacions nord-americanes. Les bases de la seva funcionalitat era:
* Implementar un sistema de comunicacions descentralitzat on poguessin existir múltiples camins entre dos punts.
* La segmentació dels missatges en fraccions que poguessin seguir camins diferents
La xarxa hauria de ser capaç de mantenir la comunicació encara que un segment fallés. Tornem a tenir la connectivitat com a prioritat.<br />
Alhora que es dissenyava ARPANET, la Universitat de Hawai va idear un mecanisme per mantenir connectades diferents persones i centres disseminats entre el gran nombre d'illes de Hawai sense necessitat d'utilitzar un medi tipus punt a punt com ho feia ARPANET. La van anomenar ALOHANET. <br />
La solució adoptada per ALOHANET va ser utilitzar un tecnologia ja existent, la radio. Això feia que les múltiples estacions de les illes haguessin de compartir un medi comú i amb l'inconvenient que en un medi com la radio, dues estacions no poden comunicar-se alhora.<br />
La solució ideada per la universitat de Hawai donava la solució al problema. Es basava en la fiabilitat i en la cortesia, parlava qui volia i la resta esperava a que acabés. Si dos estacions parlaven a la vegada, es donaven per assabentades de l'error i una d'elles esperava a que l'altre realitzés la comunicació. Naixia el CSMA/CD. Aquest CSMA/CD evolucionarà fins a convertir-se en el nostre Ethernet.<br />
Les xarxes tipus token i les xarxes ethernet van conviure durant un temps. Mentre una evitava les col·lisions de dades (token) altres els assumeix i intenten recuperar-se. Cada sistema tenia les seves avantatges i els seus inconvenients, i únicament el temps va fer prevaler una sobre les altres. <br />
Tot aquest conjunt de tecnologies físiques requerien tenir una comptabilitat a nivell lògic. En aquest sentit com més senzill fos tot, més fàcil seria la compatibilitat, pero la seguretat tendeix a complicar les coses. Així en el primers plantejaments es va apostar per la senzillesa i sobretot per la rapidesa en tenir una implementació. En aquest sentit ARPANET ja era funcional, i tot i que de forma teòrica conté problemes, TCP/IP es va convertir en l'estàndard de xarxes.<br />
Els sistemes per cable es van imposar als sistemes sense fil, tot i que més endavant van retornar amb força utilitzant-se dins les xarxes locals. En un principi, les xarxes contenien un nombre poc elevat de màquines i una topologia en forma de bus com la que utilitzava ethernet resultava suficient per les necessitats de la xarxa.<br />
Tots els equips estaven connectats al un mateix cable central, que permetia un creixement moderats de la xarxa i tot amb un cost no gaire elevat.<br />
Tot i això, a mida que creixia la xarxa les col·lisions eren més probables, el cable de bus es feia era més llarg i per tant tenia més atenuació de la senyal i el gran problema d'aquesta topologia: qualsevol problema en el cable central deixava la xarxa totalment desconnectada. I com més llarg, i per tant més equips pogués tenir la xarxa, més possibilitats hi havia de que fallés el cable central. Un canvi de tecnologia era necessari.
El canvi tecnològic va arribar i va ser un canvi total en la forma de dissenyar les xarxes. S'elimina el cable central de bus i s'incorpora un element central aglutinador de totes les connexions de la xarxa. Es passa per tant d'una topologia de tipus bus a una topologia de tipus estrella.<br />
L'element central s'anomena ''hub'' o concentrador. La incorporació d'aquest element on es connectaran tots els equips de la xarxa fa que tota la comunicació passi a través d'ell i que, en cas de fallada en algun punt de la xarxa, únicament l'equip que estigui connectat en aquell punt sigui l'afectat, passant desapercebut per la resta de la xarxa. A més, l'equip concentrador pot fer la funció de repetidor de la senyal, amb la qual cosa s'elimina el problema de la pèrdua d'intensitat de senyal que tenia el cable de bus.<br />
Tot sembla perfecte, hem eliminat el problema d'atenuació de senyal, el problema de caiguda de la xarxa en cas que el cable de bus falli i a més hem aconseguit regenerar la senyal. Hi ha però un problema, ningú va pensar en la seguretat. Així heretant el funcionament de la xarxa de bus, on la informació arribava a tots els equips connectats al bus, el hub també reenviava la informació a tots els equips que a ell es trobaven connectat. Tornem a tenir un escenari que es basa en la confiança en la resta de les màquines de la xarxa. Quin ens garanteix que una màquina no utilitzi les dades que no eren per ell?. De fet, una xarxa on l'element central sigui un ''hub'' es considera una xarxa de confiança.<br />
Tot i el problema de seguretat que plantejava l'ús de concentradors, el canvi es va produir principalment pel baix rendiment que donen quan la xarxa té un nombre elevat d'equips. El fet que un ''hub'' reenviï el trànsit a totes les màquines que es troben a ell connectades, fa incrementar el trànsit de forma exponencial. A més, com més equips hi hagi connectats a la xarxa més col·lisions es produeixen i per tant més reenviaments, i més trànsit. No era d'estranyar que aviat les xarxes amb concentradors saturessin i caiguessin. Calia un sistema que segmentés la xarxa i aïllés els problemes. Si els concentradors oferien una solució física dins la capa 1 de la pila OSI, calia escalar el problema a la capa 2, que ofereix la possibilitat de donar una adreça als equips, control de flux, control d'errors i en general mediatitzar la comunicació.<br />
Els dispositius de capa 2 que apareixen com els ''switch'' o commutadors, ofereixen unes condicions de connectivitat més òptimes que les que aportaven els concentradors de la capa inferior. Generen la figura del domini de colisió. Bàsicament controlaven el problema:''"Per què si vull enviar la informació a un equip li he d'enviar a tota la resta?"''. Un efecte col·lateral d'aquest canvi era la seguretat, però no era la base fonamental. Si el trànsit d'un equip era dirigit únicament a un equip, el trànsit total de la xarxa es veia reduït d'una forma molt clara. A més també es poden implementar controls de tempesta de broadcast o les implementacions de STP (Spanning Tree Protocol).<br />
*[https://www.youtube.com/watch?v=Oh2xkXAdZbQ Exemple de tempesta broadcast]
Tot i la clara millora de comunicacions que representa l'ús d'un ''switch'' davant de l'ús d'un ''hub'', fins que el cost d'un i l'altre no es va anivellar no es va començar a implantar la utilització de commutadors en les xarxes.<br />
Portar la informació des d'un sistema a un altre sense que arribés a tots era la clau, per tant es necessitava adreçar. Que els equips tinguessin algun element que els diferenciés a nivell de capa 2 era fonamental. L'especificació original de IEEE 802, oferia MAC com a mecanisme d'assignació universal d'adreces.<br />
Amb aquesta informació un switch és capaç d'emmagatzemar en una taula les adreces MAC de les màquines que hi ha connectades a cada una de les seves boques. D'aquesta manera quan una trama de MAC A vagi dirigida a MAC B, el switch la transmetrà pel port corresponent a la màquina que té la MAC B. Si per casualitat, MAC B estigués en aquell moment transmetent cap a MAC C, els switch és capaç d'emmagatzemar la trama fins que acabi la transmissió de MAC B a MAC C. D'aquesta manera soluciona el problema de les colisions.<br />
Amb tot, hi ha un problema que que ha estat assumit com a un mal menor: les trames broadcast. Quan d'un equip no en sabem la seva adreça MAC i necessitem establir una comunicació, hem de saber quina adreça MAC té. No ens quedarà un altre remei que preguntar a totes les màquines de la xarxa, mitjançant una trama broadcast, quina és la MAC d'aquella màquina.<br />
Així doncs, com que l'existència d'aquestes trames en condicions de treball normals és habitual, s'assumeix com un mal menor la utilització de les mateixes, excepte en casos d'un ús desorbitat de les mateixes que pugui ocasionar una tempesta de broadcast que podria inutilitzar la xarxa comunicada amb un Switch.<br />
L'aparició del switch va oferir velocitat i ample de banda,i de forma col·lateral una sensació de seguretat. El trànsit va dirigit d'un equip a un altre sense que ningú de l'entorn fos receptor de la comunicació. Per tant existeix la falsa creença que amb un switch és impossible obtenir el trànsit entre dues entitats.<br />
Per tant fins ara s'han destil·lat una sèrie d'idees del tot el que hem vist:
* La idea fonamental és la connectivitat: primer que funcioni i la resta vindrà després
* Quan la idea és funcional, s'avança a millorar altres característiques: serveis, velocitat i ample de banda
* Els protocols i idees precursores es dissenyen amb el propòsit que siguin funcionals
* L'evolució de la tecnologia del hardware representa en essència la necessitat: que tot vagi més ràpid i es pugui unir una major quantitat de sistemes
* La confiança és la base de la comunicació

=Sniffing, Spoofing i Haijacking=
Els primers sistemes ethernet, consistien en un bus en els que les màquines de la xarxa enviaven les seves dades. Si ho se sap on està el receptor de les nostres dades haurem d'enviar les dades a totes les màquines amb les que compartim el medi.<br />
El procés d'avaluació és simple: "Aquesta informació és per a mi?" Si la resposta és afirmativa, processo la informació. En cas contrari la descarto. La peculiaritat radica en el fet que si un paquet de dades m'arriba i no és per mi, què em condiciona a que no la processi? Cavallerositat?
==Sniffing==
[[File:sniffers.png|300px|thumb|Tipus de sniffers]]
[[File:Snnifer.gif|300px|thumb|Sniffer amb un switch]]
Si la informació arriba al sistema, no hi ha cap mecanisme que m'impedeixi que la processi. '''Sniff''' és el fet de rastrejar i limitar aquesta cavallerositat. Eliminar aquest element que fa que elimini les dades que no van dirigides a mi és el '''mode promiscu'''.<br />
Un '''sniffer''' és simplement l'eina que fa tot això: permet que el sistema es posi en mode promiscu. Addicionalment també incorpora una interfície que permet visualitzar les dades que rastreja.<br />
Sovint un '''sniffer''' és considerat com un element maliciós dins una xarxa d'ordinadors. Això no sempre és cert ja que sovint ens podem trobar amb un equip que no tingui el comportament esperat dins la xarxa, i ens serà de molta utilitat poder rastrejar el trànsit que rep i envia l'equip per intentar trobar el problema. <br />
Un altre cas on un '''sniffer''' no és cap element maliciós, el trobem en el cas d'estar en una xarxa d'estrella on l'element central és un hub. En aquest cas el trànsit de la xarxa li arriba directament a l'equip amb l'sniffer. Simplement el que hem de fer és interpretar-lo.<br />
En una xarxa amb un element central que sigui un switch, no podrem realitzar aquest comportament d'una forma tant senzilla. En aquest cas, si volem monitoritzar el trànsit de xarxa d'algun equip haurem de configurar la possibilitat que tenen la majoria de switchs de replicar el trànsit de xarxa a través del port on estigui connectat l'equip amb l'sniffer.<br />
Molt sovint aquesta configuració s'obvia i genera un important forat de seguretat dins la xarxa, doncs una persona malintencionada podria arribar a tenir accés a tot el trànsit de xarxa de forma senzilla.<br />
El que està clar és que si no descuidem la configuració del nostre switch, estem complicant força el fet que algú pugui accedir al trànsit de la nostra xarxa. De totes maneres en base als protocols i dissenys inicials de les xarxes, la informació continua transmetent-se en clar, els protocols inicials no especificaven el contrari. Simplement cal fer-se passar pel destinatar-hi per arribar a tenir accés a ella. Aquí entra en joc el següent punt del tema: ''spoofing''

==Spoofing==
[[File:Spoofing.jpg|300px|thumb|Spoofing]]
En el sentit més estricte, ''spoofing'' fa referència al conjunt de tècniques enfocades a la suplantació. Per exemple, ''MAC Spoofing'' fa referència a la suplantació de l'adreça física d'un altre sistema. D'aquesta manera podríem obtenir una adreça IP reservada en un servidor DHCP, connectar-nos a una Wifi o accedir a un port concret d'un switch.<br />
Així doncs ''spoofing'' no es pot considerar una tècnica concreta, sinó un conjunt d'elles: ''ARP Spoofing'', ''DNS Spoofing'' o ''Web Spoofing''.<br />
Gairebé en cada capa TCP/IP pot existir una tècnica de suplantació.
La tècnica de ARP Spoofing consisteix en '''reconduir''' el trànsit entre dues màquines a través d'un tercer. No s'ha de confondre amb la replicació de trànsit.<br />
En el cas d'un switch en el que un trànsit va de A a B, es replica a través del port de monitoratge a C. En el cas de la reconducció el trànsit del l'equip A arribaria primer a C, i aquest el reconduirà a B. Encara que la diferència sembli subtil, hi ha un abisme entre una tècnica i l'altre.<br />
Seguint amb l'exemple de spoofing anterior, què li impedeix a C alterar les dades abans de tornar-les a enviar a B?. Estem parlant de ''Hijacking''<br />

==Hijacking==
[[File:Hijacking.png|300px|thumb|Hijacking]]
Per ''hijacking'' entenem el segrest de la informació per part d'un equip. De tècniques de Hijacking n'hi ha tantes o més que de spoofing, tot i que sovint es confonen.<br />
Un exemple de ''Browser Hijacking'' és quan un navegador web es troba segrestat per una aplicació malintencionada de forma que la informació que rep l'usuari ve condicionada pels paràmetres de l'aplicació. Per exemple la modificació de la pàgina d'inici o l'accés a una pàgina enlloc d'una altra.<br />
Un segon exemple el podrem trobar en una sessió telnet. A través de la tècnica d'''ARP spoofing'', un atacant pot redirigir el trànsit i veure el contingut de la sessió telnet.<br />
Cal tenir en compte que per a que un atacant pugui realitzar alguna acció maliciosa cal que es trobi en mode promiscu. Si no pot processar la informació que no és específicament per ell, no podrà reconduir-la ni alterar-la.<br />

=Wireshark=
[[File:Wireshark.png|thumb|Pantalla principal de wireshark]]
Wireshark és una eina d'anàlisis de paquets de xarxa. Els captura en temps real i el visualitza en format inteligible.
Wireshark inclou filtres, codificació de colors i altres característiques que permeten aprofundir en el trànsit de xarxa i inspeccionar paquets de forma individual.
La primera pantalla que trobem quan iniciem el programa ens demana quina de les interfícies de xarxa de la nostra màquina volem capturar.<br />
Un cop seleccionada la interfície la pantalla canviarà per mostrar-nos la pantalla principal del programa. En aquesta segona pantalla serà on treballarem i on podrem visualitzar gran part de la informació que ens pot proporcionar el programa. Bàsicament la pantalla es dividirà en tres parts:
* '''Zona de paquets capturats'''
En aquesta zona apareixeran en temps real els paquets que son capturats en la interfície de xarxa.
* '''Zona de detall del paquet'''
En aquesta zona podrem veure detalls sobre el paquet que hem seleccionat en la zona de paquets capturats
* '''Zona de dades en brut'''
Aquí podem veure les dades en brut del paquet, és a dir, tal i com arriben a la targeta de xarxa.<br />
A banda d'aquestes tres zones principals, en la pantalla principal del programa també trobem un menú superior i botons d'opcions, que ens permetran obtenir altre tipus d'informació sobre el trànsit capturat pel programa.<br />
Finalment, trobarem també una barra on podrem escriure i crear filtres que s'aplicaran sobre el conjunt de paquets capturats pel programa i que es mostren en la zona de paquets capturats. Aquesta és una de les eines més importants i útils de wireshark, ja que el nombre de paquets capturats sovint és molt elevat i es fa gairebé impossible seguir les connexions des de la zona de paquets capturats. Amb la utilització de filtres podrem visualitzar únicament els paquets d'una connexió que ens interessi, o d'un tipus en concret.
=Atacs=
Un atac informàtic és un mètode pel qual un individu, mitjançant un sistema informàtic, intenta prendre el control, desestabilitzar o danyar un altre sistema informàtic (ordinador, xarxa privada, etcètera).
==Tipus atacs==
Els atacs informàtics els podem classificar en dos grans grups:
*Segons l'ús que fan de la informació
*Segons l'objectiu buscat en l'atac
===Segons informació===
*''Passius''<br />
Registren l'ús de recursos i/o accedeixen a informació del sistema
*''Actius''<br />
Produeixen canvis en la informació<br />
===Segons objectiu===
* Reconeixement de sistemes
* Vulnerabilitat en els sistemes
* Robatori d'informació
* Modificació de missatges transmesos
* Anàlisis del trànsit
* Suplantació d'identitat
* Modificació del transit i taules d'enrutament
* Connexió no autoritzada a equips
* Malware
* Atacs a sistemes criptogràfics
* Atacs de denegació de servei

==Fases d'un atac informàtic==
Un atac informàtic, generalment passa per aquestes cinc etapes:
* Descobriment i exploració del sistema informàtic
* Cerca de vulnerabilitats a l'equip
* Explotació i aprofitament de les vulnerabilitats detectades
* Corrupció del sistema per deixar portes obertes (canvi de passwords)
* Eliminat de proves reveladores de l'atac (logs)

==Atacs switch==
===ARP Spoofing===
Pràctica 1
===MAC Flooding===
====Tipus d'atac====
L'atac '''MAC Flooding''' el podem classificar dins dels atacs passius, com un atac per accedir a la informació d'altres equips.

====Objectiu====
El MAC Flooding és un mètode d'atac que intenta comprometre la seguretat dels commutadors de xarxa. Els commutadors mantenen una taula anomenada '''MAC table'''. Aquesta taula MAC consisteix en una relació entre les adreces MAC dels equips connectats al commutador i el port en el que estan connectats. Aquesta taula és la que permet als commutadors redirigir el trànsit únicament al port on es troba el destinatari.
Fet que els distingeix del hub, que redirigeixen el trànsit per tots els ports, fent que aquest sigui accessible per tots els equips que estan connectats a ell.<br />
L'objectiu de l'atac '''MAC Flooding''' és aquesta taula MAC.
====Desenvolupament====
La intenció de l'atac és enviar una gran quantitat de trames ethernet. Aquestes trames contindran com adreça MAC origen diferents equips, normalment generades a l'atzar. En conseqüència el commutador anirà emmagatzemant en la seva taula MAC les adreces origen d'aquestes trames. Arribarà un moment en el que aquestes adreces MAC ocuparan tota la capacitat de la taula d'adreces MAC. En aquest moment les adreces MAC dels equips legítims de la xarxa es faran fora de la taula i aquesta quedarà totalment plena d'adreces MAC falsejades. En aquest moment el commutador no podrà entregar qualsevol dada que li arribi per la xarxa al seu legítim destinatari. En conseqüència els commutadors, en casos com aquests, es comporten com a un hub per tal d'assegurar la connectivitat de la xarxa. I al fer-ho, estan enviant la informació per tots els ports del commutador. L'atacant ja té accés a les dades de la xarxa.<br />
<div style="width: 560px; height: 315px; margin: 0 auto;">
<youtube>HEhRzyEC-ns</youtube>
</div>
<div style="width: 560px; height: 315px; margin: 0 auto;">
<youtube>jxNRxB9yN9k</youtube>
</div>

====Prevenció====
Hi ha quatre maneres bàsiques de prevenir un atac '''MAC FLooding'''
* ''Port security''
Activar la seguretat de port en el switch. Amb aquest mètode podem limitar el nombre d'adreces MAC que pot emmagatzemar un port d'un commutador. D'aquesta manera impedirem que encara que rebem un atac '''MAC Flooding''' la taula MAC del commutador ocupi tota la seva capacitat.
* ''Adreces estàtiques''
Si configurem el commutador per a que utilitzi adreces MAC dinàmiques, l'atac queda neutralitzat. Ara bé, no utilitzar adreces MAC dinàmiques comporta una gran feina per a l'administrador de sistemes. I per a cada canvi que es produeixi en la xarxa, caldrà modificar la configuració de tots els equips.
* ''Autentificar amb un servidor AAA''
Un servidor AAA és aquell que implementa un protocol AAA, com per exemple un servidor Radius, un LDAP, EAP, etc...Aquest tipus de servidor, abans d'autoritzar un equip en la xarxa en verifica la seva identitat. [https://es.wikipedia.org/wiki/Protocolo_AAA Mes informació]

===Doble etiquetatge VLAN===
====Tipus d'atac====
Aquest atac el podem classificar dins dels atacs passius, com un atac que modifica el trànsit de xarxa. Aquest atac s'acostuma a utilitzar com a pas previ a un atac de denegació de servei
====Objectiu====
L'objectiu d'aquest atac és saltar d'una VLAN a una altra i poden accedir a màquines que en un principi son inabastables. Com s'ha dit anteriorment, aquest tipus d'atac és previ a la realització d'un atac de denegació de servei, doncs un cop s'ha aconseguit saltar la VLAN i accedir a la víctima, es produeix l'atac en si mateix.
====Desenvolupament====
Recordem breument la teoria de VLANs. Les VLAN aïllen màquines que es troben connectades a un mateix commutador en xarxes lògiques que entre elles són independents.
Les VLAN tenen les següents característiques:
*Enllaços d'accés
Aquest tipus d'enllaços transmeten les dades de la VLAN en la qual està configurat el port al que pertanyen. Les dades que poguessin arribar de VLAN diferents serien descartats.
*Enllaços troncals
[[File:VLANHopping.png|thumb|VLAN Hopping]]
Aquest tipus d'enllaç normalment uneix commutadors i permet el pas de paquets de diferents VLANs. Aquests paquets d'han de trobar etiquetats segons la normativa IEEE802.1q, que permet especificar amb una etiqueta la VLAN a la qual pertany el paquet. A aquest tipus d'enllaç se li ha d'especificar quina és la VLAN nativa i quines són les VLAN a les que permet el pas de dades.
Aquest tipus d'atac aprofita el fet que la majoria de commutadors realitzen únicament una desencapsulació 802.1q, el que permet a l'atacant introduir una segona etiqueta 802.1q dins el paquet.
L'atac d'etiquetatge doble es desenvolupa seguint aquestes tres passes. Suposarem que la VLAN nativa és la 10:
# L'atacant envia una trama 802.1q amb doble etiqueta al switch. L'encapçalament extern porta l'etiqueta de la VLAN de l'atacant, l'encapçalament intern porta l'etiqueta de la VLAN de la víctima.
# La trama arriba al switch, que observa que la trama va destinada a la VLAN 10, que és la nativa. El switch reenviarà la trama a tots els ports que pertanyin a la VLAN 10. En el port d'enllaç troncal, no es torna a etiqueta la trama ja que pertany a la VLAN nativa. En aquest punt, l'etiqueta de la VLAN 20 segueix intacta, el primer switch no l'ha inspeccionat.
# El segon switch observa únicament l'etiqueta interna que tenia originàriament el paquet que va enviar l'atacant, i per tant veu que la trama va dirigida a la VLAN 20. El segon switch enviarà doncs, la trama a la VLAN 20 segons el que li indiqui la seva taula d'adreces MAC.

Com podeu veure aquest tipus d'atac és unidireccional, i únicament funciona quan l'atacant es connecta a un port de la mateixa VLAN que la VLAN natica del port troncal.

====Prevenció====
El millor mètode per evitar aquest tipus d'atacs és assegurar la VLAN nativa dels ports troncals sigui diferent que la VLAN de qualsevol port d'usuari.
De fet, es considera una pràctica recomanada de seguretat la utilització d'una VLAN fixe per a tots els ports troncals de la xarxa.

===Switch spoofing===
====Tipus d'atac====
L'atac '''Switch Spoofing''' el classifiquem dins dels atacs passius, ja que no modifica informació de la xarxa. D'altra banda és una atac que suplanta identitat, fa una connexió no autoritzada de l'equip.
====Objectiu====
L'objectiu d'aquest atac és aconseguir que el nostre equip sigui identificat com un commutador amb un enllaç troncal amb un altre commutador. D'aquesta manera aconseguirem que el transit de les VLAN ens arribi a la nostra màquina. D'aquesta manera podrem executar un atac MiTM o un ataca de força bruta contra una altra màquina de la xarxa.
====Desenvolupament====
El desenvolupament d'aquest atac es fa a través d'un software que simuli que la màquina atacant és un commutador que vol negociar un enllaç troncal amb el commutador víctima. El software enviarà els paquets DTP necessaris per a poder realitzar aquesta negociació.
Quan a un commutador no li modifiquem la configuració que té de fàbrica, aquesta és la següent:
*'''Administrative mode: dynamic auto''' Implica que està disposat a negociar un enllaç troncal de forma dinàmica
*'''Operational mode: static access''' El switch opera en mode access
*'''Negotiation of trunking: On''' El protocol dinàmic d'enllaç troncal està activat i per tant es pot negociar
*'''Operational Trunking Encapsulation: native''' La VLAN nativa pot ser troncal
*'''Access Mode VLAN: 1''' Quan un enllaç és en mode access, la VLAN és 1
*'''Trunking Native Mode VLAN: 1''' Quan l'enllaç és troncal la VLAN nativa és 1
Per tant un port d'un commutador per defecte permet el protocol DTP, negociacions sobre els ports troncals i la VLAN 1 com a VLAN nativa. I amb aquest tipus de configuració, l'atac resulta possible.
<div style="width: 560px; height: 315px; margin: 0 auto;">
<youtube>mMGezerlg9c</youtube>
</div>

====Prevenció====
Per a intentar evitar aquest atac, cal tenir configurat el commutador i tots els ports sense utilitzar de la següent manera:
*El port ha d'estar configurat manualment com a port d'accés
*El port ha d'estar dins una VLAN que no estigui utilitzada per ningú i que no porti a cap destí
*DTP ha d'estar deshabilitat en el port
*La VLAN nativa utilitzada és una VLAN que no està sent utilitzada enlloc més i no porta enlloc
*El port està administrativament deshabilitat
*No utilitzar mai la VLAN1 per res, a no ser que es vulgui integrar amb altres dispositius.

==Atacs router==
Els atacs a en router fan referència a atacs on principalment s'intenta aprofitar vulnerabilitats del protocol IP, i per tant de l'encaminament dels paquets, per a realitzar atacs principalment de denegació de servei.<br />
Abans de parlar dels atacs cal recordar com funciona la fragmentació de paquets IP.
===Fragmentació de paquets IP===
Com s'ha comentat anterior ment el protocol IP és l'encarregat de l'encaminament dels paquets, és a dir, defineix la trajectoria que seguiran els paquets des del seu origen fins a la seva destinació. No és un protocol fiable ni orientat a connexió, o sigui que no garanteix el control de fluxe, la recuperació en cas d'error ni que els paquets arribin al seu destí.<br />
A l'hora de passar a una capa inferior els paquets IP s'encapsulen en trames que, en funció del tipus de xarxa, tindran una longitud determinada. El tamany d'aquestes trames, anomenat MTU, pot variar d'una xarxa a una altra en funció del medi físic utilitzat.<br />
Per tant, el protocol IP ha de tenir en compte que cas dispositiu podrà transmetre trames amb una longitud superior al MTU establert per la xarxa per la qual passa. La fragmentació divideix el datagrames IP en fragments de menor longitud. El reensamblat és l'operació contraria.

===Fragmentació en xarxes Ethernet===
LA MTU per defecte en una xarxa Ethernet és de 1500 bytes. Així doncs, un paquet IP de més gran de 1500 bytes haurà de ser fragmentat en dos o més paquets.<br />
Per a que un paquet pugui ser reconstruït en l'equip destí, aquest ha de tenir aquesta informació:
* Cada fragment ha d'estar associat a un altre utilitzant un identificador de fragment anomenat '''identificador IP''' o '''ID fragment'''.
*Informació sobre la seva posició en el paquet no fragmentat
*Informació sobre la longitud de les dades transportades en el fragment
*Cada fragment ha de saber si existeixen més fragments a continuació seu o no. Ho indica el flag '''MF'''(''more fragments'')
Tota aquesta informació anirà en la capçalera IP, col·locada dins el datagrama IP.<br />
En la capçalera IP, que normalment serà de 20 bytes, estarà continguda la informació necessària per a poder dirigir el datagrama IP des del seu origen fins al seu destí.<br />

Si la MTU d'Ethernet és de 1500 bytes, si descomptem els 20 bytes de la capçalera IP ens queda que una trama Ethernet d'un datagrama IP pot contenir 1480 bytes d'informació.
[[File:tramaEthernet.png|500px|thumb|center|Datagrama IP dins una trama Ethernet]]
Darrera la capçalera IP, s'encapsulen les dades. Aquestes poden ser tant d'un protocol IP com TCP, UDP o ICMP. Si per exemple aquestes fóssin TCP, inclourien la capçalera TCP i les dades TCP.<br />
[[File:paquetICMP.png|500px|thumb|center|Trama Ethernet d'un paquet ICMP de 4028 bytes]]
En la figura anterior veiem una trama ICMP la longitud de la qual és de 4028 bytes. Dins una xarxa Ethernet haurà de fragmentar-se en paquets de 1500 bytes. El primer d'ells contindrà les capçaleres IP del datagrama i de la trama ICMP.
[[File:Fragment1Total.png|500px|thumb|center|Primer dels datagrames IP, amb les capçaleres IP i ICMP]]
Així el primer dels datagrames IP contindrà en els primers 20 bytes la capçalera IP, i en els 8 següents que ja serien de dades la capçalera ICMP del paquet ICMP que ha fragmentat. Fixeu-vos que la capçalera IP indica el protocol del paquet que està transmetent, l'identificador de paquet que serà comú en tots els fragments, l'indicador de si segueixen més fragments, l'offset del paquet i la longitud de les dades enviades.<br />
Per la seva banda, la capçalera ICMP indica el tipus de petició ICMP, en aquest cas ''request''.
[[File:Fragment1.png|500px|thumb|center|Detall del primer datagrama IP enviat]]
El segon dels paquets únicament contindrà en els seus primers 20 bytes la capçalera IP del segon datagrama IP en el que s'ha fragmentat el paquet inicial ICMP. Els següents 1480 bytes, seran dades del segon fragment del paquet ICMP.
[[File:Fragment2Total.png|500px|thumb|center|Contingut del segon paquet]]
Veiem que els valors del camp protocol, id de fragment, offset i indicador de més fragments es mantenen. Ha canviat únicament l'offset per indicar que les dades transmeses es troben a partir de la posició 1480 del primer byte del paquet original.
[[File:Fragment2.png|500px|thumb|center|Dades del segon datagrama IP]]
L'últim dels fragments contindrà la resta de dades del paquet original, que en aquest cas no arriben al màxim de 1500 bytes.
[[File:Fragment3Total.png|500px|thumb|center|Dades del tercer paquet]]
Veiem que en aquest cas l'indicador de més fragments té el valor 0 i que la longitud i l'offset del paquet han variat.
[[File:Fragment3.png|500px|thumb|center|Contingut del tercer paquet]]
===Fragments petits===
====Tipus d'atac====
Aquest atac és de tipus passiu, ja que no modifica cap informació del sistema: s'aprofita de vulnerabilitats del protocol. És un atac per intentar enganyar els sistemes de comunicació i aconseguir dur,a continuació, un altre atac
====Objectiu====
L'objectiu d'aquest atac és aprofitar una característica del protocol TCP per aconseguir saltar els filtres IP que utilitzen molts firewalls antics. Un cop superat aquest filtre, es pot dur a terme una connexió no permesa a algun servei de la màquina víctima.
====Desenvolupament====
Segons el RFC (Request For Comment) 791 (IP), tots els nodes d'internet (routers) han de ser capaços de transmetre paquets de 68 bytes sense fragmentar-los.<br />
El tamany mínim d'una capçalera IP sense opcions és de 20 bytes, el tamany màxim de la capçalera IP amb totes les opcions és de 60 bytes.<br />
El tamany mínim de dades que pot contenir un paquet IP és de 8 bytes.<br />
Per tant, si generem un paquet de 68 bytes de dades no serà fragmentat i podrem enviar-lo fins a la màquina destí que haguem triat.<br />
La idea de l'atac és aconseguir un paquet suficientment petit per a que hi hagi dades de la capçalera TCP que s'incloguin en un segon fragment del paquet. D'aquesta manera les regles de filtrat dels firewalls no seran complides i el paquet no serà rebutjat.
Anem a veure un exemple:
En aquest exemple s'enviarà un primer fragment de 68 bytes, on 60 seran la capçalera IP i 8 bytes seran de dades, i contindran els primers 8 bytes de la capçalera TCP. Aquest 8 bytes són suficients per determinar el port origen i el port destí, pero els flags de connexió estaran en un suposat segon paquet.<br />
Els filtres del firewall intentaran eliminar les peticions de connexió (flag SYN=1 i ACK=0), però en aquest primer paquet no podran saber si està realitzant una connexió o no, i per tant el deixaran passar a ell i als possibles fragments posteriors que el segueixen.
[[File:Tiny1.jpg|500px|thumb|center|Fragment 1]]
Com podeu veure en el fragment 1 únicament s'especifica el port origen i el port destí. Com que no sabem si demana realitzar una connexió, les regles del firewall no el bloquejaran ni a ell ni als fragments d'ell que vinguin a continuació.
[[File:Tiny2.jpg|500px|thumb|center|Fragment 2]]
El fragment 2, és el que conté els camps que especifiquen la connexió al port, però com que el firewall ja ha deixat passar el primer fragment i els hipotètics conseqüents, aquest és permès i es realitza la connexió al port destí especificat al fragment 1.
[[File:Tiny3.jpg|500px|thumb|center|Fragment reensamblat]]
Finalment el fragment reensamblat ens mostra el que seria un paquet sense fragmentar que fa la connexió al port destí.
====Prevenció====
La principal manera d'impedir aquest atac és especificar a la configuració del router o del firewall un tamany mínim del primer fragment de connexió TCP, de manera que els flags de connexió estiguin inclosos en aquest primer fragment. D'aquesta manera sempre es sabrà en el moment de rebre el primer fragment si s'esta intentant realitzar una connexió al port o no, i en cas necesaari podrem descartar el fragment.

===Fragments sobreposats===
====Tipus d'atac====
De la mateixa manera que l'atac de paquets petit, aquest atac és de tipus passiu ja que explota vulnerabilitats de protocols pero no modifica les dades que es transmeten.
====Objectiu====
L'objectiu d'aquest atac és aconseguir realitzar una connexió a un servei on en principi no està permesa la connexió. Per tant, l'objectiu és saltar-se la seguretat d'un equip per a poder realitzar un hipotètic segon atac.
====Desenvolupament====
Aquest atac té la mateixa base que l'atac de fragments petits, però intenta saltar la protecció de mida mínima de paquets. En aquest cas el primer dels fragments que s'envia conté tots els flags de connexió de la capçalera TCP, la vulnerabilitat es troba en la utilització de l'offset de les capçaleres per a sobreescriure la capçalera del primer fragment.<br />
[[File:super1.jpg|500px|thumb|center|Fragment 1]]
Com es pot veure en la imatge anterior, s'envia un paquet que conté totes les dades de la capçalera TCP. En aquest cas els filtres no el rebutjarien, ja que la capçalera està completa. Fixem-nos que la capçalera no indica que es vulgui realitzar una connexió a la màquina (flag ACK=0 i flag SYN=0). Per tant, com que no intenta realitzar cap connexió els filtres tampoc el rebutjarien.
[[File:super2.jpg|500px|thumb|center|Fragment 2]]
El segon fragment, com es veu en la imatge anterior, conté les dades reals de la connexió que volem realitzar. Ara bé, els filtres veuran que el fragment té offset=1, per la qual cosa interpretaran que la connexió no s'està realitzant en aquest fragment ja que és hi ha un paquet previ que suposa que és qui fa la connexió i per això no el rebutjaran. El camp offset treballa en unitats de 64 bytes, per tant un offset=1 ens indica que el fragment comença a la posició 65 del paquet reensamblat.
[[File:Super3.jpg|500px|thumb|center|Fragment 3]]
Com que el segon fragment comença a la posició 65 del segon paquet, sobreescriu la capçalera TCP del primer fragment deixant únicament el port origen, port destí del primer fragment. Hem aconseguit un paquet TCP que realitza una connexió i que s'ha saltat els filtres de seguretat.

====Prevenció====
La prevenció d'aquest atac és l'ús de firewalls reensamblin els paquets abans d'analitzar les seves regles de connexió. Aquests firewalls són més cars i a l'haver de reensamblar els paquets, fan que la latència de la xarxa augmenti.

===IP Spoofing===
Veure a la pràctica 3

===IP Flooding===
Veure a la pràctica 3
==Atacs en xarxes sense fil==
Les xarxes sense fil cada vegada han tingut més projecció dins el món de les comunicacions. Centrant-nos en el món dels computadors, les xarxes més àmpliament utilitzades són les xarxes WIFI.
Com bé sabem, aquestes xarxes comparteixen el medi de transmissió de dades: l’aire. Per tant, realitzant un atac man in the middle pot resultar molt senzill, doncs les dades ens passen per davant constantment. Només cal escoltar-les.
Evidentment, aquesta situació resultat molt insegura: qualsevol persona pot arribar a capturar les nostres dades que viatgen per la xarxa. Per solucionar aquesta problemàtica apareixen les encriptacions de dades dins la xarxa.
Aquestes encriptacions es produeixen entre client i punt d’accés, i per tant les dades viatgen pel medi totalment encriptades i en principi qui aconsegueixi escoltar-les no podrà interpretar-les a no ser que disposi de la clau per desxifrar-les.
Existeixen tres encriptacions bàsiques: WEP, WAP i WAP2.

===WEP (Privacitat equivalent al cablejat)===
WEP va ser desenvolupat per a xarxes sense fil i aprovat com a estàndard de seguretat WIFI el 1999. Tenia com a objectiu oferir el mateix nivell de seguretat que les xarxes cablejades. Tot i això existeixen molts problemes de seguretat que la fan fàcil de trencar i difícil de configurar.<br />

Tot i les tasques per a intentar millorar el sistema WEP, segueix sent una solució altament vulnerable. Els sistemes que utilitzin aquest protocol haurien de ser actualitzats o canviats.<br />

WEP va ser oficialment abandonat per l'aliança WIFI el 2004.
===WPA (Accés protegit WIFI)===
WAP va ser utilitzat com a millora del WEP mentre es desenvolupava l'estàndard de seguretat sense fil 802.11i. Un any abans que WEP fos oficialment abandonat, WPA ja estava altament adoptat.<br />
La majoria de les aplicacions WPA modernes utilitzen una clau prèviament compartida (PSK), coneguda normalment com a WPA Personal, i el protocol d'Integritat de Clau Temporal o TKIP per a l'encriptació. WPA Enterprise utilitza un servidor d'autenticació per a la generació de claus i certificats.<br />

Tot i que WPA també s'ha demostrat que és un sistema bastant vulnerable a la intrusió, aquestes no es realitzen tant pel propi sistema WPA sino pel sistema de configuració de WIFI segura (WPS), un sistema auxilitar desenvolupat per a simplificar la vinculació de dispositius a punts d'accés.
==WPA2==
La millora més important introduïda dins el sistema WPA2 de seguretat és l'encriptació mitjançant l'Estàndard de Xifrat Avançat (AES). Aquest sistema d'encriptació està aprovat pel govern dels EUA per xifrar la informació classificada d'alt secret. Per tant, podem suposar que és suficientment bo com pre protegir una xarxa domèstica.
Lamentablement, la possibilitat d'atacs través de la configuració de WIFI segura (WPS), segueix sent alta en els actuals punts d'accés WPA2. Encara que forçar l'accés a una xarxa segura WPA/WPA2 pot comportar vàries hores de computació, segueix sent un problema de seguretat real.<br />
Es recomana deshabilitar WPS, i seria bo ajustar el firmware del punt d'accés per a no oferir WPS, per excloure definitivament aquest tipus d'atacs.
==Millor mètode de seguretat WIFI==
Aquesta és la classificació bàsica de millor a pitjor del mètodes moderns de seguretat WIFI disponibles en els routers actuals (posteriors a 2006):
# WPA2 + AES
# WPA + AES
# WPA + TKIP/AES
# WPA + TKIP
# WEP
# Xarxa oberta
El millor és desactivar la configuració de wifi segura (WPS) i configurar el router amb WPA2+AES.

File:PilaOSI.jpg

2022-05-09T16:16:26Z

Jaume:

File:Alohanet.jpg

2022-05-09T16:16:20Z

Jaume:

File:Arpanet.jpg

2022-05-09T16:16:14Z

Jaume:

File:Tokenethernet.jpg

2022-05-09T16:16:08Z

Jaume:

File:Sniffers.png

2022-05-09T16:15:42Z

Jaume:

File:Snnifer.gif

2022-05-09T16:15:34Z

Jaume:

File:Spoofing.jpg

2022-05-09T16:15:19Z

Jaume:

File:Hijacking.png

2022-05-09T16:15:14Z

Jaume:

File:Wireshark.png

2022-05-09T16:15:05Z

Jaume:

File:VLANHopping.png

2022-05-09T16:14:38Z

Jaume:

File:TramaEthernet.png

2022-05-09T16:14:31Z

Jaume:

File:PaquetICMP.png

2022-05-09T16:14:24Z

Jaume:

File:Fragment1Total.png

2022-05-09T16:14:17Z

Jaume:

File:Fragment1.png

2022-05-09T16:14:11Z

Jaume:

File:Fragment2Total.png

2022-05-09T16:13:58Z

Jaume:

File:Fragment2.png

2022-05-09T16:13:51Z

Jaume:

File:Fragment3Total.png

2022-05-09T16:13:45Z

Jaume:

File:Fragment3.png

2022-05-09T16:13:35Z

Jaume:

File:Tiny1.jpg

2022-05-09T16:13:27Z

Jaume:

File:Tiny2.jpg

2022-05-09T16:13:21Z

Jaume:

File:Tiny3.jpg

2022-05-09T16:13:14Z

Jaume: