LEW PAC1 Villarreal Quintana Jaume

Llenguatges i estàndards web_PAC1

-1-

Prova d’Avaluació Contínua-1

Sobre el desenvolupament d’un web personal

Pas 1: PLANIFICACIÓ (ARQUITECTURA DE LA INFORMACIÓ).

El primer que cal fer és planificar com serà el nostre web personal a partir

del traçat d’un mapa web. En aquest mapa establirem que el nostre

projecte tindrà una pàgina d’inici i quatre pàgines més:

• el meu currículum.

• els meus treballs.

• els meus llocs.

• contacte. Després de valorar-ho, crec que aquest serà un nombre ajustat pel que

pretenc. A més, com que els noms assignats s’ajusten molt a la informació

que contindran, decideixo agafar aquests noms per cadascuna de les

pàgines ja que m’ajudaran a organitzar els continguts de manera

ordenada, clara i lògica.

Pas 2: CONTINGUT.

Encara no he tocat l’ordinador per a res. Ara que ja tinc clara l’estructura

del meu web, he d’omplir de contingut cadascuna de les pàgines. Aquest

pas serà senzill perquè, a diferència de les pàgines que em vinguin per

encàrrec, jo mateix sóc el client.

Això em facilita les coses perquè tinc clar quin serà el contingut i la finalitat

que li vull donar, fent que cada pàgina tingui un contingut rellevant i no hi

hagi repeticions. D’aquesta manera asseguro que cada part del portal

tingui identitat pròpia a nivell de contingut.

Pas 3: TIPOGRAFIA.

Ja tinc clara l’estructura del portal i la informació que hi volcaré. Ara ja puc

començar a pensar en el disseny. El primer que hauré de tenir en compte

serà la tipografia. La tipografia condicionarà la llegibilitat del meu lloc (tant

a nivell visual [legibility] com a nivell comprensiu [readability]) i l’elecció

dels colors.

Per garantir una bona llegibilitat tindré en compte que:

• el tipus de lletra sigui prou gran com perquè es pugui llegir en

diferents resolucions. Una mida que es mogui entre els 12 i els

14 punts serà interessant.


-2-

• que hi hagi contrast suficient entre el fons i el text central.

Òbviament, això condicionarà l’elecció de la paleta cromàtica.

Ho comprovarem més tard.

• els títols siguin diferents del text central perquè es pugui copsar

a primer cop d’ull la jerarquia d’informació dins de cada apartat.

• la longitud de línia sigui ajustada per ser llegida sobre pantalla.

Uns 40-60 caràcters per línia seran bons.

Pel que fa a la tipografia, hauré de triar quin tipus de lletra utilitzo.

D’entrada no m’agraden gaire els tipus de lletra amb serifa sobre la

pantalla. El traç acabat, acampanat i amb extrems rematats que presenta

per exemple la “Times New Roman” queda bé sobre paper però potser no

facilita la lectura en un lloc web. Per això, em decanto per la font “Arial”, un

tipus de lletra sans-serif. L’empraré tant pels títols com per la navegació i

cos central, marcant la diferència amb el color i la mida de la lletra. En la

mesura del possible evitaré fer els títols només amb majúscules.

Pas 4: COMBINACIÓ DE COLORS.

Ja tinc clara la tipografia. Anem pels colors. M’he decantat per una paleta

de colors que van des del groc pàl·lid (color crema) fins al marró fosc (color

xocolata). Per no perdre’m ni abusar, decideixo centrar-me només en una

paleta cromàtica de quatre colors:

• fons central: #ff9900 (color crema, facilitarà la superposició de

continguts).

• barra de navegació: #6A3F20 (color marró xocolota).

• botons de la barra de navegació: #3E23007 (color marró amb

més matís que l’anterior, farà destacar l’enllaç actiu)

• text central: #6A3F20 (mateix color que la barra de navegació).

• text de la barra de navegació: #FFFFFF (color blanc, farà

destacar els enllaços).

Pas 5: ELEMENTS COMUNS I NAVEGACIÓ.

Ara ja puc passar a establir els elements comuns i el sistema de navegació

entre les diferents pàgines del meu portal.

Els elements comuns els centraré en el logo, l’encapçalament i el peu:

• el logo serà senzill, seguint la tipografia escollida (Arial i usant

minúscules, amb una mida de lletra que ressalti sobre la resta

del cos) i dins de la paleta cromàtica escollida.

• l’encapçalament contindrà la barra de navegació.

• el peu contindrà el copyright i un enllaç directe a l’adreça de

correu electrònic.

• Pel que fa a la navegació, cada enllaç dirigirà a la seva pàgina,

restant sempre present la barra de navegació. En cas que la

#3E23007

#6A3F20

#FFFF99

1 Al final de la pràctica trobareu dos esquemes relacionats amb la planificació de la tipografia i el color.


-3-

pàgina necessités una ampliació, els enllaços sencundaris es

mostraran en una barra de navegació secundària, bé a la

columna de la dreta en forma de llista, bé a sota de la principal,

que es mantindrà sempre visible.Intentaré que el logo redirigeixi

a la pàgina d’inici.

La implementació de tot aquest procés demanarà comprovacions i

rectificacions abans de veure la llum. La intenció és fer una web

que presenti usabilitat i tingui consistència, és a dir, que quan

l’usuari hi entri percebi a la web un comportament racional i lògic i

tingui la impressió que, tal i com va nevegant, tot pertany a un

mateix projecte.


-4-

Sobre els diferents tipus de selectors de CSS

selector d’elements

p { ...; }

• es correspon amb tots els elements d’aquest nom que hi hagi a la pàgina.

selector de classes

.class {

...; }

• es correspon amb tots els elements que tinguin l’atribut class=””.

selector d’ID

#id { ...; }

• es correspon amb tots els elements que tinguin l’atribut id=””.

selector universal

* { ...; }

• seleccionen tots els elements de la pàgina.

selector d’atributs

img[alt] { ...; }

• seleccionen els elements en funció de l’atribut que continguin. • es poden fer seleccions a partir del contingut dels atributs:

ü [^=] a [href^=”mailto”]: recull els elements que comencen

amb “.mailto”. ü [*=] a [href*=”username”]: recull els elements que contenen

“username”. ü [$=] a [href$=”.mov”]: recull els elements que acaben amb

“.mov”.

selector de fills h3 > strong { ...; }

• seleccionen elements concrets que són fills d’altres elements: ü <h3><strong>APARTAT 3.1</strong></h3>

selector de descendents div strong { ...; }

• seleccionen els elements descendents en qualsevol punt de la jerarquia

de l’element.


-5-

selector de germans adjacents

div+a { ...; }

• permeten seleccionar un element que apareix després d’un altre element. • a diferència dels selectors de descendents, aquests han de compartir el

mateix nivell de jerarquia. <div>...</div>

<a href=”...”>...</a>

pseudoclasses a:visited { ...; } ... ...

• s’utilitzen per definir estils sobre diversos elements.

• enllaços:

ü :link: marca l’estat normal per defecte.

ü :visited: marca els enllaços ja visitats.

ü :focus: marca els enllaços que tenen el cursor del teclat a dintre.

ü :hover: marca els enllaços que tenen el punter del ratolí a sobre.

ü :active: marca els enllaços que es cliquen.

• :first-child:

ü selecciona un element que és el primer fill del seu pare.

• :lang:

ü selecciona elements amb un idioma definit per l’atribut lang=””.

pseudoelements p:first-letter { ...; } ... ...

• :first-letter:

• selecciona la primera lletra de l’element.

• :first-line:

• selecciona la primera línia de l’element seleccionat:

• :before:

• marca el contingut a insertar abans d’un element.

• :after:

• marca el contingut a insertar després d’un element.


-6-

Sobre el doctype1 El DTD o doctype defineix el tipus de document amb què treballarem. La

seva importància rau en dos aspectes:

• els navegadors determinaran amb quin mode de representació

treballen (estàndard o Quirks).

• els validadors d’(X)HTML i CSS establiran les normes amb les

quals hauran de certificar la validació del document.

Per diferenciar els diferents tipus de doctypes partim de dos criteris:

• segons el tipus de versió: serà HTML o XHTML.

• segons el tipus d’etiquetatge: serà estricte o transicional.

En el primer cas, caldrà valorar en quina de les dues versions es

vol crear el document per adequar-lo a les normes de validació.

En el segon cas caldrà parar més atenció. Escollir un doctype

estricte ens obligarà a utilitzar un etiquetatge més semàntic que

presentacional, separant de manera clara l’estructura (HTML) de

l’estil (CSS) per evitar el marcatge presentacional.

Si es volen obtenir uns resultats uniformes per part dels navegadors, serà

molt recomanable emprar el mode estricte. Òbviament, això tindrà els seus

avantatges i els seus inconvenients.2

Avantatges:

• requereix un lleguatge de marcat correcte, ajustant-se als

estàndards.

• obliga a separar HTML i CSS, oferint resultats més consistents.

• els validadors ajustaran el nostre document a les normes de

validació.

• els navegadors podran utilitzar el mode estàndard, interpretant

l’HTML i el CSS per separat de manera correcta.

Inconvenients:

• cal separar de manera clara estructura/semàntica i estils,

evintant, en la mesura del possible, estils incrustats o en línia.

• en cas que el document estigui mal codificat els navegadors

funcionaran en mode Quirks, interpretant el document com si

fos antic.

2 El mode estricte potser demana més temps però suposa una inversió en compatibilitat, codificació i disseny.

1 Al final de la pràctica trobareu un esquema complert sobre el doctype.


-7-

Sobre l’herència i la cascada

herència • està relacionada amb l'etiquetatge de l'HTML.

• és el mecanisme mitjançant el qual determinades propietats d'un element

pare es transmeten als seus fills, tot i que no totes les propietats es poden

heretar.

• tots els elements d'un arxiu HTML hereten totes les propietats heretables

del seu pare.

:inherit • tot i que no totes les propietats són heretables (p.e. els marges, fons,...),

es pot forçar l'herència: p{

bagkground: inherit;

}

cascada • està relacionada amb les regles d'estil de CSS.

• és el mecanisme jeràrquic que dóna a les regles d’estil major o menor

prioritat en funció dels criteris d’importància, especificitat i ordre.

• és un sistema de regulació que evita incongruències entre les diferents

declaracions d’un full d’estils.

importància • les noves especificacions anul·laran les antigues:

1. full d'estil d'agent d'usuari.

2. declaracions normals en fulls d'estil d'autor.

3. declaracions normals en fulls d'estil d'usuari.

4. declaracions importants en fulls d'estil d'autor.

5. declaracions importants en fulls d'estil d'usuari.

• full d'estil d'autor: full d'estil que ha creat el dissenyador del lloc • full d'estil d'usuari: full d'estil que ha especificat l'usuari. • declaracions normals: declaracions sense càrrega afegida. • declaracions importants: declaracions que van seguides de la directiva

!important. especificitat • és el segon criteri que utilitzen els agents d’usuari per donar prioritat a una

instrucció CSS en cas de conflicte.

• el nivell d’especificitat es pot calcular de 0 a 1000 a partir del següent

barem:

ü a: un 1 per una declaració que conté l’atribut style. Aquest atribut

sempre apareixerà en línia dintre de l’etiquetatge HTML.

ü b: nombre de selectors ID. Cada atribut ID (#) té una valoració d’1.

ü c: contempla el nombre de selectors d’atributs, classes i

pseudoclasses del selector.

ü d: contempla el nombre de tipus d’elements i pseudoelements del


-8-

selector. selectors a b c d especificitat

*{...} 0 0 0 0 0000

h1{...} 0 0 0 1 0001

ol li{...} 0 0 0 2 0002

ol li.classe{...} 0 0 1 2 0012

#id{...} 0 1 0 0 0100

p#id a:visited{...} 0 1 1 2 0112

style=””(inline) 1 0 0 0 1000

ordre en les

fonts

• en cas que dues regles d’estil coincideixin en importància i especificitat, la

declaració que apareix més endavant en el full d’estils arbitrarà la solució

del conflicte.


-9-

Sobre les entitats utilitzades a “index_00_PAC1” Per dur a terme el document “index_00_PAC1” he utilitzat entitats HTML i

CSS. Aquest document, però, conté una forta càrrega semàntica, fet que

ha fet primar l’etiquetat HTML per sobre dels estils CSS.

entitats HTML (index_00_PAC1.html)

<div> Tot i que no era necessari, he inclòs tot el text dins del tag <div>,

aplicant-li estils CSS des de l’arxiu “estils_00.css”. D’aquesta manera

aconseguim que el text quedi centrat en la pàgina, controlant també la

seva amplada per millorar-ne la llegibilitat.

(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)

<h2> Element utilitzat per marcar els subtítols. Semànticament es col·loquen

per sota de <h1> en ordre d’importància.

(element de bloc)

<p> Element utilitzat per incloure els paràgrafs genèrics que conformen el text.

(element de bloc)

<abbr> Element utilitzat per marcar el significat de les abreviatures. Sempre va

acompanyat de l’atribut title=”” perquè es pugui visualitzar en pantalla

al col·locar el ratolí sobre l’abreviatura.

(element en línia)

<em> Element utilitzat per emfatitzar alguna part del text. Visualment el text

apareix en cursiva, complint la mateixa funció que l’etiqueta <i>. Malgrat

tot, <em> comporta, a més d’aquest component presentacional, una

càrrega semànticament emfatitzadora.

(element en línia)

<q> Element utilitzat per citar en línia. L’he escollit per marcar la paraula

“memex” per dos motius: perquè presentacionalment apareix en cometes i

perquè es pot especificar l’idioma d’on prové amb l’atribut lang=””

(element en línia)

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

de les primeres pàgines web.

(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)


-10-

entitats CSS (estils_00.css)

body Regla d’estil que especifica:

• el color de fons.

• l’espai que quedarà de marge i padding.

• la família i el color de font que utilitzarem.

Aquestes especificacions seran heretades per la resta d’elements.

.container Classe adjudicada a l’element <div> que especifica:

• amplada del contenidor.

• l’espai de marge.

No s’especifica color perquè s’hereta de la regla anterior.

Malgrat tot, no he sabut com etiquetar correctament els noms, tecnicismes

o paraules en anglès.

Els documents “index_00_PAC1.html” i “estils_00_PAC1.css” han estat validats, tal i com es fa constar amb les icones que figuren al peu del document

“index_00_PAC1.html”. 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).


-11-

Sobre les entitats utilitzades a “index_01_PAC1” Per dur a terme el document “index_01_PAC1” he utilitzat entitats HTML i

CSS. Aquest document conté més càrrega presentacional que l’anterior.

Per això les entitats CSS són més complertes.

entitats HTML (index_01_PAC1.html)

<div> Li apliquem la classe .container des de l’arxiu “estils_01.css”

per controlar l’amplada i el centrat.

(element de bloc)

<h1> Element utilitzat per marcar l’encapçalament del document.

(element de bloc)

<h2> Element utilitzat per marcar títol ubicat al peu del document.

(element de bloc)

<h3> Element utilitzat per marcar el subtítol ubicat entre els paràgrafs.

(element de bloc)

<p> Element utilitzat per incloure els paràgrafs genèrics que

conformen el text.

(element de bloc)

<span> Element genèric que permet recollir en un lloc concret del text

alguna classe d’estil per modificar l’aparença del text.

(element en línia)

<abbr> Element utilitzat per marcar el significat de les abreviatures.

(element en línia)

<blockquote> Element utilitzat per citar un bloc sencer de text. No pot contenir

text, fet que obliga a col·locar un element <p> al seu interior.

(element de bloc)

entitats CSS (estils_01_PAC1.css)

body Regla d’estil que especifica:

• el color de fons.

• l’espai que quedarà de marge i padding.

• la família, i el color de font que utilitzarem.

• l'aliniació aplicada al text (justificada).

Aquestes especificacions seran heretades per la resta

d’elements, sempre i quan l'especificitat d'una altra regla no

l'invalidi.

.container Classe adjudicada a l’element <div> que especifica:


-12-

• amplada del contenidor.

• l’espai de marge.

h1 Regla d'estil aplicada a l'element <h1>. Al tenir un coeficient més

alt d'especificitat, passarà per sobre de la regla d'estil aplicada a

body. Aquesta regla estableix que:

• l'aliniació serà centrada.

• la família de la font serà de tipus sans-serif (Arial,

Helvetica), diferenciant-la de la resta del cos central.




• l'aliniació serà centrada.




• el pes de la font serà normal. D'aquesta manera s'invalida

el format de negreta que té l'etiqueta per defecte.

• el text apareixerà subratllat.

#entradeta ID adjudicat a l’element <p> que conté l'entradeta de la notícia.

Al tenir un coeficient més alt d'especificitat, passarà per sobre de

la regla d'estil aplicada a body. Aquesta reglar especifica que:

• la mida de la font serà més gran que el text normal,

marcant un increment proporcional a partir de la unitat

em.

• l'alçada de línia serà més gran que al text normal,

marcant un increment proporcional igual al doble de

l'alçada del text central.

• l'aliniació del text passarà a l'esquerra.

.par_destacat Classe adjudicada a l’element <p> que conté paràgrafs de la

notícia. Aquesta regla estableix que:

• la primera línia del bloc començarà amb una sangria

determinada (en aquest cas de 35px).

.versaletes Classe adjudicada a l’element <span> per transformar certes

parts del text. Aquesta regla estableix que:

• el text inclòs dins de l'etiqueta <span> es presentarà en

versaletes.

.destacat Classe adjudicada a l’element <span> per transformar certes

parts del text. Aquesta regla estableix que:

• el text inclòs dins de l'etiqueta <span> es presentarà en

negreta.

blackquote p Regla d'estil aplicada a l'element <p> contingut dins de


-13-

<blackquote>. Al tenir un coeficient més alt d'especificitat,

passarà per sobre de la regla d'estil aplicada a body. Aquesta

regla estableix que:

• la mida de la font serà més petita que el text normal,

marcant un decrement proporcional a partir de la unitat

em.

• el text es presentarà en cursiva.

• l'alçada de línia serà més petita que al text normal,

marcant un decrement proporcional igual al 95% de

l'alçada del text.

Els documents “index_01_PAC1.html” i “estils_01_PAC1.css” han estat validats, tal i com es fa constar amb les icones que figuren al peu del document

“index_00_PAC1.html”. 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).


-14-


-15-


-16-


-17-


-18-

LEW PAC1 Villarreal Quintana Jaume

Documents

Transcript of LEW PAC1 Villarreal Quintana Jaume