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.
Llenguatges i estàndards web_PAC1
-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.
Llenguatges i estàndards web_PAC1
-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.
Llenguatges i estàndards web_PAC1
-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.
Llenguatges i estàndards web_PAC1
-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.
Llenguatges i estàndards web_PAC1
-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.
Llenguatges i estàndards web_PAC1
-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
Llenguatges i estàndards web_PAC1
-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.
Llenguatges i estàndards web_PAC1
-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)
Llenguatges i estàndards web_PAC1
-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).
Llenguatges i estàndards web_PAC1
-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:
Llenguatges i estàndards web_PAC1
-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.
h2 Regla d'estil aplicada a l'element <h2>. 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.
h3 Regla d'estil aplicada a l'element <h3>. Al tenir un coeficient més
alt d'especificitat, passarà per sobre de la regla d'estil aplicada a
body. Aquesta regla estableix que:
• 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
Llenguatges i estàndards web_PAC1
-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).
Llenguatges i estàndards web_PAC1
-14-
Llenguatges i estàndards web_PAC1
-15-
Llenguatges i estàndards web_PAC1
-16-
Llenguatges i estàndards web_PAC1
-17-
Llenguatges i estàndards web_PAC1
-18-