PAC1

David Otero Verdaguer

L’ajuntament del teu municipi ha convocat un concurs literari de relats curts: A la xarxa sobre les xarxes socials d’Internet. Aquests relats es publicaran a Internet i els guanyadors seran escollits per votació popular. T’han encarregat la construcció d’un lloc web per donar-lo a conèixer. Realitza la planificació d’aquest lloc web seguint les indicacions que apareixen en el mòdul 1 del material didàctic.

Planificació de l'espai web, concurs xarxes socials

Explica les diferències entre els elements de bloc i els elements de línia de l’HTML. Posa un exemple on es vegi clara la diferència entre els dos tipus d’elements.

Si poguéssim dividir una pàgina html en seccions que més o menys destaquessin l’estructura d’aquesta com el punt i apart marca el final d’una idea; els elements encarregats de fer-ho serien els elements de bloc. D’altra banda els elements de línia ens serveixen per emfatitzar una paraula o conjunt d’aquestes dins un text.

<p>Els elements de línia <strong>emfatitzen</strong></p>

<p>Els elements de bloc <strong>estructuren</strong> el text<p>

Els elements de bloc <p>, <h?>, <blockquote>... marquen l’estructura del text. En aquest cas un paràgraf aïllat que estarà dividit del text que el precedeix per una línia en blanc que marcarà la seva entitat com a bloc. Els elements de línia <strong>, <em>, <q>... fan destacar part del contingut d’aquest bloc de forma visual, reclamant l’atenció del lector; en aquest cas remarcant el text com a negreta.

Sobre els fulls d’estil, respon les preguntes següents:

1) Explica les diverses maneres d’aplicar el CSS a un document HTML. Indica en quins casos utilitzaries cadascun d’elles. Hi ha alguna que sigui més avantatjosa que les altres; en cas afirmatiu, explica per què ho és.

Hi ha 3 maneres bàsiques d’aplicar fulls d’estil. La primera dins la línia del codi, a cada element de la pàgina (text, taula, capa, imatge...) que volem donar format.

Exemple d'estil dins la línia

La segona establint totes les normes d’estil en la capçalera del document dins els elements style. Entre aquests elements agruparíem totes les redefinicions d’elements, classes i id’s que donen format i estil a la pàgina.

Exemple d'estil en la capçalera

La darrera i la més convenient és igual que la segona, agrupar totes les definicions d’estil css però en aquest cas en un fitxer extern fent la crida d’aquest en les capçaleres del document html amb l’element <link rel=”” href=””>. Amb la propietat href definim la ruta absoluta del fitxer d’estil .css.

Exemple d'estil en fitxer .css extern

De les 3 la millor és fer-ho externament ja que ens permet aplicar un mateix estil a totes les pagines així com canviar estils en totes rectificant únicament les propietats de la fulla d’estils vinculada.

2) Enumera i explica els tipus de selectors i posa un exemple de cadascun d’ells.

Selectors bàsics

Selector d’elements:Serveixen per aplicar estil a un element html (<p>,<h>,<em>...)

Exemple de selectors d'elements

Selector de classe :S’apliquen a tots els elements que tinguin l’atribut class= classe definida en el selector. Venen definits en la fulla d’estil per un punt al davant

Exemple de selectors de classe

Selector de ID : Funciona igual que el de classe sols ha de ser únic a cada document HTML. Idoni per els elements estructurals d’una web com per exemple els divs de capçalera, cos, i peu que estructurarien una web. Venen definits en la fulla d’estil per un # al davant

Exemple de selectors d'ID

Selectors avançats

Sel.universals : Redefineixen tots els elements d’una pàgina. En el codi de l'exemple eliminem el marge i l’espai de contingut de tots els elements de la pàgina, i ampliem un 50% el text

Exemple de selector universal

Sel.atributs : Permeten aplicar l’estil a tots els elements que contingui un atribut. *[class] {color:red;} el selector universal amb l'atribut [class] ens destacaria en el document tots els elements que han estat assignats amb un atribut de class (ho he trobat molt útil per identificar les classes o els ids de un document html)

Exemple de selector d'atribut

Sel.fills:Apliquen l’estil al següent element en jerarquia (fill) de l’element referència (pare). blockquote > q {color: blue;} fa que el fills en jerarquia entre comillats dins el blockquote siguin de color blau,

Exemple de selectors fills

Sel.descendents :S’aplica de la mateixa manera que els selectors fills sols que aquest canviarien l’estil de tots els <q> que estiguessin dins el blockquote, a diferència de l’anterior que només aplica l’estil als descendents en jerarquia <q> del blocquote que és l'element de referència.

Exemple de selectors descendents

Sel.germans adjacents: S’aplicaria l’estil al següent element a continuació de l'element de referència sempre i quan aquest estigui en el mateix nivell de jerarquia que l'element de referència.

Exemple de selectors germans adjacents

Sel.pseudoclasse : S’utilitzen per definir l’estil en l’estat d’un element. El cas més clar és l’estat de l’element “a” (link) a:hover {color:red;} farà que al pasar el mouse per sobre de l'enllaç l'hipervincle es torni vermell

Exemple de selectors de Pseudoclasse

Sel.pseudoelements :S'utilitzen per modificar amb estil una part en concret d'un element, davant, darrera, primera lletra...

Exemple de selectors de Pseudoelements

Explica el concepte de cascada en CSS i posa tres exemples on es comprovi com funcionen la importància, l’especificitat i l’ordre en les fonts, respectivament.

El concepte de cascada intenta explicar quin estil s’aplicarà al document html en cas de que que un element hagi rebut més d’una ordre d’estil. L’estil aplicat finalment serà el que es consideri més rellevant tenint en compte la importància, l’especificitat i l’ordre.

La importancia

Aquesta llista va de menor importància a major

Exemple de importància

L'especificitat

L'especificitat atorga un valor de rang als selectors. El rang major el tenen els selector definits en la mateixa línia com a style, seguit dels ID, les classes, i el menor la suma d'elements i pseudoelements que té el selector. Així podem esbrinar aquest rang amb un valor numèric del tipus (0 o 1) si té style, (0 o 1) si és un ID...El valor tindrà així 4 xifres. A major valor més rellevant serà la definició.

Exemple de l'especificitat

L'ordre de les fonts

L'ordre de les fonts estableix que si definim 2 estils a un mateix element, el darrer amb més proximitat a l'element serà el que s'imposi.

Exemple de l'ordre de les fonts

Juntament amb aquest enunciat trobareu els arxius SoftwareLibre.rtf i SoftwareLibre.pdf. El primer conté el text complet d’un article en llengua espanyola, i en el segon es mostra l'aspecte de l'article tal i com hauria de quedar

Document del software lliure

He utilitzat els següents elements de línia: "em" per fer la lletra cursiva "q" per posar l'entrecomillat "strong" per la negreta així com l'element "span" per poder assignar classes a les paraules que no habien de rebre cap format abans comentat.

La definició dels llenguatges de les paraules en anglès o els noms en finlandès els he definit amb l'etiqueta lang="idioma", suposo, no ho he aconseguit però que un narrador les pronunciarà correctament

També he utilitzat "acronym" per marcar els acrònims, i tittle per donar el significat quan es passa per sobre amb el ratolí

Fulla d'estils del software lliure (en la fulla es poden llegir els comentaris)