Llenguatges i estàndards web_PAC3

-1-

Prova d’Avaluació Contínua-3

Sobre “respostes.html” (http://cv.uoc.edu/~jvillarrealq/respostes.html)

entitats HTML (respostes.html)

<div> Element utilitzat per crear divisions lògiques entre els diferents elements del

document. El primer actua com a contenidor de tota la resta.

(element de bloc)

<h1> Element utilitzat per marcar l’encapçalament del document. Semànticament indica

que aquest és títol principal del document.

(element de bloc)

<dl>

<dt>

<dd>

Elements utilitzat per crear diferents llistes de definició. Cada llista es correspon amb

una de les preguntes de la pràctica. A l’element <dt> hi queda inclosa la pregunta i

a l’element <dd> la resposta.

(element de bloc)

<code> Element utilitzat per indicar que el contingut és un codi. Pot anar acompanyat de

l’atribut class=”” per indicar de quint tipus de codi parlem.

(element en línia)

<ul>

<li>

Elements utilitzat per crear diferents llistes d’enumeració amb vinyetes o símbols.

(element de bloc)

<pre> Element utilitzat per conservar la presentació de les línies de codi d’una de les

primeres pàgines web.

(element de bloc)

<br/> Element utilitzat per marcar un trencament de línia.

(element en línia)

<strong> Element utilitzat per ressaltar visualment i semàntica certes parts del text.

(element en línia)

<table> Element utilitzat per crear una taula.

(element de bloc)

<caption> Element utilitzat per donar títol a una taula.

(element de bloc)

<th>

<td>

<tr>

Elements utilitzats per estructurar els elements dins d’una taula. L’element <th> va

acompananyat de l’atribut scope.

Vull fer constar aquí que he optat per no utilitzat l’element <thead> perquè em

generava problemes de representació amb Firefox. A l’utilitzar aquest element les

vores de la taula apareixien mal representades.

(element de bloc)

Llenguatges i estàndards web_PAC3

-2-

entitats CSS (respostes.html)

body Regla d’estil que especifica:

• marge i farcit.

• color de fons.

• aliniació i mida de font.

• família i color de font.

Aquestes especificacions seran heretades per la resta d’elements.

#main ID adjudicat a l’element <div> que especifica:

• amplada, marge, vora i color de fons del contenidor.

• sombrejat de la caixa.

#top ID adjudicat a l’element <div> per donar format a la part superior

del document. Especifica:

• alçada i farcit.

• color i imatge del fons.

• aliniació, pes i mida de la font.

• espai d’interlletrat.

• color de la font.

#foot ID adjudicat a l’element <div> per donar format a la part inferior del

document. Especifica:

• alçada marge i farcit.

• color i imatge del fons.

• aliniació i mida de la font.

.tit Classe adjudicada a l’element <div> per donar format al títol del

document. Especifica:

• marge.

• color de fons.

• vora dreta i esquerra.

• aliniació, mida, família i color de la font.

dl Selector adjudicat a l’element <dl> per donar format a les llistes de

definició del document. Especifica:

• marge.

• espai interlinial.

dl dt Selector de descendents per donar format als termes de les llistes de

definició del document. Especifica:

• marge, farcit i vora inferior.

• color i imatge de fons.

• pes i color de la font.

dd ul Selector de descendents per donar format a llistes imbrincades dins

de llistes de defnició. Especifica:

Llenguatges i estàndards web_PAC3

-3-

• marge i farcit.

.exemple

Classe adjudicada a l’element <pre>. Especifica:

• vora.

• color fons,

• mida i color de la font.

.exemple,

table

Classe adjudicada a l’element <pre> i selector de les taules del

document. Especifica:

• amplada, marge i farcit.

table Selector de les taules del document. Especifica:

• aliniació del text.

• superposició de vores.

• mida de la font.

caption Selector del títol les taules del document. Especifica:

• pes i color de la font.

th, td Selector de les taules del document. Especifica:

• vora de les cel·les.

ul Selector de llistes no ordenades del document. Especifica:

• marge superior.

• farcit

li Selector dels elements que formen llistes no ordenades del

document. Especifica:

• farcit dret.

code Selector d’element. Especifica:

• pes de la font.

#input

thead

Selector del capçal de taula relacionat amb l’ID #input. Especifica:

• color de fons i de la font.

#input

tbody

Selector del cosde taula relacionat amb l’ID #input. Especifica:

• color de fons.

#input

.estret

Classe relacionada amb l’ID #input, adjudicada a l’element <td>.

Especifica:

• amplada.

• família de font.

• pes de la font.

• aliniació.

#input

.ample

Classe relacionada amb l’ID #input, adjudicada a l’element <td>.

Especifica:

• aliniació.

#input

.estret,

#input

.ample

Classe relacionada amb l’ID #input, adjudicada a l’element <td>.

Especifica:

• aliniació vertical.

Llenguatges i estàndards web_PAC3

-4-

#input th,

#input

.estret,

#input

.ample

Selector de l’element <th> i classe relacionada amb l’ID #input,

adjudicada a l’element <td>. Especifica:

• farcit.

• vora

• aliniació vertical.

#input

tr:nth-

child(2n)

Pseudoclasse adjudicada a l’element <tr>. Pren la variable n com

el nombre total de files que té la taula. Entre parèntesi s’indica

l’interval en què se succeirà l’acció i en quina posició començarà a

aplicar la regla d’estil. En el nostre cas segueix un interval de dos

(2n) i no té especificada la fila d’inici. Hauríem pogut començar, per

exemple, a la segona final seguint un interval de 2 (2n+2).

Especifica:

• color de fons.

.codi

Classe adjudicada a l’element <pre>. Especifica:

• amplada, amrge i farcit.

• vora superior i inferior.

• mida de la font.

Els documents “respostes.html” i “respostes.css” han estat sotmesos a validació. Per fer-ho s'ha utilitzat:

• validador de marcat HTML (X)HTML de documents web (W3C).

• validador de CSS versió 2.1 i documents (X)HTML amb fulls d'estils (W3C).

El document repostes.html ha validat de manera correcta. El document repostes.css ha presentat 4 errors atribuïbles al fet que les regles d’estil rebutjades són

pròpies de les especificacions de CSS3, mentre que el validador ho fa sobre les especificacions de CSS 2.1. El llistat d’errors és el següent:

1. 21 #main La propiedad -moz-box-shadow no existe : 0 0 10px #000000 0 0 10px #000000. 2. 22 #main La propiedad -webkit-box-shadow no existe : 0 0 10px #000000 0 0 10px #000000. 3. 23 #main La propiedad box-shadow no existe en CSS versión 2.1 pero existe en : 0 0 10px #000000 0

0 10px #000000. 4. 148 Pseudo-clase o pseudo-elemento :nth-child desconocido(a).

 

Llenguatges i estàndards web_PAC3

-5-

Sobre “taula.html” (http://cv.uoc.edu/~jvillarrealq/taula.html)

entitats HTML (taula.html)

<div> Element utilitzat per crear divisions lògiques entre els diferents elements del

document. El primer actua com a contenidor de tota la resta.

(element de bloc)

<table> Element utilitzat per crear una taula.

(element de bloc)

<caption> Element utilitzat per donar títol a una taula.

(element de bloc)

<thead>

<th>

<td>

<tr>

Elements utilitzats per estructurar els elements dins d’una taula. L’element <th> va

acompananyat de l’atribut scope.

(elements de bloc)

entitats CSS (taula.html)

body Regla d’estil que especifica:

• marge i farcit.

• color de fons.

• aliniació i mida de font.

• família i color de font.

Aquestes especificacions seran heretades per la resta d’elements.

#main ID adjudicat a l’element <div> que especifica:

• amplada i marge.

SOBRE l’HTML DE LA TAULA

S’ha generat certa controvèrsia al fòrum sobre el codi adient per fer una taula correcta a partir d’una casella que ha de quedar buida.

En un primer moment vaig optar per deixar una cel·la buida, tot i saber que no era gens recomanable. En un segon moment, atenent a les indicacions de les especificacions, vaig combinar les dues cel·les

utilitzant colspan=”2”, ubicant l’element a partir d’una regla d’estil que controlava el seu padding-left. A nivell presentacional el resultat era impecable però a nivell d’accessibilitat tornava a sorgir un

problema: combinar les dues cel·les provocava que l’atribut scope=”col” adjudicat al tag th perdés sentit, doncs la cel·la ja no es corresponia amb una columna sinó a dues. Aquesta incongruència

representa un clar inconvenient d’accessibilitat per als lectors de pantalla. Per aquesta raó, i contravenint la lògica de les especificacions, he decidit retornar a la primera opció.

Tot i que es trenca una especificació, sno hi ha cap problema de validació i es fa primar l’accessibilitat abans que altres criteris... espero no haver comès una errada greu.

 

Llenguatges i estàndards web_PAC3

-6-

#top ID adjudicat a l’element <div> per donar format a la part superior del document.

Especifica:

• alçada i farcit.

• color i imatge del fons.

• aliniació del text.

• pes i mida de la font.

• espai d’interlletrat.

• color de la font.

#foot ID adjudicat a l’element <div> per donar format a la part inferior del document.

Especifica:

• alçada marge i farcit.

• color i imatge del fons.

• aliniació del text.

• mida de la font.

table Selector de la taula del document. Especifica:

• aliniació del text.

• superposició de vores.

• mida de la font.

tbody

tr:nth-

child(2n+1)

Pseudoclasse adjudicada a l’element <tr>. Pren la variable n com el nombre total

de files que té la taula. Entre parèntesi s’indica l’interval en què se succeirà l’acció i

en quina posició començarà a aplicar la regla d’estil. En el nostre cas segueix un

interval de dos començant a la fila 1 (2n+1). Especifica:

• color de fons.

caption Selector de l’encapçalament de la taula del document. Especifica:

• farcit

• alianiació.

• mida i pes de la font.

.destacat Classe adjudicada a l’element <th>. Especifica:

• pes de la font.

thead Selector de la fila de capçalera de la taula del document. Especifica:

• color de fons.

• mida i color de la font.

thead th Selector de la fila de capçalera de la taula del document. Especifica:

• aliniaició.

• pes de la font.

tbody Selector del cos de la taula del document. Especifica:

• color de fons.

th td Selector dels elements de la taula del document. Especifica:

• amplada.

• aliniació de text i aliniaicó vertical.

• vora inferior.

Llenguatges i estàndards web_PAC3

-7-

• farcit.

th Selector de la fila de capçalera de la taula del document. Especifica:

• aliniaició.

• pes de la font.

Els documents “taula.html” i “taula.css” han estat sotmesos a validació. Per fer-ho s'ha utilitzat:

• validador de marcat HTML (X)HTML de documents web (W3C).

• validador de CSS versió 2.1 i documents (X)HTML amb fulls d'estils (W3C).

El document repostes.html ha validat de manera correcta.

El document repostes.css ha presentat 4 errors: 5. 44 Pseudo-clase o pseudo-elemento :nth-child desconocido(a).

Aquest error s’atribueix al fet que les regles d’estil rebutjades són pròpies de les especificacions de

CSS3.

 

Llenguatges i estàndards web_PAC3

-8-

Sobre “formulari.html” (http://cv.uoc.edu/~jvillarrealq/formulari.html)

entitats HTML (formulari.html)

<div> Element utilitzat per crear divisions lògiques entre els diferents elements del

document. El primer actua com a contenidor de tota la resta.

(element de bloc)

<h3> Element utilitzat per marcar l’encapçalament del document. Semànticament indica

que aquest és títol principal del document.

(element de bloc)

<form> Element destinat a la creació de formularis. Conté tres atributs:

• id: dóna identitat única dins de la pàgina.

• action: especifica l’script que enviarà les dades al servidor.

• method: especifica el mètode utilitzat per enviar les dades. En el nostre cas

serà post.

(element de bloc)

<ul>

<li>

Elements utilitzats per crear una llista no ordenada que contindrà tots els controls

del formulari.

(element de bloc)

<label> Element emprat per etiquetar els controls del formulari. Conté l’atribut for=””.

(element en línia)

<input> Element utilitzat per especificar el tipus d’entrada que guarda cada control. Conté

els atributs type|name|id|value.

(element en línia)

<select>

<option>

Element utilitzat per crear una llista amb diferents opcions per seleccionar-ne una.

Cadascuna d’aquestes opcions està continguda en l’element <option>. Conté

l’atribut value.

(element en bloc)

<fieldset>

Element utilitzat per crear un contenidor amb diferents controls de formulari.

(element en bloc)

<textarea>

Element utilitzat per crear un bloc d’introducció de text.

(element en bloc)

entitats CSS (formulari.html)

body Regla d’estil que especifica:

• marge i farcit.

• color de fons.

• aliniació, família i color de font.

Aquestes especificacions seran heretades per la resta d’elements.

Llenguatges i estàndards web_PAC3

-9-

#main ID adjudicat a l’element <div> que especifica:

• amplada i marge del contenidor.

#top ID adjudicat a l’element <div> per donar format a la part superior del

document. Especifica:

• alçada i farcit.

• color i imatge del fons.

• aliniació, pes, mida i color de la font.

• espai d’interlletrat.

h3 Selector de títol. Especifica:

• marge i farcit esquerre.

• vora inferior.

• mida de la font i interliniat.

#formRecursos ID adjudicat a l’element <form>. Especifica:

• amplada i marge.

• interliniat.

ul Selector de llista no ordenada. Especifica:

• marge i farcit.

• anul·la els símbols de llista.

li Selector dels elements de llista no ordenada. Especifica:

• posició flotant a l'esquerra perquè els altres elements flueixin per la

dreta.

• farcit i especificaicons de fons.

label Selector de les etiquetes de control del formulari. Especifica:

• visualització de l'element com element de bloc.

• posició flotant a l'esquerra perquè els altres elements flueixin per la

dreta.

• clear per evitar que l'element superior flueixi també a l'esquerra.

• amplada, farcit i aliniació de text.

input Selector de control del formulari. Especifica:

• farcit, amplada i vora.

fieldset Selector d'espai contenidor de controls. Especifica:

• vora i farcit.

fieldset

label

Selector de decendents. Especifica:

• marge i amplada.

• visualització dels elements com elements en línia.

• eliminació de la posició flotant a l'esquerra.

.botoRadio Classe adjudicada a l'element input de tipus radio. Especifica:

• marge i amplada.

select Selector de control de selecció del formulari. Especifica:

• amplada.

• visualització dels elements com elements de bloc.

Llenguatges i estàndards web_PAC3

-10-

textarea Selector de la caixa d'introducció de text. Especifica:

• amplada i farcit.

• alçada mínima.

#submit ID adjudicat a l’element <li> que conté el botó de tramesa <submit>.

Especifica:

• marge esquerre.

• elimina farcit.

• elimina especificacions de fons.

Els documents “impremta.html” i “impremta.css” han estat validats

correctament. Per fer-ho s'ha utilitzat:

• validador de marcat HTML (X)HTML de documents web (W3C).

• validador de CSS i documents (X)HTML amb fulls d'estils (W3C).