Embed Size (px)
Citation preview
LLENGUATGES I ESTÀNDARDS WEB PAC 1
Prova d’avaluació continuada 1 per Jordi Llonch Esteve
Llenguatges i estàndards web PAC 1
1
Índex
Quines versions d'HTML, XHTML i CSS hem d'usar a les nostres pàgines web? .................... 2
Enumera les diferents formes d'usar CSS en una pàgina web. Per què és, en general, una
pràctica dolenta embeure els estils dins de l'HTML? Se t'acut algun cas en el qual pugui ser una
bona idea? ................................................................................................................................. 2
Quins elements poden aparèixer dins de l'element <head>? ....................................................... 3
Quines diferències hi ha entre una classe i una id? ..................................................................... 3
Quina és l'estructura bàsica d'un document XHTML? Quina és l'estructura més simple possible
d'un document XHTML que validi? Explica breument per a què s'utilitzen cadascun dels seus
elements.................................................................................................................................... 4
Investigació. En aquests moments s’està elaborant l’estàndard HTML5. Busca informació en la
web sobre l’estat d’aquest projecte i les principals diferències que suposarà HTML5 quant al
marcat dels documents. Fes-ne un informe d’aproximadament 500 paraules. És essencial que
citis les fonts d’informació que has utilitzat. ............................................................................... 5
Digues si són correctes o incorrectes els següents fragments de codi (en XHTML). En cas que
siguin incorrectes, indica per què. .............................................................................................. 8
De quines formes es poden especificar la grandària del text usant CSS? Quins són les diferències
entre elles? I els avantatges i inconvenients de cadascuna d'elles? ............................................... 9
Posa un exemple de pàgina web no accessible (desafortunada-ment, són fàcils de trobar) i
explica alguns dels motius pels quals no ho és. ......................................................................... 10
Observeu la següent captura de pantalla: ................................................................................. 11
Bibliografia ............................................................................................................................. 12
Pàgines Web ....................................................................................................................... 12
Imatges ............................................................................................................................... 12
Llenguatges i estàndards web PAC 1
2
Quines versions d'HTML, XHTML i CSS hem d'usar a les
nostres pàgines web?
HTML 4.01
o Strict
o Transitional
o Frameset
XHTML 1.0
o Strict
o Transitional
o Frameset
XHTML 1.1
XHTML Basic 1.1
CSS 2.1
Enumera les diferents formes d'usar CSS en una pàgina web. Per
què és, en general, una pràctica dolenta embeure els estils dins de
l'HTML? Se t'acut algun cas en el qual pugui ser una bona idea? Hi ha tres formes d’usar el CSS en una pàgina web: estil en línia, estil incrustat i
full d’estil extern.
Embeure els estils dins de l’HTML és una pràctica dolenta per vàries raons. Una
d’elles és que el codi de l’HTML és molt gran, ja que inclou els estils de cada element
Llenguatges i estàndards web PAC 1
3
per separat. Això fa que si es vol revisar aquest, serà una feina més complicada ja que els
estils estaran escampats per tot el document. Una altra raó important és que no es fa ús
de la cascada, és a dir si volem aplicar un estil als títols H1, haurem d’escriure el codi per
a cada H1, en canvi, amb la cascada només cal aplicar-ho un cop. A més a més, quan
necessitem canviar l’estil de tota la pàgina web, hauríem de canviar estil per estil de
cadascuna de les pàgines que formen la web.
Pot ser una bona idea per fer pàgines web molt simples, com per exemple,
escriure un missatge al fòrum de la UOC. No se m’acudeixen altres exemples, té masses
inconvenients.
Quins elements poden aparèixer dins de l'element <head>? Hi poden aparèixer dos components molt importants: l’element “title”, títol que
es mostrarà a la part superior del navegador web i els elements “meta”, informació que
no es mostrarà visible enlloc, però que serveix perquè els indexadors com Google, Bing,
etc. rebin informació sobre la nostra pàgina web i sàpiguen sense haver de llegir el
document què hi poden trobar. Aquests elements “meta” són la descripció i les paraules
clau.
Quines diferències hi ha entre una classe i una id? Una classe es pot fer servir tantes vegades com vulguem, ja sigui per definir un
títol, un paràgraf, etc. A més a més, podem fer servir més d’una classe en un mateix
element, d’aquesta manera si tenim una classe que ens aporta negreta i una altra que
aporta cursiva, si les apliquem a un títol, aquest estarà en negreta i en cursiva. En canvi,
una id només s’aplicarà a un element i servirà per definir aquest element en concret dins
del document. Això ens servirà per poder crear enllaços dirigits a les id.
Llenguatges i estàndards web PAC 1
4
Quina és l'estructura bàsica d'un document XHTML? Quina és
l'estructura més simple possible d'un document XHTML que
validi? Explica breument per a què s'utilitzen cadascun dels seus
elements. Estructura bàsica:
Declaració “doctype”
Secció <head>
Secció <body>
Estructura més simple:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Document XHTML</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> </head> <body> <p>Això és un document XHTML</p> </body> </html>
El document està format pel “doctype”:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Defineix el tipus de document, en aquest cas és un XHTML 1.0 estricte.
A continuació, la secció <html>, que conté la “declaració XML”:
<html xmlns="http://www.w3.org/1999/xhtml">
Llenguatges i estàndards web PAC 1
5
Només és obligatòria quan la codificació del text del document sigui diferent a UTF-8 o
UTF-16 i no s’hagi determinat cap codificació a través d’un protocol de nivell superior,
tot i així és una bona pràctica afegir-ho a tots els documents XHTML.
A continuació, la secció <head>:
<head> <title>Document XHTML</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> </head>
Inclou les metadades del document.
Per acabar, la secció <body>:
<body> <p>Això és un document XHTML</p> </body>
Conté la pàgina web.
Investigació. En aquests moments s’està elaborant l’estàndard
HTML5. Busca informació en la web sobre l’estat d’aquest
projecte i les principals diferències que suposarà HTML5 quant
al marcat dels documents. Fes-ne un informe d’aproximadament
500 paraules. És essencial que citis les fonts d’informació que has
utilitzat. Les pàgines web, fins fa poc, feien servir HTML 4.01, un estàndard dissenyat el
1999 per la W3C. Algunes persones criticaven aquesta organització per no actualitzar-
lo, ja que en 11 anys la web ha canviat molt i moltes de les funcions que inicialment es
Llenguatges i estàndards web PAC 1
6
van dissenyar per un ús han quedat obsoletes. És per això que el grup WHATWG va
començar a dissenyar el què ells creien que hauria de ser el següent pas en l’evolució de
l’HTML4. Ho van anomenar Web Aplications 1.0 i, poc després, el grup W3C ho va
agafar com a punt de partida per la creació del què avui coneixem com a HTML5.
Gràcies a la pressió de les persones que van crear el WHATWG, el W3C es va posar les
piles. Es va començar a desenvolupar el 2007 i encara falta polir alguns aspectes abans
que vegi la llum com a estàndard cap al 2012. Segons la W3C el procés de creació de la
versió 5 va endarrerit i algun editor d’aquesta especificació diu que no estarà enllestida
fins al 2022 o més tard, però actualment algunes parts de l’especificació ja són prou
estables com per començar a implementar-les.
Un dels canvis més significatius pel què fa al marcat amb respecte a la versió
actual és que es defineixen noves etiquetes per definir el contingut d’una pàgina web. La
següent imatge mostra gràficament algunes d’aquestes noves etiquetes:
HTML 4
HTML 5
Per petició popular s’han afegit les etiquetes <header>, <nav>, <article> i <footer>, amb
les quals s’aconsegueix una estructuració de la pàgina més ràpida i eficient que amb la
definició actual de divs. Algunes altres etiquetes afegides fan referència a la reproducció
Llenguatges i estàndards web PAC 1
7
d’àudio i vídeo. Fins ara, si volíem afegir àudio o vídeo a les nostres pàgines web havíem
de fer ús d’un plug-in, ja fos Flash, Quicktime, etc. La versió 5 disposa de les etiquetes
<audio> i <video>, les quals carreguen elements d’àudio i vídeo directament a la pàgina
web sense haver de fer servir connectors de tercers. Un altre element molt útil és
l’anomenat canvas. Aquest permet carregar gràfics, jocs o altres imatges o gràfics 3D al
vol. I tot sense fer servir cap connector addicional tampoc. Una altra gran evolució
respecte la versió 4 és la possibilitat d’accedir a llocs off-line, però tenint ple accés a les
funcions que abans només serien accessibles si estiguéssim connectats, ja que ara és
possible emmagatzemar part de la informació que abans estava al servidor al nostre
ordinador.
A part dels nous elements també s’han afegit nous atributs pels elements
existents a l’anterior revisió, i unes APIs molt interessants que ajudaran a crear
aplicacions web. Encara haurem d’esperar al 2012 inicialment per tenir l’estàndard, però
avui dia ja podem beneficiar-nos de moltes de les virtuts de l’HTML5 gràcies a que la
majoria de navegadors actuals interpreten (alguns més que d’altres) aquest nou
llenguatge.
Llenguatges i estàndards web PAC 1
8
Digues si són correctes o incorrectes els següents fragments de
codi (en XHTML). En cas que siguin incorrectes, indica per què.
<strong>Text negreta i <i>cursiva</strong></i>
Incorrecte. El tancament </strong> hauria d’anar després del tancament</i>.
<h7>Títol</h7>
Incorrecte. Només hi ha 6 nivells d’encapçalament.
<h1><strong>Un altre títol</strong></h1>
Incorrecte. S’ha de fer servir el CSS per aplicar estils al títol.
<h2><p>I encara un altre títol</p> <p>Amb el seu subtítol</p></h2>
Incorrecte. Hauria de ser així:
<h2><p>I encara un altre títol</p></h2> <p>Amb el seu subtítol</p></h2>
<em class=enverd>Text en color verd</em>
Incorrecte, la classe ha d’estar entre cometes.
<ul><li>Primera entrada <ul><li>Primera subentrada</li> <li>Segona subentrada</li> <li>Tercera subentrada</li></li></ul> <li>Segona entrada</li> <ol><li>Primera subentrada</li> <li>Segona subentrada</li> <li>Tercera subentrada</li></ol> </ul>
Incorrecte. Hauria de ser així:
Llenguatges i estàndards web PAC 1
9
<ul><li>Primera entrada <ul><li>Primera subentrada</li> <li>Segona subentrada</li> <li>Tercera subentrada</li></ul></li> <li>Segona entrada</li> <ol><li>Primera subentrada</li> <li>Segona subentrada</li> <li>Tercera subentrada</li></ol></li> </ul>
De quines formes es poden especificar la grandària del text usant
CSS? Quins són les diferències entre elles? I els avantatges i
inconvenients de cadascuna d'elles?
Paraula clau:
o xx-small, x-small, small, mèdium, large, x-large, xx-large, smaller, larger.
El navegador web adaptarà la mida tenint en compte que la xx-
small serà la més petita i la xx-large, la més gran.
Avantatges: la usabilitat d’un lloc és millor, ja que es dóna
flexibilitat al navegador a l’hora de mostrar la mida del text.
Inconvenients: no es té un control precís de la mida final del text,
així que se sacrifica el disseny final.
Mida absoluta:
o En píxels o punts.
Un caràcter tindrà sempre la mida establerta, per això és útil per a
pàgines que tinguin una mida estàtica.
Avantatges: El text es mostrarà igual en qualsevol navegador i
resolució de pantalla, ja que s’especifica la mida exacte.
Inconvenients: la versió 6 de l’Internet Explorer no permet canviar
la mida del text.
Llenguatges i estàndards web PAC 1
10
Mida relativa:
o En em o percentatge.
Es fa servir en pàgines web no estàtiques.
Avantatges: s’aconsegueix una bona relació entre usabilitat de la
pàgina i control del dissenyador.
Inconvenients: la mida variarà d’un usuari a un altre i pot ser que
el text no estigui al mateix lloc en diferents ordinadors.
Posa un exemple de pàgina web no accessible (desafortunada-
ment, són fàcils de trobar) i explica alguns dels motius pels quals
no ho és. He triat la pàgina web dels jocs olímpics d’hivern de Vancouver 2010,
http://www.vancouver2010.com/, ja que hi va haver certa polèmica respecte a
l’accessibilitat del lloc.
Fent servir l’eina Wave (http://wave.webaim.org/), podem veure que la pàgina dels jocs
olímpics té 48 errors d’accessibilitat.
Alguns d’ells són: manca de text alternatiu en algunes imatges, text alternatiu inadequat
pel contingut flash, massa dependència del javascript als menús, enllaços contradictoris o
imatges amb enllaços sense text alternatiu.
Llenguatges i estàndards web PAC 1
11
Observeu la següent captura de pantalla:
Volem aconseguir el següent resultat: les
imatges hauran de quedar envoltades d’un
marge de color gris de dos píxels de gruix i,
a més, volem assegurar-nos que hi hagi
almenys cinc píxels de separació amb
qualsevol element que les envolti, i aquests
píxels hauran de mostrar el color del fons. Quin codi CSS cal
utilitzar? Indicació: consulteu el model de caixes.
Aplicarem el següent codi per totes les imatges:
img {padding:2px; background-color:#CCC; margin:5px;}
Llenguatges i estàndards web PAC 1
12
Bibliografia
Pàgines Web
Wikipedia. HTML5 [en línia]. 12 de novembre de 2010. Disponible a internet
http://en.wikipedia.org/wiki/HTML5 [Consulta: novembre 2010]
HTML5ROCKS. Presentation [en línia]. 2010. Disponible a internet
http://www.html5rocks.com/ [Consulta: novembre 2010]
Vancouver 2010 Winter Olympics. [en línia]. 2010. Disponible a internet
http://www.vancouver2010.com/ [Consulta: novembre 2010]
Imatges
Html5 before <http://www.brucelawson.co.uk/images/html5-before.gif> Consulta:
novembre 2010.
Html5 after <http://www.brucelawson.co.uk/images/html5-after.gif> Consulta:
novembre 2010.
Where is HTML5 supported <http://www.focus.com/images/view/11905/> Consulta:
novembre 2010.
