GRUP: tarda DATA: 5 de desembre de 2016 ================================================================================ Temps: 19:30h - 21:00h

(1)

================================================================================

Nom Alumne:

EXAMEN:

2

n

PARCIAL

ASSIGNATURA: Sistemes Multimèdia

(G.M.A.)

CURS: 1A

GRUP: tarda

DATA

: 5 de desembre de 2016

================================================================================

Temps: 19:30h - 21:00h

Els mòbils han de romandre desconnectats. No està permès l’ús de calculadores. Podeu consultar les referències HTML 5 i CSS 2.1 1) (2 punts) Explica, breument, en què es basa el sistema de color HLS que mostra la imatge següent, extreta del programa Fireworks. Observeu que el color seleccionat és el #00FF00 en el sistema RGB. Indiqueu, en la pròpia imatge, els eixos H, S i L . Els valors es poden expressar en un byte (0..255) o en % (0..100). A la imatge s'ha utilitzat el byte. Indica el valor de H si l'escala fos en graus ( 0..360). Explica com s’obté el blanc i el negre en aquest sistema? (justifica les respostes)

Aquest model està basat en les característiques pròpies del color. Són les següents:

• To (Hue), és el color com a tal, és a dir, equival a una freqüència de l'espectre visible.

• Saturació (Saturation), és la puresa o concentració del color (ampla de banda en l'espectre de freqüències). Si a un to pur li afegim qualsevol altre color, baixem la seva saturació

• Lluminositat (Lightness), és la claredat o foscor del color (quantitat de blanc que té el color)

El To, H, pot prendre els valors des de 0 fins a 360 (graus, cercle cromàtic). En la imatge, els valors van de 0 fins a 255, per tant, el valor H=85 en l'escala (0..255) equival a H=120 en l'escala (0..360).

_ଷ଺଴ு = ଼ହ ଶହହ => ܪ = ଼ହ ଶହହ 360 = 120

En aquest model HLS, el color blanc s’obté fent L=0 i el color negre amb L=250

Lluminositat, L To, H Saturació, S

B

To, H Lluminositat, L Saturació, S

(2)

2) (1 punt) Què és la profunditat de color en una imatge fotogràfica? Quines són les més habituals (indiqueu-ne quatre)? Quants colors podem codificar en cadascuna?

La profunditat de color en una imatge fotogràfica, és el nombre de bits necessaris per codificar el color d'un píxel. Així, tenim diferents possibilitats:

• 1 bit, són les imatges en blanc i negre.

• 8 bits (1 byte), és a dir, 256 colors diferents, normalment associats a una paleta

• 24 bits, 8 (vermell)+8(verd)+8(blau), és a dir, 16,7 milions de colors diferents. Es parla de color verdader perquè l'ull humà només pot diferenciar uns 10 milions de colors diferents.

• 32 bits, 8+8+8=24 bits de color + 8 bits canal alfa (256 graus de transparència)

(1 punt) Quins dels següents colors CSS són de la paleta WebSafe216? (justifica la resposta) #cc99ff, #039, #006699, #353535, rgb(20%,60%,100%), rgb(0,255,255)

WebSafe216, que està formada pels colors amb R, G, B igual a:

00 (0%), 33 (20%), 66 (40%), 99 (60%), CC (80%) i FF (100%) Hi ha 63=216 colors diferents.

Per tant, els següents colors són de la paleta WebSafe216: #cc99ff

#039 = #003399 #006699

rgb(20%,60%,100%) = #3399ff rgb(0,255,255) = #00ffff

(3)

3) (2 punts) La següent pàgina html mostra un dibuix vectorial en format SVG. Quina representació farà el navegador Firefox d’aquesta imatge? Dibuixeu en la quadrícula i indiqueu els colors de les diferents parts de la imatge. Cada quadre és de 20 x 20 píxels.

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>pregunta 3</title> <style type="text/css"> #imatge{ border-style:solid; border-color:#00F; } </style> </head> <body> <object id="imatge" data="imatge3A.svg" width="400" height="240"/> </body> </html>

El fitxer imatge3A.svg és el següent:

(4)

4) (2 punts) Donat el següent codi html i css, dibuixeu en la quadrícula la representació que en fa el navegador de les capes que conté. Justifiqueu la resposta indicant les mides i colors de les capes que apareixen en el codi. Cada quadre és de 25 x 25 píxels.

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Pregunta 4</title> <style type="text/css"> *{margin:0; padding:0; } #capa1{ position:relative; width:300px; height:200px; margin-left: 25px; background-color:#00F; } #capa2 { float:right; width:100px; background-color:#0F0; } #capa3 { position:absolute; right:25px; top:50px; width:200px; height:100px; background-color:#F00; } #capa4 { width:100px; height:50px; background-color:#FF0; } </style> </head> <body> <div id="capa1">

</div> </div> </body> </html>

Expliqueu, raonadament, les posicions de totes les capes:

El CSS *{margin:0;padding:0;} anul·la els marges i els farciments, per tant, la posició (0,0) del body és la cantonada esquerra superior del navegador.

La capa1de 300x200 i de color blau, està posicionada de forma relativa però no es corregeix la seva posició, per tant, es posiciona com si fos static. Cal col·locar-la a 25px de la vora esquerra del navegador atès que té un margin-left de 25px.

La capa 2 de 100px d'amplada i de color verd està dins la capa1 però flotant a la dreta. Al ser la primera, estarà tocant la vora superior i la vora dreta de la capa1.

La capa 3 de 200x100 i de color vermell es posiciona de forma absoluta. La capa de referència serà la capa1 atès que és el primer element que la conté amb posició diferent de static. La capa3 es col·locarà a 25px d ela vora dreta de la capa1 i a 50px de la vora de dalt de la capa1.

La capa 4 de 100x50 i de color groc es posiciona de forma static i està dins de la capa1. Va després de la capa2 però aquesta està flotant a la dreta, per tant, deixa el seu espai perquè s'hi col·loqui la capa4. El <p>Capa 4</p> va després de la capa3 però, atès que aquesta és absoluta (surt del flux normal del HTML), el paràgraf es col·loca com si la capa 3 no hi fos.

(5)

5) (2 punts) El següent document html es mostra en el navegador Firefox com mostra la figura A. Afegiu el codi CSS necessari perquè canviï la representació a la de la figura B, és a dir, centrar la pàgina amb una amplada de 850 píxels, que el menú de navegació es presenti a la dreta, que la llista no mostri els punts rodons i que els vincles no estiguin subratllats. Cal posar el codi necessari dins els rectangles dibuixats. <!DOCTYPE html> <html> <head> <meta charset=”utf-8" /> <title>pregunta 6</title> <style type="text/css"> *{margin:0; padding:0;} body {

font: 100% Verdana, Arial, Helvetica, sans-serif; color: #000000; background: #AAA;

} #pagina { background: #FFFFFF; width: 850px; margin: 0 auto; }

#capcalera {background: #DDD; padding: 10px;} #navegacio { width: 140px; padding: 15px 20px; background-color:#CCC; float: right; } #contingut { margin: 0px; padding: 15px 180px 15px 0px; background-color:#eee; } #peu { padding: 5px; background-color:#DDD; clear: right; } #navegacio ul li{ list-style-type:none; } #navegacio ul a{ text-decoration:none; } </style> </head> <body> <div id="pagina">

<ul>

<li><a href="#">Secció A</a></li><li><a href="#">Secció B</a></li><li><a href="#">Secció C</a></li> </ul>

</div>

<div id="contingut"><p>Contingut </p></div> <div id="peu"><p>La meva web. </p></div> </div>

</body> </html>

Figura A. Abans d’afegir el nou codi CSS