• No se han encontrado resultados

3 IMATGE, ÀUDIO I VÍDEO AL WEB.

N/A
N/A
Protected

Academic year: 2021

Share "3 IMATGE, ÀUDIO I VÍDEO AL WEB."

Copied!
30
0
0

Texto completo

(1)

3

3

IMATGE, ÀUDIO I VÍDEO AL WEB.

En aquest capítol estudiarem les característiques de les imatges digitals, tant de les fotografies (mapa de bits) com dels dibuixos. Farem especial èmfasi als formats comprimits de les imatges que les fan útils a la web.

(2)

3.1

3.1

3.1

3.1

Imatges.

3.1.1

La naturalesa del color.

El primer que hem de conèixer, per a comprendre millor les característiques de les imatges, és la física del color.

Com sabeu, la llum del Sol està formada per un ampli espectre de radiacions electromagnètiques. La part que detecta l'ull humà és anomenat espectre visible, que compren des de les longituds d'ona de 380nm, corresponent a la llum ultravioleta, fins a 780nm corresponent a la llum infraroja..

La relació entre la longitud d'ona i la freqüència és inversament proporcional amb un factor d'escala donat per la velocitat de la llum en el buit,

)

(

10

.

3

)

(

1 8

Hz

f

ms

f

c

m

=

=

λ

La longitud d'ona, λ, és el quocient entre la velocitat de propagació de la llum (c = 300 000 km/s) i la freqüència.

La naturalesa ja ens mostra aquest fet amb el fenomen de l'arc de Sant Martí. Quan plou finament i surt el Sol es pot observar aquest fenomen de la naturalesa

El primer que va explicar, científicament, aquest fenomen fou Isaac Newton (1666). Va demostrar, amb un experiment, que la llum "blanca", procedent del Sol, està composta de tots els colors de l'arc de Sant Martí atès que, si es fa passar per un prisma (que serien les fines gotes d'aigua de la pluja), es produeix la refracció de les diferents longituds d'ona i apareix l'espectre visible.

(3)

Per què els objectes són d'un color determinat? Els objectes, il·luminats amb llum blanca, absorbeixen algunes freqüències de l'espectre visible. Així, el color de l'objecte és el resultat de barrejar les freqüències no absorbides per l'objecte quan ha estat il·luminat amb tot l'espectre visible.

Aquest mecanisme d'obtenció del color s'anomena subtractiu atès que l'objecte absorbeix (resta) algunes freqüències (colors). Per contra, l'ull humà recupera el color fent una addició de les freqüències que li arriben i obté el color suma.

La percepció de l'ull humà pot ser: • subjectiva (gustos i preferències),

• patològica (defectes de visió, daltonisme, per exemple),

• no realista (enganyosa). A tall d’exemple, fixeu-vos en les imatges següents i pregunteu-vos quants colors diferents hi ha a les imatges?

En la primera imatge sembla que hi ha 5 colors diferents: blanc, verd clar i verd més fosc, vermell clar i vermell més fosc. En realitat només hi ha 3 colors: blanc, verd i vermell. Els altres dos colors no existeixen, els fabrica l'ull humà com una percepció errònia degut a la llum dels color veïns. El color vermell envoltat de verd és percep més fosc que si estigués envoltat de color blanc. No és tan clar però, també, el color verd a prop del color vermell es percep més fosc que si estigués a prop del blanc.

En la segona imatge, els totxos dels dos murs són del mateix color però el primer sembla més fosc perquè està envoltat de negre.

(4)

3.1.2

Models de color

3.1.2.1

Model RGB o additiu

En aquest model, el color s'obté per la suma dels colors de fonts emissores de llum com, per exemple, la pantalla de l'ordinador. Els monitors de l'ordinador o els televisors de tubs de raigs catòdics (CRT) són un conjunt de punts de llum anomenats píxels que obtenen el color per la suma de llum proporcionada per tres fòsfors que, excitats per un feix d'electrons, emeten llum en un color diferent per a cada fòsfor. Els 3 colors primaris, a partir dels quals es pot obtenir qualsevol color,

són: vermell (Red), verd (Green) i Blau (Blue). La suma d'aquests 3 colors primaris en la seva màxima intensitat dóna el color blanc que, com hem dit abans, conté tots els colors.

Els colors secundaris s'obtenen de barrejar dos primaris. Per exemple: vermell + verd dóna groc, verd + blau dóna cian i blau + vermell dóna magenta.

Els color terciaris s'obtenen de barrejar dos colors secundaris i així successivament.

En l'ordinador, per representar el valor d'un color obtingut amb el model additiu, cal dir la quantitat de cadascun dels colors primaris que compon el color final. Les quantitats van en una escala de 0 a 255. Per què 255? Perquè l'ordinador dedica un byte per representat la quantitat i 1 byte = 8 bits que permeten 28 = 256 representacions diferents.

Per al llenguatge CSS s'usa la notació hexadecimal per a la quantitat de color primari: #RRGGBB on RR, GG i BB són valors de 00 a FF

0, 1, 2, 3, 4, 5, 6, 7, 8, 9,10,11,12,13,14,15,16,17,18,...,254,255 00,01,02,03,04,05,06,07,08,09,0A,0B,0C,0D,0E,0F,10,12,13,..., FE, FF i hi ha 16 colors predefinits amb un nom:

black = "#000000" green = "#008000" silver = "#C0C0C0" lime = "#00FF00" gray = "#808080" olive = "#808000" white = "#FFFFFF" yellow = "#FFFF00" maroon = "#800000" navy = "#000080" red = "#FF0000" blue = "#0000FF" purple = "#800080" teal = "#008080" fuchsia = "#FF00FF" aqua = "#00FFFF"

El llenguatge CSS també permet representar el color en el model RGB expressant els valors numèrics en

decimal o en tant per cent, Per exemple, el color vermell també es pot representar amb el valor rgb(255,0,0) o rgb(100%,0%,0%). http://ssh.eupmt.tecnocampus.cat/~jou/SM/colorRGBA.html yellow Green cyan magenta Red Blue

(5)

L'escala de grisos s'aconsegueix igualant la quantitat dels tres colors primaris. Així, tenim 256 colors grisos, des del negre al blanc

3.1.2.2 Model CMYK o substractiu

El color s'obté barrejant pigments que absorbeixen (resten) freqüències de l'espectre visible. És el sistema utilitzat en la pintura a l'oleu i aquarel·les i també en les impressores d'injecció de tinta.

Els colors primaris en aquest sistema són: Cyan, Magenta i Yelow. • el pigment cian absorbeix el vermell

• el pigment magenta absorbeix el verd • el pigment groc absorbeix el blau

Barrejant pigments d'aquests colors primaris no es pot obtenir el blanc, per tant, el background o lienzo ha de ser blanc. El negre només s'aconsegueix si els pigments són ideals. Atès que és molt car obtenir pigments ideals, s'afegeix com a color primari, el color blacK).

Per representar el valor del color usem en aquest sistema se sol utilitzar la notació decimal, (C,M,Y,K1) on C, M, Y i K són valors de 0 a 255

com ho fa, per exemple, el programa eyedropper que mostra el valor del color del píxel seleccionat i que podeu descarregar de http://www.inetia.com/en/eyedropper/

1 En realitat, la K no ve de blacK sinó de black Key Yellow

Cyan Magenta

(6)

3.1.2.3 Model HSL i HSV

Aquests models estan basats en les característiques pròpies del color. Són les següents:

• Matís o to (Hue, matiz), é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ó

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

Amb el model HSV, el Valor negre el tenim fent V=0 i el blanc només s'obté amb saturació mínima, S=0, i valor màxim, V=100. El programa de dibuix GIMP fa servir aquest model. Disposa de la representació com un cilindre on el matís és l'angle (0..360), la saturació és el radi (0..100) i el valor l'alçada:

V

També disposa de la presentació com un con, és a dir, la base del cilindre es col·lapse a un punt:

Amb el model HSL, la component L ens porta del negre (L=0) al blanc (L=120). És un sistema més realista i és el que fa servir, per exemple, el programa Microsoft Paint 5.1 o el Macromedia Fireworks amb els següents rang de valors: Matís, H, és un valor de 0 a 239 i la Saturació , S, i la Lluminositat, L, són valors de 0 a 240 matís saturació lluminositat H V S

(7)

3.1.3

Teoria del color.

La Teoria del Color (TC) és un conjunt de principis utilitzats per crear combinacions de color harmònics. Les relacions entre els colors es pot visualitzar representant-los en un cercle cromàtic que s'obté amb Vmax per al model HSV o L(max-min)/2 per al model HSL.

D'acord amb la TC, una combinació de colors és harmònica quan utilitza:

qualsevol combinació de colors oposats (complementaris) en el cercle cromàtic,

qualsevol combinació de tres colors igualment espaiats en el cercle cromàtic format un triangle

qualsevol combinació de quatre colors formant un rectangle (dos parells de complementaris). A una combinació de colors harmònica se l'anomena esquema de color. Un esquema de color és harmònic independentment de l'angle de rotació.

Els esquemes de color (EC) clàssics són:

Monocromàtic:

Utilitza variacions de llum i saturació per a un mateix color. Aquest esquema es mostra net, elegant i agradable als ulls, especialment amb tons blau o verd.

Complementari

Aquest esquema consisteix en dos colors oposats l'un a l'altre en el cercle cromàtic. Aquest esquema és intrínsicament d'alt contrast, especialment quan oposem un color calent amb un de fred (vermell en front de verd-blau).

Podeu trobar un creador d’esquemes de color a la web http://colorschemedesigner.com/ i a http://kuler.adobe.com/

(8)

3.1.4

Imatges de "mapa de bits"

Són les imatges fotogràfiques i consisteixen en un rectangle de píxels (picture x element). Així, la imatge té una alçada (files) i una amplada (columnes) donades en píxels, formant una matriu (quadrícula). Cada píxel és un punt d'un color determinat de la imatge.

Les principals característiques d'aquestes imatges són: • profunditat del color (nombre de colors), • resolució (mides) i

• compressió.

3.1.4.1 Profunditat del color

La profunditat de color de la imatge, és el nombre de bits necessaris per codificar 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)

El concepte de paleta sorgeix dels ordinadors antics. Aquests, només permetien una resolució de pantalla de 256 colors, és a dir, una mateixa pantalla només podia contenir 256 colors diferents però cada pantalla podia tenir la seva paleta. En aquests ordinadors, les imatges han de tenir aquesta profunditat de color. El píxel és un índex de la paleta per fer-li correspondre un color d'aquesta. Així, si canviem la paleta, la mateixa imatge es veu amb colors diferents.

Per altra banda, quan publiquem a la web, volem arribar al màxim de públic, fins i tot, als que tenen un ordinador antic i, per tant, utilitzen paleta. En aquest cas, és bo dissenyar les imatges usant la paleta segura de la web, 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. Els altres 40 colors, fins a 256, són els colors propis que usa el sistema operatiu per al sistema de finestres.

paleta de 256 colors, Color Look Up Table

píxel = índex de la paleta

(9)

Les imatges fotogràfiques solen contenir molts més que 256 colors. Amb aquests ordinadors antics, cal buscar una manera de reduir el nombre de colors de la imatge (fins a un màxim de 256) sense que la visualització en surti perjudicada. La tècnica del dithering o tramat consisteix en simular una zona d'un color que no tenim a la paleta intercalant píxels amb colors de la paleta de forma que l'ull interpola (suma) els colors al color desitjat. En l'apartat d'efectes visuals, al principi del capítol, ja hem vist aquest fenomen; l'ull humà pot veure (percebre) més colors dels que en realitat hi ha. Vegem un exemple, comparem la imatge original de 220 píxels d'amplada per 176 píxels d'alçada amb color verdader (24 bits) amb la mateixa imatge amb la paleta WebSafe216 amb un tramat de 100% (en realitat només utilitza 87 colors de la paleta):

si mireu les imatges de lluny, quasi semblen iguals. De prop ja es poden veure diferencies tot i que degut al dithering s'ha aconseguit veure més colors dels que realment hi ha.

Observeu com es juga amb la combinació de diferents colors de la paleta per percebre un color diferent dels que hi ha a la paleta.

La mateixa imatge en blanc i negre (1 bit), la percebem de lluny amb més de dos colors (blanc i negre), veiem colors grisos. Si fem l'ampliació veurem que s'ha jugat amb la combinació només del blanc i el negre per percebre els grisos.

(10)

Sortosament, avui en dia, la tecnologia de les targetes gràfiques ha evolucionat tant que tots els ordinadors disposen de pantalles amb color verdader. Per tant, aquesta problemàtica de la limitació a una paleta de 256 colors només es fa servir per comprimir la imatge (fer que ocupi menys memòria).

3.1.4.2 Resolució

La resolució o mida de la imatge, és el nombre de píxels que conté la imatge. Es pot expressar explicitant el producte amplada per alçada o indicant el resultat. Per exemple, la imatge anterior té una resolució de 220 píxels d'amplada per 176 píxels d'alçada,

resolució = 220 x 176 = 38720 píxels

Aquesta mesura va lligada a la unitat de superfície en la visualització de la imatge i depèn del mitjà o dispositiu utilitzat. Així, en el cas de les pantalles d'ordinador, el Sistema Operatiu Windows (PC) dedica 96 píxels per representar una polzada de longitud. Per contra, el Sistema Operatiu de la màquina Macintosh utilitza 72 píxels per representar una polzada de longitud. Evidentment, dependrà de la resolució de pantalla que s'hagi establert perquè hi hagi correspondència entre la polzada representada i una de real, 2,54 cm. La resolució de la pantalla es mesura en píxels per polzada (ppi).

Per contra, altres dispositius, com per exemple les impressores, tenen una resolució més gran. En el cas d'una impressora d'injecció de tinta, és habitual trobar resolucions superiors als 300 punts per polzada (ppp).

És desaprofitar temps i espai tenir una imatge a més resolució que el que permet el mitjà on es presentarà. Però, per poder fer ampliacions sense que aparegui la pixelació es recomanable tenir la imatge amb més resolució.

fotografia a 2048 x 1536 píxels (3Mpíxels) En una resolució de pantalla de 96 ppi la mida de la imatge seria 54 x 40 cm !!! Imprès en paper de 18 x 13 cm implica una resolució de 300 ppp

(11)

3.1.4.3 Pes d'un fitxer imatge

La grandària o pes d'un fitxer que emmagatzema una imatge és directament proporcional a les dues propietats anteriors:

Dimensions de la imatge, Profunditat de color

amplada (píxels) * alçada (píxels) * profunditat de color (bits) Grandària (bytes) =

8

A vegades es dóna l'amplada o alçada en cm. En aquest cas cal fer la conversió, utilitzant la resolució de la pantalla o de la impressora utilitzada:

dimensió (pixels) = (dimensió (cm) / 2.54) * resolució imatge (ppi)

Exemple: imatge de 3,5 cm d'amplada i 2 cm d'alçada presa amb una resolució de 92 ppi i color vertader,

Grandària = ((3,5 / 2,54) * 92 * (2 / 2,54) * 92 * 24) / 8 = 27,5 KB

Com veiem, les imatges ocupen, fàcilment, molt d'espai. Així, caldrà minimitzar la grandària del fitxer sense perdre qualitat d'imatge. Hi ha, bàsicament, dues tècniques (a part de reduir les mides de la imatge, és clar):

Reduir la profunditat de color de la imatge, normalment a un màxim de 256 colors, utilitzant una paleta. Ja hem vist que amb el dithering podem "veure" més colors dels que en realitat hi ha. Comprimir la informació digital de la imatge aplicant algoritmes matemàtics.

3.1.5

Algoritmes de compressió

Els algoritmes de compressió els podem classificar en:

Sense pèrdues, la imatge obtinguda després d'un cicle de compressió i descompressió és idèntica a l'original. Els factors de compressió són baixos, menors de 10:1. Els principals algoritmes de compressió sense pèrdues són:

RLE (Run Length Encoded) LZW (Lempel-Ziv-Welch)

Amb pèrdues, el procés de compressió degrada la imatge de forma que al recuperar-la ja no és com l'original. Però, l'ull humà si que la percep igual. Els factors de compressió poden ser superiors a 40:1. El principal algorisme de compressió amb pèrdues és:

JPEG (Joint Photograph Expert Group) 3.1.5.1 Compressió RLE.

Es basa en detectar píxels consecutius del mateix color i substituir la cadena repetida per la informació del color i el nombre de repeticions:

abbbbbbbaaaaabbcaaaa... a*7b*5a*2bc*4a... (20 bytes) (14 bytes)

El byte * indica que el següent byte no és color sinó el nombre de vegades (fins a 255) que es repeteix el color.

Aquest algoritme va bé si hi ha grans zones de píxels del mateix color: imatges que provenen del dibuix vectorial o d'una reducció de la profunditat de color (paleta de 256). S'usa en els format .bmp i .pcx

(12)

3.1.5.2 Compressió LZW,

Es basa en la creació d'un "diccionari" de seqüències de píxels repetides no necessàriament consecutives.

diccionari = colors de la imatge w = "";

mentre (llegir un byte k){

if wk existeix en el diccionari w=wk; else afegeix wk al diccionari; escriu el codi de w; w = k; } escriu el codi de w; abbbbbbbaaaaabbcaaaa... 01451088429... (20 bytes) (11 bytes) Podeu veure un applet del funcionament d'aquest algoritme http://projects.hudecof.net/diplomovka/online/ucebnica/applets/AppletLZW.html Aquest sistema també es recomanable per comprimir imatges que tinguin àrees grans del mateix color.

S'usa en els formats de fitxer .gif, .tiff i postscript: .ps i pdf atès que el text sobre fons monocromàtic té les característiques idònies per aquest algoritme.

3.1.5.3 Compressió JPEG

Sistema de compressió amb pèrdues. Permet codificar imatges en color de 24 bits eliminant informació del color poc perceptible per l'ull humà:

1. l'ull humà és més sensible a la llum que al color. Passem de RGB a Y+UV (luminància + crominància) i comprimim més la part UV que és la informació del color.

2. l'ull humà no aprecia detalls on hi ha canvis ràpids de la llum. Podem eliminar la part d'alta freqüència de Y.

http://serdis.dis.ulpgc.es/multimedia/videos/videoT03.mov EL grau de compressió és un paràmetre que introdueix l'usuari: com més compressió, més degradada serà la imatge.

Permet factors de compressió de fins a 20:1 sense percebre una pèrdua de qualitat.

El sistema JPEG va bé per a imatges amb tonalitat contínua (fotografies) atès que optimitza la informació del color estudiant la imatge en blocs de 8 x 8 píxels (per això pixel·la quan comprimeix molt). Si la imatge té text sobre fons monocromàtic, es produeix una distorsió del text.

S'usa en el format d'imatge .jpg

W k sortida codi símbol 0 a 1 b 2 c ================= a a b 0 3 ab b b 1 4 bb b b bb b 4 5 bbb b b bb b bbb b 5 6 bbbb b a 1 7 ba a a 0 8 aa a a aa a 8 9 aaa a a aa b 8 10 aab b b bb c 4 11 bbc c a 2 12 ca a a aa a aaa a 9 13 aaaa a : :

(13)

3.1.6

Formats de fitxers.

Els diferents programes d'edició d'imatges tenen el seu propi format per emmagatzemar la pròpia imatge i poder editar-la (modificar-la) posteriorment. Per exemple:

.ai Adobe Ilustrator .psd Adobe PhotoShop .cdr Corel Draw

.dxf Autodesk Drawing Interchange Format .png Macromedia Fireworks

La majoria permeten treballar amb imatges mapa de bits i amb dibuix vectorial. Les imatges són editables, és a dir, es pot recuperar la informació de capes, màscares, etc. i no estan comprimits.

Els formats per a fitxers que contenen imatges mapa de bits podem diferenciar entre: • Formats no utilitzables a la web atès el nul o baix grau de compressió:

.bmp BitMaPped File Format (RLE), .pcx PC Paintbrush (RLE),

.tif Tagged Image File Format (LZW)

Formats per a la web:

.gif Graphic Interchange Format (LZW) .jpg (JPEG)

.png Portable Network Graphics (variant del LZW però sense patents) Estudiem les característiques dels formats per a la web.

3.1.6.1 Format GIF.

Les principals característiques són:

• Tenia patent (Unisys/Compuserve), per tant, s'havia de pagar per usar-lo. • Imatges de fins a 256 colors (paleta). Això fa que no sigui apte per a fotografies. • Comprimit sense pèrdues

(LZW).

• Permet triar un color com a transparent (canal alfa de 1 bit). Si la imatge ha aplicat la tècnica d'aliasing pot aparèixer l'efecte "halo" si el backgraund de la imatge no coincideix amb el del lloc on es visualitza (pàgina web, per exemple)

• Permet entrellaçat (Interlaced GIF). El fitxer emmagatzema la informació de manera que quan es transmesa per la web, la imatge es va fent cada cop més "nítida". Cal tenir present però que l'entrellaçat fa augmentar una mica la grandària del fitxer.

(14)

• Permet animació (GIF animat). Consisteix en un conjunt de fotogrames (frames) col·locats l'un darrera l'altre. La compressió es fa a nivell de fotograma com si fossin imatges independents.

Normalment, es fa que el darrer fotograma sigui l'anterior al primer i així, podem tenir un cicle continu.

S'usaven molt per fer "banners" publicitaris a la web. No s'ha d'usar quan la imatge conté degradats.

3.1.6.2 Format JPG.

Les principals característiques són:

• Imatges amb profunditat de color de 24 bits, aptes per a fotografies.

• Comprimit amb pèrdues (JPEG). Un cop emmagatzemada la imatge en format jpg es perd la imatge original. Cal guardar sempre un original sense comprimir. Una compressió del 80 % és d'alta qualitat.

• No permet transparències. • No permet animacions.

• Permet compressió progressiva. Així el navegador pot anar presentant la imatge cada cop amb més definició.

3.1.6.3 Format PNG.

Aquest format va ser pensat com una evolució del GIF millorant les mancances que aquest té. Les principals característiques són:

• Lliure de patents.

• Permet imatges amb profunditat de color de 24 bits però també paletes de 256 colors. • Comprimit sense pèrdues (Deflate)

• Té un canal alfa per a transparència (8 bits) • Permet entrellaçat

(15)

3.1.7

Optimització amb Fireworks.

Consulteu el capítol “Optimització i exportació” del manual d’usuari del Fireworks • http://helpx.adobe.com/es/fireworks/topics.html

Vegem dos exemples, Imatge fotogràfica,

(16)

3.1.8

Imatges vectorials.

Les imatges (dibuixos) vectorials no emmagatzemen el conjunt de píxels (imatge renderitzada) sinó el conjunt de primitives (vectors) amb els valors dels seus paràmetres perquè es pugui reconstruir la imatge quan calgui.

Les principals primitives són: línies rectes (dos punts), rectangle (quatre punts), el·lipses (4 punts, els del rectangle que la conté), corbes (de Bezier) i text (TrueType).

Consulteu l’apartat “Ús d’objectes vectorials” del manual d’usuari de Fireworks,

http://helpx.adobe.com/es/fireworks/topics.html

Pareu atenció especialment en l’apartat “Formes d’estil lliure” on descriu l’eina ploma, molt útil per dibuixar contorns corbats.

Les principals característiques de les imatges vectoritzades són:

• Fitxers de molt poc pes, per tant, fàcils de descarregar per internet. El fitxer només conté la informació de com obtenir la imatge a partir d'un conjunt de primitives amb uns valors dels seus paràmetres.

• Imatge independent de la resolució. Permet aplicar (zoom +) mantenint la qualitat de la imatge. • Es pot seleccionar i manipular, independentment, cada objecte de la imatge.

• Es pot agrupar i després tornar a disgregar part de la imatge, com un sol objecte. • Es pot ordenar en profunditat (superposició) creant la il·lusió de 3D

• Pot utilitzar text TrueType caràcter a caràcter.

Pot incloure imatges mapa de bits (patrons) i degradats en el farciment dels objectes tancats • Permeten l'animació canviant la posició dels objectes de la imatge.

• El principal inconvenient es que generen imatges poc naturals (es nota que és un dibuix!).

El poc pes i la possibilitat de crear animacions l'han fet molt atractiu per ésser usat a la web. Adobe Flash ha creat un format específic per poder crear aquests tipus d'imatges, .swf L'inconvenient és que per renderitzar la imatge cal un "plug-in", el flash player, que es pot descarregar de forma gratuïta.

(17)

El format SVG, Scalable Vector Graphics, està dissenyat per a imatges 2D vectoritzades a la web expressades en xml. Per exemple, el següent document imatge.svg, al ser renderitzat pel navegador dóna la imatge que es mostra a continuació, a la qual s’ha sobreposat la graella XY per poder veure les dimensions:

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> <rect x="20" y="20" rx="20" ry="20" width="100" height="60"

style="fill:red;stroke:black;stroke-width:5;opacity:0.5"/> <ellipse cx="240" cy="60" rx="100" ry="40"

style="fill:rgb(200,100,50);stroke:rgb(0,0,100);stroke-width:2"/> <circle cx="100" cy="140" r="20" fill="blue"/>

<rect x="100" y="140" width="20" height="20" fill="red"/> </svg>

La imatge s'incorpora al document html amb la següent marca: <object data="imatge.svg" width="400" height="200"/>

primitiva descripció propietats descripció

rect rectangle i quadrat x, y posició cantonada esquerra superior

rx, ry arrodoniment de les cantonades

width, height mides: amplada i alçada

ellipse el·lipse cx, cy posició del centre

rx, ry semieix horitzontal i vertical

circle cercle cx, cy posició del centre

r radi

line segment x1, y1 x2,

y2 posició dels dos extrems

polyline conjunt de segments

consecutius (no tanca la figura)

points seqüència de punts x, y que conformen els

segments. El primer punt del següent segment és el mateix que el darrer punt del segment anterior.

Les dues figures (polyline i polygon) són tancades, per tant, es pot omplir de color. Normalment però, quan és polyline, no s'omple de color (fill: none) o bé s'omple del color de fons del dibuix perquè no es vegi la línia.

polygon conjunt de segments

consecutius (tanca la figura, és a dir, el darrer va del darrer punt al primer) X Y 0 400 200 0 y rx x ry width height 100 200 300 100 cx cy rx ry cx cy r

(18)

Totes les primitives de dibuix tenen la propietat style que ens permet definir l’estil de la vora i del farciment de la primitiva. La sintaxi és similar al CSS, és a dir, conjunt de propietats nom:valor separades per ; y tot emmarcat per “ ”. Les propietats més importants de l’estil són:

fill, color del farciment en notació similar al CSS

opacity, grau de transparència del farciment: 0 invisible, 1 totalment visible

stroke, color de la vora

stroke-width, gruix de la vora en pixels

stroke-opacity, grau de transparència de la vora

Vegeu aquest altre exemple de les primitives més importants http://ssh.eupmt.tecnocampus.cat/~jou/SM/svg.html

Podeu trobar més informació a: www.w3schools.com/svg/

https://developer.mozilla.org/en-US/docs/SVG www.w3.org/TR/SVG11/

Un programa, de codi lliure, que podeu utilitzar per crear aquest tipus d’imatges és el inkscape. El podeu trobar a la web www.inkscape.org/

(19)

3.2

Àudio i vídeo.

En l’origen del web, no existia la multimèdia atès que els mitjans principals eren el text (per això el llenguatge s’anomena HyperTextML) i la imatge. El llenguatge no incloïa cap marca per a l’àudio i el vídeo. Sortosament, a partir de HTML5 s’incorporen les marques <audio> i <video> que fan palesa la multimèdia al web. Estudiarem aquest apartat veient el què es feia abans de l’aparició de l’HTML5 i què es recomana fer actualment amb l’estàndard actual, HTML5.

La necessitat d’incorporar aquestes dues noves marques està motivada pel consum actual dels continguts a Internet. Segons Cisco, el 80% del transit a Internet per a l’any 2017 serà vídeo.

Aquest apartat el podeu seguir millor al web http://ssh.eupmt.tecnocampus.cat/~jou/SM/cap6_audiovisual.html on podreu provar els exemples.

3.2.1

Àudio i Vídeo abans de l’HTML 5.

Sempre que vulguem posar un àudio a la pàgina web elaborada en un HTML anterior a la versió 5, caldrà posar un reproductor a través de la marca <object> perquè l'usuari pugui decidir si escoltar-lo o no. Es recomana que el reproductor estigui parat al començament.

<object type="application/x-shockwave-flash" data="dewplayer.swf?son=Phil_Collins.mp3" width="200" height="20" bgcolor="#ffffff">

<param name="movie" value="dewplayer.swf?son=Phil_Collins.mp3" /> <param name="bgcolor" value="#ffffff">

</object>

En l’exemple, s’ha utilitzat un reproductor elaborat en Adobe Flash (és la situació més habitual). Us podeu descarregar el reproductor dewplayer.swf de l’exemple a

http://ssh.eupmt.tecnocampus.cat/~jou/SM/so/dewplayer.swf

Observeu que per escoltar la cançó amb el codi HTML anterior cal publicar al servidor web tant el reproductor (fitxer dewplayer.swf) com la cançó (fitxer Phil_Collins.mp3). Sabries descarregar-te-la? La inserció de vídeo al web es podia fer de diferents maneres:

• A través d'un component Flash. Calia primer codificar el vídeo amb els codecs de Flash i generar un .flv o .f4v (H.264). El principal problema d'aquest mètode serà que caldrà publicar el fitxer .flv o .f4v al nostre servidor web i que el navegador tingui el Flash Player actualitzat a la versió del codec del nostre vídeo.

• Publiquem el vídeo a youtube o a vimeo i després incrustem (embeb) el codi a la nostra pàgina web. Amb aquest mètode no tenim problemes de hosting.

<div style="margin: 0 auto; width: 400px;">

<iframe src=http://player.vimeo.com/video/4796279?title=0&byline=0&portrait=0 width="400" height="320" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen> </iframe> </div>

(20)

3.2.2

Àudio HTML 5.

Amb la nova versió HTML5, publicar àudio i vídeo és molt més fàcil. S'utilitza les marques <audio> i <video>.

Actualment, hi ha 3 formats d'àudio suportats per la marca <audio> : MP3, Ogg i Wav:

Format Descripció extensió del

fitxer Tipus MIME

MP3 És el format d’àudio més popular. Ofereix una bona

ràtio de compressió amb una alta qualitat d’àudio. .mp3 audio/mp3 Ogg Vorbis Estàndard obert i gratuït que ofereix alta qualitat i una

bona ràtio de compressió, comparable a MP3 .ogg audio/ogg

Wav Format original d’àudio digital. No té compressió, per tant, els fitxers són molt grans i, normalment, no es poden fer servir per a la web, a menys que la durada del so sigui molt curta.

.wav audio/wave

A nivell de navegadors, actualment hi ha disparitat en el reconeixement d’aquest formats entre els navegadors més habituals:

Browser MP3 Wav Ogg

Internet Explorer 9 SI NO NO

Firefox 21 SI SI SI

Google Chrome 6 SI SI SI Apple Safari 5 SI SI NO

Opera 10.6 NO SI SI

observem que Firefox i Chrome són els únics que reconeixen els tres formats, però, no hi ha cap format que sigui reconegut pels cinc navegadors més importants actualment.

Veguem un exemple d'àudio HTML: <audio controls preload="auto">

<source src="so/Phil_Collins.mp3" type='audio/mp3'> </audio>

que podem reproduir perfectament en el navegador Firefox

però no amb el navegador Opera

Si volguéssim que també es reproduís amb Opera cal publicar també el so en format .ogg: <audio controls preload="auto">

<source src="so/Phil_Collins.mp3" type='audio/mp3'> <source src="so/Phil_Collins.ogg" type='audio/ogg'>

(21)

Els principals atributs de la marca

<audio>

són:

Atribute Valor Descripció

autoplay autoplay Especifica que l’àudio ha de començar a sonar tant aviat com sigui

possible. Des del punt de vista de la usabilitat, no és aconsellable tenir-lo activat.

controls controls Especifica que s’ha de mostrar els controls perquè l’usuari hi pugui

interactuar.

loop loop Especifica que quan acabi el registre de so, tornarà a començar i així

indefinidament.

muted muted Desactiva la sortida d’àudio del dispositiu reproductor.

preload auto

metadata none

Especifica quan i com es carrega l’àudio en carregar-se la pàgina que el conté. none significa que es carregarà quan l’usuari faci play. metadata significa que precarrega només les capçaleres del fitxer, les quals conté la mida, autor, etc. del registre la qual cosa serà utilitzat pel navegador per informar a l’usuari. auto és el valor per defecte i significa que el

navegador precarregarà tots els continguts d’àudio de la pàgina. En aquest darrer cas, seria desaconsellable en una pàgina que contingui molts àudios i s’espera que només es vulgui escoltar uns quants.

src URL Especifica la URL del fitxer d’àudio

3.2.3

Vídeo HTML 5.

Actualment, hi ha 3 formats de vídeo suportats per la marca <video> : MP4, WebM i Ogv:

Format Descripció extensió del

fitxer Tipus MIME

H.264 És l’estàndard de vídeo de la industria audiovisual, particularment quan es tracta d’alta definició.

.mp4 video/mp4

Ogg Theora Estàndard de vídeo obert i gratuït. No arriba a les

prestacions del H.264 però s’hi acosta. .ogv video/ogg

WebM Format de video nou, creat quan Google va comprar VP8 i el va transformar en un estàndard lliure. Es vol que es converteixi en l’estàndard de la web (d’aquí el seu nom)

.webm video/webm

A nivell de navegadors, actualment hi ha disparitat en el reconeixement d’aquest formats entre els navegadors més habituals:

Browser MP4 WebM Ogv

Internet Explorer 9 SI NO NO

Firefox 21 SI SI SI

Google Chrome 6 SI SI SI

Apple Safari 5 SI NO NO

Opera 10.6 NO SI SI

Un altre cop, observem que Firefox i Chrome són els únics que reconeixen els tres formats, però, no hi ha cap format que sigui reconegut pels cinc navegadors més importants actualment.

(22)

Al web www.mirovideoconverter.com podeu trobar un convertidor de format de vídeo Veguem un exemple de vídeo HTML5

<video controls preload="auto" width="640" height="264" poster="my_video_poster.png"> <source src="video/oceans-clip.mp4" type='video/mp4'>

<source src="video/oceans-clip.webm" type='video/webm'> </video>

Els atributs de la marca

<video>

són molt similars als de la marca

<audio>

afegint les

mides del vídeo i una imatge de portada:

Atribute Valor Descripció

width pixels Especifica l’amplada, en pixels, de l’espai que ha de dedicar el

navegador per mostrar el vídeo

height pixels Especifica l’alçada, en pixels, de l’espai que ha de dedicar el navegador.

Si els valors de width i height entre en contradicció respecta a la relació d’aspecte del format del vídeo, el navegador agafarà els valors mínim compatibles.

poster URL Especifica la URL d’una imatge que es mostrarà abans que l’usuari faci

“play”. Si no s’especifica aquest atribut, s’agafa el primer fotograma del vídeo com a “poster”.

autoplay autoplay Especifica que el vídeo ha de començar a reproduirse tant aviat com

sigui possible. Des del punt de vista de la usabilitat, no és aconsellable tenir-lo activat.

controls controls Especifica que s’ha de mostrar els controls perquè l’usuari hi pugui

interactuar.

loop loop Especifica que quan acabi la reproducció del vídeo, aquest tornarà a

començar i així indefinidament.

muted muted Desactiva la sortida d’àudio del vídeo.

preload auto

metadata none

Especifica quan i com es carrega l’àudio en carregar-se la pàgina que el conté. none significa que es carregarà quan l’usuari faci play. metadata significa que precarrega només les capçaleres del fitxer, les quals conté la mida, autor, etc. del registre la qual cosa serà utilitzat pel navegador per informar a l’usuari. auto és el valor per defecte i significa que el

navegador precarregarà tots els continguts de vídeo de la pàgina. En aquest darrer cas, seria desaconsellable en una pàgina que contingui molts vídeos i s’espera que només es vulgui veure uns quants.

src URL Especifica la URL del fitxer de vídeo.

Tant la marca <audio> com <video> es poden manipular amb javascript. Això permet personalitzar els controls i afegir altres característiques com els subtítols.

(23)

3.3

Exercicis i qüestions.

1) Expliqueu, breument, com funciona l’algorisme de compressió d’imatges RLE. Apliqueu-ho a la imatge següent de 10 x 10 píxels que conté només 4 colors diferents: blanc (w), blau (b), vermell (r) i verd (v) . Calculeu la “ratio” de compressió que s’aconsegueix en l’exemple.

.

És un algorisme de compressió sense pèrdues que es basa en detectar píxels consecutius del mateix color i substituir la seqüència repetida per la informació del color i el nombre de repeticions. RLE és l’acrònim de Run Length Encoded que podríem traduir per “codificació de la longitud dinàmica”.

S’usen en imatges de pocs colors (256 = 1 byte)

Per exemple, si hi ha 5 blancs consecutius, en lloc de codificar wwwww (5 bytes) codificaríem *5w (3 bytes): * per codificar que el que ve és una repetició, 5 per codificar el nombre de repeticiones (fins a 255 amb un byte) i w per codificar el color que es repeteix.

En l’exemple tindríem una seqüència de 10 x 10 = 100 bytes quan amb el RLE tindríem:

*12w*16b*27r*16v*6b*12r*11w, és a dir, 3x7= 21 bytes. La ratio és 21 / 100, per tant, dividim per 5 la mida del fitxer.

(24)

2) Apliqueu l’algorisme de compressió d’imatges RLE a la imatge següent de 10 x 10 píxels que conté només 2 colors diferents: blanc (w), blau (b) . Calculeu la “ratio” de compressió que s’aconsegueix en l’exemple.

.

3) Explica, breument, en què està basat el sistema de color HSB que mostra la imatge extreta del programa Photoshop. Dibuixeu els eixos H, S i B en la pròpia imatge. Quins valors poden prendre? Explica com s’obté el blanc i el negre en aquest sistema? El color seleccionat a la imatge és un color de la paleta web216? (justifica la resposta)

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

Matís o 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ó

Valor o Brillantor (Brightness), és la claredat o foscor del color (quantitat de blanc que té el color)

El Matís, H, pot prendre els valors des de 0 fins a 360 (graus, cercle cromàtic). La component Saturació, S, i Brillantor, B, es donen en tant per cent (mínim 0%, màxim 100%)

Amb el model HSB, el color blanc s’obté fent B=100% i S= 0%. El color negre s’obté fent B=0% El color seleccionat en la gràfica és el color HTML hexadecimal “#6666FF” que es correspon amb un color de la parleta webSafe 216. En aquesta paleta els valors de les components R, G i B només poden ser 00, 33, 66, 99, CC i FF, com és el cas de la figura.

Matís, H

Saturació, S Brillantor, B

En l'algorisme RLE, si hi ha 5 blancs consecutius, en lloc de codificar wwwww (5 bytes) codificaríem *5w (3 bytes): * per codificar que el que ve és una repetició, 5 per codificar el nombre de repeticiones (fins a 255 amb un byte) i w per codificar el color que es repeteix.

En l’exemple tindríem una seqüència de 10 x 10 = 100 bytes quan amb el RLE tindríem:

*12w*6b*6w*2b*8w*2b*8w*2b*8w*2b*8w*2b*8w*2b*6w*6b*12w, és a dir 3x17=51 bytes. La ratio és 51 / 100, per tant, dividim per 2 la mida del fitxer.

(25)

4) Quines són les principals característiques de les imatges emmagatzemades en format .jpg? Quin tipus d’imatges són, a priori, les adequades per guardar en aquest format i per què? Quin problema tenen quan la imatge conté text?

Les principals característiques són:

• Imatges amb profunditat de color de 24 bits, aptes per a fotografies.

Comprimit amb pèrdues (JPEG). Un cop emmagatzemada la imatge en format jpg es perd la

imatge original. Cal guardar sempre un original sense comprimir. Una compressió del 80 % és d'alta qualitat.

No permet transparències. • No permet animacions.

Permet compressió progressiva. Així el navegador pot anar presentant la imatge cada cop amb

més definició.

L’algorisme JPEG analitza la imatge en blocs de 8 x 8 píxels eliminant informació que l’ull humà no percep, com per exemple, els canvis ràpids de llum (del blanc al negre). Aquesta circumstància apareix quan hi ha text negre, per exemple, sobre un fons monocromàtic més clar, blanc per exemple. En aquest cas, es produeix una distorsió del text.

5) S’ha dibuixat la bandera de Cook Island amb el Fireworks. Volem exportar la imatge a un format web i s’ha estudiat l’optimització amb el resultat que mostra la imatge següent:

Quin seria el format escollit? Indica les característiques més importants: l’algorisme és amb pèrdues o sense?, quina és la profunditat de color?, utilitza dithering?

Al tractar-se d’un dibuix, el format web millor és el .gif o el .png quedant descartat el format .jpg El paràmetre que fa decidir és el pes del fitxer generat. El format que dóna menys pes és el .png amb un valor de 5.04KB

Aquest format, .png, s’obté amb un algorisme sense pèrdues (deflate, similar al LZW) i permet treballar amb paleta de fins a 256 colors. El dibuix conté només 34 colors, per tant, és adequat el format sense aplicar dithering (tramat).

(26)

6) La següent pàgina html mostra un dibuix vectorial en format SVG. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>pregunta 5</title> <style type="text/css"> #imatge{ border-style:solid; border-color:#00F; } </style> </head> <body>

<object id="imatge" data="imatge.svg" width="400" height="300"/> </body>

</html>

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

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> <circle cx="125" cy="125" r="25" style="stroke:black; stroke-width:1; fill:yellow"/> <circle cx="275" cy="125" r="25" style="stroke:black; stroke-width:1; fill:yellow"/> <circle cx="200" cy="125" r="75" style="stroke:black; stroke-width:1; fill:yellow"/>

<rect x="150" y="125" width="25" height="10" style="stroke:black; stroke-width:1; fill:white"/> <rect x="225" y="125" width="25" height="10" style="stroke:black; stroke-width:1; fill:white"/> <polygon points="50,100 200,25 350,100" style="fill:red"/>

<line x1="200" y1="125" x2="200" y2="175" style="stroke:black; stroke-width:1"/> </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 25 x 25 píxels.

(27)

7) La següent pàgina html mostra un dibuix vectorial en format SVG. <!DOCTYPE html> <html> <head> <meta charset=”utf-8" /> <title>pregunta 5</title> <style type="text/css">

#imatge{ border-style:solid; border-color:#00F;} </style> </head> <body> <object id="imatge" data="imatge.svg" width="800" height="600"/> </body> </html>

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

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">

<polygon points="75,250 200,75 325,250" style="stroke:black; stroke-width:1; fill:yellow"/> <polygon points="200,75 550,75 675,250 325,250" style="stroke:black; stroke-width:1; fill:red"/> <rect x="75" y="250" width="250" height="300" style="stroke:black; stroke-width:1; fill:yellow"/> <circle cx="200" cy="325" r="50" style="stroke:black; stroke-width:1; fill:white"/>

<circle cx="200" cy="450" r="50" style="stroke:black; stroke-width:1; fill:white"/>

<rect x="150" y="450" width="100" height="100" style="stroke:black; stroke-width:1; fill:white"/> <line x1="150" y1="450" x2="250" y2="450" style="stroke:white; stroke-width:2"/>

<rect x="325" y="250" width="350" height="300" style="stroke:black; stroke-width:1; fill:yellow"/> </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 50 x 50 píxels.

(28)

8) La següent pàgina html mostra un dibuix vectorial en format SVG. <!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="imatge.svg" width="400" height="300"/> </body>

</html>

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

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">

<ellipse cx="150" cy="175" rx="75" ry="100" style="stroke:black; stroke-width:1; fill:yellow"/> <circle cx="110" cy="50" r="25" style="stroke:black; stroke-width:1; fill:yellow"/>

<circle cx="190" cy="50" r="25" style="stroke:black; stroke-width:1; fill:yellow"/>

<ellipse cx="150" cy="75" rx="50" ry="50" style="stroke:black; stroke-width:1; fill:yellow"/> <rect x="125" y="50" width="15" height="10" style="stroke:black; stroke-width:1; fill:white"/> <rect x="160" y="50" width="15" height="10" style="stroke:black; stroke-width:1; fill:white"/> <ellipse cx="150" cy="100" rx="25" ry="10" style="stroke:black; stroke-width:1; fill:yellow"/> <ellipse cx="150" cy="95" rx="30" ry="10" style="fill:yellow"/>

<polyline points="200,250 225,275 250,250 275,250 325,200" style="fill:none; stroke:black; stroke-width:1;"/>

<line x1="150" y1="75" x2="150" y2="90" style="stroke:black; stroke-width:1"/> </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 25 x 25 píxels.

(29)

9) Ompliu la taula comparativa dels formats d’imatge .gif, . jpg i .png següent atenent a les característiques que es senyalen:

característica format .gif format .jpg format .png

Algorisme de compressió LZW JPEG Deflate

L’algorisme és amb pèrdues? (si/no) no si no Profunditat de color permesa Paleta, màxim 256 colors Color verdader (24 bits) Paleta, màxim 256 colors Color verdader (24 bits)

Transparències Si, un color No Sí, canal alfa (256

valors)

Permet animació (si/no) Si No No

Permet descàrrega progressiva (si/no)

Si (entrellaçat) Si Si

Òptim per a dibuixos (si/no)

Si No Si

Òptim per a fotografies (si/no)

No Si Si

Òptim per a imatges petites (si/no)

Si No Si

Òptim per a imatges grans (si/no)

No Si Si

10) Quines són les principals característiques de les imatges vectoritzades (dibuixos) respecte: el pes del fitxer que conté la imatge, la resolució de treball, l’edició del dibuix, l’animació i la inclusió de text? Indiqueu per a què serveixen cadascuna de les eines de dibuix del programa Flash, en la imatge següent:

Les principals característiques de les imatges vectoritzades són:

Fitxers de molt poc pes, per tant, fàcils de descarregar per internet. El fitxer només conté la informació de com obtenir la imatge a partir d'un conjunt de primitives amb uns valors dels seus paràmetres.

Imatge independent de la resolució. Permet aplicar zoom mantenint la qualitat de la imatge. Es pot seleccionar i transformar (mida, posició, gir, color, etc) independentment, cada objecte de

la imatge.

Es pot agrupar i després tornar desagrupar part de la imatge com un sol objecte. Es pot ordenar en profunditat (superposició) creant la il·lusió de 3D

• Permeten l'animació canviant la posició dels objectes de la imatge. • Pot utilitzar text TrueType caràcter a caràcter perquè també són dibuixos. Escriure Text TrueType, com a dibuix

Eina Pinzell, per dibuixar traç lliures de diferents gruixos (contorn tancat = pintar) Dibuixar formes predefinides: rectangles, cercles, estels, etc.

Eina ploma, per dibuixar corbes (de Bezier)

Dibuixar línies rectes

(30)

Referencias

Documento similar

D’una banda tenim un conjunt de gestos per poder veure detalls de la imatge: el primer és el conegut com pinch que al fer pinça amb els dits, es farà més gran i es

Asimismo, se aportan las herramientas necesarias que proporcionarán al alumno la posibilidad de realizar un análisis crítico de un informe de investigación, tanto a nivel

Treballo i col·laboro entre d’altres, en interpretació i construcció d’escenografies i titelles amb les companyies: Teatre de l’Arca de Barcelona, Tebac de Reus,

Ho organitza: Associació de Veïns del Barri de Mercadal DILLUNS Del 3 d’octubre de 2022 al 12 de juny de 2023 de 15.15 a 16.45 h.. DIMARTS Del 4 d’octubre de 2022 al 13 de juny de

Como indico en la sección de Contenidos de esta Guía de la Asignatura, aquellos alumnos que por distintas razones (conocerlo, haberlo manejado o estudiado con anterioridad, etc.)

Criterios específicos de admisión: Es conveniente para poder realizar el trabajo con nosotros tener cierto nivel de conocimientos de inglés escrito y de matemáticas, al nivel de

El monstruo de Daniel Martin i Ramon Trigo és l'àlbum que, per la seua qualitat tant en la imatge com en el text i la relació entre ells, l’he triat per a, en primer lloc per incloure

plowr., canten sense parar, perque ellel, ja ho saben quan ha de ploure.. Un dIa s'estaven a la figuel'8 i jo lea