La segona pràctica d'avaluació continua de Llenguatges i estàndards web. www.elsmeusapunts.es

1. Estudis d’Informàtica, Multimèdia i Telecomunicació
Grau en Multimèdia
Llenguatges i estàndards web
Prova d’avaluació continuada 2
•
Per a dubtes i aclariments sobre l'enunciat, heu de dirigir-vos al consultor
responsable de la vostra aula.
•
Tots els arxius de la pràctica han de lliurar-se com un únic arxiu comprimit, .zip
o .rar.
•
Cal lliurar la solució en un missatge en l'espai Lliurament i registre d'AC.
•
La data límit de lliurament és el 15 d’abril fins a les 24 hores. En l'arxiu
comprimit d'aquest lliurament incloureu, amb tots els documents resultants —
HTML, CSS, imatges i el document explicatiu del codi generat— un document de
text que contingui l'adreça de la pràctica en el vostre espai de disc personal, si
decidiu publicar-la.
•
No s'acceptarà com a resposta textos copiats literalment del material docent de
l'assignatura. En cas d'usar-se altres fonts, la còpia literal tampoc serà
acceptada i haurà de citar-se la font.
Propietat intel·lectual
Amb freqüència és inevitable, en produir una obra multimèdia, fer ús de recursos
creats per terceres persones. És per tant comprensible fer-ho en el marc d'una
pràctica dels estudis del Grau en Multimèdia, sempre que això es documenti
clarament i no suposi plagi en la pràctica.
Per tant, en presentar una pràctica que faci ús de recursos aliens, haurà de
presentar-se juntament amb ella un document en què es detallin tots ells,
especificant el nom de cada recurs, el seu autor, el lloc en què es va obtenir i el seu
estatus legal: si l'obra està protegida pel copyright o s'acull a alguna altra llicència
d'ús (Creative Commons, llicència GNU GPL...). L'estudiant haurà d'assegurar-se
que la llicència que sigui no impedeix específicament el seu ús en el marc de la
pràctica. En cas de no trobar la informació corresponent haurà d'assumir-se que
l'obra està protegida pel copyright.
A més, hauran d’adjuntar-se els arxius originals quan les obres usades siguin
digitals, i el seu codi font si correspon.
Un altre punt a considerar és que qualsevol pràctica que faci ús de recursos
protegits pel copyright no podrà en cap cas publicar-se a Mosaic, la revista del Grau
en Multimèdia, tret que els propietaris dels drets intel·lectuals donin la seva
autorització explícita.

2. Enunciat
En aquesta segona prova d'avaluació contínua treballarem els conceptes adquirits en les
següents unitats:


Llistes, imatges, enllaços, div, span i model de caixes
Validació i accesibilitat
Per a això realitzareu un petit lloc web amb tres pàgines, en el qual practicareu el que heu
treballat en les guies d'aprenentatge.
Les tres pàgines hauran d’estar vinculades entre elles mitjançant un menú de navegació.
També es valorarà positivament, encara que no és obligatòria, la publicació del lloc en el vostre
espai web personal.
Objectius




Prendre contacte amb l’(X)HTML i el CSS
Acostumar-se a usar correctament les etiquetes (X)HTML
Usar correctament el CSS per millorar la presentació de la web
Crear codi vàlid i accessible
Indicacions
A) (40 punts) La primera pàgina (respostes.html) consistirà a donar resposta a les següents
preguntes en un document HTML, utilitzant per a això llistes de definició (cada pregunta serà
un ‘terme a definir’ i cada resposta una 'definició'). Es valorarà positivament, si correspon,
l'aspecte i llegibilitat de la pàgina.
En aquestes sis preguntes es valorarà la concisió i el fet d'ajustar-se al que es pregunta. Es
penalitzarà el copiat i enganxat indiscriminat de text, especialment quan no s'esmentin les
fonts.
1. Defineix els tipus de llistes i per a què utilitzaries cadascuna d'elles. Posa un exemple de
cada tipus de llista.
2. És aconsellable que l’element img tingui els atributs witdh I height? Per què? Podem
assignar-li qualsevol valor a aquests atributs?
3. En crear un enllaç, podem establir l'atribut target. Quina és la seva funció? En quins casos
és desaconsellable utilitzar alguns valors d'aquest atribut?
4. Explica per a què s'usa overflow en CSS, i quins són els seus possibles valors. Posa un
exemple de cadascun d'ells.
5. Explica breument quines són les característiques d'una web accessible.
6. Per què és tan important la validació? Què pot succeir si obrim en el navegador un arxiu
HTML que no validi?

3. B) (30 punts) A la segona pàgina (web20.html), utilitzareu el document web20.pdf per
reproduir l'estructura que s'hi proposa amb la màxima fidelitat possible, enllaçant cada element
a la URL corresponent de les diferents eines Web 2.0 que es mostren en la llista.
Haureu de crear un pic personalitzat per a alguns elements de la llista, tal I com es mostra en el
document web20.pdf.
La imatge necessària per al pic personalitzat és diamant.jpg
C) (30 punts) Finalment, a la tercera pàgina (significat.html), haureu de reproduir amb la
màxima fidelitat possible el document significat.pdf (que s'ha extret del material docent Imatge
I Llenguatge Visual i és obra de Alba Ferrer Franquesa i David Gómez Fontanills.)
Les imatges necessàries per al document són:

equip_basquet.jpg

mitin.jpg

cocacola.jpg

ferrari.jpg.
Cal tenir en compte els seguents aspectes:

No és necessari usar les mateixes tipografies, però sí respectar les parts del text
que utilitzen una tipografia amb serifes i aquelles que estan en una tipografia
sense serifes.

L’aspecte del text en pantalla ha de ser el més semblant possible al model
(significat.pdf).

Cal respectar el tipus de justificació del text i la relació de mides entre les parts del
text (títol, text de llectura, peu de foto..)

Les caixes que contenen les imatges i els seus peus hauran de tenir el color de
fons i les vores tal i com es veuen en el document model.

Cada pàgina del lloc haurà de tenir un títol únic, que descrigui de forma adequada
el seu contingut.
Per crear els documents han d'utilitzar-se les millors tècniques de marcat explicades en el
material docent de l'assignatura.
Així, han de marcar-se correctament les llistes, enllaços, elselements span, els elements div i
les imatges, i han d'usar-se classes i ids, on correspongui, de la manera més semàntica
possible.
Podeu escollir lliurement si usar HTML 4.01 o XHTML 1.0. Totes les pàgines lliurades, i els fulls
d'estil associats, hauran de validar correctament. Podeu usar com a inici els mateixos
documents HTML i CSS que es proposaven en la primera PAC.

4. A més, haureu d'afegir en un document de text una explicació de les entitats HTML i CSS
utilitzades:
 Sobre les entitats HTML: ha d'explicar-se l'ús d'etiquetes diferents a <p>,
<h1>...<h6>.
 Sobre el CSS: Ha d'explicar-se tot el CSS utilitzat, incloent quan s'han utilitzat i
per què i per a què s'apliquen els atributs definits.