CSS

Visualització d'XML i HTML

Visualització d'XML

• XML sovint es veu només com un format per emmagatzemar dades.

• Hi ha vocabularis XML pensats per ser "visualitzats":

  • SVG: Mostrar imatges vectorials2D

  • XHTML: Representació de dades en format web

  • MathXML: Fórmules matemàtiques

  • etc...

VISUALITZACIÓ

• Sovint fa falta alguna forma de mostrar la informació XML als humans
• XML no està pensat per ser llegit
  • Normalment es pot interpretar però no sol ser còmode

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE jdt SYSTEM "jdt.dtd">
<jdt>
  <houses>
    <house id="stark">
      <name>House Stark</name>
      <sigil src="https://vignette.wikia.nocookie.net/gameofthrones/images/8/8a/House-Stark-Main-Shield.PNG/revision/latest/scale-to-width-down/350?cb=20170101103142"/>
      <word>Winter Is Coming</word>
      <regions>
        <region>The North</region>
      </regions>
      <allegiances>
        <![CDATA[<ul>
  <li>Targaryen </li>
  <li>Baratheon (formerly)</li>
  <li>Sovereign (formerly)</li>
</ul>]]>
      </allegiances>
      <quote>
        <![CDATA[<p>
<em>"You were born in the long summer, you've never known anything else. But now winter is truly coming. In the winter, we must protect ourselves, look after one another."</em>
</p>
<p>
— Lord Eddard Stark.
</p>]]>

      </quote>
    </house>
    <house id="lannister">
      <name>House Lannister</name>
      <sigil src="https://vignette.wikia.nocookie.net/gameofthrones/images/8/8a/House-Lannister-Main-Shield.PNG/revision/latest/scale-to-width-down/350?cb=20170101095357"/>
      <word type="common">A Lannister Always Pays His Debts</word>
      <regions>
        <region>The Crownlands</region>
        <region>The Westerlands</region>
      </regions>
      <allegiances>
        <![CDATA[<ul>
  <li>Targaryen (formerly)</li>
  <li>Baratheon (formerly)</li>
  <li>Sovereign</li>
</ul>]]>
      </allegiances>
      <quote>
        <![CDATA[<p>
<em>"You have to give it to the Lannisters – they may be the most pompous, ponderous cunts the gods ever suffered to walk the world, but they do have outrageous amounts of money."</em>
</p>
<p>
―Renly Baratheon
</p>]]>
      </quote>
    </house>
    <house id="targaryen">
      <name>House Targaryen</name>
      <sigil src="https://vignette.wikia.nocookie.net/gameofthrones/images/4/43/House-Targaryen-Main-Shield.PNG/revision/latest/scale-to-width-down/350?cb=20170510235320"/>
      <word>Fire and Blood</word>
      <regions>
        <region>Dragonstone</region>
        <region>Casterly Rock</region>
        <region when="formerly">Bay of Dragons</region>
        <region when="claimant">The Crownlands</region>
      </regions>
      <allegiances>
        <![CDATA[<ul>
  <li>Sovereign</li>
</ul>]]>
      </allegiances>
      <quote>
        <![CDATA[<p>
<em>"Half the Targaryens went mad didn't they? What's the saying? 'Every time a Targaryen is born the gods flip a coin.'"</em>
</p>
<p>
―Cersei Lannister
</p>]]>
      </quote>
    </house>
    <house id="tyrell">
      <name>House Tyrell</name>
      <sigil src="https://vignette.wikia.nocookie.net/gameofthrones/images/c/cf/House-Tyrell-Main-Shield.PNG/revision/latest/scale-to-width-down/350?cb=20170108163035"/>
      <word type="common">What Is Dead May Never Die</word>
      <regions>
        <region>Iron Islands</region>
      </regions>
      <allegiances>
        <![CDATA[<ul>
  <li>Targaryen</li>
  <li>Baratheon (formerly)</li>
</ul>]]>
      </allegiances>
      <quote>
        <![CDATA[<p>
<em>"Luckily for us Tyrells, our blood runs quite warm."</em>
</p>
<p>
―Margaery Tyrell
</p>]]>
      </quote>

    </house>
    <house id="greyjoy">
      <name>House Greyjoy</name>
      <sigil src="https://vignette.wikia.nocookie.net/gameofthrones/images/8/86/House-Greyjoy-Main-Shield.PNG/revision/latest/scale-to-width-down/350?cb=20170523015836"/>
      <word>Growing Strong</word>
      <regions>
        <region>The Reach</region>
      </regions>
      <allegiances>
        <![CDATA[
<ul>
  <li>Sovereign</li>
  <li>Targaryen (formerly)</li>
  <li>Baratheon (formerly)</li>
</ul>]]>
      </allegiances>
      <quote>
        <![CDATA[<p>
<em>"We are ironborn. We're not subjects, we're not slaves. We do not plow the field or toil in the mine. We take what is ours."</em>
</p>
<p>
―Balon Greyjoy
</p>]]>
      </quote>
    </house>
    <house id="baratheon">
      <name>House Baratheon of King's Landing</name>
      <sigil src="https://vignette.wikia.nocookie.net/gameofthrones/images/4/43/House-Baratheon-of-King%27s_Landing-Main-Shield.PNG/revision/latest/scale-to-width-down/350?cb=20170519011708"/>

      <word>Ours Is the Fury</word>
      <regions>
        <region>The Crownlands</region>
      </regions>
      <allegiances>
        <![CDATA[<ul>
  <li>Sovereign</li>
  <li>Targaryen (formerly)</li>
</ul>]]>
      </allegiances>
      <quote>
        <![CDATA[<p>
<em>"The King Joffrey Baratheon is neither a true king, nor a true Baratheon. He's your bastard son."</em>
</p>
<p>
―Robb Stark to Jaime Lannister
</p>]]>
      </quote>

    </house>
  </houses>
  <characters>
    <character>
      <name>Eddard Stark</name>
      <image src="https://vignette.wikia.nocookie.net/gameofthrones/images/3/37/Eddard_Stark_infobox_new.jpg/revision/latest/scale-to-width-down/323?cb=20160730050722"/>
      <status alive="no"/>
      <culture>Northmen</culture>
      <religions>
        <religion>Old Gods of the Forest</religion>
      </religions>
      <allegiance house="stark"/>
    </character>
    <character>
      <name>Arya Stark</name>
      <image src="https://vignette.wikia.nocookie.net/gameofthrones/images/5/54/Arya_the_dragon_and_the_wolf_s7.jpg/revision/latest/scale-to-width-down/319?cb=20170828062911"/>
      <status alive="yes"/>
      <culture>Northmen</culture>
      <religions>
        <religion>Old Gods of the Forest</religion>
        <religion>Faith of the Seven</religion>
        <religion when="formerly">Many-Faced God</religion>
      </religions>
      <allegiance house="stark"/>
    </character>
    <character>
      <name>Cersei Lannister</name>
      <image src="https://vignette.wikia.nocookie.net/gameofthrones/images/c/c3/Profile-CerseiLannister.png/revision/latest/scale-to-width-down/323?cb=20170828071355"/>
      <status alive="yes"/>
      <culture>Andal</culture>
      <allegiance house="lannister"/>
    </character>
    <character>
      <name>Daenerys I Targaryen</name>
      <image src="https://vignette.wikia.nocookie.net/gameofthrones/images/5/5f/Daenerys_Dragonpit.jpg/revision/latest?cb=20171015095128"/>
      <status alive="yes"/>
      <culture>Valyrian</culture>
      <allegiance house="targaryen"/>
    </character>
    <character>
      <name>Loras Tyrell</name>
      <image src="https://vignette.wikia.nocookie.net/gameofthrones/images/5/5f/Daenerys_Dragonpit.jpg/revision/latest?cb=20171015095128"/>
      <status alive="no"/>
      <culture>Andal</culture>
      <religions>
        <religion>Faith of the Seven</religion>
      </religions>
      <allegiance house="tyrell"/>
    </character>
    <character>
      <name>Euron Greyjoy</name>
      <image src="https://vignette.wikia.nocookie.net/gameofthrones/images/f/fc/Euron-Profile.PNG/revision/latest/scale-to-width-down/318?cb=20170916200257"/>
      <status alive="yes"/>
      <culture>Ironborn</culture>
      <allegiance house="greyjoy"/>
    </character>
    <character>
      <name>Robert I Baratheon</name>
      <image src="https://vignette.wikia.nocookie.net/gameofthrones/images/d/d4/RobertBaratheon.jpg/revision/latest/scale-to-width-down/307?cb=20141119000127"/>
      <status alive="no"/>
      <culture>Andal</culture>
      <religions>
        <religion>Faith of the Seven</religion>
      </religions>
      <allegiance house="baratheon"/>
    </character>
  </characters>
</jdt>

Navegadors web

• Amb HTML representen les etiquetes de forma predeterminada...
• A cada etiqueta HTML li assignen una forma per defecte de representar-la
  • <h1>: Arial, 26px, negreta, ...
    

Navegadors web

• Els navegadors web són una de les eines habituals de representar llenguatges de marques
• Amb HTML les etiquetes tenen un estil per defecte, però XML té un número infinit d'etiquetes...
• Es mostra com en l'exemple anterior

Mostrar les dades

• Per convertir un XML perquè el llegeixi un humà caldrà:
  • Transformar el document a un format més pensat per ser llegit (HTML, PDF, ... )
    • XSLT
  • Especificar la forma en que s'han de mostrar les dades
    • CSS
      

CSS

• Els Cascading Style Sheets (CSS) són una forma popular de donar format a les dades d'un document
  • Es fa servir massivament per formatar les pàgines HTML d'Internet
  • Els documents XML i HTML són semblants i per tant es podran tractar de la mateixa forma
    • Hi ha diferències perquè tenen objectius diferents

CSS

• CSS permet definir les regles de presentació d'un document a partir de les etiquetes que conté
• Fa que no calgui barrejar les dades amb el contingut
• No tots els navegadors tracten correctament ni de la mateixa forma CSS
  • S'han de provar els documents en diferents navegadors per comprovar que tot es visualitza bé
    

Versions de CSS

• CSS 1: La versió inicial oferia unes poques capacitats de visualització però ja no està suportada pel W3C
• CSS 2: Expandeix les característiques de CSS1 afegint noves funcionalitats
• CSS 3:
  • Està definit en mòduls i dóna un control més potent de la visualització dels documents
    
  • És la més corrent actualment

Associar CSS amb documents

CSS i XML

• Per aplicar fulles d'estil CSS a XML es fa servir l'etiqueta especial xml-stylesheet
• S'ha de definir sempre darrere de l'etiqueta de definició d'XML

<?xml-stylesheet type="text/css" href="full.css" ?>

CSS i XML

• També es poden afegir més atributs
  • Title: El nom o el títol del full
  • Media: Indica sota quin medi es farà servir el CSS: screen, print, tty, aural, braille, handheld, tv, all
    • ​Se'n poden posar diversos alhora
  • Charset: Indica el codi de caràcters que es fa servir
  • Alternate: Indica si el CSS que es fa servir és el preferit. Pot ser 'yes' o 'no'.
    • Per defecte és 'no'

CSS i HTML: Inclusió

• Fitxer extern:
  • L'etiqueta LINK
    • ​Serveix per definir un document CSS extern
    • Accepta més o menys els mateixos atributs que l'etiqueta xml-stylesheet

CSS i HTML: Inclusió

• CSS Incrustat:

  • No és la forma més recomanada de fer-ho ja que complica la compartició

  • L'etiqueta STYLE

    • Permet especificar regles CSS dins del document HTML

  • Atribut style:

    • Permet definir regles específiques per aun element en particular.

CSS i HTML: Inclusió

•  El format de LINK és:

<link type="text/css" rel="stylesheet" href="fitxer.css" ?>

Fitxer d'estil

Relació del “link” amb el document​

CSS Incrustat

Etiqueta STYLE

<style type="text/css">
    ... regles ...
</style>

Atribut STYLE

<p style="color:green">

REGLES CSS

CSS

Definim de quina forma es representaran les diferents etiquetes:

h1 { font-family: arial; }

Selector

Propietat

Valor

CSS

Si volem especificar més d'una propietat simplement es posen una darrere l'altra dins dels corxets separades amb un punt i coma ( ; )

h1 {
    font-family:arial;
    font-weight:bold;
    color:#FF0000;
    background-color:#00FF00;
}

Herència

La "C" de CSS vol dir “Cascading” i vol dir que les propietats es poden heretar pels elements fill

h1, h2 {
    font-family:arial;
    font-weight:bold;
    color:#FF0000;
    background-color:#00FF00;
}
h2 { font-style: italic; }

“h2” a més de les característiques anteriors estarà en cursiva

Herència

Si repetim una etiqueta en el mateix nivell i s'hi repeteix alguna propietat, el darrer valor és el vàlid

nom {
    font-family:arial;
    color: blue;
}
nom { color:red; }

El contingut de 'nom' es pintarà de color vermell perquè és la darrera definició que s'ha trobat

Representació

Coneixent les propietats es té un sistema de representació de dades molt potent

@import url('https://fonts.googleapis.com/css?family=Merriweather|Merriweather+Sans');

* {
    color: #555555;
    font-family: 'Merriweather Sans', sans-serif;
    display: block;
    margin: 5px;
}

house name {
    font-family: 'Merriweather', serif;
    font-weight: bold;
    background-color: #222222;
    color: whitesmoke;
    text-align: center;
    padding: 10px;
}

house word {
    font-weight: bolder;
    font-size: larger;
}


house region {
    text-align: center;
    color: lightgray;
    background-color: #555555;
    padding: 10px;
    margin-left: 300px;
    border-radius: 10px;
}

house quote {
    display: none;
}

house allegiances {
    display: none;
}

+

=

REPRESENTACIÓ

Coneixent les propietats es té un sistema de representació de dades molt potent

REGLES CSS

SELECTORS

Selectors

A part d'especificar etiquetes disposem d'uns selectors predefinits

Selector universal

• Sintaxi: *
• Selecciona totes les etiquetes del document

<?xml version=”1.0” encoding=”UTF-8” ?>
<classe>
  <alumne>
    <nom>Juanito<nom>
  </alumne> 
</classe>

* { color: #FF0000; }

Juanito

Selector DE tipus

• Sintaxi: etiqueta,etiqueta
• Selecciona les etiquetes del document a partir del seu nom

<?xml version=”1.0” encoding=”UTF-8” ?>
<classe>
  <alumne>
    <nom>Juanito<nom>
  </alumne>
  <professor>Andrés</professor>
</classe>

nom { color: #FF0000; }
professor { color: #0000FF; }

Juanito

Andrés 

Selector DE tipus

• Amb aquest selector també podem especificar més d'un selector separant-los amb comes

nom, cognom { color: red; }

Selector DE FILLS

• Sintaxi: pare > fill
• Selecciona el 'fill' que son fills directes de la etiqueta 'pare'

<?xml version=”1.0” encoding=”UTF-8” ?>
<classe>
  <professor>
    <nom>Andrés</nom>
  </professor>
  <alumne>
    <nom>Juanito</nom>
  </alumne>
</classe>

alumne > nom { color: #FF0000; }

Juanito

Andrés 

SELECTOR DE DESCENDENTS

• Sintaxi: etiqueta descen
• Selecciona les etiquetes 'descen' que siguin descendents d'etiqueta

<?xml version=”1.0” encoding=”UTF-8” ?>
<classe>
  <professor>
    <nom>Andrés</nom>
  </professor>
  <alumne>
    <nom>Juanito</nom>
  </alumne>
</classe>

classe nom { color: #FF0000; }

Juanito

Andrés 

SELECTOR DE GERMANS ADJACENTS

• Sintaxi: +
• Selecciona la etiqueta germana que estigui just darrere de l'etiqueta especificada

<?xml version=”1.0” encoding=”UTF-8” ?>
<classe>
  <professor>
    <nom>Andrés</nom>
  </professor>
  <alumne>
    <nom>Juanito</nom>
  </alumne>
</classe>

delegat+nom { color: #FF0000; }

Pedrito

Juanito 

<?xml version=”1.0” encoding=”UTF-8” ?>
<classe>
  <alumne>
    <delegat />
    <nom>Juanito</nom>
  </alumne>
  <alumne>
    <nom>Pedrito</nom>
  </alumne>
</classe>

PSEUDO SELECTORS

També hi ha una sèrie de selectors especials anomenats pseudoselectors.

Alguns:

Selecció Del primer fill

• Sintaxi: etiqueta:first-child
• Selecciona sols el primer fill de l'etiqueta especificada

<?xml version="1.0" encoding="UTF-8" ?>
<classe>
  <alumne>
    <nom>Juanito</nom>
    <nom>Jorgito</nom>
    <nom>Jaimito</nom>
  </alumne>
</classe>

alumne:first-child { color: #FF0000; }

Jorgito

Juanito 

Jaimito

Selector per atribut “id”

• Sintaxi: etiqueta#id (etiqueta opcional)
• Selecciona l'etiqueta amb l'identificador especificat

<?xml version="1.0" encoding="UTF-8" ?>
<classe>
  <alumne>
    <nom id="gerent">Juanito</nom>
    <nom>Jorgito</nom>
    <nom>Jaimito</nom>
  </alumne>
</classe>

#gerent { color: #FF0000; }

Jorgito

Juanito 

Jaimito

Selector per classe

• Sintaxi: etiqueta.classe (etiqueta opcional)
• Selecciona totes les etiquetes que tinguin el mateix atribut "class"

<?xml version="1.0" encoding="UTF-8" ?>
<classe>
  <alumne>
    <nom class="delegat">Juanito</nom>
    <nom>Jorgito</nom>
    <nom class="delegat">Jaimito</nom>
  </alumne>
</classe>

.vermell { color: #FF0000; }

Jorgito

Juanito 

Jaimito

Selectors D'Atributs

• També podem seleccionar segons el contingut
  dels atributs
  • Si existeix:
    •  
  • Si té un valor específic:
    •  
  • Si conté el valor especificat
    • ​

alumne[delegat] { color:#FF0000; }

alumne[delegat="true"] { color:#FF0000; }

alumne[assignatures]~=”XML” { color:#FF0000; }

Selectors D'Atributs

• Podem combinar el selector d'atributs perquè ens compari segons més d'un valor
  •  
• D'aquesta forma podem controlar més detalladament la presentació de les etiquetes que tenen atributs
  • ​No hi ha cap problema per combinar diferents condicions

alumne[delegat][sexe=”home”] { color:#FF0000; }
alumne[delegat][sexe=”dona”] { color:#FFFF00; }

REGLES CSS

DISSENY

Model de Caixa

• Quan es visualitza qualsevol cosa amb CSS és tractada com si estes dins d'una caixa rectangular
• Cada caixa té quatre components

margin

padding

Contingut

border

Amplada / Altura

• Els atributs “width” i “height” permeten forçar la mida de la caixa

nom { width: 300px; height:100px; }

nom

300px

Disseny

• Per defecte els valors de margin, padding i border estan a zero
• Podem canviar-ne els valors amb les propietats:
  • Margin
    • margin, margin-left, margin-right, margin-top, margin-bottom
  • Padding
    • padding, padding-left, padding-right, padding-top, padding-bottom

nom { margin: 3px; padding-left:4px; }

Border

• Amb el 'border' hi ha moltes més possibilitats:
  • border-style: pot ser none, solid, dashet, dotted, double, groove, ridge, inset, outset
  • border-width: especifiquem l'amplada. El més corrent és fer-ho amb pixels (10px)
  • border-color: el color que tindrà. Pot ser amb el nom en anglès, amb la funció rgb() o en hexadecimal
  • border: tot de cop especificant un rere l'altre amplada, estil i color

word { border-color:#000000; border-style:solid; }

word { border: solid #000000;}

REGLES CSS

PROPIETATS

PROPIETATS

• CSS defineix moltes propietats i a cada versió n'afegeixen més
• Podem veure un resum en les següents webs:
  • Propietats estables:
    • http://www.mclibre.org/consultar/htmlcss/css/css-propiedades.html
  • Propietats beta:  
    • http://www.mclibre.org/consultar/htmlcss/css/css3-propiedades.html

Unitats

En CSS podem fer servir molts tipus d'unitats. Sempre en funció del que necessitem

Propietats

• Les propietats poden ser agrupades en quatre grans grups:
  • Propietats de tipus de lletres
  • Propietats de color i fons de pantalla
  • Propietats de text
  • Propietats de caixes

tipus de lletres

Estan basades en la propietat 'font'

COLOR i FONS

D'entre les propietats de color i de fons en destaquen:

Propietats de text

Permeten definir com es mostra el text: alineació, orientació, etc..

Propietats de caixa

Defineixen com es posicionarà la caixa

CSS

Posicionament

Flexbox

• Documentació
  • https://css-tricks.com/snippets/css/a-guide-to-flexbox/
• Exemple
  • https://codepen.io/lawer/pen/ooBxaw

Grid Boostrap

• Documentació
  • https://getbootstrap.com/docs/4.0/layout/grid/
• Exemple
  • https://codepen.io/lawer/pen/BmpRxP