exercicis calc 2n ESO by gaspar lloret

Apunts d'informàtica.

Col·legi “Sagrado Corazón” H.H.D.C. (Mislata) sagradocorazon.hhdc.net

Pere Fernàndez perexat@gmail.com 15/09/06

Informàtica Departament d'art i tecnologia

Col·legi “Sagrado Corazón” (Mislata)

Informàtica Departament d'art i tecnologia

Col·legi “Sagrado Corazón” (Mislata)

Índex de continguts L'aula d'informàtica............................8 GNU/Linux.....................................................8 Usuaris i contrasenyes........................................8 La nostra carpeta d'usuari....................................9 Normes de l'assignatura d'informàtica i criteris d'avaluació..10

Introducció al programari lliure. (En construcció)...................................11 Maquinari i programari.......................................11 Exercici 1.................................................11 Exercici 2.................................................12 Llicències de programari.....................................12 Altres llicències de programari..............................13

OpenOffice.org Writer.(En construcció).........15 Exercici 1.................................................15 Exercici 2.................................................16

OpenOffice.org Calc............................17 Pràctica 1. Euros i pessetes.................................17 Pràctica 2. Percentatge d'imposts............................18 Pràctica 3. Vendes de cotxes.................................18 Pràctica 4. Taula de multiplicar.............................19 Pràctica 5. Càlcul de la lletra del NIF......................20 Pràctica 6. Extensió dels parcs naturals.....................21 Pràctica 7. Factura simple...................................22 Pràctica 8. Qualificacions...................................23 Pràctica 9. Representació gràfica de funcions................24 Pràctica 10. Àrees i volums de formes geomètriques...........27 Pràctica 11. Factura automatitzada...........................28

Gimp..........................................30 Pràctica 1. Pintant un mur...................................30 Pràctica 2. La bústia al camp................................32 Pràctica 3. Baby GNU a la acròpolis..........................33 Pràctica 4. Retrat...........................................35 Pràctica 5. Còmic............................................37 Pràctica 6. Muntatge fotogràfic..............................39 Pràctica 7. Efecte metàl∙lic al text.........................39 Pràctica 8. Efecte de lletres de foc.........................42 Pràctica 9. Efecte de vidre al text..........................44 Pràctica 10. Text amb aspecte líquid.........................46

Informàtica Departament d'art i tecnologia

Col·legi “Sagrado Corazón” (Mislata)

Inkscape......................................48 Imatges vectorials...........................................48 La finestra principal........................................48 El zoom......................................................49 Creant formes bàsiques.......................................49 Exercici 1.................................................49 Moure, escalar i rotar.......................................50 Grups d'objectes.............................................51 Emplenat i contorn...........................................51 Exercici 2.................................................51 Duplicat i distribució d'objectes............................52 Piles d'objectes.............................................53 Exercici 3.................................................54 La graella...................................................55 Exercici 4.................................................56 Operacions booleanes.........................................56 Exercici 5.................................................56 Línies i corbes..............................................57 Nodes i nanses...............................................57 Composició de formes.........................................58 Exercici 6.................................................59 Exercici 7.................................................59 Exercici 8.................................................60 Exercici 9.................................................62 Exercici 10................................................63

POVRay.......................................64 El programa PovRay..........................................64 El sistema de coordenades....................................64 La càmera....................................................64 El primer objecte............................................65 Una font de llum.............................................65 La nostra primera escena.....................................65 La caixa (box)...............................................66 Exercici 1.................................................67 El cilindre (cylinder).......................................67 El con (cone)................................................68 El pla (plane)...............................................68 El tor (torus)...............................................70 Exercici 2.................................................71 Creant formes amb CSG........................................71 Unió (union).................................................72 Intersecció (intersection)...................................73 diferència (difference)......................................73 Exercici 3.................................................74 Fusió (merge)................................................74 Exercici 4.................................................75 Els materials................................................76 Exercici 5.................................................76 4

Informàtica Departament d'art i tecnologia

Col·legi “Sagrado Corazón” (Mislata)

Planificant mitjançant vistes................................77 Exercici 6.................................................78 exercici 7.................................................80 Animacions amb Povray........................................82 Unint els fotogrames en un vídeo.............................84 Exercici 8.................................................84 Exercici 9.................................................86

Tractament de so...............................89 El so i les ones.............................................89 Digitalitzant el so..........................................89 Emmagatzemant so digital a l'ordinador.......................90 Els formats comprimits.......................................91 Audacity.....................................................91 Les preferències d'audacity..................................92 El nostre primer fitxer......................................92 Guardem el nostre treball....................................92 Ferramentes d'edició.........................................94 Exercici 1.................................................94 Modifiquem la forma de la ona................................95 Exercici 2.................................................95 Enregistrem la nostra veu....................................96 Exercici 3.................................................96 Efectes......................................................97

Tractament de vídeo............................99 De la imatge digital al vídeo digital........................99 Còdecs.......................................................99 Estàndards i formats de vídeo...............................100 Contenidors multimèdia......................................101 El format DV................................................102 Kino i els formats..........................................102 Els modes de Kino...........................................103 Exercici 1................................................103 Guardant i exportant el nostre treball......................103 Exercici 2................................................104 Exercici 3................................................104 Filtres.....................................................104 Filtres de so...............................................105 Exercici 3................................................105 Exercici 4................................................105 Filtres de vídeo............................................105 Exercici 4................................................105 Transicions de vídeo........................................105 Exercici 5................................................107 Exercici 6................................................107 Crear fragments de vídeo....................................107 Exercici 7................................................107 Crear vídeos a partir d'imatges.............................107 5

Informàtica Departament d'art i tecnologia

Col·legi “Sagrado Corazón” (Mislata)

Exercici 8................................................108 Exercici 9................................................108 Exercici 10...............................................108

Creació de pàgines web amb HTML...............109 La teranyina mundial........................................109 W3C.........................................................109 Hipertext...................................................109 HTML........................................................110 Etiquetes del llenguatge HTML...............................110 Capçaleres i paragrafs......................................111 Llistes.....................................................111 Definició de tipus de document..............................112 Validació de documents......................................113 Taules......................................................113 Noms de fitxers.............................................114 Imatges.....................................................115 Enllaços....................................................116 L'estil del nostre text.....................................116 El nostre primer fitxer CSS.................................117 Tractant blocs de contingut: l'etiqueta DIV.................118 Modificant l'aspecte d'un element concret...................120 Publiquem la nostra web.....................................122 Exercici1.................................................122 Exercici 2................................................123 Exercici3.................................................123

Recull de webs................................125 Programes...................................................125 Associacions i projectes....................................125

Informàtica Departament d'art i tecnologia

Col·legi “Sagrado Corazón” (Mislata)

Llicència:  2006 Pedro José Fernández Sánchez Tots els logotipus i marques son propietat dels seus respectius propietaris. Aquest document està llicenciat baix la llicència “Creative Commons ReconeixementNoComercial-CompartirIgual 2.5 Espanya”. Sou lliures de: -Copiar, distribuir i comunicar públicament l'obra. -Fer-ne obres derivades. Amb les condicions següents: Reconeixement. Podeu reproduir, distribuir i comunicar públicament l'obra, mantenint i citant el nom de l'autor original. No comercial. No podeu utilitzar aquest treball amb fins comercials, excepte si rebeu permís exprés i escrit de l'autor. Compartir amb la mateixa llicència. Si altereu o transformeu aquesta obra, o en genereu obres derivades, només podeu distribuir l'obra generada amb una llicència idèntica a aquesta. -Quan reutilitzeu o distribuïu l'obra, heu de deixar ben clar els termes de la llicència de l'obra. -Alguna d'aquestes condicions pot no aplicar-se si obteniu el permís del titular dels drets d'autor. Els drets derivats d'usos legítims o altres limitacions reconegudes per llei no queden afectats per l'anterior. Els termes clau d'aquesta llicència només són un resum dels termes de la llicència completa, disponible en: http://creativecommons.org/licenses/by-nc-sa/2.5/es/legalcode.ca Si algú desitja fer un comentari, sol·licitar una còpia modificable del document o, per qualsevol motiu, contactar amb l'autor pot dirigir-se a la direcció de correu electrònic perexat@gmail.com.

Informàtica Departament d'art i tecnologia

Col·legi “Sagrado Corazón” (Mislata)

L'aula d'informàtica. Començarem explicant una mica el funcionament de les aules d'informàtica del col·legi i la ferramenta que utilitzaràs no sols a l'optativa d'informàtica, sinó també a moltes altres assignatures. Hi ha dues aules d'informàtica al col·legi, que anomenarem “Aula d'informàtica 1” i “Aula d'informàtica 2”. L'aula 1 és la més antiga, i es troba al tercer pis del pavelló de segon cicle d'ESO i Batxillerat. L'aula 2 es troba al primer pis de l'altre pavelló, junt a la sala de professors. Les dos aules no funcionen exactament igual, així que cal explicar una mica les seues diferències. A l'aula 1 els ordinadors són independents. Hi ha de millors i hi ha de pitjors, però tots són suficientment potents per fer les tasques de classe. En canvi, a l'aula 2 hi ha el que s'anomena “terminals lleugers”, és a dir, ordinadors antics i molt poc potents que necessiten d'altre que fa la tasca per ells. A cadascuna de les taules de l'aula 2 hi ha dos terminals lleugers, i quan utilitzes un dels terminals, en realitat estàs utilitzant altre ordinador (el servidor) solament que ho fas de manera remota. Aquest és el motiu per el qual els alumnes no deuen apagar els ordinadors d'aquesta aula. Si ho fas, apagaràs un ordinador que altres companys també estan utilitzant i potser podries fer que perden el que estan fent si no els dones temps de desar-lo. A l'aula 1 pots apagar sense afectar altres companys, però generalment serà el teu professor qui apague els ordinadors.

GNU/Linux. Quan fiques en marxa el teu ordinador te'n adonaràs que el sistema operatiu que es fica en marxa és un GNU/Linux. Potser que aquest no siga el mateix que utilitzes al teu ordinador de casa. Tant el sistema operatiu com tots els programes que utilitzaràs dins aquesta aula son “programari lliure”. Com que més endavant s'explica què és el programari lliure, de moment sols t'interessa saber que s'ha triat aquest tipus de programari per què després d'aprendre a fer coses amb ells, podràs aconseguir fàcilment una còpia per instal·lar-los al teu ordinador de casa gratuïtament.

Usuaris i contrasenyes. Per identificar-te al teu ordinador utilitzaràs un nom d'usuari que està relacionat amb la assignatura: per exemple “frances4-3” o “informatica2-12” per a francès de 4t d'ESO i informàtica de 2n d'ESO respectivament. Fixat que el nom d'usuari sempre acaba en un nombre separat per un guionet, que és el mateix nombre de l'ordinador que utilitza. L'alumne de francès del 8

Informàtica Departament d'art i tecnologia

Col·legi “Sagrado Corazón” (Mislata)

exemple anterior utilitza l'ordinador 3 i el de informàtica el 12. La contrasenya per defecte de tots els usuaris serà “00000”, i cal que no la canvies. En el cas que no hi haja cap usuari per a la teua assignatura, cal que utilitzes un usuari anomenat simplement alumne.

La nostra carpeta d'usuari. La informació que es guarda dins els discs dels ordinadors es troba habitualment dins de carpetes que poden contenir, a la seua vegada altres carpetes. Cal saber en qualsevol moment en quina carpeta es guarda un fitxer, per tal de trobar-lo amb facilitat. Repassarem una mica alguns conceptes per tal de poder treballar després amb més comoditat. La carpeta principal, que conté totes les altres, es sol anomenar “root” que significa arrel, i es representa per el símbol /. Si fas doble-clic a la icona anomenada “Ordinador” del teu escriptori i després a “Sistema de fitxers” estaràs veient el contingut de la carpeta arrel.

Les carpetes dels usuaris es troben dins de una carpeta anomenada “home”. Entra i veuràs que hi ha una carpeta per cadascun dels usuaris. No cal que faces açò cada vegada que vols anar a la teua carpeta: sols hauràs de fer doble clic a la icona “Carpeta inicial” del teu escriptori. També hi sol haver dreceres als programes per tal d'arribar a la teua carpeta ràpidament.

Dins de la teua carpeta veuràs una altra anomenada “Desktop”. Aquesta 9

Informàtica Departament d'art i tecnologia

Col·legi “Sagrado Corazón” (Mislata)

carpeta representa l'escriptori, i qualsevol cosa que deixes en un apareixerà a l'altre. Pots provar creant una carpeta o un document buit i comprovant que també apareix a l'escriptori. Els llocs habituals per guardar els teus fitxers són la teua carpeta inicial o l'escriptori. Intenta crear subcarpetes i saber en tot moment on guardes els teus treballs per tal de poder trobar-los fàcilment en sessions posteriors. Altra carpeta important és “media” que es troba dins de la carpeta arrel. En aquesta carpeta es creen automàticament altres carpetes que permeten accedir al contingut de CD-ROM o discs flexibles o discs USB.

Normes de l'assignatura d'informàtica i criteris d'avaluació Aquestes són les normes per entregar treballs a l'assignatura d'informàtica: 1. Les pràctiques es lliuraran via e-mail a l'adreça indicada pel professor. ○

Pere: perexat@gmail.com.

○

Ángel: anloes0@gmail.com.

2. El nom de l'arxiu i l'assumpte del correu electrònic consistiran en el nom del programa seguit del nombre d'exercici, sense espais, punts ni guions entre ells. Per exemple “inkscape3” o “kino4”. Com que els correus seran filtrats automàticament, qualsevol que no acompleixca aquestes normes es considerarà no presentat. 3. Caldrà que el compte de correu utilitzat per l'alumne per enviar les pràctiques estiga correctament configurat, amb nom i cognoms complets de l'alumne. 4. Les puntuacions de les pràctiques seran entre 0 i 10. La nota de l'assignatura serà la mitjana geomètrica d'aquestes puntuacions. 5. Les pràctiques tindràn una data màxima de lliurament. La nota d'una pràctica lliurada més tard d'aquesta data no superarà el 5. 6. Qualsevol comportament incorrecte dins de l'aula se sancionarà en funció de la gravetat restant nota a l'individu. La qual cosa pot suposar suspendre l'assignatura. 7. En el cas de treballar en parella, cada dia de classe utilitzarà un l'ordinador. 8. Si el professor ho considera necessari, es podrà fer a alguns alumnes una prova individual, similar a les pràctiques realitzades a classe.

Informàtica Departament d'art i tecnologia

Col·legi “Sagrado Corazón” (Mislata)

Introducció al programari lliure. (En construcció) Maquinari i programari. Tots els dies utilitzem moltes màquines que tenen una funció concreta: una rentadora per llavar la roba, un frigorífic per mantenir freds els aliments, un cotxe per transportar persones o coses, etc. Hi ha, en canvi màquines de propòsit general que no tenen una tasca definida i es poden utilitzar per moltes coses diferents: són els computadors. Els computadors són màquines programables a les quals podem indicar, mitjançant programes, com dur a terme una tasca. Podem definir un algorisme com el procés necessari per realitzar una tasca determinada, els passos que cal seguir i l'ordre en que s'han d'executar. Així, un programa és un algorisme expressat en un llenguatge de programació. Un exemple d'algorisme expressat en llenguatge natural seria el procediment per fer un ou fregit: 1. Encendre el foc. 2. Posar la paella damunt del foc. 3. Tirar-hi un poc d'oli. 4. Quan l'oli sigui prou calent, trencar un ou i tirar-lo a la paella. 5. Mentre no estiga fet, tirar oli sobre l'ou per a coure la part superior. 6. Apagar el foc i ficar l'ou en un plat. Evidentment, un computador no pot fregir un ou, però si que pot treballar amb nombres. Llig l'algorisme següent, conegut com l'algorisme de la bombolla, i tracta de dir per a que serveix. 1. Donat un conjunt ordenat de n nombres... 2. Compara totes les parelles d'elements adjacents (el primer i el segon, el segon i el tercer,...) i si el primer de la parella és més gran intercanvia'ls. 3. Repeteix aquest procés n-1 vegades. Un computador podrà, per tant, fer qualsevol cosa que aconseguim expressar en un conjunt d'algorismes i açò permet que puguen fer moltes més coses diferents que les màquines amb propòsits específics de les que parlàvem al començament.

Exercici 1. Fes una llista de les coses que es poden fer amb l'ajuda (o no) d'un computador, per exemple: podem escriure una carta (sense computador) o un 11

Informàtica Departament d'art i tecnologia

Col·legi “Sagrado Corazón” (Mislata)

correu electrònic (amb computador). Després de fer la llista pensa si té més avantatges fer aquestes coses amb el computador o sense ell.

Exercici 2. Lleig el text següent i comenta en grup la importància dels programes. “El codi és la tecnologia que fa funcionar els ordinadors. Tant si s’inscriu al programari com si s’enregistra al maquinari, el codi és un conjunt d’instruccions, originàriament escrites en paraules, que controla el funcionament de les màquines. Aquestes màquines (els ordinadors) cada cop defineixen i controlen més la nostra vida. Determinen les connexions telefòniques i la programació televisiva. Decideixen si les seqüències de vídeo es poden transmetre a un ordinador determinat a través d’un enllaç de banda ampla. Controlen les dades que els ordinadors envien als seus fabricants. Aquestes màquines ens controlen i el codi controla aquestes màquines. Quin control hauríem de tenir sobre aquest codi? Quins coneixements? Quina llibertat hauríem de tenir per a compensar el control que permet el codi? Quin poder?” Introducció de Lawrence Lessing al llibre “Programari lliure, societat lliure”1.

Llicències de programari. Al punt anterior hem vist que, juntament amb els ordinador, el programari és imprescindible per accedir a molta informació i recursos dins la nostra societat. Qualsevol que vullga tenir aquestes ferramentes per fer ús i beneficiar-se d'elles haurà de comprar un ordinador i aconseguir el programari. Fixat que dic “aconseguir” i no “comprar” el programari, per fer notar la següent diferencia: quan algú compra un ordinador, aquest és seu de la mateixa manera que ho es a casa, el seu cotxe. El programari en canvi no funciona de la mateixa manera, ja que el programa en cap moment és nostre. En canvi el que generalment aconseguim (pagant o no) és una llicència d'ús. Aquesta llicència generalment ens dirà que com podem utilitzar el programa i que ens permet fer o no el propietari del programa. Respecte al que ens permet fer o no el propietari del programa anem a fer un xicotet exercici. Imagina que tenim dues versions d'un programa: la versió “normal” és gratuïta, però podem comprar algunes opcions per unes quantitats 1 http://culturalliure.org/llibre2.php

Informàtica Departament d'art i tecnologia

Col·legi “Sagrado Corazón” (Mislata)

realment assequibles. Tria a cada fila una de les dues opcions i calcula el que et costarà el programa. Versió normal.

Opcions adicionals.

Pots instal lar el programa sols en un ordinador i en un dispositiu portàtil. En aquest segón sols el podrà utilitzar un usuari, que serà l'usuari principal del primer equip. Preu: 0 €

Pots instal·lar el programa en tots els ordinador que vullgues i el poden utilitzar totes les persones que vullgues. Preu: 3€

No pots fer còpies del programa. Preu Pots fer còpies del programa. Preu: 2€ 0€ No pots intentar averiguar com El funcionament intern del programa funciona internament el programa, ni està al teu abast, i pots fer millores i modificar-lo. Preu 0€ modificacions, per exemple per que eres estudiant d'informàtica. Preu 2€ No pots revendre còpies del programa. Pots vendre còpies del programa. Preu Preu 0€ 2€ Els propietaris del programa no es Els propietaris del programa no es faran responsables del mal faran responsables del mal funcionament o els danys que puga funcionament o els danys que puga produir l'utilització del programa. Preu: produir l'utilització del programa. Preu: 0€ 1€ Les condicions de la versió “normal” del nostre programa han estat tretes de la llicència d'un conegut paquet de programes, mentre que les opcions addicionals venen d'altre programa amb una funcionalitat molt semblant. En un principi pareix raonable que un programa amb tantes restriccions siga gratuït, i que la llibertat que ens donen les opcions hajam de pagar-la. En realitat ocorre just al contrari: el programa restringit té un preu, en el moment d'escriure aquestes línies, al voltant dels 750€ (existeix una versió per a estudiants per uns 150€, però la resta de la família no pot utilitzar-lo). El programa amb totes les opcions addicionals també existeix, i és gratuït.

Altres llicències de programari. Segur que et sonen termes com “freeware” i “demo”. Aquestes són altres llicències de programari, per les quals generalment no tenim que pagar. A continuació tens un resum dels tipus de programari més coneguts. Resumeix les seues característiques més importants consultant la vikipèdia. ●

Freeware.

●

Shareware.

●

Abandonware.

●

Postcardware.

●

Donationware. 13

Informàtica Departament d'art i tecnologia

●

Software lliure.

●

Adware.

Col·legi “Sagrado Corazón” (Mislata)

Informàtica Departament d'art i tecnologia

Col·legi “Sagrado Corazón” (Mislata)

OpenOffice.org Writer.(En construcció) Exercici 1. Fes una carta com la següent: Jordi Montserrat Carrasco C/ Pianista Rodríguez 46200 Pobla de Farnals Tel. (95) 6274513. Pobla de Farnals, 30 de Setembre de 2003. Tallers El Ràpid Av. del port s/n 46350 València Assumpte: Sol·licitud per al lloc Mecànic de motors dièsel Ref. 354. Benvolgut Senyor: Els adjunto el meu currículum vitae amb motiu de l'anunci aparegut en "Diari de València" del 5 de setembre, en el qual es sol·licitava un mecànic de motors dièsel Considero que la meua candidatura els pot resultar interessant, ja que compleixo els requisits exigits: com poden comprovar, he realitzat pràctiques en diversos tallers, i posseeixo una sòlida experiència en el camp del motor dièsel i com mecànic de vehicles pesats. Si la seua empresa té la necessitat d'un professional jove, format, amb molta motivació i ganes de treballar, crec que la meva candidatura pot ser-los d'interès. Espero consideren el meu currículum vitae i concerten una entrevista pròximament.

Informàtica Departament d'art i tecnologia

Col·legi “Sagrado Corazón” (Mislata)

Tot esperant la seva resposta. Atentament, Jordi Montserrat Carrasco

Exercici 2. Fes una taula com la següent en una fulla horitzontal.

Informàtica Departament d'art i tecnologia

Col·legi “Sagrado Corazón” (Mislata)

OpenOffice.org Calc. Pràctica 1. Euros i pessetes. La primera pràctica consisteix en fer una taula en la que podrem consultar el canvi d'euros a pessetes de unes poques quantitats d'us habitual. Després farem una utilitat per convertir automàticament quantitats d'euros a pessetes i al contrari. Recorda que expressarem els euros amb dos decimals i les pessetes sense cap, i que la conversió d'euros a pessetes es fa multiplicant per 166,386.

Taula de conversió d'euros a pessetes 0,10 € 0,20 € 0,50 € 1,00 € 2,00 € 3,00 € 5,00 € 6,00 € 10,00 € 20,00 € 50,00 € 100,00 €

17 33 83 166 333 499 832 998 1.664 3.328 8.319 16.639

Pts Pts Pts Pts Pts Pts Pts Pts Pts Pts Pts Pts

Introdueix la quantitat que vullgues transformar 100 Pts

a euros-->

100,00 € a pessetes -->

0,60 € 16.639 Pts

Informàtica Departament d'art i tecnologia

Col·legi “Sagrado Corazón” (Mislata)

Pràctica 2. Percentatge d'imposts. Amb aquesta pràctica utilitzarem els diferents formats que podem donar-li a les cel·les. Recorda que per aplicar un percentatge sols cal multiplicar (sense dividir posteriorment per 100) i que el resultat final serà la suma del preu més els imposts calculats. Data: Hora:

26/07/06 11:56 AM

Preu Imposts TOTAL

120,00 € 5% 126,00 €

Pràctica 3. Vendes de cotxes. En aquesta pràctica utilitzaràs la funció =SUMA().

1r tr im es tr e 2n 03 tr im es tr 3r e 03 tr im es tr e 4t 03 tr im es tr e 1r 03 tr im es tr e 04

Les dates estan escrites en la forma 1/1/2003 i amb el format de data adequat han estat transformades en les que es veuen a la part de dalt de la taula.

Albaida Alicante Alzira Benicarló Castellón Elche Gandia Mislata Oliva Valencia TOTAL

173 163 155 150 159

TOTAL 83 76 70 73 90 74 75 76 82 101 800

Informàtica Departament d'art i tecnologia

Col·legi “Sagrado Corazón” (Mislata)

Pràctica 4. Taula de multiplicar. Aquesta pràctica la pots resoldre amb una única formula que després pots copiar i enganxar a la resta de cel·les.

Taula de multiplicar 1 2 3 4 5 6 7 8 9 10

9 10

1 2 3 4 5 6 7 8 9 10

2 4 6 8 10 12 14 16 18 20

3 6 9 12 15 18 21 24 27 30

4 8 12 16 20 24 28 32 36 40

5 10 15 20 25 30 35 40 45 50

6 12 18 24 30 36 42 48 54 60

7 14 21 28 35 42 49 56 63 70

8 16 24 32 40 48 56 64 72 80

9 18 27 36 45 54 63 72 81 90

10 20 30 40 50 60 70 80 90 100

Recorda que el més important d'aquesta pràctica és escriure una única fórmula que copiaràs a tota l'àrea de color gris.

Informàtica Departament d'art i tecnologia

Col·legi “Sagrado Corazón” (Mislata)

Pràctica 5. Càlcul de la lletra del NIF. La lletra del NIF s'utilitza com a “dígit de control” per comprovar que hem escrit correctament el numero. Cada DNI té associada una lletra que es calcula en funció del número. Si ens equivoquem en alguna xifra hi ha molt poques possibilitats de que la lletra siga la adequada i podrem detectar l'error. La lletra corresponent s'obté fent la següent operació. Imaginem que tenim el NIF “12.345.678”. 0

Càlcul de la lletra del N.I.F.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

R W A G M Y F P D X B N J Z S Q V H L C K E

D.N.I. 12345678 Residu de dividir el D.N.I. entre 23 14 Lletra que cal afegir al D.N.I. Z N.I.F. 12345678-Z

Per començar ens interessa el residu de dividir el D.N.I entre 23. Açò ho aconseguirem amb la fórmula “RESIDUO” que s'utilitza =RESIDUO(dividend;divisor). Aquest residu serà un nombre entre 0 i 22 al qual li assignem una lletra segons la taula següent. Per tant, per trobar el residu i obtenir la lletra corresponent haurem d'utilitzar la fórmula BUSCARV de la manera següent: =BUSCARV(X;Y;Z) X és la cel·la on es troba el residu. Y és la matriu on cal buscar. En aquest cas des de la cel·la del

“0” fins la de la “E” Z és la columna on es troba la resposta buscada. En aquest cas la segona. Per tant quedarà: =BUSCARV(D4;F3:G25;2) Finalment per donar el N.I.F sencer amb lletra, utilitzarem la fórmula “CONCATENAR”. Aquesta fórmula rep com a paràmetres aquelles coses que volem concatenar. Per tant escriurem =CONCATENAR(D4;” - “;D5)

Informàtica Departament d'art i tecnologia

Col·legi “Sagrado Corazón” (Mislata)

Pràctica 6. Extensió dels parcs naturals. Dins d'aquest full de càlcul escriurem el nom i l'extensió dels parcs naturals de la Comunitat Valenciana, i amb formules calcularem, en primer lloc, el total d'hectàrees que tenen tots els parcs junts i, en segon lloc, el percentatge que l'extensió de cada parc representa respecte aquest total. També sumarem aquestos últims percentatges per comprovar que, ajuntant-los tots, obtenim un 100%.

Extensió dels parcs naturals. Extensió (ha) % Prat de Cabanes 912 1,3% Desert de les palmes 2.000 3,0% Illes Columbretes 15 0,0% Serra d'Espadá 30.000 44,3% Albufera 21.000 31,0% Marjal de Pego-Oliva 1.000 1,5% Montgó 1.700 2,5% Penyal d'Ifac 45 0,1% Font Roja 2.450 3,6% Fondó 2.387 3,5% Salines de Santa Pola 2.500 3,7% Lagunas de la Mata 3.700 5,5% Total

67.709

100%

Informàtica Departament d'art i tecnologia

Col·legi “Sagrado Corazón” (Mislata)

Pràctica 7. Factura simple. En aquesta pràctica farem una factura amb la capacitat de calcular diferents imports a partir de la quantitat d'unitats i el preu per unitat. Després farem una sèrie de càlculs una mica més complicats per tal de trobar el total.

Papereria Pepi Factura nº Quantitat

17 Descripció

Data Preu/unitat

1 Bolígraf negre 1 Bolígraf roig 10 Sobres 5 Cartolina

2,00 € 2,00 € 0,30 € 0,80 €

Descompte Imposts

Total

5% 10%

26/07/06 Import

2,00 € 2,00 € 3,00 € 4,00 € 0,00 € 0,00 € 0,00 € 0,00 € 0,00 € 0,00 € 0,55 € 1,05 €

11,50 €

El total “brut” el podem calcular sumant els imports dels diferent articles, i serà per tant: Total_brut = 2,00€ + 2,00€ + 3,00€ + 4,00€ = 11,00€ Després podem calcular el descompte, que en aquest cas és un 5% del total. Per tant: Descompte = 5% * Total_brut = 0,55€ Com que no tenim aquests 11,00€ en cap cel·la, haurem de calcular el descompte multiplicant el 5% no a una cel·la, sinó a la suma amb la qual calculem el total “brut”. Açò mateix haurem de fer per calcular els imposts, però no podem cobrar els imposts del total brut, sinó del preu ja amb el descompte aplicat: Imposts = 10% * (Total_brut – Descompte) I finalment podem juntar-ho tot: TOTAL = Total_brut – Descompte + Imposts

Informàtica Departament d'art i tecnologia

Col·legi “Sagrado Corazón” (Mislata)

Pràctica 8. Qualificacions. En aquesta pràctica ficarem dins una taula les notes obtingudes per uns Nom Llengua Anglès NaturalsHistòria Matemàtiques MitjanaDesviacióApte/No Apte 5,0 6,0 7,5 5,0 5,0 5,7 1,1 Apte Antonio Abadía 3,0 4,0 6,0 5,0 5,0 4,6 1,1 No Apte Bernardo Benegas 5,0 7,0 5,0 4,0 5,0 5,2 1,1 Apte Cristóbal Castillo 6,0 4,2 4,0 5,0 4,0 4,6 0,9 No Apte Donato Díez 6,0 6,0 6,0 4,0 5,0 5,4 0,9 Apte Esteban Escudero 5,0 4,0 7,0 5,0 4,0 5,0 1,2 Apte Florencio Fernández 6,0 7,0 7,5 5,0 5,0 Màxima Nota 3,0 4,0 4,0 4,0 4,0 Mínima Nota 5,0 5,2 5,9 4,7 4,7 Mitjana del grup 1,1 1,3 1,3 0,5 0,5 Desv. tip. del grupo

alumnes i volem calcular una sèrie d'estadístiques. Per assignatura volem conèixer: ●

La nota més alta.

●

La nota més baixa.

●

La mitjana del grup.

●

La desviació típica dins del grup.

De cadascun dels alumnes ens interessa: ●

La mitjana de les seues notes.

●

La desviació típica de les seues notes.

●

Si el alumne obté o no la qualificació de “Apte”.

En aquest cas, el alumne serà apte en funció de la mitjana de les seues notes en totes les assignatures (que ja heu calculat). Utilitzarem la fórmula =IF() de la següent forma: Si la mitjana és major o igual a 5 llavors “Apte”, en qualsevol altre cas “No apte”. Recordeu que per a que la fórmula =IF() retorne un text cal ficar-lo entre cometes.

Informàtica Departament d'art i tecnologia

Col·legi “Sagrado Corazón” (Mislata)

Pràctica 9. Representació gràfica de funcions. Anem a utilitzar les funcions gràfiques de Calc per representar automàticament una funció de segon grau del tipus f  x =a ∙ x 2b ∙ xc .

Representació gràfica de funcions Taula de valors

f(x)=a·x²+b·x+c a= b= c=

2 -3 -10

Interval De -5 fins 5 Valor de pas 0,33 55,00 50,00 45,00 40,00 35,00 30,00 25,00 20,00 15,00 10,00 5,00 0,00 -5,00 -10,00 -15,00 -5,00

-2,50

0,00

2,50

5,00

Al nostre full de càlcul li donarem dues indicacions: El valor dels coeficients “a”, “b” i “c”. L'interval de la funció que volem que represente. 24

x -5,00 -4,67 -4,33 -4,00 -3,67 -3,33 -3,00 -2,67 -2,33 -2,00 -1,67 -1,33 -1,00 -0,67 -0,33 0,00 0,33 0,67 1,00 1,33 1,67 2,00 2,33 2,67 3,00 3,33 3,67 4,00 4,33 4,67 5,00

y 55,00 47,56 40,56 34,00 27,89 22,22 17,00 12,22 7,89 4,00 0,56 -2,44 -5,00 -7,11 -8,78 -10,00 -10,78 -11,11 -11,00 -10,44 -9,44 -8,00 -6,11 -3,78 -1,00 2,22 5,89 10,00 14,56 19,56 25,00

Informàtica Departament d'art i tecnologia

A l'exemple, tenim la funció [-5,5].

Col·legi “Sagrado Corazón” (Mislata) 2

f  x =2x −3x−10

i la representació de l'interval

La primera fórmula que introduirem serà la que ens permetrà calcular el valor de pas entre un valor de x i el següent. Com que la taula de valors que utilitzarem té 30 valors per a x caldrà que dividim la diferència entre el valor d'inici del interval i el valor final en 30 parts amb la fórmula =(C12-C11)/30 El següent que farem serà emplenar la taula de valors de les variables x i y. Per emplenar la columna dels valors de x, començarem amb el valor d'inici del interval, per tant utilitzarem la fórmula =C11. El segon valor l'obtindrem sumant a aquest primer valor el valor de pas, el tercer sumant el valor de pas al segon, i així successivament fins arribar a trenta valors, l'últim dels quals hauria de ser igual al valor de fins de l'interval on representarem la gràfica. Per emplenar la columna de la variable y caldrà utilitzar la fórmula de la funció i els coeficients a, b i c. Per tal de no complicar excessivament la fórmula calcularem el valor de x² multiplicant x*x. Per tant, si el valor de la primera x es troba en C11 la fórmula quedarà: =(C6*(E5*E5))+(C7*E5)+C8 Però recorda que tal vegada hauràs de bloquejar amb el signe $ algunes de les cel·les per a que funcione correctament. Ara que ja tenim tots els valors, podem dibuixar la gràfica. Ves al menú “Insereix” i tria la opció “Diagrama...”. Açò farà aparèixer una finestra on podrem definir el nostre gràfic responent una sèrie de preguntes. En primer lloc definirem l'àrea de dades del gràfic, és a dir, la taula de valors on tenim els valors de x i y. Si triem les cel·les que fan de capçalera li ho indicarem amb “Primera fila com a etiqueta”. En segon lloc triarem el diagrama de tipus “DIAGRAMA XY” i les dades en columnes. En tercer lloc triarem el subtipus de diagrama que considerem més adequat (tal vegada spline cúbic amb símbols) i les línies de quadricula de referència que volem veure. Finalment eliminarem el títol i la llegenda del nostre diagrama i acabarem amb el botó “Crea”. Una vegada dibuixat el diagrama podem modificar la posició i tamany amb el ratolí. Comprova amb la previsualització que la impressió del full de càlcul seria 25

Informàtica Departament d'art i tecnologia

Col·legi “Sagrado Corazón” (Mislata)

correcta.

Informàtica Departament d'art i tecnologia

Col·legi “Sagrado Corazón” (Mislata)

Pràctica 10. Àrees i volums de formes geomètriques. Per fer aquesta pràctica hauràs de consultar en algun llibre de matemàtiques o enciclopèdia. Pots consultar per internet la vikipèdia a la direcció: http://www.wikipedia.org Una vegada trobes les formules per calcular fes un full de càlcul com el del exemple. Per tal de fer els càlculs necessitaràs el nombre Pi que pots obtenir escrivint PI(), i també elevar nombres al quadrat, la qual cosa pots fer amb l'accent circumflex (^). D'aquesta manera la fórmula

4∙ ∙ r 3 3

la escriuríem =(4*PI()*r^3)/3.

Esfera

Ràdio= Àrea= Volum=

5 314,16 523,6

Cercle

Ràdio= Àrea= Perímetre=

5 78,54 31,42

Cilindre

Altura= Ràdio de la base= Àrea de la base= Àrea lateral= Àrea Total= Volum=

5 2 12,57 62,83 87,96 62,83

Con

Ràdio de la base= Altura= Generatriu= Àrea de la base= Àrea lateral= Àrea Total= Volum=

2 6 6,32 12,57 39,74 52,3 25,13

Informàtica Departament d'art i tecnologia

Col·legi “Sagrado Corazón” (Mislata)

Pràctica 11. Factura automatitzada. La finalitat d'aquesta pràctica és introduir algunes de les formules emprades abans per a automatitzar la elaboració d'una factura. Farem que les dades dels clients i els articles apareguen automàticament després d'introduir el codi correponent. Aquesta pràctica és una mica més elaborada que les anteriors, i conté una sèrie de elements que anirem enumerant poc a poc. En primer lloc dibuixarem amb un programa de dibuix un logotip per a la nostra empresa, i després el inserirem dins del nostre document. La data i hora d'elaboració de la factura apareixeran automàticament amb formules, en canvi el nom del venedor podrà ser escrit per ell mateix. Al lloc reservat per a les dades del client deixarem una casella on podrem escriure un codi assignat a cada client i tota la resta de dades apareixeran automàticament, utilitzant la formula =BUSCARV() sobre una taula com la següent que es trobarà al segon full del document. Codi Client 001 002 003 004 005

Nom Carlos Poveda Vazquez Alberto Cerrillo Martínez Isabel Sanjuan Torres Arturo Peña Salinas Juan Soto Martí

Direcció C/ Major, 25 C/ Pintor Sorolla, 3 2 Pça/ Espanya 5 9 C/ del Olm 33 C/ Pianista Martí 7

CP Ciutat 46007 València 46009 València 46007 València 46003 Torrent 47003 València

NIF 35678543-Q 45632156-B 84623845-C 15437865-N 14326875-J

Al tercer full del document tindrem una taula de articles com la següent, que ens servirà per omplir automàticament la descripció i el preu dels articles de la factura. Les úniques columnes que caldrà emplenar a mà seran, per tant, el codi i la quantitat del article. Fixat en el primer article amb codi 000 i sense descripció ni preu. Codi Artícle Descripció 000 001 Kodak CX7430 4MP 002 Benq S40 4MP 003 Benq DC35 3,1MP 004 Kodak CX7300 3,2MP 005 Bat. AA 2400 mAh 006 Kodak CX7330 3,1MP 007 Carreg. Ràpid AA AAA 008 Kodak DX6490 4,1MP 009 Carreg. Ràpid AA 010 Kodak DX7440 4,1MP 011 Kodak DX7590 5MP 012 Bat AAA Recarregables

Preu

158,60 € 182,90 € 76,90 € 91,00 € 10,30 € 139,40 € 9,70 € 328,90 € 25,90 € 267,80 € 406,60 € 5,40 €

Finalment hauràs de fer uns pocs càlculs més com el total d'articles adquirits i el import total de la factura.

Informàtica Departament d'art i tecnologia

Col·legi “Sagrado Corazón” (Mislata)

Codi Client Carlos Poveda Vazquez C/ Major, 25 46007 València 35678543-Q

Data Hora Venedor

Codi

Quantitat Descripció

001 003 004 005 007

Preu

1 Kodak CX7430 4MP 1 Benq DC35 3,1MP 2 Kodak CX7300 3,2MP 1 Bat. AA 2400 mAh 2 Carreg. Ràpid AA AAA

000 000 000 000 000 000 000

Unitats totals 7

Preu base IVA 12% TOTAL

158,6 76,9 91 10,3 9,7

001

31/07/06 20:11 Pere

Import Total

158,6 76,9 182 10,3 19,4 0 0 0 0 0 0 0 447,20 € 53,66 € 500,86 €

Informàtica Departament d'art i tecnologia

Col·legi “Sagrado Corazón” (Mislata)

Gimp Pràctica 1. Pintant un mur. Obri amb el Gimp els fitxers “mur.jpg” i “meditate.jpg”. Volem ficar el dibuix del nyu sobre el mur, però fixat que el primer és molt més gran que el segon. Ho pots vore a la barra de control de la finestra o a la regla. El primer que farem serà modificar el tamany del dibuix meditate. Ves a “Imatge > Escala la imatge” i canvia la amplada a 300 píxels. El dibuix del Nyu levitant no és fàcil de seleccionar, però si que ho és la regió blanca que hi ha al seu voltant. Amb la ferramenta de selecció de regions contínues fes clic sobre l'àrea blanca per seleccionar-la, i després obri el menú “selecciona” i inverteix la selecció. Així ja tenim el dibuix seleccionat. Copia la selecció i enganxa-la a la imatge del mur. Per fer que la nova imatge estiga en una nova capa ves a la finestra de capes (Ctrl+L) i polsa el botó “Nova capa”. Si et fixes veuràs que han quedat un parell d'àrees blanques que pots eliminar seleccionant-les igual que abans i retallant-les amb “Edita > Retalla” o Ctrl+X. El dibuix encara és massa gran, però pots canviar el seu tamany anant al menú “Capes” i escalant la capa a una amplada de 200 píxels. No et preocupes per l'alçada, canviarà automàticament. Per fer que la imatge del nyu parega pintada a la paret farem aquesta capa una mica transparent amb el control d'opacitat que hi ha a la finestra de capes. Una opacitat del 70% i canviar el mode de superposició de capes per “multiplica” hauria de millorar el resultat. Mou la imatge del nyu a un racó de la imatge, per tal de tenir lloc per seguir treballant. Crea també una nova capa anomenada “Signatura” on pintarem amb el vaporitzador la nostra signatura com si fos un “grafitti”. Amb un pinzell del tipus “cercle fuzzy” i triant una pressió de 40-60 dins les opcions de la 30

Informàtica Departament d'art i tecnologia

Col·legi “Sagrado Corazón” (Mislata)

ferramenta obtindràs uns resultats prou realistes.

Reconec que la meua pintada ha quedat una mica pobra,... segur que al teu dibuix ho pots fer millor.

Informàtica Departament d'art i tecnologia

Col·legi “Sagrado Corazón” (Mislata)

Pràctica 2. La bústia al camp. Obri el fitxer “bústia.jpg”. Aquesta vegada no serà senzill seleccionar la bústia per separar-la del fons. Ho hauràs de fer amb molta cura amb la ferramenta de selecció a mà alçada o esborrant poc a poc el fons de la imatge. Obri la imatge “camí.jpg” i enganxa ací la teua bústia. Hauràs d'utilitzar les ferramentes per escalar la capa i canviar la perspectiva per millorar la imatge i aconseguir que parega que la bústia es troba realment a un costat del camí. Fes un duplicat de la capa “Fons” i puja-la fins dalt de la capa de la bústia.

Amb la ferramenta d'esborrar

pots fer aparèixer novament la bústia

deixant part de la brossa davant.

Informàtica Departament d'art i tecnologia

Col·legi “Sagrado Corazón” (Mislata)

Pràctica 3. Baby GNU a la acròpolis. El truc utilitzat a la pràctica 2 per fer que alguns elements del fons quedaren sobre la bústia (fent una còpia del fons i esborrant-la parcialment) no és la millor opció. En aquesta pràctica tractarem d'utilitzar el canal alfa per aconseguir el mateix resultat sense que tenir que esborrar part de la imatge. Obri la imatge de la acròpolis i fixat en les tres grans columnes que queden més o menys al centre. Darrere d'aquestes columnes situarem al ninot que hi ha al fitxer “baby-gnu”. Fixat que baby-gnu es troba sobre un fons transparent, així que no hauràs de retallar-lo. Simplement selecciona-lo amb la ferramenta de selecció rectangular i còpia-lo a la imatge de la acròpolis. Amb la ferramenta de canviar la perspectiva

modifica la imatge per

aconseguir el aspecte següent.

Quan acabes, augmenta el tamany de la capa a la mida de la imatge. Ara aconseguirem que parega que Baby GNU es troba darrere de les columnes fent-lo transparent. No l'esborrarem, i així podrem corregir els errors fàcilment. Ves a la finestra de capes, fes clic amb el BDR sobre la capa de Baby GNU i tria la opció “Crear màscara de capa”. Aquesta capa que apareix al costat és una mascara que podem pintar com les altres però no és una capa visible, sols controla la transparència de altra capa. Ara la capa és totalment blanca, així que Baby GNU és totalment opac, però si pintem sobre la màscara amb color negre el farem transparent. També podem pintar de gris per fer-lo parcialment transparent. Per treballar amb comoditat pots canviar la transparència de la capa al 80% per veure que hi ha al darrere. Selecciona la màscara de capa que acabes de crear i pinta en negre amb el pinzell per fer a Baby GNU transparent o en blanc per fer-lo apareixer de nou. 33

Informàtica Departament d'art i tecnologia

Col·legi “Sagrado Corazón” (Mislata)

Finalment torna a deixar la transparència global de la capa al 100 % i obtindràs el resultat desitjat.

Informàtica Departament d'art i tecnologia

Col·legi “Sagrado Corazón” (Mislata)

Pràctica 4. Retrat. Obri la imatge del retrat i duplica la capa, la original la deixarem al fons sense modificar, i la nova capa la nomenarem “Imatge B/N”. Amb “Imatge -> Mode” transforma aquesta capa a “Escala de grisos”. Amb la ferramenta de retallar

selecciona la cara i elimina la resta de la

imatge. Cal fer açò abans de aplicar els filtres, ja que reduirà el temps necessari per al càlcul. Entrant dins el menú de “Filtres -> Millora -> Fes màscara borrosa” podràs millorar la qualitat de la imatge enfocant-la millor. Utilitza un radi d'uns 80 píxels. Utilitza les “Corbes” que trobaràs dins les “Eines de color” per obtenir una imatge amb gran quantitat de negres i blancs, eliminant els grisos. Açò ho aconseguiràs donant a la corva forma de “S”. Prova fins que obtingues un resultat que et agrade.

Crea una nova capa anomenada “Capa blanca” que ens servirà de fons, i situala baix de la imatge que estàs modificant. A la capa “Imatge B/N”, crea una màscara de capa que et servirà per esborrar tot allò que no ens interessa, deixant els ulls, el nas i la boca. Segurament hauràs de utilitzar una ampliació molt gran i un pinzell molt menut per les zones complicades com els ulls i les pestanyes. Les capes que tens creades fins ara seran les que veus a la imatge següent.

Informàtica Departament d'art i tecnologia

Col·legi “Sagrado Corazón” (Mislata)

Ara és un bon moment per retocar, pintant de blanc o de negre, aquells defectes que puguen quedar a la imatge. Duplica la capa i anomena “Ombra” la nova. Sobre aquesta capa aplica un filtre de difuminació gaussiana de 30 píxels, i després el mateix filtre sobre la màscara de capa. Açò farà que aparega una ombra al voltant de les zones obscures de la imatge.

Informàtica Departament d'art i tecnologia

Col·legi “Sagrado Corazón” (Mislata)

Pràctica 5. Còmic. En aquesta pràctica aconseguirem donar-li un aspecte de còmic a una fotografia. Obri la imatge, duplica la capa i anomena-la traços. Per obtenir el traços d'aquesta imatge utilitzarem el filtre que trobaràs en “Filtres -> Detecció de vores -> Neó”.

Transforma la capa a escala de grisos obrint el menú “Eines -> Eines de color – To i saturació”, i baixant la saturació al mínim. Aquesta vegada no podem canviar el mode a escala de grisos perquè utilitzarem colors en altra capa. Inverteix els colors de la imatge amb el filtre “Filtres -> Colors -> Inversió de valor”. Ara hauries de tenir una capa amb traços negres sobre blanc com la següent.

Crea una nova capa anomenada “Colors”, on donarem color a la imatge. Dins la finestra de capes, fica aquesta capa de colors en el mode “multiplica” i comença a colorejar. Pots fer-ho fàcilment si, de moment, fas invisible la capa “Traços”. Fixat en la imatge següent. Quan tingues la capa de colors totalment plena torna a fer visible la capa de traços per obtenir la imatge acabada.

Informàtica Departament d'art i tecnologia

Col·legi “Sagrado Corazón” (Mislata)

Informàtica Departament d'art i tecnologia

Col·legi “Sagrado Corazón” (Mislata)

Pràctica 6. Muntatge fotogràfic. Fes un repàs de tot el que has aprés i demana-li consell al teu professor per, utilitzant diverses fotografies i incloent la teua, fer un muntatge fotogràfic. Fixat en les fotografies del exemple: jo no he estat a Santo Domingo, eixe cos és d'un amic i cap dels dos no té el cap d'un nyu tatuat al pit ;-)

Pràctica 7. Efecte metàl·lic al text. Crea una nova imatge d'uns 700x300 píxels. Afegeix un text que ocupe quasi tota la imatge, i selecciona-lo. El efecte quedarà millor si les lletres són grans i grosses, així que pots triar alguna de les fonts “Bold”. Amb la ferramenta de gradients

, i triant un gradient de negre a blanc, li

ho apliquem al text pet tal que quede semblant a la imatge següent. Intenta que cap lletra quede totalment negra o blanca. Amb les lletres encara seleccionades, no serà difícil crear una nova capa amb fons negre i les lletres pintades de blanc que anomenarem “Mapa”.

Informàtica Departament d'art i tecnologia

Col·legi “Sagrado Corazón” (Mislata)

Aplica-li a la capa “Mapa”, sense tenir res seleccionat, un filtre de difuminació gaussiana de 10 píxels. A la primera capa (la de les lletres amb el gradient) li aplicarem un filtre “Bump Map” (mapa de relleu) que trobaràs dins el menú “filtres -> mapa”. Aquest filtre et demanarà altra capa, que serà “Mapa” i que servirà per simular un relleu a la capa sobre la qual l'apliquem.

Canvia els paràmetres d'azimut, elevació i profunditat, fins obtenir un resultat semblant a aquest.

Ara pots fer invisible la capa “Mapa” que ja no utilitzarem més. Finalment modifica les corbes de color (dins el menú “Ferramentes -> Color”) aproximadament com al exemple. Aquest és el resultat després d'afegir un fons.

Informàtica Departament d'art i tecnologia

Col·legi “Sagrado Corazón” (Mislata)

Informàtica Departament d'art i tecnologia

Col·legi “Sagrado Corazón” (Mislata)

Pràctica 8. Efecte de lletres de foc. Crea una imatge de 700x300 píxels i escriu en ell un text. Cal que sobre espai per damunt i per baix de les lletres per deixar lloc a les flames. Després amplia la mida de la capa al tamany de la imatge. Aplica l'efecte “Glowing Hot”, que trobaràs dins el menú “Script-fu -> Alpha to logo”. Ja tenim les lletres, ara dibuixarem unes flames.

Fes invisibles totes les capes i, si hi ha una capa anomenada “Background” a més de la capa “Fons”, pots esborrar la primera. Duplica la capa del text dues vegades i anomena aquestes capes “Flames Roges” i “Flames Grogues”. Fes visibles sols aquestes capes i fica-les en mode normal. A la finestra de capes, a la dreta del mode de la capa, hi ha la opció “Conservar la transparència”, que cal desactivar també en les dos. Ara farem una sèrie de passos sobre la capa “Flames Roges”. Selecciona les lletres i acoloreix-les de roig.

Sense tenir res seleccionat, aplicarem tres filtres sobre les lletres: -Filtres -> Distorsions -> Decalatge: vertical de 100 píxels.

-Filtres -> Distorsions -> So de mar: Horitzontal, de període=50 i amplitud=12.

Informàtica Departament d'art i tecnologia

Col·legi “Sagrado Corazón” (Mislata)

-Filtres -> Difumina -> Difuminació gaussiana: 5 píxels.

Acoloreix les lletres de la capa “Flames Grogues” de groc i segueix els mateixos passos. Canvia l'ordre de les capes per tal que queden com a la imatge següent.

Per acabar utilitza la ferramenta de degradats

amb el degradat anomenat

“Incandescent” sobre la capa “Fons” per obtenir aquest resultat final.

Informàtica Departament d'art i tecnologia

Col·legi “Sagrado Corazón” (Mislata)

Pràctica 9. Efecte de vidre al text. Crea una imatge de 700x300 píxels, i escriu un text al seu interior. Augmenta el tamany de la capa del text a la mida de la imatge i duplica-la. El nom de la nova capa serà “Mapa”. La capa “Mapa” conté lletres negres sobre un fons transparent. Acoloreix la capa per tal de fer-la blanca amb lletres negres. Aplica sobre aquesta capa, sense tenir res seleccionat, una difuminació gaussiana de 25 píxels.

Acoloreix la capa “Fons” amb un color gris (#989898). Sobre la capa fons apliquem un filtre “Bump Map” amb els següents paràmetres: - Bump map: La capa “Mapa” - Tipus de mapa: Sinusoidal. - Marca “Compensar-ho per enfosquir-ho” i “Inverteix el mapa” - Azimut: 135 - Elevació: 45 - Profunditat: 10

Agafa la ferramenta de degradats

i tria el anomenat ”Three bars sin”.

Informàtica Departament d'art i tecnologia

Col·legi “Sagrado Corazón” (Mislata)

Amb la capa “Fons” triada, obri el menú “Filtres -> Colors -> Mapa” i tria “Mapa de degradat”.

Crea una nova capa que anomenarem “Horitzó” i aplica-li un degradat en vertical de manera que quede com en la imatge següent.

Sobre la capa “Horitzó” aplica el filtre “Mapa -> Desplaça” amb un valor de 20 píxels, la opció “Taca a les vores” activada, i utilitzant la capa “Mapa”. Fes visibles únicament les capes “Fons” i “Horitzó”, utilitzant per a aquesta última el mode “Pantalla”.

Informàtica Departament d'art i tecnologia

Col·legi “Sagrado Corazón” (Mislata)

Pràctica 10. Text amb aspecte líquid. Crea una imatge transparent amb un tamany de 600 per 300 píxels. Escriu un text i acoloreix-lo, de manera que quede com la imatge següent.

Selecciona les lletres i després amb el menú “Selecció -> Retalla” encongeix la selecció 5 píxels.

Crea una nova capa transparent en mode “sobreposar”, i acoloreix de blanc la selecció. Desfés la selecció i aplica un filtre de difuminació gaussiana de 5 píxels. Torna a la capa del text i selecciona les lletres. Crea una nova capa anomenada “Mapa” de color negre i pinta les lletres, que tens seleccionades, de blanc. Crea també una capa totalment negra en mode “Pantalla”, que anomenarem “Reflex de llum” i deixa-la dalt del tot.

Informàtica Departament d'art i tecnologia

Col·legi “Sagrado Corazón” (Mislata)

Sobre la capa “Mapa” aplica un filtre de difuminació gaussiana de 30 píxels. Selecciona la capa “Reflex de llum” i aplica sobre ella un filtre anomenat “Efecte de llum” amb els següents paràmetres: - Llum: Tipus direccional, color blanc verdós, intensitat 0,3, posició (0,0,0) i direcció (-1,-1,1). - Material: Lluentor 0 i 10, Brillant=5 i Polit=5. - Habilita el Bump Map utilitzant la capa “Mapa”, corba lineal i alçada màxima=0,1. Aquest és el resultat final amb una ombra afegida posteriorment.

Informàtica Departament d'art i tecnologia

Col·legi “Sagrado Corazón” (Mislata)

Inkscape. Imatges vectorials. Existeixen dos tipus d'imatges: les anomenades mapes de bits i les vectorials. La diferencia consisteix en que als primers els dibuixos estan formats per un conjunt de punts (nomenats píxels) de colors que, tots junts, formen la imatge. En canvi, a les imatges vectorials trobarem línies i corbes definides per coordenades. Al primer cas, si augmentem el tamany de la imatge, podrem veure els punts, mentre que al segon cas açò no ocorre.

Inkscape és una ferramenta de dibuix vectorial i, encara que moltes vegades haurem de transformar finalment les nostres imatges a mapes de bits, podem donar-li el tamany desitjat sense por de perdre qualitat.

La finestra principal. Quan obrim el programa ens trobem amb una finestra semblant a aquesta.

Informàtica Departament d'art i tecnologia

Col·legi “Sagrado Corazón” (Mislata)

Anem a veure quines són les seues parts. Dalt del tot tenim els menús, des d'on podem accedir a quasi totes les funcions del programa. Just baix tenim la barra d'ordres, on tenim botons per les funcions més comuns com obrir i guardar arxius, fer i desfer accions, copiar, apegar i retallar, etc. En tercer lloc tenim la barra de controls d'eina, que ens permetrà configurar i utilitzar la eina triada en la caixa d'eines, que es troba en vertical a la esquerra de la finestra. Evidentment, la barra de controls d'eina canvia segons la eina que tingam seleccionada. A la part inferior de la finestra trobem la barra d'estat, que ens informa i ens permet canviar algunes característiques de la imatge. De esquerra a dreta trobem el zoom, les coordenades de la posició del cursor, un ull que ens indica si la capa actual és visible i ens permet canviar-ho, un cadenat que ens permet blocar i desblocar la capa actual per impedir modificacions i finalment la capa on ens trobem actualment. A la dreta de la barra d'estat apareixen consells o informació molt important, ja que ens informa de les opcions o els atalls de teclat que podem utilitzar.

El zoom. Hi ha diverses formes de fer zoom sobre la imatge, però les més senzilles son prémer les tecles + i – o bé triar la ampliació desitjada a la barra d'estat. Si tenim un ratolí amb roda central, aquesta ens pot servir per fer zoom si mantenim polsada la tecla ctrl.

Creant formes bàsiques. Les formes bàsiques que podem dibuixar són rectangles, cercles, estels i espirals. Una vegada dibuixada la forma bàsica podem trobar a la barra de controls d'eina diferents opcions que poden modificar-la.

Exercici 1 Dibuixa un rectangle amb les cantonades arrodonides amb un radi vertical de 40 px. Dibuixa un estel de sis puntes amb un radi de la punxa de 0,5 i un arrodoniment de les cantonades de 0,3. Dibuixa un arc amb un angle d'inici de 30 graus i un angle de fi de 240 graus. Dibuixa una espiral de tres girs, amb una divergència de 4 i un radi intern de 0,5 Es pareix a aquest el teu dibuix?

Informàtica Departament d'art i tecnologia

Col·legi “Sagrado Corazón” (Mislata)

Moure, escalar i rotar. Una de les ferramentes més utilitzades és el selector d'objectes . Polsant amb el BER sobre un objecte apareixeran unes fletxes que ens permetran escalar-lo, i polsant de nou les fletxes canviaran i ens permetran rotar l'objecte. La creu que apareix al centre del objecte, i que podem traslladar, serà el punt sobre el qual gire l'objecte. Per traslladar un objecte sols tenim que polsar amb el ratolí al seu interior i arrossegar-lo.

Si mantenim polsada Ctrl quan escalem, la proporció alçada/amplaria es mantindrà, i si la mantenim polsada quan traslladem un objecte sols es mourà en vertical u horitzontal. Es pot seleccionar més d'un objecte polsant el BER sobre ells mentre mantenim polsada Majus. També podem començar una selecció en una àrea buida obrint un requadre de selecció.

Informàtica Departament d'art i tecnologia

Col·legi “Sagrado Corazón” (Mislata)

Grups d'objectes. Podem agrupar objectes per a fer que es comporten com un quan els traslladem o rotem. Per fer-ho cal seleccionar-los i després polsar Ctrl+G. Per desfer un grup haurem de seleccionar-lo i polsar Ctrl+U. No cal desfer un grup per modificar un objecte que forme part d'ell, sols tenim que seleccionar-lo amb Ctrl+BER.

Emplenat i contorn. Podem arribar al dialeg que ens permet canviar el color dels objectes de varies formes: –

BDR sobre el objecte -> “emplenat i contorn”

–

Menú objecte -> “emplenat i contorn”

–

Seleccionar l'objecte i Ctrl+Majus+F

Quan apareix aquesta finestra podem emplenar l'objecte de qualsevol color triant la quantitat, de 0 a 255, de roig, vert i blau, així com la transparència del color. També podem emplenar l'objecte amb gradients que, per defecte, aniran del color triat al transparent. Amb el contorn podem fer exactament el mateix i, finalment, podem triar el tipus de contorn a la pestanya “Estil de contorn”.

Exercici 2 Amb cercles de colors fes un dibuix com el següent.

Informàtica Departament d'art i tecnologia

Col·legi “Sagrado Corazón” (Mislata)

Duplicat i distribució d'objectes. Podem duplicar un objecte copiant i pegant, però inkscape té una manera més ràpida sols polsant Ctrl+D. Quan dupliquem un objecte d'aquesta manera el duplicat es troba just baix de l'original i es troba seleccionat. Per distribuir els objectes polsar Ctrl+Majus+A o anar al menú “Objecte -> Alinea i distribueix”, i obtindrem una finestra com la següent.

En primer lloc podem triar en relació a quin objecte alinearem els nostres: la pàgina, la selecció sencera, l'últim o el primer element seleccionat,... Desprès en quant a la alineació podem triar diferents opcions, i alinear qualsevol dels costats (drets o esquerres) dels nostres objectes a qualsevol costat de la nostra referència. El mateix podem en quant a la alineació vertical. Exercici. Dibuixa un rectangle i tres cercles com els següents i després fes quatre copies.

Informàtica Departament d'art i tecnologia

Col·legi “Sagrado Corazón” (Mislata)

Selecciona els tres cercles d'un dels dibuixos i després el rectangle corresponent. Alinea horitzontalment en relació al últim objecte seleccionat els tres cercles, utilitzant una manera diferent en cadascuna de les còpies. Fes el mateix alineant verticalment els dos cercles dels altres quadres. El resultat que has d'obtenir el tens al dibuix següent.

Amb la distribució d'objectes podem fer que un dels quatre costats dels objectes es troben a distàncies iguals o bé que el espai entre els objectes siga sempre el mateix.

Piles d'objectes. Els objectes que dibuixem poden trobar-se uns sobre altres en el que s'anomena “ordre Z”. Encara que el nostre dibuix és en dos dimensions podem moure els objectes en aquesta tercera dimensió simulada. Seleccionarem un objecte i utilitzarem RePg i AvPg per moure'l una posició cap amunt o cap avall, les tecles Inici i Fi ens serviran per moure'l al fons o a dalt dels objectes. 53

Informàtica Departament d'art i tecnologia

Col·legi “Sagrado Corazón” (Mislata)

Exercici 3. Fes un dibuix com el següent.

Informàtica Departament d'art i tecnologia

Col·legi “Sagrado Corazón” (Mislata)

La graella. Al menú “Fitxer -> Preferències del document” o polsant Ctrl+Majus+D, tenim la opció d'activar una graella que ens permetrà situar amb més precisió els nostres objectes al dibuix.

Una vegada que li hem dit que ens mostre la graella, i que ajuste les caixes del voltant i els punts que defineixen els objectes a aquesta, quan deixem un objecte molt aprop d'una línia de la graella aquest es desplaçarà per situar-se sobre aquesta. En la pràctica pareixerà que la graella actua com un imant, i la distància a la qual actua es pot definir amb la opció “Distància d'ajust”.

Informàtica Departament d'art i tecnologia

Col·legi “Sagrado Corazón” (Mislata)

Exercici 4. Amb l'ajuda de la graella fes un dibuix semblant al següent.

Operacions booleanes.

Les operacions booleanes serveixen per obtenir noves formes a partir de les formes bàsiques. Podem trobar-les al menú “Camí”, i recorda que el resultat rebrà el estil de l'objecte que es trobe més avall. L'ordre “retalla el camí” es pareix a la divisió, però crearà una forma oberta i, per tant, desapareixerà l'emplenat.

Exercici 5. Amb la unió i diferència de rectangles i cercles fes un dibuix com el següent. 56

Informàtica Departament d'art i tecnologia

Col·legi “Sagrado Corazón” (Mislata)

Línies i corbes. Al programa Inkscape hi ha tres ferramentes que ens serviran per dibuixar formes. La primera és la ferramenta de corbes a ma alçada . Aquesta ferramenta és molt fàcil d'utilitzar: simplement mantindrem polsat el botó del ratolí mentre ens movem per el dibuix i obtindrem una línia. Fixat que apareix un xicotet requadre al principi de la línia, si acabem el nostre traç justament dins d'eixe requadre la línia serà tancada i podrà tenir un emplenat. La segona ferramenta és la de línies i corbes Beizer

. Si anem fent clics de

ratolí, línies rectes aniran unint els punts indicats per nosaltres, mentre que si polsem el botó del ratolí i arrosseguem les línies seran corbes. La tercera ferramenta és la de línies cal·ligràfiques

. Amb aquesta

ferramenta podem simular l'ús d'una estilogràfica amb resultats molt interessants, pots utilitzar-la i experimentar amb els seus paràmetres.

Nodes i nanses. No cal que un dibuix fet amb línies i corbes ens quede bé a la primera, ja que podem editar la línia amb la ferramenta de nodes i nanses . Anem a tractar de dibuixar una fletxa com la següent.

Informàtica Departament d'art i tecnologia

Col·legi “Sagrado Corazón” (Mislata)

Per començar utilitza la ferramenta de línies i corbes per dibuixar una fletxa aproximadament igual a la anterior amb línies rectes.

Ara, utilitzant la ferramenta de nodes i nanses fes clic sobre la teua fletxa. Apareixen uns quadrets grisos als extrems de cada línia: aquestos son els nodes, i ara pots moure'ls si hi ha alguna línia que no t'agrade com ha quedat. Quan polses sobre un node es fica de color groc, aixó indica que està seleccionat. Pots seleccionar més nodes traçant un requadre de selecció amb el ratolí o fent clic sobre ells amb la tecla de majúscules polsada. Podem transformar segments de línia en recta o en corba amb els botons que es troben a la barra d'opcions d'eina. Selecciona dos nodes que es troben als extrems d'un segment i transforma'l en una corba.

Quan un segment és una corba apareixen unes línies amb uns cercles als extrems: son les nanses, i les pots desplaçar per controlar el dibuix de la corba. Pots intentar transformar en corbes les línies necessàries per obtenir una fletxa com la del exemple.

Composició de formes. Ací tens un dibuix d'una senyal d'avis. I les diferents parts que la composen, amb les parts blanques sobre un fons gris.

Informàtica Departament d'art i tecnologia

Col·legi “Sagrado Corazón” (Mislata)

Fixat que els dibuixos de diferents colors estan formats per diferents formes superposades.

Exercici 6. Busca a internet la senyal de “prohibició de pas si hi ha tràfic en contra” (www.wikipedia.org) i dibuixa-la amb l'inkscape.

Exercici 7. Dibuixa unes fulles d'un arbre. Ací tens un exemple, però no cal que les teues siguen exactament iguals.

Informàtica Departament d'art i tecnologia

Col·legi “Sagrado Corazón” (Mislata)

Exercici 8. Anem a dibuixar a Bart Simpson a partir d'una imatge en mapa de bits. Primer ves al menú “Fitxer -> Importa” i importa la imatge. Apareixerà al teu document. Amb la ferramenta de corbes beizer

fes clics al voltant del cap per

aproximar un contorn amb rectes, i després transforma alguns nodes en corbes per donar-li la forma definitiva.

Per fer l'ull simplement traça un cercle. Per fer la parpella traça un polígon i duplica el cercle de l'ull. Obtindràs la 60

Informàtica Departament d'art i tecnologia

Col·legi “Sagrado Corazón” (Mislata)

parpella fent la intersecció entre el cercle de l'ull i el polígon.

Dibuixa la línia de la parpella i recorda arrodonir-li les cantonades i el fi de línia.

Per acabar l'ull, canvia el color dels diferents elements i dibuixa un cercle negre que serà la pupil·la. Segueix el mateix mètode per dibuixar l'altre ull. Per dibuixar el nas fes un polígon, acoloreix-lo de groc i lleva-li el contorn. Després fes un duplicat i elimina la línia vertical de la dreta. Aquest segon polígon serà la línia negra del nas.

Informàtica Departament d'art i tecnologia

Col·legi “Sagrado Corazón” (Mislata)

Per acabar dibuixa les línies de l'orella i elimina la imatge de fons.

Exercici 9. Fes la teua pròpia versió d'una calavera estil “còmic”. Ací tens un exemple, però cal que faces la teua pròpia versió.

Informàtica Departament d'art i tecnologia

Col·legi “Sagrado Corazón” (Mislata)

Exercici 10. Dibuixa un dels següents personatges. No cal que el teu dibuix siga exactament igual a l'exemple, i pots “calcar” la imatge igual que varem fer a l'exercici anterior si trobes alguna que t'agrade.

Informàtica Departament d'art i tecnologia

Col·legi “Sagrado Corazón” (Mislata)

POV-Ray. El programa Pov-Ray El programa POV-Ray és un programa que crea imatges realistes en tres dimensions mitjançant un mètode anomenat Ray-tracing. Aquest mètode pren dos fitxers anomenats fitxer.pov i fitxer.ini on es descriu respectivament una escena i la manera de representar-la i calcula una sèrie de raigs per tal de calcular el color de cada píxel de la imatge. Aquestos raigs viatgen al contrari que en el mon real, es a dir, van de una càmera situada a la imatge fins que troben un objecte, i després són enviats a una font de llum.

El sistema de coordenades. El sistema de coordenades del POV-Ray té tres eixos de coordenades perpendiculars com els de la imatge seguent.

Si et fixes, els valors positius dels eixos X i Y es troben cap a la dreta i cap a dalt, mentre que els valors positius de Z estan cap a l'interior de la pantalla.

La càmera. La càmera determina la escena que veurem finalment. Per situar la càmera utilitzarem la sentència “camera” indicant amb coordenades el lloc on es troba i cap on mira. Les coordenades aniran separades per comes i tancades entre els signes < i >. camera { location <0, 2, 3> look_at <0, 1, 2> }

En aquest exemple la càmera està situada dos unitats a la dreta i tres cap a nosaltres des del centre de coordenades i mira cap al punt situat sobre el eix X una unitat a la dreta i dos cap al interior de la pantalla.

Informàtica Departament d'art i tecnologia

Col·legi “Sagrado Corazón” (Mislata)

El primer objecte. Un objecte que podem afegir amb facilitat a la imatge és una esfera. sphere { <0, 1, 2>, 2 pigment { Yellow } } }

Aquesta esfera té el seu centre en les coordenades x=0, y=1 i z=2 i el seu radi és igual a dos unitats. Recordeu que el radi és la mitat del tamany de la esfera, per tant la esfera té 4 unitats d'amplària.

Una font de llum. Finalment per fer que la nostra escena no siga una obscuritat total i podam veure els objectes tenim que afegir una font de llum. light_source { <2, 4, 3> color rgb <1 ,1 ,1>}

Fixeu-vos que la posició de la font de llum està definit per les coordenades <2, 4,-3>, però mira amb especial atenció la manera de definir el color de la llum. Abans ens hem referit al color per el seu nom, però ara hem utilitzat el sistema RGB. En aquest sistema cada color es defineix donant la quantitat de roig, verd i blau (Red, Green i Blue) amb xifres entre 0.0 i 1.0. El color de la nostra llum és blanc, mentre que una llum amb el color <0.5, 0, 0.5> seria de color taronja.

La nostra primera escena. El arxiu complet el tens a continuació. #include “colors.inc” //Noms dels colors camera { location <0, 2, 3> look_at <0, 1, 2> } sphere { <0, 1, 2>, 2 pigment { color Yellow } } light_source { <2, 4, 3> color rgb <1 ,1 ,1>}

Fixat en la primera línia on incloem el fitxer colors.inc que conté els noms dels colors que després podrem utilitzar, i en segon lloc podem afegir un comentari després de una doble barra. Quan trobes un comentari als fitxers d'exemple pots copiar-lo, però recorda que el programa povray els ignorarà i,per tant, no influeixen en res a la imatge final. 65

Informàtica Departament d'art i tecnologia

Col·legi “Sagrado Corazón” (Mislata)

Per obtenir la imatge caldrà que anem a la carpeta on guardem el fitxer i executem la ordre “povray exemple1.pov”. Amb açò obtindrem la imatge a la mateixa carpeta.

La caixa (box). El objecte caixa és molt utilitzar, i ens serveix per dibuixar un cub amb proporcions variables, es a dir, també pot tenir forma te tauler o de mur. El objecte caixa es defineix donant les coordenades de dos vèrtex oposats. Al exemple inferior es donen les coordenades dels vèrtex més propers baix a la esquerra i dalt a la dreta. box { < 0.5, 0.5, 0.5>, < 0.5, 1.5, 0.5> texture { T_Stone25 scale 4} rotate <0,10,0> }

En lloc d'un pigment de color li hem donat a aquesta caixa una textura de pedra. Després de definir una caixa paral·lela als eixos podem donar-li una rotació. La ordre que apareix al exemple és equivalent a rotate y*10. Al exemple següent podem veure la esfera que ja teníem (i que hem traslladat una mica sobre el eix z) i la caixa que acabem de descriure. Fixat que per utilitzar textures de pedra hem de utilitzar el fitxer stones.inc. #include "colors.inc" //Noms dels colors #include "stones.inc" //Noms de les textures camera { location <0, 2, 3> look_at <0, 1, 2> } sphere { <0, 1, 10>, 2 pigment { color Yellow } } box { < 0.5, 0.5, 0.5>, < 0.5, 1.5, 0.5> texture { T_Stone25 scale 4} rotate y*10 }

Informàtica Departament d'art i tecnologia

Col·legi “Sagrado Corazón” (Mislata)

light_source { <2, 4, 3> color rgb <1 ,1 ,1>}

Exercici 1. Al dibuix següent pots veure una esfera a l'interior d'una caixa.

L'arxiu exercici1.pov el pots trobar a continuació, però falta definir algunes coordenades als llocs on trobes els signes “?”. Completa el fitxer i genera la imatge. #include "colors.inc" camera { location <1.2, 1.2, 1.2> look_at <?, ?, ?> } sphere { <0, 0, 0>, ? pigment { color Yellow } } box { <0.5, 0.5, 0.5>, <0.5, 0.5, 0.> pigment { color Red } } light_source { <1, 1, 2> color rgb <1 ,1 ,1>}

El cilindre (cylinder). Podem definir un cilindre amb dues coordenades, que seran els centres de les circumferències dels extrems, i un radi. Recorda que els comentaris que apareixen després d'una doble barra no influeixen la imatge final. Amb la paraula “open” podem transformar el nostre cilindre en un tub buit. cylinder { <0,0,0>,

// Centre de l'extrem inferior

<0,1,0>,

// Centre de l'extrem superior

0.5

//Radi

Informàtica Departament d'art i tecnologia

open

Col·legi “Sagrado Corazón” (Mislata)

//Si afegim açò obrim els extrems

texture { T_Stone29 scale 0.5 } }

El con (cone). Podem imaginar un con com un cilindre amb extrems de diferent diàmetre, i que acabarà en punta si un dels diàmetres és igual a 0. Igual que amb el cilindre, la paraula “open” després del segon radi ens dibuixarà una figura oberta pels extrems. cone { <0,1,0>,0.6 // Centre i radi d'un extrem <0,1.5,0>,0 // i de l'altre extrem texture { T_Stone22 scale 0.5} }

El pla (plane). Podem imaginar el vector <0,1,0> com una línia que comença al punt <0,0,0> i acaba en <0,1,0>, es a dir, una línia vertical d'una unitat de llargària. Sols existeix un pla perpendicular a aquesta línia, i és completament horitzontal. En povray aquesta és la manera habitual de definir els plans, amb un vector perpendicular a ells. Dels plans no cal indicar el tamany, ja que son infinits.

El pla es troba generalment a l'inici del vector, però podem desplaçar-lo sobre aquest amb un nombre positiu o negatiu que escrivim després. Així un pla horitzontal que passe per l'origen de coordenades, i que ens pot servir de base per al nostre dibuix el podem trobar a l'exemple següent plane { <0,1,0>,0 pigment { checker color Black, color White } }

Fixeu-vos en el pigment “checker”, que significa “a quadres” com un tauler d'escacs, i per al qual tenim que definir dos colors. Ja ho tenim tot per fer un nou dibuix. Hem afegit una segona font de llum per millorar la imatge final, i també un segon pla, perpendicular a l'eix z i desplaçat tres unitats cap al fons de la imatge.

Informàtica Departament d'art i tecnologia

Col·legi “Sagrado Corazón” (Mislata)

#include "colors.inc" //Noms dels colors #include "stones.inc" //Noms de les textures camera { location <0, 1.5, 2> look_at <0, 0.7, 0> } // Aquesta vegada dues fonts de llum light_source { <2, 1, 3> color rgb <1 ,1 ,1>} light_source { <2, 3, 3> color rgb <1 ,1 ,1>} cylinder { <0,0,0>,

// Centre de l'extrem inferior

<0,1,0>,

// Centre de l'extrem superior

0.5

//Radi

open

//Si afegim açò obrim els extrems

texture { T_Stone29 scale 0.5 } } cone { <0,1,0>,0.6 // Centre i radi d'un extrem <0,1.5,0>,0 // i de l'altre extrem texture { T_Stone22 scale 0.5} } plane { <0,1,0>,0 pigment { checker color Red, color Blue } } plane { <0,0,1>,3 pigment { checker color Red, color Blue } }

Informàtica Departament d'art i tecnologia

Col·legi “Sagrado Corazón” (Mislata)

El tor (torus). Un tor és una forma geomètrica semblant a un neumàtic o un “donut”. Per definir-lo haurem de donar un radi extern i un gruix. torus { 2,0.2 // Radi extern i gruix rotate <0,0,0> pigment { Blue } } torus { 2,0.2 // Radi extern i gruix rotate <90,0,0> pigment { Red } } torus { 2,0.2 // Radi extern i gruix rotate <0,0,90> pigment { Yellow } }

En aquest exemple dibuixarem tres torus, de radi 2 i 0.2 unitats de gruix, dos dels quals han estat rotats sobre els eixos x i z respectivament.

Informàtica Departament d'art i tecnologia

Col·legi “Sagrado Corazón” (Mislata)

Exercici 2 Completa l'exemple dels torus ficant una càmera i un parell de fonts de llum, fins obtenir una imatge com la del exemple.

Creant formes amb CSG. La CSG, o geometria constructiva de sòlids, és la ferramenta que utilitzarem per combinar les formes bàsiques que acaben d'aprendre per crear objectes complexos. El que farem és una sèrie d'operacions com la suma o la diferència entre les formes per obtenir-ne de noves. Començarem dibuixant dos objectes. #include "colors.inc" // Noms dels colors #include "woods.inc" // Noms de textures de fusta camera { location <3, 3, 3> look_at <0, 1, 0> } light_source { <1, 3, 0> color rgb <1 ,1 ,1>} light_source { <2, 3, 3> color rgb <1 ,1 ,1>} plane { <0,1,0>,0 pigment { checker color Red, color Blue } } // Aquestes són les formes sobre // les quals practicarem CSG box {

Informàtica Departament d'art i tecnologia

Col·legi “Sagrado Corazón” (Mislata)

<1,1,1>, <1,1,1> pigment {color Yellow } } // Fi de la caixa sphere { <1,1,1>, 0.5 texture { T_Wood1 scale 1 } } // Fi de l'esfera

Hem utilitzat el fitxer woods.inc, que serveix per poder utilitzar textures de fusta als nostres objectes.

Unió (union).

Si et fixes, en el dibuix generat amb l'exemple anterior, la caixa no es veu sencera, ja que la mitat ha quedat per baix del pla taulejat que ens serveix de sol. per corregir açò haurem de traslladar la caixa amb la ordre translate <0,1,0> i després fer el mateix amb la esfera. Per no tenir que fer totes les operacions dues vegades podem unir dues o mes formes en una simplement ficant-les dins la ordre union { }. // Aquestes són les formes sobre // les quals practicarem CSG union {

// Comença la unió !!!!!

box { <1,1,1>, <1,1,1> pigment {color Yellow } } // Fi de la caixa sphere { <1,1,1>, 0.5 texture { T_Wood1 scale 1 } } // Fi de l'esfera translate <0,1,0> } // Fi de la unió !!!!!

Quan unim dos objectes podem fer operacions com traslladar-lo o girar-lo con si fos un sol.

Informàtica Departament d'art i tecnologia

Col·legi “Sagrado Corazón” (Mislata)

Intersecció (intersection).

La intersecció elimina qualsevol part dels objectes excepte aquelles que es troben en contacte i que, per tant, pertanyen als dos objectes a la vegada. Prova reemplaçar la unió del exemple anterior per una intersecció.

diferència (difference).

La diferència elimina del primer objecte qualsevol part en contacte amb el segon. Prova-ho amb el exemple anterior.

Informàtica Departament d'art i tecnologia

Col·legi “Sagrado Corazón” (Mislata)

Exercici 3. Tracta d'obtenir, a partir de l'exemple anterior, una imatge com aquesta.

Per fer-ho dibuixa la diferència entre la caixa i quatre esferes de radi 1.2 situades als vèrtex superiors de la pàgina.

Fusió (merge).

La fusió és útil amb objectes transparents, ja que funciona de manera pareguda a la unió, pero eliminant les parts dels objectes que queden “repetides”. Ací pots veure la unió de dos objectes transparents. Pots veure part del torus dins la caixa. Si utilitzem la fusió en lloc de la unió aquest tros del torus desapareix.

Informàtica Departament d'art i tecnologia

Col·legi “Sagrado Corazón” (Mislata)

Exercici 4. Dibuixa una tassa de cafè a partir de la següent descripció: 1. Afegeix una càmera situada en <-4,4,-4> i que mire a l'orige de coordenades. 2. Dibuixa un torus amb radi major 1 i radi menor 0.2. Gira'l 90º sobre l'eix X. 3. Del torus anterior sols ens interessa la mitat (ja que farà d'ansa de la tasa). Sostreu-li un cub definit pels vèrtex <0,-1.3,-0.3> i <1.3,1.3,0.3>. 4. Trasllada el conjunt anterior -1.3 unitats sobre l'eix X. 5. Dibuixa un cilindre amb radi 1.4 que comence al punt <0,-2,0> i acabe en <0,1.6,0>. 6. Ja tenim la tassa. Recorda donar-li color i afegir alguna font de llum i genera l'escena per veure el resultat. 7. Per buidar la tassa li sostraurem un cilindre de radi 1.2 i que vaja del punt <0,-1.7,0> a <0,1.7,0>. 8. Genera l'escena per veure el resultat. 9. Per arrodonir la vora de la tassa dibuixarem un torus amb radi major 1.3 i radi menor 0.1, que traslladarem 1.6 unitats sobre l'eix Y. 10. Fes una fusió (merge) del torus i les dos diferències anteriors. 11.Dibuixa un pla perpendicular a l'eix Y i trasllada'l -2 unitats.

Informàtica Departament d'art i tecnologia

Col·legi “Sagrado Corazón” (Mislata)

Els materials. Així com podem definir un pigment per colorejar un objecte o una textura per simular diferents tipus de superfícies, els materials ens permetran modificar tant la superfície com l'interior dels objectes. Podem utilitzar materials predefinits com material { M_Glass }

o amb una combinació de textura i interior com material{ texture {T_Glass4} interior{Glass_Interior} }

Exercici 5. Canvia els pigments utilitzats al exercici 4 i utilitza el material del exemple anterior als dos cilindres i als dos torus. Amb aquest canvi aconseguiràs que la teua tassa, que ara pareix d'un material paregut al plàstic de color roig, es transforme en una tassa de vidre transparent.

Informàtica Departament d'art i tecnologia

Col·legi “Sagrado Corazón” (Mislata)

Planificant mitjançant vistes. Ha arribat el moment de començar a dibuixar objectes a partir d'un dibuix en dos dimensions. El primer que cal fer és dibuixar dos parells d'eixos com els següents

Ara dibuixarem dos vistes del nostre objecte: la frontal a la esquerra i la inferior als eixos de la dreta. Comencem dibuixant una simple caixa. Ja tenim la nostra caixa, vista des de davant i des de baix.

Informàtica Departament d'art i tecnologia

Col·legi “Sagrado Corazón” (Mislata)

Com ja saps, per definir una caixa fan falta dos vèrtex oposats. En aquesta ocasió hem triat els vèrtex marcats amb els nombres “a” i “b”. Ara podem buscar les coordenades corresponents a cadascun d'ells. El vèrtex “a” podem veure que te com coordenada x=3 en els dos eixos (Atenció! Si la coordenada x és diferent en els dos dibuixos és que hi ha un error al dibuix), y=-2 i z=-2. Per al vèrtex “b” les coordenades són x=-5 ; y=2 ; z=5. Al dibuix següent tens una representació en tres dimensions de la caixa, on el rectangle gris representa la pantalla de l'ordinador.

Exercici 6. A la imatge següent tens la representació d'un dibuix que tenim que fer. De moment tenim situades la càmera, les fonts de llum, les esferes i tres cilindres molt prims que fan d'eixos. #include "colors.inc"

//Noms dels colors

Informàtica Departament d'art i tecnologia

Col·legi “Sagrado Corazón” (Mislata)

camera { location <5, 10, 15> look_at <0, 0, 0> } light_source { <3, 10, 15> color rgb <1 ,1 ,1>} light_source { <7, 8, 15> color rgb <1 ,1 ,1>} light_source { <1, 5, 5> color rgb <1 ,1 ,1>} box { } box { } box { } sphere { <4,1,3>,1 pigment { Blue } } sphere { <2,3,1>,1 pigment { Yellow } } sphere { <2,7,1>,1 pigment { Green } } plane { <0,1,0>,6 pigment { checker color White, color Yellow scale 5 } }

Informàtica Departament d'art i tecnologia

Col·legi “Sagrado Corazón” (Mislata)

// Eixos union { cylinder { <10,0,0>,<10,0,0>,0.05 pigment { color rgb <1,0,0> } } cylinder { <0,10,0>,<0,10,0>,0.05 pigment { color rgb <0,1,0> } } cylinder { <0,0,10>,<0,0,10>,0.05 pigment { color rgb <0,0,1> } } translate <0,0,0> }

Completa la imatge fins obtenir el resultat següent.

exercici 7 Completa el fitxer següent per obtenir la imatge d'una taula amb una esfera daurada.

#include "colors.inc"

//Noms dels colors

#include "textures.inc" //Noms de textures #include "woods.inc" //Noms de fustes

Informàtica Departament d'art i tecnologia

Col·legi “Sagrado Corazón” (Mislata)

#include "golds.inc" // Fons blanc en lloc de negre background { color rgb <1, 1, 1> } camera { location <9, 9, 9> look_at <0, 1, 0> rotate <0,0,0> } light_source { <10, 10, 10> color rgb <1,1,1>} light_source { <10, 10, 10> color rgb <1,1,1>} light_source { <0, 10, 10> color rgb <1,1,1>} union { cylinder {

}

cylinder {

}

cylinder {

}

cylinder {

}

box { } //Textura per tota la unió texture { T_Wood1 scale 4} } sphere { <0,5,0>,2 texture { T_Gold_1A } }

Informàtica Departament d'art i tecnologia

Col·legi “Sagrado Corazón” (Mislata)

Animacions amb Povray. Quan anem al cinema o mirem la televisió no estem veient, en realitat, cap escena en moviment. El que veiem són un seguit d'imatges estàtiques, cadascuna d'elles lleugerament diferent de l'anterior, que ens fan creure que realment hi ha moviment. El povray no pot generar animacions, però podem generar imatges diferents que després, ajuntant-les totes, seran un vídeo. Per començar necessitem un imatge. Ens serviran aquestes tres esferes. // Fitxer tresesferes.pov #include "colors.inc" background { color rgb <1, 1, 1> } camera { location <10, 10, 10> look_at <0, 6, 0> } light_source { <12, 10, 10> color rgb <1 ,1 ,1>} light_source { <4, 10, 10> color rgb <1 ,1 ,1>} union { sphere { <0,6,0>,5 pigment { Red } } sphere { <4,8,0>,2 pigment { Blue } }

Informàtica Departament d'art i tecnologia

Col·legi “Sagrado Corazón” (Mislata)

sphere { <4,4,0>,2 pigment { Yellow } } rotate <0,0,0> } plane { <0,1,0>,0 pigment { checker color White, color Yellow scale 5 } }

Una animació senzilla podria ser aquest objecte girant sobre l'eix Y. Per fer açò hauríem de generar imatges canviant rotate <0,0,0> per rotate <0,2,0>, rotate <0,2,0>, rotate <0,3,0>, ... Per fer açò, povray té la variable clock, que actuarà com un rellotge i anirà prenent diferents valors al llarg del temps. Per tant canviem rotate <0,0,0> per rotate <0,clock,0>. Ara crearem un segon fitxer que definirà el valor de clock i algunes altres opcions que encara no hem utilitzat. //Fitxer tresesferes.ini Input_File_Name=tresesferes.pov Antialias=1 Initial_Frame=1 Final_Frame=125 Initial_Clock=0 Final_Clock=360 width=320 height=240 quality=9

L'explicació d'aquest fitxer és la següent: Input_File_Name indica el nom del fitxer pov on està descrita l'escena. Antialias=1 activa un filtre per eliminar marges dentats. Initial_Frame i Final_Frame controlen el número d'imatges. A 25 imatges per segón obtindrem una animació de 5 segons. Initial_Clock i Final_Clock controlen els valors inicials i finals de la variable clock. Width i Height són els valors d'amplària i alçaria de la imatge. Una imatge més gran tarda més en ser generada. Quality és la qualitat de la imatge. Pots utilitzar el mínim (1) per fer proves i el 83

Informàtica Departament d'art i tecnologia

Col·legi “Sagrado Corazón” (Mislata)

màxim (9) per a la imatge final.

Unint els fotogrames en un vídeo. Les ordres que hauràs d'escriure a la consola per tal de generar un vídeo seran les següents. Imaginem que tens els fitxers tresesferes.ini i tresesferes.pov dins una carpeta que s'anomena anima1 i que es troba al escriptori. Primer entrarem dins la carpeta amb alumne@ordinador:~$ cd Desktop/anima1

Ara el sistema ens indica en quina carpeta ens trobem alumne@ordinador:~/Desktop/anima1$

Podem generar amb el povray els fotogrames alumne@ordinador:~/Desktop/anima1$ povray tresesferes.ini

A l'interior de la carpeta hauran aparegut els fitxers tresesferes_001.png fins tresesferes_125.png, que amb l'ordre següent podem transformar en un vídeo alumne@ordinador:~/Desktop/anima1$ mencoder mf://*.png mf w=320:h=240:fps=25:type=png ovc lavc lavcopts vcodec=mpeg4 oac copy o video.avi

Mencoder és el programa encarregat de generar el vídeo, i ara que ja el tenim, podem esborrar les imatges. alumne@ordinador:~/Desktop/anima1$ rm *.png

Exercici 8. Anem a crear una animació que consisteix en una esfera de “antimatèria” que travessa un cub de fusta. El fitxer ini serà el següent: Input_File_Name=anima_1.pov antialias=1 Initial_Frame=1 Final_Frame=??? Initial_Clock=8 Final_Clock=8 width=??? height=??? quality=1

I el fitxer pov serà #include "colors.inc"

//Noms dels colors

#include "textures.inc" //Noms de textures

Informàtica Departament d'art i tecnologia

Col·legi “Sagrado Corazón” (Mislata)

#include "woods.inc" //Noms de fustes background { color rgb <1, 1, 1> } camera { location <10, 10, 10> look_at <0, 0, 0> rotate <0,0,0> } light_source { <10, 10, 10> color rgb <1,1,1>} light_source { <10, 10, 10> color rgb <1,1,1>} light_source { <0, 10, 10> color rgb <1,1,1>} difference { box { <3,3,3>,<3,3,3> texture { T_Wood2 scale 4 } } sphere { <0,0,0>,4 pigment { Red } } } plane { <0,1,0>,6 pigment { checker color White, color Yellow scale 5 } }

Fica la variable clock on siga necessari per a que la esfera recorrega l'eix X, i modifica el fitxer ini per a fer una animació de tres segons (recorda: mencoder crearà un vídeo amb 25 imatges per segon), amb tamany 320 per 240 píxels i amb qualitat màxima. Aquesta és una de les imatges que obtindràs a la teua animació.

Informàtica Departament d'art i tecnologia

Col·legi “Sagrado Corazón” (Mislata)

Exercici 9. Farem una animació en la qual la càmera i la font de llum giraran al voltant d'un objecte. A la imatge següent tens representats els objectes que has d'afegir a la escena.

Com a fitxer ini pots copiar el del exercici anterior, sols canviant la opció Input_File_Name, i fent que la variable clock recorrega els valors de 0 a 360. El fitxer pov el tens a continuació, encara que hauràs de canviar alguns detalls. // Fitxer exercici9.pov #include "colors.inc" #include "textures.inc" #include "woods.inc" #include "metals.inc" background { color rgb <1, 1, 1> }

Informàtica Departament d'art i tecnologia

Col·legi “Sagrado Corazón” (Mislata)

camera { location <12, 12, 12> look_at <0, 6, 0> rotate <0,clock,0> } light_source { <8, 10, 10> color rgb <1 ,1 ,1>} light_source { <8, 8, 8> color rgb <1 ,1 ,1> rotate <0,clock,0> } light_source { <0, 10, 0> color rgb <1 ,1 ,1>} light_source { <0, 10, 10> color rgb <1 ,1 ,1>} union { box { } box { } box { } } sphere { } torus { 2.5, 0.2 translate <1.5, 10.5, 1.5> } merge { torus { 2, 0.5 rotate <90,90,0> translate <1.5, 3, 0.5> } torus { 2, 0.5 rotate <90,0,0>

Informàtica Departament d'art i tecnologia

Col·legi “Sagrado Corazón” (Mislata)

translate <0.5, 3, 1.5> } } plane { <0,1,0>,5 pigment { checker color White, color Yellow scale 5 } }

Les modificacions que has de fer son: –

Aplica a la unió de les tres caixes una textura T_Wood27 escalada 6 unitats.

–

Aplica a la esfera que hi ha sobre les caixes una textura Blood_Marble escalada 5 unitats.

–

Aplica al torus que hi ha al voltant de la esfera una rotació de l'eix X de 20 graus, i un pigment taronja (orange).

–

Als dos torus que hi ha baix de les caixes aplica-los el material M_Glass.

–

El pla està massa baix, descobreix el motiu i fica'l al seu lloc.

Aquest serà el resultat final.

Informàtica Departament d'art i tecnologia

Col·legi “Sagrado Corazón” (Mislata)

Tractament de so. El so i les ones. Ja has estudiat en classe de ciències que un objecte que vibra pot produir un desplaçament de les molècules de l'aire que es va transmetent a les molècules veïnes. Aquesta pertorbació, en forma de minúscul augment de pressió, es desplaça produint el que anomenem ones sonores. Com que la vibració es un moviment periòdic, no es produeix una única ona sonora, sinó un conjunt d'elles. La freqüència d'un so és la quantitat d'ones sonores que emet una font per unitat de temps, i la unitat per mesurar aquesta magnitud és el Herz (Hz), o cicles per segón. Fixat bé en que els Herzs mesuren cicles per segon, i que tenen diferents utilitats. En aquest cas mesuren la quantitat de ones per segon que es produeixen, però més endavant la utilitzarem per quantificar coses diferents. Les ones sonores son captades per l'aparell auditiu produint la sensació de so, i les diferents freqüències són el que percebem com diferents tons, del més agut al més greu. Els sons que l'ésser humà pot percebre són els que tenen freqüències entre els 20 i els 20.000 Hz.

Digitalitzant el so. Podem enregistrar el só mitjançant un aparell com un micròfon, que transformarà les variacions de pressió de l'aire, que hem comentat al punt anterior, en variacions de tensió elèctrica. Més endavant podem fer la transformació contraria, gràcies als altaveus. De tota manera, encara no podem tractar el só amb l'ordinador, ja que aquest necessita que estiga expressat, altra vegada, en forma digital. Com que la ona que tenim és un valor continu, el primer que farem serà un mostratge (sampling) per obtenir una sèrie de valors discrets, consistent en prendre el valor de la ona vàries vegades per segon. Açò ho fa l'anomenat Convertidor Analògic Digital (DAC). A la imatge inferior tenim una ona que volem digitalitzar.

Prendrem valors a determinats intervals, que poden ser variables. Fixat que quan més baixa és la freqüència amb que prenem valors més informació es 89

Informàtica Departament d'art i tecnologia

Col·legi “Sagrado Corazón” (Mislata)

perd i, per tant, menys pareguda és la ona que obtenim a la original.

A la primera imatge tenim una gran quantitat de valors, que representen més fidelment la ona, però ocuparan més espai quan els guardem a l'ordinador. En canvi a la última són sols uns pocs valors, però hem perdut molta informació. Com triar la resolució correcta del mostratge? L'enginyer suec Harry Nyquist va formular la “condició” que porta el seu nom, i que diu que la freqüència de mostratge mínim per obtenir una gravació digital de qualitat ha de ser el doble que la freqüència de la senyal analògica que es pretén gravar. Com que la freqüència màxima que podem percebre es de 20 kHz, la freqüència dels CD de música habituals és de 44,1 kHz, una mica per damunt de la condició de Nyquist, encara que és habitual treballar amb freqüències encara majors. Fixat que hem utilitzat la mateixa unitat (els Herzs) per mesurar la freqüència d'un so (quantitat d'ones per segon, que interpretem com el to del so) i la freqüència del mostratge (quantitat de valors per segon que prenem al digitalitzar un so). Cal no confondre aquestes dos característiques del so. Cadascun dels valors que obtenim al mostratge és quantificat amb un nombre de 16 bits: 8 bits per cadascun dels canals estèreo. Hi ha programes d'edició de so professional que treballen amb 32 o 64 bits. Açò seria equivalent a voler treballar amb més decimals, per aconseguir major precisió, i reduir els errors quan es fan càlculs.

Emmagatzemant so digital a l'ordinador. Una vegada que hem convertit una ona sonora en un seguit de nombres binaris, cal emmagatzemar aquesta informació dins un arxiu a l'ordinador. La modulació d'impulsos codificats (PCM) consisteix en codificar en binari una 90

Informàtica Departament d'art i tecnologia

Col·legi “Sagrado Corazón” (Mislata)

ona (com hem descrit a l'apartat anterior) i després escriure tota a questa informació en un fitxer. Els fitxers WAV contenen aquest tipus d'informació. Anem a calcular com de gran serà un fitxer que conté un so d'un minut de durada. Ens cal saber altres característiques del mostratge del so, així que imaginem que serà un so estèreo, amb un mostratge de 44,1 Khz de 8 bits per canal. Recordant tot el que hem vist fins ara, podem saber que el mostratge consistirà en anotar amb un nombres de 8 bits el valor de la ona en cadascun dels canals, 44100 vegades per segon durant 60 segons. Per tant podem fer el càlcul. 8 bits ∙ 2 ∙ 44100 ∙ 60=42336000 bits

Com que un Byte són 8 bits, podem transformar les unitats. 42336000bits=5292000 Bytes=5168,0 KB=5,0 MB

Els formats comprimits. Com que 5 MB per minut és un tamany molt gran per un fitxer de so, és habitual treballar amb fitxers que guarden la informació amb un sistema de compressió amb pèrdua. Aquestos sistemes utilitzen complicades fórmules matemàtiques, anomenades algorismes de compressió, per emmagatzemar quasi la mateixa informació en menys espai. Diguem “quasi la mateixa informació” per que aquestos sistemes ens permeten triar quin serà el tamany final de l'arxiu a canvi de perdre qualitat de so. Alguns d'aquestos formats comprimits són MP3 i Ogg-Vorbis, i poden emprar 10 vegades menys espai per emmagatzemar so amb una perdua de qualitat mínima. Quan comprimim un fitxer d'àudio, generalment triarem una taxa de bits (bitrate) es a dir, la quantitat de bits per segón com a màxim que es poden utilitzar per emmagatzemar la informació. Utilitzarem una taxa de bits habitual als fitxers de musica, 128 kbps, per fer un càlcul d'exemple. Recorda el fitxer d'un minut de durada que ocupava 5,0 MB sense comprimir. Ara suposarem que el guardem de nou amb un format comprimit amb una taxa de bits de 128 kbps. El seu tamany en bits serà 128kbps∗30 s=3840kb=480 KB

Fixat en la transformació d'unitats que hem fet de bits (b) a bytes (B). El tamany final del nostre fitxer en un format comprimit és aproximadament 10 vegades més menut que sense comprimir-lo.

Audacity. El programa audacity és un editor de so lliure, aquest serà el programa amb el qual treballarem. Hi ha versions, descarregables a través d'internet, per als 91

Informàtica Departament d'art i tecnologia

Col·legi “Sagrado Corazón” (Mislata)

principals sistemes operatius a la plana web http://audacity.sourceforge.net.

Les preferències d'audacity. El primer que farem serà veure les preferències del programa. Ves a “Edita > Preferències” o polsa Ctrl+P i apareixerà una nova finestra. A la pestanya “Qualitat” està definida una freqüència de mostratge de 44100 Hz i una resolució de 32 bits. Suposem que ja saps què significa tot açò. En “Formats de fitxers” tenim la opció de treballar directament sobre els fitxers que obrim o fer una còpia. Triarem aquesta opció, ja que és més segura, perquè podriem, accidentalment, perdre el nostre treball si movem o esborrem el fitxer original. També podem veure els formats en que guardarà Audacity el nostre treball. El format no comprimit serà un arxiu WAV amb informació PCM de 16 bits. Els formats comprimits poden ser fitxers OGG amb una qualitat que es tria en una escala sobre 10 o MP3 amb una taxa de bits determinada. En “Teclat” i “Ratolí” pots consultar, i definir, les funcions de les tecles al programa.

El nostre primer fitxer. Obri el fitxer veu1.wav i fixat en el que apareix a la pantalla. El so que acabem d'obrir apareix com una ona, que representa la intensitat del so. Açò és el que anomenarem una pista. Si volem escoltar el fitxer podem utilitzar els botons de la barra d'eines de control. El cursor és una línia vertical que podem fer aparèixer sobre la pista. Quan el cursor està present la reproducció comença a la seua posició. També podem sel·leccionar un troç de pista, i sols es reproduirà aquesta part. Intenta sel·leccionar la paraula “último”.

Guardem el nostre treball. A més de exportar el que hem fet a un fitxer WAV, OGG o MP3, també podem guardar-lo com un projecte de Audacity, per tal de poder continuar més tard on ho havíem deixat. 92

Informàtica Departament d'art i tecnologia

Col·legi “Sagrado Corazón” (Mislata)

Quan li diguem al programa que guarde un projecte al disc, veurem que crea dues coses: –

Un fitxer on està la descripció de les pistes i la edició que hem fet, amb el nom que nosaltres triem i la extensió “.aup”.

–

Una carpeta amb els fitxers de so que hem utilitzat, anomenada com el projecte però amb l'acabament “_data”. Recorda que a les preferències del programa li varem dir que fera una còpia dels fitxers, en lloc de treballar sobre els originals.

Informàtica Departament d'art i tecnologia

Col·legi “Sagrado Corazón” (Mislata)

Ferramentes d'edició. Una vegada que hem sel·leccionat un troç de pista el podem tallar i apegar, però també podem apegar-los en una pista nova. Si tens sel·leccionada la paraula “último” Ves a “Edita > Divideix” i enviaràs eixe fragment a una pista nova. Amb la ferramenta de desplaçament

pots moure els fragments a dreta i

esquerra, i amb la ferramenta de zoom pots apropar-te i allunyar-te de la ona amb els botons dret i esquerre del ratolí.

Exercici 1. Am el que has aprés, divideix el fitxer veu1.wav en varies pistes, i desplaça els fragments per tal que la veu diga: “Quien el último és?”.

Informàtica Departament d'art i tecnologia

Col·legi “Sagrado Corazón” (Mislata)

Modifiquem la forma de la ona. Ara explicarem les altres ferramentes d'edició, que ens permetran treballar directament sobre la ona. La ferramenta de dibuix ens permet modificar directament la forma de la ona. Si amplies molt l'ona veuràs uns puntets sobre ella que podem moure amb aquesta ferramenta. La ferramenta d'envolupant ens permet afegir uns punts de control a la pista, que indicaran en tot moment el volum d'aquesta. Podem modificar l'amplitud de la ona des de 0 fins un 150% del seu tamany original, i deixar que el programa s'encarregue de fer unes suaus transicions entre punts.

El mode multi-eina ens permet utilitzar qualsevol de les ferramentes anteriors, en funció del lloc on estiga situat el busca del ratolí.

Exercici 2. En un projecte nou importa els fitxers veu2.ogg i musica1.mp3. En la pista veu2, aproximadament en 0:40 el locutor diu “... que va pasando en este tipo de programas.” Selecciona i elimina des d'eixe punt fins al final de la pista. En la mateixa pista, en 0:23, el locutor diu “... ningún podcast en español”. Situa el cursor després d'aquesta frase i anant a l menú “Genera > Silenci”, insereix un silenci de 10 segons.

Informàtica Departament d'art i tecnologia

Col·legi “Sagrado Corazón” (Mislata)

Desplaça aquesta pista 10 segons cap a la dreta. A la pista musica1, utilitza la ferramenta d'envolupant per reduir el volum de la música en els moments en els quals sentim la veu del locutor, per tal de deixar-la com a música de fons sense que arribe a molestar.

Enregistrem la nostra veu. Resulta molt fàcil treballar amb la nostra veu amb audacity, bé perquè la importem en forma de fitxer de so, o bé enregistrant-la amb el propi programa. Per enregistrar amb un micròfon sols cal triar un dispositiu d'entrada (generalment el micròfon) i regular el volum d'aquest.

Començarem a enregistrar amb el botó de les eines de control fer pauses durant l'enregistrament premerem el botó d'aturar

. Podem

, i per acabar definitivament

Exercici 3. Ací tens un guió del començament d'un programa de radio i el significat de les abreviatures. Tracta de fer la grabació corresponent. Control

Locutors

PP musica2.mp3

Informàtica Departament d'art i tecnologia

PP Locutors

Col·legi “Sagrado Corazón” (Mislata)

Locutor1: Hola, bon dia. Açò és...

2P musica2.mp3 Locutor2: (títol del programa). Locutor1: Nosaltres som (nom)... Locutor2: i (nom). PP musica2.mp3 PP: Primer pla. 2P: Segon pla.

Efectes. El menú “Efectes” de l'audacity conté una bona quantitat de filtres que ens ajudaran a millorar el so o crear efectes. No els explicarem tots, però farem un repàs a aquells que puguen resultar més útils i fàcils d'utilitzar. –

Amplifica: Serveix per pujar la intensitat del so o baixar-le, ja que la amplificació també pot ser negativa.

–

Canvia el temps: Serveix per fer que la pista es reprodueixca a diferent velocitat. Generalment açò fa que el so es torne més agut o més greu, però aquest filtre tracta d'evitar-ho.

–

Canvia el to: Transforma el so en més agut o més greu, sense afectar el temps. Ideal per transformar una veu en llop o en barrufet.

–

Canvia la velocitat: Aquest filtre canvia la velocitat afectant tant el temps com el to del so.

–

Eco: Afegeix un eco al so.

–

Equalitzador: Permet amplificar o reduir la intensitat de bandes de freqüències per separat.

–

Filtre FFT: Una mena d'equalitzador utilitzant l'algorisme de la transformada de Fourier.

–

Fàding d'inici i fàding final: Augment o disminució progressiva de la intensitat del so.

–

Marxa enrrera: Li dona la volta a la ona, de manera que sona a l'inrevés.

–

Normalitza: Corregeix les diferències de intensitat de diferents pistes, col·locant-les a un volum similar.

–

Phaser i wahwah: Aconsegueixen distorsions del so. Cal experimentar amb elles per tal d'aprender a controlar el seu funcionament.

–

Repeteix: Copia i apega succesivament les vegades que li indiquem.

–

Treure el soroll: Si tenim un soroll de fons es capaç, més o menys, de fer-lo desapareixer.

Informàtica Departament d'art i tecnologia

–

Col·legi “Sagrado Corazón” (Mislata)

Treu sorolls “clic”: Filtre capaç de treure sorolls “clic i pop” típics dels discs de vinil.

Informàtica Departament d'art i tecnologia

Col·legi “Sagrado Corazón” (Mislata)

Tractament de vídeo. De la imatge digital al vídeo digital. Com segurament ja sabràs, les imatges animades del cine o la televisió són una successió d'imatges estàtiques que el nostre cervell interpreta com moviment. Tota la informació tractada pels ordinadors ha d'estar expressada en forma digital (representades amb 0 i 1). Per entendre el concepte de “digital” ficarem un xicotet exemple. Al panell d'un cotxe tenim dos tipus d'informacions sobre la quantitat de combustible que ens queda: un analògic (l'agulla que ens marca el nivell i que pot prendre infinits valors) i un digital (la llum de reserva que sols pot estar encesa o apagada). La informació digital és una successió de ceros i uns, dona igual que siga una imatge, un arxiu de só o un vídeo. Per aquest motiu parlarem a partir d'ara de vídeo digital.

Una imatge emmagatzemada a l'ordinador conté informació sobre el color de cadascun dels puntets (píxels) que la formen, però com aquestos arxius resulten molt grans, és habitual utilitzar formats comprimits, que mantenen una qualitat acceptable ocupant molt menys espai (les imatges jpeg, per exemple, estan comprimides).

Còdecs. Com que el vídeo digital és una successió d'imatges, també tenim el problema del tamany, i també utilitzem la solució dels formats comprimits. Un còdec de vídeo és un programa que permet comprimir i descomprimir un vídeo digital. Un mateix vídeo pot ser comprimit amb diferents còdecs, la qual cosa farà que puguen tenir diferents tamanys i qualitats. Per visualitzar un vídeo caldrà tenir instal·lat a l'ordinador un programa reproductor de vídeo i els còdecs adequats. A la imatge següent pots veure un detall ampliat d'un fotograma d'un vídeo abans i després de ser comprimit. La duració del vídeo és d'uns 30 segons i ocupava 95 MB abans de ser comprimit i 8,5 MB després. Recorda que quan parlem de “tamanys” ens podem referim al tamany de la imatge o al fitxer que conté el vídeo. Moltes vegades també ens referim a açò últim com el “pes” dels fitxers, i es mesura amb múltiples del byte (kilobytes o megabytes), mentre que en lloc de referir-nos al tamany de la imatge parlarem 99

Informàtica Departament d'art i tecnologia

Col·legi “Sagrado Corazón” (Mislata)

de la seua resolució, es a dir, la quantitat de puntets que la formen. Exactament igual que a la fotografia digital, una major resolució implica píxels més menuts i una major qualitat de la imatge. La imatge següent és un detall d'un fotograma de alta i baixa resolució.

Estàndards i formats de vídeo. Les imatges de vídeo poden tenir, en principi, qualsevol tamany, encara que hi ha uns estàndards que provenen de la televisió analògica que defineixen tant el tamany com la quantitat d'imatges per segon (fps) que tindrà un vídeo. Format NTSC

Relació d'aspecte 16:9

fps 30

PAL i SECAM 4:3 25 Fixat que l'estàndard PAL (utilitzat a Espanya) és més quadrat i conté unes poques imatges per segon menys que NTSC (utilitzat a molts paisos del continent americà). Els formats de vídeo digital utilitzen les relacions d'aspecte i els fps mencionats abans, però també defineixen quin tamany tindrà la imatge i quins còdecs seran utilitzats amb la finalitat de que els reproductors estiguen preparats per llegir-los i, moltes vegades, per a que els arxius tinguen un determinat tamany per tal de poder emmagatzemar-los en un suport concret com un CD o DVD.

100

Informàtica Departament d'art i tecnologia

Col·legi “Sagrado Corazón” (Mislata)

A continuació tens una llista dels formats més coneguts. ●

VCD. Pensat per emmagatzemar 74 minuts de vídeo en 650 MB (un CD) utilitzant el còdec MPEG-1. La seua resolució és 352x240(PAL) o 352x288(NTSC). Hi ha modificacions d'aquest format, com CVCD o KVCD, que serveixen per emmagatzemar una pel·lícula en un únic CD mantenint la compatibilitat amb els reproductors VCD.

●

SVCD. Versió millorada de VCD amb qualitat variable utilitzant el còdec MPEG-2. La seua resolució és de 480x576(PAL) o 380x480(NTSC), i permet emmagatzemar sense problemes una pel·lícula en un CD.

●

DVD-Video. Aquest format està pensat per emmagatzemar vídeo digital en un DVD. Utilitza una resolució de 720x576(PAL) o 720x480(NTSC) i el còdec MPEG-2. Admet totes les característiques que coneguem dels DVDs: menús, subtítols, diferents pistes de so, etc.

Contenidors multimèdia. Els fitxers de que tenim als nostres ordinadors contenen a l'hora informació de vídeo i de so, i reben el nom de contenidors multimèdia. Alguns formats contenidors són avi, mpg, qt, ogg i matroska. Per tant, quan trobem un fitxer 101

Informàtica Departament d'art i tecnologia

Col·legi “Sagrado Corazón” (Mislata)

“avi” aquest pot tenir la informació codificada amb una combinació d'algun còdec de vídeo (qualsevol dels mpeg, divx, xvid,...) i de àudio (mp1, mp2, mp3, oggVorbis, Ac3,...). Per poder visualitzar correctament la informació d'aquest fitxer contenidor caldrà tenir instal·lats els còdecs adequats.

El format DV. El format DV (per Digital Video) és el utilitzar per les càmeres digitals per emmagatzemar informació d'àudio i vídeo en les cintes anomenades miniDV. Aquesta informació la podem trobar també al nostre ordinador en forma de fitxers dv o dins de un contenidor multimèdia com un fitxer avi. Aquest és precisament el format amb el que treballa Kino, el programa que utilitzarem per fer tractament de vídeo.

Kino i els formats. Kino no suporta la importació de fitxers que no siguen DV, ja que originàriament està pensat per capturar la informació directament d'una càmera digital connectada a l'ordinador. En canvi, Kino si que pot guardar els nostres fitxers codificats amb els còdecs MPEG 1 o 2 i alguns altres. Per poder obrir qualsevol fitxer amb Kino, utilitzarem un programa capaç de transformar vídeos de diferents formats al format DV. Aquest programa s'anomena ffmpeg, i al contrari que els programes gràfics que hem utilitzat fins ara, l'utilitzarem directament dins d'una terminal de comandaments. Imaginem que tenim un vídeo anomenat proba.avi dins una carpeta anomenada Kino que es troba a la nostra carpeta d'usuari. El primer que farem serà iniciar una terminal de comandaments. El que hi ha escrit a la terminal ens dona informació sobre qui som i on estem. Deuria apareixer ElTeuNom@ElTeuOrdinador:OnEtTrobes$. Generalment la teua carpeta d'usuari serà /home/ElTeuNom, però apareix representada amb el signe ~ per simplificar. Per entrar a la carpeta Kino escriurem pere@Gimli:~$ cd Kino

i premerem el botó de retorn. Ara el lloc on ens trobem deuria ser ~/Kino. amb la ordre ls obtindrem una llista del contingut de la carpeta on ens trobem, així que... pere@Gimli:~/Kino$ ls

Anem a transformar el fitxer de vídeo amb el programa ffmpeg. Aquest programa s'utilitza de la manera següent. ffmpeg -i FitxerOriginal -target TipusDeSortida NomDelFitxerDeSortida 102

Informàtica Departament d'art i tecnologia

Col·legi “Sagrado Corazón” (Mislata)

Per tant l'ordre per transformar el nostre fitxer serà la següent. ffmpeg i prova.avi target paldv prova.dv

Ara ja podem obrir el fitxer prova.dv amb el Kino.

Els modes de Kino. A la finestra de Kino hi ha diferents vistes a les quals podem anar amb els botons de la dreta o amb les tecles F2 a F7. El mode “Edició” ens permetrà previsualitzar el nostre vídeo, copiar, tallar i apegar escenes. Amb els botons que hi ha a la barra de ferramentes podem inserir noves escenes o dividir i juntar les que ja tenim. El mode “Línia de temps” ens permet veure d'una ullada tot un vídeo per poder trobar ràpidament una seqüència en concret sense tenir que visionarlo sencer. El mode “Captura” serveix per portar escenes directament des de la càmera a l'ordinador, cosa que no farem en aquest curs. Pots canviar l'ordre de les seqüències al mode arrossegant-les al guió (Storyboard) de l'esquerra.

“Edició”

simplement

Si en algun moment volem retallar una escena (llevant-li alguns segons del principi o del final) ho podem fer al mode “Retallar”.

Exercici 1. Per començar anem a inserir dos escenes al projecte actual. Amb el botó “Insereix després” afegiràs els arxius “nombres1.avi” i després “nombres2.avi”. Si reproduïm l'escena vegem simplement una seqüència darrere de l'altra. Tracta de canviar l'ordre de les seqüències i de eliminar alguns fragments deixant una primera escena amb els nombres del tres al sis i una segona amb els nombres del quatre al nou. Si ho fas bé, la durada del nou vídeo hauria de ser exactament de 10 segons.

Guardant i exportant el nostre treball. Si anem al típic “Arxiu > Guardar” el que farem serà guardar un projecte. Aquest projecte es guarda en un fitxer de tipus SMIL (Synchronized Multimedia Integration Language), que guarda informació sobre les diferents escenes que composen el projecte. Aquestes escenes es guarden en uns fitxers temporals amb noms semblants a “001.kinofx.dv”. Guardar un projecte ens permet seguir treballant en ell més endavant però recorda que no has d'esborrar ni canviar el nom dels fitxers que intervenen en 103

Informàtica Departament d'art i tecnologia

Col·legi “Sagrado Corazón” (Mislata)

el projecte fins que no acabes de treballar amb ell. “Exportar” és el mode que ens permetrà guardar el nostre projecte en un arxiu de vídeo. Les diferents opcions que tenim són: –

IEE1394, també conegut com Firewire, exporta directament a la càmera. No l'utilitzarem a aquest curs.

–

Fitxer DV, que ens servirà per guardar el vídeo en format DV dins un fitxer contenidor AVI. Si tries “Dividir automàticament” es guardaran les diferents escenes en fitxers separats.

–

Instantànies, guarda cada fotograma del vídeo com una imatge independent.

–

Àudio, guarda sols el àudio en un fitxer WAV, MP3, OGG,...

–

MPEG, guarda el vídeo comprimit amb un còdec MPEG. Recorda el que varem dir sobre els formats de vídeo: necessitarem un d'aquestos fitxers si pensem crear un VCD o DVD i volem evitar tenir que convertir el vídeo posteriorment.

–

DV pipe ens permet visualitzar el vídeo utilitzant “rawplay playback”, i en aquest cas no escriurem cap fitxer al disc. També podem guardar el nostre vídeo comprimit amb altres còdecs (com DivX) utilitzant els programes “mencoder” i “ffmpeg”.

Exercici 2. Guarda el vídeo que has obtingut després d'inserir i retallar “nombres1.avi” i “nombres2.avi” tres vegades segons s'indica a continuació, i després compara al tamany i la qualitat del vídeo obtingut. 1. Fitxer DV Tipus 2. 2. Fitxer MPEG amb format per a DVD. 3. Fitxer DIVX utilitzant el programa FFMPEG (DV Pipe) amb la qualitat més baixa.

Exercici 3. Obri el fitxer “linux_mal.avi”. Després de gravar un anunci de televisió pareix que el muntatge ha eixit malament. Divideix en escenes el vídeo i torna a ordenar-les. Per fer els talls hauràs de fixar-te on es produeix un canvi evident d'escena (demana ajuda al professor). Els primers talls hauràs de fer-los, per exemple, als fotogrames 387 i 518. Tens el guió de l'anunci al fitxer “linux.txt”.

Filtres. Els filtres ens permeten manipular i transformar les imatges i el só dels nostres vídeos. Podem des de transformar una imatge en color a blanc i negre fins coses molt més complicades. Per poder aplicar un filtre sobre una escena caldrà anar al mode FX i triar una de les opcions que hi ha baix de “Filtres de àudio” i “Filtres de vídeo”. Podem fer una previsualització del resultat, i el botó 104

Informàtica Departament d'art i tecnologia

Col·legi “Sagrado Corazón” (Mislata)

“render” aplicarà el filtre.

Filtres de so. No hi ha moltes opcions, però seran molt útils. Podem eliminar completament el so amb la opció “silenci” mentre que les opcions “Fade in” i “Fade Out” serveixen per anar augmentant o disminuint successivament el volum del so. L'opció “FFMPEG Dub” ens permetrà ficar só a un vídeo que no en té a partir d'un fitxer de so de tipus “WAV”.

Exercici 3. Obri el fitxer “nombres1.dv” i amb l'ajuda dels filtres de àudio afegeix-li el so “musica1.wav”. Divideix el vídeo en dos escenes i aplica els filtres “Fade in” sobre la primera i “Fade out” sobre la segona. Guarda el resultat amb el nom “nombres1” com a fitxer mpeg amb qualitat DVD.

Exercici 4. Al fitxer “firefox1.avi” tenim un anunci del navegador firefox. Les escenes ja es troben en ordre, però cal eliminar les “unions” que han quedat entremig i on apareix la pantalla negra o amb soroll blanc. Divideix en escenes, de manera que quede en una un tros de vídeo i en la següent la “unió” i així successivament. Elimina les escenes de les unions i amb el filtre de so “FFMPEG Dub” afegeix l'arxiu de so “firefox1.wav”. Guarda el resultat final com a fitxer mpeg amb qualitat DVD.

Filtres de vídeo. Els filtres de vídeo són algunes de les opcions més espectaculars d'aquest tipus de programes. Els pots trobar al mode “FX” baix dels filtres de àudio. Per comprovar els diferents filtres sols has de seleccionar l'escena sobre la qual el vols aplicar i triar-ne un de la llista. El botó “previsualitzar” et permetrà veure el resultat i “render” aplicarà el filtre.

Exercici 4. Obri el fitxer “poma1.dv” i prova els diferents filtres per tal de familiaritzar-te amb ells. Recorda que, amb freqüència, cal parar la previsualització i tornar-la a ficar en marxa per veure els seus efectes.

Transicions de vídeo. Les transicions ens permeten passar d'una escena a una altra suaument, afegint alguns efectes. Podem trobar les transicions al mode “FX”. Comprovarem el seu funcionament obrint les escenes nombres1.avi i nombres2.avi. 105

Informàtica Departament d'art i tecnologia

Col·legi “Sagrado Corazón” (Mislata)

La transició Switch canvia d'una escena a la següent quan s'ha reproduït un tant per cent de la primera que indiquem amb una barra de desplaçament. Aconseguim un canvi gradual d'una escena amb la següent amb Fade. Amb Push wipe i Barn door wipe una escena desplaça l'altra o es obri com unes cortines. Als dos podem controlar que l'efecte es produeixca de manera vertical o horitzontal. Differences fa que les zones que son iguals (o diferents, segons ho indiquem) apareguen d'un color determinat. Image luma utilitza imatges per fer les transicions. Pots utilitzar plasma.jpg i difraccio.jpg per provar el funcionament. Comprova l'opció “reverse”. Corner out es pareix a Push wipe, però la nova escena apareix de d'un cantó. Croma key on blue transforma en transparent el color blau. Aquest filtre és el que s'utilitza per ficar un fons fals a un vídeo. Pots provar el seu funcionament fent una transició des de l'escena guardada a l'arxiu fonsblau.avi fins qualsevol altra. Tweenies és el tipus de transició més complex de tots, i el que ofereix més possibilitats. El seu funcionament consisteix en definir una sèrie de propietats per a un primer fotograma i per a l'últim, i automàticament el programa calcula la transició. Aquestes propietats són la posició (on 50/50 seria el centre de la pantalla), el tamany (en percentatge), la rotació, la transparència i la deformació (shear). Aprendrem més sobre aquesta transició amb l'exemple següent. Obri un nou projecte amb les escenes guardades a nombres1.avi i nombres2.avi. Utilitzarem la transició Tweenies amb quasi totes les possibilitats que ofereix, per eixe motiu aquest exemple pareixerà complicat. Podem definir les els paràmetres nomenats abans en aquells punts on el botó “Key” estiga polsat. Al nostre exemple serà al primer moment (0,00), a la meitat (0,50), i al final (0,99). Al principi, la imatge apareixerà baix a l'esquerra (coordenades 0-100), molt menuda (tamany 1-1), sense rotació, molt transparent (90%) i molt deformada (500). A la meitat, es trobarà al centre (coordenades 50-50), una mica més gran (3030), sense rotació, amb la mateixa transparència del 90% i sense deformació. Al final, les coordenades seràn 50-50, el seu tamany normal (100-100), una rotació completa (360), sense transparència ni deformació. El resultat final que obtingues haurà de ser igual al fitxer tweenies.avi.

106

Informàtica Departament d'art i tecnologia

Col·legi “Sagrado Corazón” (Mislata)

Exercici 5. Fes una transició entre nombres1.avi i nombres2.avi, imitant tweenies2.avi.

Exercici 6. Obri un projecte nou i afegeix les escenes poma1.avi i poma2.avi. Aplica la transició de vídeo “Fade”. Aplica el filtre SparkTV (el trobaràs en Effect TV). Inventa un títol per al vídeo i afegeix-lo com a subtítol amb un dels filtres. Si apareix un molest soroll elimina'l amb el filtre de so “silenci”.

Crear fragments de vídeo. Dins de l'apartat “FX” trobaràs les pestanyes “Sobreescriure” i “Crear”. La primera serveix per substituir un vídeo que ja existeix amb un que nosaltres creem, per exemple, quan dos escenes son eliminades i substituïdes per una transició entre elles. Podem crear trossos de vídeo a partir de res, consistents en un color, soroll aleatori, o una transició de colors que pot ser en forma de gradient. Utilitza la previsualització per comprovar el funcionament d'aquestes opcions.

Exercici 7. Obri un projecte nou i afegeix les escenes tirano1.dv i tirano2.dv. Anem a fer la mateixa transició que a l'exercici 6, però no des del principi. Retalla tirano01, fent que acabe al fotograma 180, i després divideix-lo en dues escenes al fotograma 120. Retalla tirano2 per a que comence al fotograma 120. Si ho has fet correctament tindràs tres escenes, i la segona i la tercera comencen exactament igual. Utilitza la transició “Image Luma” amb la imatge t_ombra.jpg amb la segona escena. Per finalitzar, crea un fragment de vídeo amb un títol a mode d'introducció.

Crear vídeos a partir d'imatges. “Crear des d'un fitxer” ens servirà per crear una escena a partir d'una 107

Informàtica Departament d'art i tecnologia

Col·legi “Sagrado Corazón” (Mislata)

imatge. De vegades la imatge apareix deformada si té format vertical. La duració d'aquesta escena dependrà del nombre de fotogrames que li indiquem. Recorda que el sistema PAL utilitza 25 fotogrames per segon. “Importar múltiples imatges” te un funcionament molt paregut, però sols haurem de indicar la carpeta on es troben les imatges i seleccionar-les a la llista de baix. Els fotogrames, i per tant els segons, que permaneixerà cadascuna de les fotografies es pot controlar amb el paràmetre de repetició.

Exercici 8. Utilitza la importació de múltiples imatges per crear una escena amb les teues fotografies (cinc fotografies, vuit segons cadascuna). Divideix la escena, separant cadascuna de les fotografies. Crea una escena de color negre i dos segons de duració, i fica-la després de l'última fotografia. Torna al mode FX i a “Sobreescriure” marca la opció que limitarà el efecte als últims 50 fotogrames (dos segons). Utilitza les transicions “Push wipe” i “Barn door wipe” entre imatge i imatge, incloent l'última escena de color negre. Crea una nova escena amb una transició de colors en forma de gradient. Recorda deixar abans totes les transicions en “Sense canvis” o se li aplicaran a l'escena que estàs creant. Utilitza un filtre de vídeo per ficar un títol a l'escena del gradient. Lleva la marca per tal que el pròxim efecte s'aplique a tota l'escena i no sols als últims 50 fotogrames, i utilitza el filtre “QuarkTV” amb l'escena de les fotografies. El resultat serà paregut a “album.avi”.

Exercici 9. Mira el arxiu bfw-trailer.ogg. Es tracta d'un anunci d'un joc d'ordinador anomenat “Battle for Wesnoth”. No podem fer-ho així de bé, però segur que amb algunes captures de l'escriptori pots fer un bon anunci del programa Kino.

Exercici 10. El teu professor ficarà a la teua disposició el curt “Elephants Dream”. Fes un tràiler d'uns 40 segons de duració. Com que transformar tot el curt al format DV ocuparia molt espai al disc, caldrà que guardes els fragments que et pareguen interessants amb el programa avidemux, i després transformes aquestos fragments amb ffmpeg. 108

Informàtica Departament d'art i tecnologia

Col·legi “Sagrado Corazón” (Mislata)

Creació de pàgines web amb HTML. La teranyina mundial. La world wide web (en anglès teranyina arreu del mon), també coneguda com WWW és un sistema de texts interconnectats que poden ser accedits a través d'internet. Aquestos documents es troben en els anomenats servidors de webs (també llocs web) i poden ser llegits per programes anomenats navegadors web o browsers. Utilitzar navegadors per veure planes web se li coneix habitualment com “navegar” per la web. A diferència d'altres texts, els que formen la WWW contenen enllaços a molts altres, a imatges, arxius d'àudio o vídeo i també poden servir per a que l'usuari envie informació al servidor de manera interactiva. Per aquest motiu el text que forma la WWW s'anomena “hipertext”. Cal no confondre internet amb la WWW. La primera és una xarxa a través de la qual circula informació molt variada mentre que la segona és sols un dels molts serveis que ofereix internet. A través d'internet podem accedir a fitxers que es troben dins d'altre ordinador per FTP o enviar correus electrònics, sense que açò tinga res a veure amb la WWW. De fet, una versió molt més reduïda de l'internet que coneguem ara va començar a funcionar a l'any 1983, mentre que la WWW va començar a funcionar molt més tard, a l'any 1989.

W3C. El World Wide Web Consortium (W3C) és l'organisme encarregat de produir estàndards per al WWW. Aquestos estàndards son les normes que regulen el funcionament del WWW i que són necessàries per garantir el bon funcionament del WWW. Cal recordar que una plana web pot ser accedida des d'una gran varietat d'aparells distints (des d'un telèfon mòbil fins una nevera, passant per un ordinador), i amb programes molt diversos. El W3C, dirigit per Tim BernersLee, que és el creador original de l'HTML i el protocol HTTP, tracta de mantenir el caràcter obert de la WWW, per evitar que els drets d'explotació d'aquesta, que actualment no son propietat de ningú, puguen caure en mans d'un monopoli.

Hipertext. L'hipertext és un text digital que pot ser llegit de manera no seqüencial. Açò significa que un text “no hipertextual” té una estructura lineal: pàgines que es segueixen unes a les altres i paràgrafs correlatius. En canvi l'hipertext es pot imaginar com una sèrie de documents, imatges, so, i tot tipus d'informació multimèdia relacionats entre si mitjançant enllaços o “links”. Al moment actual el millor exemple d'informació hipertextual son les planes web, escrites amb el llenguatge HTML. 109

Informàtica Departament d'art i tecnologia

Col·legi “Sagrado Corazón” (Mislata)

HTML. HTML és un llenguatge que serveix per descriure i crear documents d'hipertext i és el llenguatge utilitzar per fer planes web. Aquest llenguatge pot ser escrit amb qualsevol editor de textos, però el resultat final sols el podrem veure amb un navegador. Altra opció és utilitzar els editors anomenats WYSIWYG (What you see is what you get) que mostren l'aspecte del text mentre l'estem editant i generen automàticament el codi HTML. La forma més habitual de fer una plana web és utilitzar un d'aquestos editors i anar, al mateix temps, revisant i modificant el codi HTML generat per el programa.

Etiquetes del llenguatge HTML. Quan s'utilitza el llenguatge HTML es afegeixen etiquetes al text per estructurar-lo i determinar la manera com apareixeran al navegador. Vejam un exemple mínim de document HTML. <html> <head> <title>Exemple</title> </head> <body> <p>Açò és un exemple</p> </body> </html>

Com es pot comprovar, les etiquetes del llenguatge HTML són lletres o paraules tancades dins els signes “<” i “>”. Aquestes etiquetes es tanquen i es obrin com, per exemple <b> i </b>, que indiquen al navegador on comença i on acaba un text en negreta. Estudiem ara el significat de les etiquetes del exemple anterior: <html> és l'etiqueta que indica al navegador que el que ve a continuació està escrit en HTML. <head> indica el començament de la capçalera del document. La capçalera conté informació sobre el document que no serà mostrada directament a la finestra del navegador com el títol, nom de l'autor, paraules clau, etc. En aquest exemple podem veure el títol tancat dins les etiquetes <title> i </title>. Després de tancar la capçalera troben el cos del document dins les etiquetes <body> i </body>. El cos del document és el que es mostrarà a la finestra del navegador i es ací on trobarem la major part de les etiquetes, que s'encarregaràn d'estructurar el text. Les últimes etiquetes son </body> que tanca el cos del document i </html> que finalitza el document HTML.

110

Informàtica Departament d'art i tecnologia

Col·legi “Sagrado Corazón” (Mislata)

Per veure un exemple una mica més complet de codi HTML pots obrir qualsevol plana web a un navegador i buscar al menú “veure” la opció que et mostra el “codi font de la pàgina” i que tenen pràcticament tots els navegadors.

Capçaleres i paragrafs. Una vegada que tenim un document HTML bàsic podem començar a afegir les etiquetes del cos del document. Les primeres que afegirem són les de els títols i els paragrafs. Els títols van ordenats per importància, sent <h1> el més important i <h6> en menys. Podem incloure al cas del nostre document: <h1>Una capçalera important</h1> <h2>Una capçalera una mica menys important</h2>

Cadascun dels paràgrafs és indicat amb l'etiqueta <p>: <p>Aquest és el primer paràgraf del meu document.</p>

Quan acabem un títol o un paràgraf es produeix automàticament un bot de línia. En canvi les especificacions del llenguatge HTML inclouen el no fer cas al bots de línia o als excessius espais. Escriu el següent codi, al qual s'han ficat més espais i més bots de línia dels necessaris, i després pots veure el resultat al navegador. <p>Un paràgraf amb molts bots de línia i mols espais</p>

Llistes. Hi ha dos tipus de llistes: les numerades (o ordenades) i les no numerades (o desordenades). Les llistes ordenades comencen amb l'etiqueta <ol>, i cadascun dels element de la llista el marquem amb l'etiqueta <li>. A continuació pots veure un exemple: <ol> <li>Primer element</li> <li>Segon element</li> <li>Tercer element</li> </ol>

Si en lloc de una numeració vulguem simplement marques davant dels element de la nostra llista sols haurem de canviar les etiquetes <ol> i </ol> per <ul> i </ul>. Hi ha un tipus especial de llistes: les llistes de definicions. En aquestes, els element van de dos en dos. Aquestes llistes comencen comencen amb l'etiqueta <dl> i cadascun dels elements té una paraula <dt> i una definició 111

Informàtica Departament d'art i tecnologia

Col·legi “Sagrado Corazón” (Mislata)

<dd>. Observa l'exemple: <dl> <dt>Primera paraula.</dt> <dd>Primera definició.</dd> <dt>Segona paraula.</dt> <dd>Segona definició.</dd> <dt>Tercera paraula.</dt> <dd>Tercera definició.</dd> </dl>

Les llistes poden ser també elements d'altres llistes, i trobar-se unes d'ins d'altres, combinant, en ocasions, diferents tipus. <ol> <li>Primer element de la llista principal</li> <li>Segon element de la llista principal. <ul> <li>Primer element de la llista secundària</li> <li>Segon element de la llista secundària</li> </ul> </li> <li>Tercer element de la llista principal</li> </ol>

Definició de tipus de document. Encara que el document que estem preparant ja pot ser visualitzat dins un navegador, encara falten un parell de detalls per considerar-lo totalment correcte. El primer és una definició de tipus de document, que indica el tipus i versió del llenguatge que anem a utilitzar per escriure el nostre document, en aquest cas “HTML 4.01”. Aquesta definició de tipus de document anirà al principi, abans inclús de la etiqueta <html>. També cal afegir informació sobre el conjunt de caràcters que utilitzarem. Per al nostre cas utilitzarem el conjunt descrit dins la norma ISO 8859-1, que inclou tots el caràcters dels llenguatges d'europa occidental. Tots els document tindran, per tant, les línies següents: <!DOCTYPE HTML PUBLIC "//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

112

Informàtica Departament d'art i tecnologia

Col·legi “Sagrado Corazón” (Mislata)

<html> <head> <title>Títol del document.</title> <meta httpequiv="ContentType" charset=iso88591">

content="text/html;

</head> <body> </body> </html>

Validació de documents. El W3C té un programa que comprova la correcció de documents de diferents tipus, inclòs HTML, i l'adequació a l'estàndard. Ara podem utilitzar-lo per comprovar el nostre document. Dins la plana web http://validator.w3.org trobarem la opció de validar una plana web que es trobe a internet o un arxiu del nostre disc dur. Utilitzeu la segona per a validar el document que esteu fent. Si el vostre document aconsegueix passar la validació apareixerà un missatge com el següent:

Taules. Les taules al llenguatge HTML comencen amb l'etiqueta <table> i finalitzen amb l'etiqueta </table>. També haurem d'indicar on comença i acaba cadascuna de les files i les cel·les, amb les etiquetes <tr> i <td> respectivament. Per exemple: imaginem que tenim que crear una taula amb dos files i tres 113

Informàtica Departament d'art i tecnologia

Col·legi “Sagrado Corazón” (Mislata)

columnes. El códi serà el següent: <table> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td>D</td> <td>E</td> <td>F</td> </tr> </table>

Amb el qual obtindrem una taula com aquesta: A B C D E F Cal que us fixeu en que el resultat serà exactament el mateix si escrivim el codi de manera diferent, com, per exemple: <table> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> </table>

Qualsevol d'aquestes formes d'escriure la taula són vàlides, trieu una o altra per tal d'aconseguir que el vostre codi siga fàcil d'escriure i d'entendre. imatges.

Noms de fitxers. Anem a començar a referir-nos a altres fitxers dins el nostre codi HTML, així que és un bon moment per comentar algunes particularitats respecte als noms que poden tenir els fitxers que composen la nostra web. Per començar cal tenir en compte que la nostra web pot ser accedida des de qualsevol lloc del mon, així que cal estar segurs de que els caràcters que utilitzarem als noms dels nostres arxius es troben als teclats dels possibles visitants. Aquest és el motiu per el qual no tots els caràcters estan acceptats com, per exemple la “ç” i la “ñ”, que no es troben als teclats dels ordinadors de gran part del món. En general, podrem utilitzar als noms dels nostres fitxers lletres majúscules i minúscules (encara que es recomanen minúscules), números i els caràcters del guió “-” i el subratllat “_”. Per tant no són vàlids i cal evitar les lletres accentuades i els espais. 114

Informàtica Departament d'art i tecnologia

Col·legi “Sagrado Corazón” (Mislata)

Altra qüestió es com referir-nos al lloc on es troba un fitxer. En general, utilitzarem un punt “.” per referir-nos a la carpeta on ens trobem, i dos punts “..” per a la inmediatament superior a la que ens trobem. Vegem un exemple. Ací tenim una estructura de carpetes, segons la qual dins la carpeta “Vegetals” es troben “Fruites” i “Verdures”. Dins d'aquestes hi ha tres carpetes anomenades “Pera”, “Poma”, “Taronja” i “Ceba”, “Espinacs” i “Lletuga”, respectivament. Imaginem que el nostre document HTML es troba dins la carpeta “Taronja”. Podem dir que ens trobem dins d'aquesta carpeta, i ho tindrem en compte quan ens referim a altres carpetes dins del codi que escrivim. Per referir-nos a la carpeta “Taronja” utilitzarem el punt, i per referir-nos a Fruites els dos punts. Per tant per escriure el nom de dos arxius que es troben disn d'aquestes carpetes podem escriure “./nom_arxiu” i “../nom_arxiu”. També ens podem referir a un arxiu que es troba dins la carpeta “Verdures” amb “../Verdures/nom_arxiu” o dins de la carpeta “Ceba” amb “../Verdures/ceba/nom_arxiu”. Finalment, per indicar un arxiu que es troba dins la carpeta “Verdures” podem escriure “../../nom_arxiu”. Recorda que tots aquests exemples suposen que ens trobem (el nostre document es troba) dins la carpeta “Taronja”. En el cas d'utilitzar majúscules (per exemple als noms de les carpetes) caldrà tenir molta cura, ja que els navegadors les distingeixen i si escrivim amb majúscula un nom que estiga en minúscula o al contrari, el navegador es queixarà de que no troba el fitxer, i segurament es produirà un error. Per tant no són la mateixa carpeta “imatges” que “Imatges”, “IMATGES” o “ImAtGeS”. Es recomana utilitzar solament minúscules per evitar problemes.

Imatges. Per inserir una imatge utilitzarem la etiqueta <img>. Aquesta etiqueta és especial per ser una de les que no tenen tancament (no existeix </img>) i per utilitzar un atribut dins l'etiqueta. Un atribut fa que la etiqueta es comporte d'una manera determinada, i utilitzarem un atribut per indicar, en aquest cas, quina és la imatge que volem inserir. Imaginem que tenim una carpeta (el nom no ens interessa) on es troben els document HTML de la nostra web, i també altra carpeta anomenada “imatges” 115

Informàtica Departament d'art i tecnologia

Col·legi “Sagrado Corazón” (Mislata)

on tenim les imatges que volem inserir. Per inserir una imatge utilitzarem una etiqueta pareguda a aquesta: <img src=”./imatges/dibuix.jpg” alt=”Aci hi ha un dibuix”>

Fixat, que sols hi ha dos espais en tota la línia: abans de “src” i de “alt”. El atribut “alt” que també fiquem dins d'aquesta etiqueta indica quin és el text que apareixerà als dispositius que no puguen mostrar imatges (per exemple, les pantalles d'alguns telèfons mòbils) o si el usuari ha desactivat les imatges al seu navegador.

Enllaços. Els enllaços són una característica molt interessant que fan que una plana web siga un document d'hipertext, ja que permeten “enllaçar” uns document amb altres i als lector obrir nous documents amb un sol clic de ratolí. Un enllaça es troba entre les etiquetes <a> i </a>, i pot ser un tros de text, imatge o ambdós. També du un atribut, que indica el fitxer o direcció web a la qual volem enllaçar. Per ficar alguns exemples, podem utilitzar la paraula “Enllaç” per enviar als visitants a altre document <a href=”./altre_document.html”>Enllaç</a>

o la frase “El meu col·legi” convertida en un enllaç a la web del nostre col·legi <a href=”http://sagradocorazon.hhdc.net”>El meu col∙legi</a>

o una imatge amb el logotip del col·legi que és un enllaç cap a la seua web. <a href=”http://sagradocorazon.hhdc.net”> <img src=”logotip.jpg” alt=”Sagrado Corazon”> </a>

L'estil del nostre text. De moment el nostre document té un aspecte una mica pobre, i ha arribat el moment de donar-li una mica de color. Als documents HTML trobarem la informació o contingut de la nostra plana, mentre que l'aspecte es defineix a altres documents anomenats “Cascading Style Sheets” o CSS. Aquestos documents contindran la informació sobre com presentar en pantalla el contingut dels documents HTML. Aquesta separació serveix, entre altres coses, per asegurar-nos de que les nostres planes tenen un aspecte homogeni (ja que utilitzen un únic document CSS) i fàcil de modificar (ja que modificant el document HTML, canvien tots els documents de la nostra web), a més separar el contingut de la presentació també facilita la navegació de les planes web mitjançant dispositius que no siguen els habituals: penseu, per exemple en la pantalla d'un telèfon mòbil o un terminal Braille. Per utilitzar un fitxer CSS cal que enllacem el nostre document HTML amb una 116

Informàtica Departament d'art i tecnologia

Col·legi “Sagrado Corazón” (Mislata)

etiqueta que ficarem a la capçalera. A l'exemple següent enllacem a un fitxer anomenat estil.css que es troba a la mateixa carpeta. <link rel="stylesheet" type="text/css" href="estil.css">

El nostre primer fitxer CSS. Aquest és un exemple de document CSS: body { color: black; background: white; }

Aquest CSS defineix el color de fons del cos del document com blanc i el text com negre. Hi altres colors que pots utilitzar per el seu nom, però també per un codi RGB hexadecimal, de manera que “roig” serà el mateix que #F00. Ací tens una llista dels colors “segurs”, es a dir, aquells que quasi tots els navegadors i configuracions de pantalla mostraran correctament.

El següent fitxer CSS canviarà l'aspecte de totes les taules del nostre document: table { border: 5px solid #600; background: #900; } td {

117

Informàtica Departament d'art i tecnologia

Col·legi “Sagrado Corazón” (Mislata)

border: 3px solid #c96; background: #fc9; color: #303; }

Tractant blocs de contingut: l'etiqueta DIV. Les etiquetes <div> i </div> delimiten un bloc del nostre document que pot contenir qualsevol dels element utilitzats anteriorment: capçaleres, paràgrafs, llistes, imatges,... Aquesta etiqueta ens permetrà definir característiques globals per a parts de la nostra web. Nosaltres la utilitzarem per donar-li una estructura en dues columnes: una esquerra per als enllaços i altra per a la zona principal. Observa l'exemple: D'una banda afegim al nostre document CSS /* Document CSS */ .columna_esquerra { background: #eec; color: #000; float: left; width: 20%; border: 2px dotted #000; margintop: 50px; marginright: 10px; padding: 10px; } .columna_principal { background: #cee; color: #000; float: left; width: 70%; margintop: 5px; marginbottom: 5px; bordertop: 1px solid #000; borderleft: 1px solid #000; borderright: 1px solid #000; borderbottom: 1px solid #000;

118

Informàtica Departament d'art i tecnologia

Col·legi “Sagrado Corazón” (Mislata)

padding: 10px; }

i d'altra establim quins elements quedaran a l'esquerra i quins a la dreta dins el nostre document HTML ... <body> <h1>Aquest títol quedarà fora de la divisió en columnes.</h1> <div class=”columna_esquerra”> ... ... </div> <dv class=”columna_principal”> ... ... </div> <p>Aquest paràgraf quedarà després de la divisió en columnes.</p> </body> </html>

I el resultat serà semblant a aquest:

En aquest exemple hem utilitzat una bona quantitat de atributs d'estil que cal explicar un per un. background i color: ja els coneixes, i ens permeten definir el color del fons i del text. 119

Informàtica Departament d'art i tecnologia

Col·legi “Sagrado Corazón” (Mislata)

float: d'una banda utilitzar aquest atribut fa que l'element no siga col·locat segons el flux normal del document (es a dir, un element baix d'altre successivament) i a més ens permet alinear-los. Els valors possibles són left i right. A continuació tens dos exemples d'imatges: la primera està col·locada de manera normal, i les dos segones son flotants i alineades a dreta i esquerra.

Com aplicar diferents atributs a imatges individuals ho veurem més endavant. width: Determina l'amplària. Els valors possibles son mesures en pixels com 30px, o percentatges del ample com 25%. border: Ens permet dibuixar el contorn d'un element. La manera de definir aquest atribut és border <amplària> <tipus> <color>. Els tipus de contorns admesos són: none, dotted, dashed, solid, double, groove, ridge, inset i outset. margin: Fa que un element no estiga totalment apegat als dels seu voltant, deixant un espai. Aquesta etiqueta és la responsable dels espais entre el primer títol i els dos requadres de color. Podem definir l'atribut margin o bé per separat els que ens interessen (margin-top, margin-left, margin-right i/o margin-bottom). padding: És la separació entre el límit d'un element i el text que conté. Fa que el téxt dels quadres de color no estiga tocant la línia del contorn. Es poden definir per separat els quatre costats igual que fèiem amb l'atribut margin.

Modificant l'aspecte d'un element concret. Ja hem vist que amb el fitxer CSS podem modificar l'aspecte de tots els elements d'un determinat tipus, o bé delimitar amb l'etiqueta DIV una àrea a modificar. Ara veurem una tercera manera que ens permetrà modificar un o varis elements en concret ( una paràgraf, un títol, una cel·la,...) sense modificar la resta. Al nostre document CSS afegirem una nova entrada amb el tipus d'element i el nom que li donarem separats per un punt. Fixat a l'exemple: p.roig { color: red ; border: 3px dotted #800 ; width: 30% ;

120

Informàtica Departament d'art i tecnologia

Col·legi “Sagrado Corazón” (Mislata)

} td.c_roja { background: red; } td.c_blava { background: blue; } td.c_groga { background: yellow; }

I al nostre document HTML afegirem l'atribut CLASS a les etiquetes dels elements que ens interese modificar. ... <body> <p>Aques paràgraf no es modifica.</p> <p class="roig">Però aquest es torna roig.</p> <table> <tr> <td>Text</td> <td>Text</td> <td>Text</td> </tr> <tr> <td class="c_roja">Text</td> <td class="c_blava">Text</td> <td class="c_groga">Text</td> </tr> </table> </body> ...

El resultat son paràgrafs amb aspectes diferents i cel·les de colors. Resum de l'ús dels fulls d'estil.

121

Informàtica Departament d'art i tecnologia

Col·legi “Sagrado Corazón” (Mislata)

En la seguent taula tens un resum del usos que hem fet al nostre document css. Utilitat

Al document HTML...

Al document CSS...

Tots els elements d'un <p>, <table>, <tr> o p {...} determinat tipus que qualsevol etiqueta table {...} apareixen al document. utilitzada amb tr {...} normalitat. Aquells elements (poden ser un o més) d'un determinat tipus que nosaltres especifiquem que pertanyen a una categoria determinada.

p.exemple {...}

table.colorejada {...} td.fons_roig {...}

Blocs de text delimitats <div class=”important”> .important {...} dins la nostra web. ... </div>

Publiquem la nostra web.

Exercici1 El primer que farem de la nostra web serà una estructura bàsica en dos columnes. La columna de l'esquerra ens servirà per als enllaços, i la de l'esquerra per al contingut. La columna dels enllaços serà igual en totes les pàgines, i utilitzaràs un únic fitxer CSS per a totes.

122

Informàtica Departament d'art i tecnologia

Col·legi “Sagrado Corazón” (Mislata)

Exercici 2 Ara que ja tens la estructura bàsica de la pàgina pots començar a donar-li una mica de contingut. Comença a escriure el text de la teua pàgina, utilitzant taules i llistes si es necessari.

Exercici3. Anem a decorar la nostra pàgina. Modifiqueu el arxiu CSS (i els HTML si és necessari) per donar-li a la nostra web més colors i un aspecte més atractiu. Afegiu imatges fetes per vosaltres mateixos i substituïu amb algunes d'elles algun títol o feu botons per als enllaços. Una bona idea és utilitzar els Scripts-Fu del Gimp per a fer títols.

123

Informàtica Departament d'art i tecnologia

Col·legi “Sagrado Corazón” (Mislata)

124

Informàtica Departament d'art i tecnologia

Col·legi “Sagrado Corazón” (Mislata)

Recull de webs. A les següents pàgines web podràs trobar informació o els programes utilitzats en aquest curs. Molts d'ells tenen versions per a GNU/Linux i per a altres sistemes operatius.

Programes. OpenOffice.org

Inkscape

http://ca.openoffice.org L'OpenOffice.org és un paquet ofimàtic que inclou una base de dades relacional (Base) un processador de textos (Writer), el full de càlcul (Calc), el gestor de presentacions (Impress) i l'eina de dibuix (Draw) http://www.inkscape.or g

Gimp

http://www.gimp.org

Povray

http://www.gimp.org.es http://www.povray.org

Firefox Bluefish Nvu Audacity Qcad 7-zip

http://www.mozillaeurope.org/es/products/ firefox/ http://bluefish.openoffic e.nl http://nave.escomposli nux.org/productos/nvu/ http://audacity.sourcefo rge.net/?lang=es http://www.ribbonsoft.c om/qcad.html http://www.7-zip.org/es/

Associacions i projectes. GNU Softcatalà W3C Debian

http://www.gnu.org/home. es.html http://www.softcatala.org/ http://www.w3c.org http://www.debian.org 125

Informàtica Departament d'art i tecnologia

Lliurex

Col·legi “Sagrado Corazón” (Mislata)

http://lliurex.net

126