Llenguatges i estàndards web_PAC1
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.
-1-
Llenguatges i estàndards web_PAC1
•
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
#3E23007
paleta cromàtica de quatre colors: •
fons central: #ff9900 (color crema, facilitarà la superposició de continguts).
#6A3F20
•
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à
#FFFF99
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 -2-
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
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.
-3-
Llenguatges i estàndards web_PAC1
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=””.
•
es correspon amb tots els elements que tinguin l’atribut id=””.
...; } selector d’ID
{ ...; } #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:
•
ü
...; }
APARTAT 3.1
selector de descendents div strong
{ ...; }
•
seleccionen els elements descendents en qualsevol punt de la jerarquia de l’element.
-4-
Llenguatges i estàndards web_PAC1
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.
...
...
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:firstletter { ...; } ... ...
•
:first-letter: •
•
:first-line: •
•
selecciona la primera línia de l’element seleccionat:
:before: •
•
selecciona la primera lletra de l’element.
marca el contingut a insertar abans d’un element.
:after: •
marca el contingut a insertar després d’un element.
-5-
Llenguatges i estàndards web_PAC1
Sobre el doctype1 El DTD o doctype defineix el tipus de document amb què treballarem. La
1
Al final de la pràctica trobareu un esquema complert sobre el doctype.
2
El mode estricte potser demana més temps però suposa una inversió en compatibilitat, codificació i disseny.
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.
-6-
Llenguatges i estàndards web_PAC1
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
-7-
Llenguatges i estàndards web_PAC1
selector.
ordre en les fonts
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
•
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.
-8-
Llenguatges i estàndards web_PAC1
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)
Tot i que no era necessari, he inclòs tot el text dins del tag
, 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)
Element
utilitzat
per
marcar
l’encapçalament
del
document.
Semànticament indica que aquest és títol principal del document. (element de bloc)
Element utilitzat per marcar els subtítols. Semànticament es col·loquen per sota de en ordre d’importància. (element de bloc)
Element utilitzat per incloure els paràgrafs genèrics que conformen el text. (element de bloc)
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)
Element utilitzat per emfatitzar alguna part del text. Visualment el text apareix en cursiva, complint la mateixa funció que l’etiqueta . Malgrat tot, comporta, a més d’aquest component presentacional, una càrrega semànticament emfatitzadora. (element en línia)
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)
Element utilitzat per conservar la presentació de les línies de codi d’una de les primeres pàgines web. (element de bloc)
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)
-9-
Llenguatges i estàndards web_PAC1
entitats CSS (estils_00.css) Regla d’estil que especifica:
body
•
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 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).
-10-
Llenguatges i estàndards web_PAC1
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)
Li apliquem la classe .container des de l’arxiu “estils_01.css” per controlar l’amplada i el centrat. (element de bloc)
Element utilitzat per marcar l’encapçalament del document. (element de bloc)
Element utilitzat per marcar títol ubicat al peu del document. (element de bloc)
Element utilitzat per marcar el subtítol ubicat entre els paràgrafs. (element de bloc)
Element
utilitzat
per
incloure
els
paràgrafs
genèrics
que
conformen el text. (element de bloc)
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)
Element utilitzat per marcar el significat de les abreviatures. (element en línia)
Element utilitzat per citar un bloc sencer de text. No pot contenir text, fet que obliga a col·locar un element 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
que especifica:
-11-
Llenguatges i estàndards web_PAC1
h1
•
amplada del contenidor.
•
l’espai de marge.
Regla d'estil aplicada a l'element
. 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 . 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 . 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
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.
•
.par_destacat
l'aliniació del text passarà a l'esquerra.
Classe adjudicada a l’element
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 per transformar certes parts del text. Aquesta regla estableix que: •
el text inclòs dins de l'etiqueta es presentarà en versaletes.
.destacat
Classe adjudicada a l’element per transformar certes parts del text. Aquesta regla estableix que: •
el text inclòs dins de l'etiqueta es presentarà en negreta.
blackquote p
Regla d'estil aplicada a l'element
-12-
contingut dins de
Llenguatges i estàndards web_PAC1
. 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).
-13-
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-
