implementació d’una eina interactiva de suport a les pràctiques...

Departament d’Enginyeria Electrònica Eléctrica i Automàtica

Implementació d’una Eina Interactiva de Suport a les pràctiques l’Assignatura de

Sistemes Digital TITULACIÓ: Enginyeria Tècnica Industrial en Electrònica Industrial

AUTOR: Mariano Tapia Luque DIRECTOR: Nicolau Cañellas Alberich

DATA: Gener del 2009.

Índex

1

Memòria Descriptiva

1.- Introducció a l’Eina Interactiva ......................................................................... 2

1.1.- Objectius del projecte .............................................................................. 2

1.2.- Justificació ................................................................................................ 2

1.3.- Destinataris .............................................................................................. 3

1.4.- Titular ....................................................................................................... 3

2.- Requisits dels Sistemes i Material utilitzat ....................................................... 4

2.1.- Introducció ............................................................................................... 4

2.2.- Requisits del sistema ............................................................................... 4

2.2.1.- Hardware .......................................................................................... 4

2.2.2.- Materials ........................................................................................... 5

2.2.3.- Software ........................................................................................... 5

3.- Contingut de l’Eina Interactiva ......................................................................... 7

3.1.- Introducció ............................................................................................... 7

3.2.- Subdivisió de la pàgina web .................................................................... 7

3.3.- Disseny de la web .................................................................................... 8

3.4.- Ubicació i estructura dels arxius .............................................................. 11

3.4.1.- Pràctiques ........................................................................................ 12

3.4.2.- Enllaços ........................................................................................... 15

3.4.3.- Bibliografia ....................................................................................... 16

3.4.4.- Animacions ...................................................................................... 16

3.5.- Marcs ....................................................................................................... 17

3.6.- Pàgina d’estils........................................................................................... 18

3.7.- Menús ...................................................................................................... 30

4.- Creació/actualització de la web ....................................................................... 32

4.1.- Introducció ............................................................................................... 32

4.2.- Formats i fitxers utilitzats .......................................................................... 32

4.3.- Creació/actualització de fitxers format text .............................................. 34

4.3.1.- Creació/actualització de marcs ........................................................ 34

4.3.2.- Creació/actualització d’estils ............................................................ 36

Índex

2

4.3.3.- Creació/actualització de taules ........................................................ 39

4.3.4.- Actualització del Menú de l’esquerra................................................ 40

4.3.5.- Actualització del Menú dels temes (dalt).......................................... 41

4.3.6.- Creació/actualització dels índexs ..................................................... 42

4.3.7.- Actualització subapartats pràctiques................................................ 43

4.4.- Creació/actualització dels fitxers d’imatge ............................................... 44

4.5.- Creació/actualització de simulacions i animacions .................................. 45

4.5.1.- Creació de simulació comparador-sumador .................................... 46

4.5.2.- Publicació de l’arxiu.......................................................................... 53

4.6.- Actualització d’una pàgina concreta......................................................... 54

4.6.1.- Actualització de taules...................................................................... 54

4.6.2.- Actualització del menú “més apartats”.............................................. 56 4.6.3.- Actualització del menú dels temes de la pràctica “Conversor de

Binari a BCD amb Lògica Discreta”................................................... 57

4.6.4.- Actualització de l’índex de la “Conversor de Binari a BCD amb Lògica Discreta”................................................................................. 57

4.6.5.- Actualització del contingut de l’arxiu “Realització al laboratori.html” de la “Conversor de Binari a BCD amb Lògica Discreta”.................. 58

4.6.6.- Actualització d’imatges de la“Conversor de Binari a BCD amb Lògica Discreta”................................................................................. 61

4.7.- Publicar la web a internet.......................................................................... 62

5.- Guia d’utilització de l’Eina Interactiva............................................................... 63

5.1.- Introducció................................................................................................ 63

5.2.- Requisits tècnics....................................................................................... 63

5.3.- Navegació per la web............................................................................... 63

6.- Conclusions finals............................................................................................. 66

7.- Bibliografia........................................................................................................ 68

8.- Referències a manuals..................................................................................... 69

Índex

3

Plecs de condicions

1.- Introducció......................................................................................................... 2

2.- Condicions Generals......................................................................................... 2

3.- Condicions Econòmiques................................................................................. 2

4.- Condicions Tècniques....................................................................................... 2

5.- Condicions Facultatives.................................................................................... 3

Annexes

Annex 1 ................................................................................................................. 2


1



2

1.- Introducció a l’Eina Interactiva

1.1.- Objectius del projecte El projecte que es presenta en aquest informe vol ser un ajut a la realització de

les pràctiques de l’assignatura Electrònica Digital que s’imparteix al primer curs d’Enginyeria Tècnica Industrial especialitat en Electrònica de la Universitat Rovira i Virgili. Aquest ajut podrà ésser emprat tant com a contacte previ abans de la sessió al laboratori com per les possibles dubtes que hagin sorgir amb la realització d’aquestes.

El que pretenem realitzar en aquest projecte és facilitar la comprensió,

mitjançant explicacions clares, exemples visuals i animacions, del comportament dels diferents dispositius i mostrar el perquè dels resultats que obtenim a les sessions del laboratori.

Aquesta eina interactiva no té la finalitat d’explicar de forma massa teòrica les

causes i procediments dels dispositius, ja que aquesta pàgina web té uns enllaços a la teoria de l’assignatura i als manuals d’aquestos, sinó la claredat alhora de la realització de les pràctiques.

En resum, una nova eina multimèdia amb una gran capacitat de ser modificada,

fet que creiem vital per la web que volem dissenyar. Sense actualització no serem capaços de mostrar tota la informació d’interès a l’alumnat.

1.2.- Justificació Fins ara no existia cap eina suplementària a les explicacions que s’imparteixen

al laboratori per a poder entendre d’una manera clara la finalitat de les pràctiques de l’assignatura de Sistemes Digitals.

En ocasions la massificació dels alumnes a les sessions de laboratori o la poca

preparació prèvia de les pràctiques per part d’aquestos fa que no es tingui prou temps a aquestes sessions per programar o muntar els circuits que són estudiats i a més poder entendre el seu comportament.

Hem escollit internet per les moltes i variades possibilitats que ofereix la xarxa.

En primer lloc, es pot consultar des de qualsevol indret. El segon avantatge que ofereix, és la possibilitat de disposar d’aquesta eina d’una manera continuada sense limitacions de temps i de repeticions per comprovar i visualitzar els resultats dels muntatges i programacions realitzades al laboratori.

Pel que fa al disseny hem partit de la web realitzada de la teoria de

l’assignatura per donar una homogeneïtzació entre teoria i pràctiques, hem avaluat les mancances que si derivàvem i hem pensat en millorar tota la interfície.

Les principals millores han estat: un menú superior més complert que ens

permet navegar per la web d’una manera més senzilla i sense haver de utilitzar l’acció “enrere” per accedir a pàgines de la mateixa web i s’ha relacionat de manera directa, les dos pàgines webs (teoria i pràctica). Per aquest fi s’ha hagut de modificar també la web existent de teoria de l’assignatura per tal d’actualitzar els links. També s’ha modificat el menú esquerra per tal d’anar a l’inici de la pràctica en qualsevol moment facilitant la realització de les sessions de laboratori.


3

S’ha de ressaltar que la qualitat més important d’aquesta eina és la forma en

que s’han abordat la realització de les pràctiques. La meva visió des de la inexperiència que provoca el temps que ha passat des

de la primera vegada que vaig fer les pràctiques fa que la redacció dels estudis previs i dels resultats obtinguts siguin des de la visió d’un alumne que s’enfronta per primer cop a una sessió a laboratori i no d’un professor que te totalment assolits aquests coneixements. 1.3.- Destinataris

Evidentment, com a complement a la docència de l’assignatura de Sistemes

Digital, els principals usuaris es preveu que siguin els propis alumnes d’aquesta assignatura.

Es pretén donar les màximes facilitats als alumnes per adquirir els

coneixements que es desprenen de les sessions al laboratori, això s’intenta aconseguir amb les animacions dels resultats de les pràctiques i del comportament dels dispositius emprats i d’aquesta manera trencar la barrera que es crea en la lectura de l’enunciat de la pràctica o la impossibilitat de realitzar l’estudi previ d’aquesta.

1.4.- Titular El titular del projecte és la URV –Universitat Rovira i Virgili-, concretament, el

DEEEA –Departament d’Enginyeria Electrònica, Elèctrica i Automàtica-, amb adreça a:

Escola Tècnica Superior d’Enginyeria Av. Països Catalans 26

43007 Tarragona


4

2.- Requisits del Sistema i material utilitzat 2.1.- Introducció

En aquest apartat es vol presentar tot el material que hem utilitzat per poder desenvolupar l’aplicació. Al ser una aplicació informàtica, només hem utilitzat hardware i software.

En els següents apartats s’exposen les necessitats bàsiques tan de software

com de hardware per la realització de la web. Per a l’actualització, també caldrà aquest software. 2.2.- Requisits del sistema 2.2.1.- Hardware � Ordinador Per la realització d’aquesta aplicació hem de utilitzat un ordinador amb les següents característiques: Ordinador portàtil HP Genuine Intel ® CPU T2300 Freqüència de treball 1,66 GHz Memòria RAM DDR 504 KB Disc dur serial-ata 60 GB Tarja de vídeo integrada a placa base Gravadora de DVD-ROM +/-R

� Impressora Hem utilitzat per la realització de l’aplicació les següents impressores: HP Color LaserJet 2600n Resolució de fins 600x600 ppp (punts per polzada) 8 ppm negre / 8 ppm color Velocitat de processador 264 MHz � Router Hem pogut connectar-nos a Internet a través d’un router amb les següents característiques: 3Com, Office connect ADSL Wireless 11g Firewall Router I la xarxa utilitzada ha estat la de l’empresa ya.com


5

2.2.2.- Materials � CD’s gravables � Fungibles: tòner impressora, paper de 80g/m2 i de 100g/m2,… 2.2.3.- Software El programari utilitzat per l’el·laboració d’aquesta aplicació han estat el següent: � Microsoft Windows XP Professional Versión 2002 SP2

Tot i que aquesta no es l’última versió del sistema operatiu Windows, és una de

les més estables que han sortit d’aquest proveïdor i garanteix una compatibilitat casi absoluta amb tots els perifèrics i programes que existeixen avui en dia.

� Macromedia Dreamweaver 4.0

S’ha escollit aquest programa per poder editar el codi html de l’aplicació.

Aquest programa d’àmplies prestacions, permet la gestió integral d’un lloc web, entre els quals destaquem la possibilitat de penjar els fitxer directament al servidor, per tal, que puguin ser visualitzats des de l’internet.

Un altre dels altres avantatges és la possibilitat de poder visualitzar

simultàniament el codi html i la previsualització de com queda la pàgina web quan un usuari hi accedeixi.

� Adobe Flash CS3 Professional

Programa d’animació que hem escollit per realitzar totes les animacions

del comportament dels dispositius empleats a les sessions de laboratori i simulacions dels resultats de les diferents pràctiques.

Els arxius que aquest programa genera són compatibles amb la majoria

de navegadors i, a més, existeixen visualitzadors gratuïts que es poden descarregar d’internet. � Internet Explorer 7

Encara que tampoc no és l’última versió del navegador de Microsoft, no

repercuteix alhora de visualitzar qualsevol tipus de pàgina web.

� Microsoft Word 2003 Aquest processador de text és el que ofereix més compatibilitat amb tots

els formats. L’hem utilitzat per passar els arxius del temari de format doc a format html. A partir del fitxer html ja hem fet les modificacions amb el programa Macromedia Dreamweaver 4.0.

� Adobe Acrobat 8.1.2 Professional

Programa que hem utilitzat per la visualització dels arxius PDF que hem utilitzat

a les pràctiques, tal com “data sheets”, manuals...


6

Aquesta versió té la possibilitat de combinar diferents arxius PDF i de transformar aquest tipus d’arxiu en documents doc. Aquesta qualitat a sigut de gran ajuda, ja que en aquesta eina interactiva s’ha indexat a punts concrets de parts dels manuals , cosa impossible si haguéssim treballat en format PDF.

� Pictura it! V.10 (Microsoft)

Programa de creació i modificació d’imatges molt intuïtiu i fàcil d’utilitzar.

Aquest programa té les suficients funcions per la creació de les imatges que hem necessitat per la creació de la pàgina web.

� MWSnap.exe

Programa de lliure distribució amb el qual podem capturar part o la totalitat de

la imatge de pantalla de l’ordinador. A sigut de gran ajuda per la col·locació a la web de imatges totalment intuïtives per indexar arxius.


7

3.- Contingut de l’Eina Interactiva

3.1.- Introducció La base sobre la que treballarem serà un disseny existent a la web de teoria de

l’assignatura, efectuant uns canvis en els elements més importants com son els marcs, menús, arxius...

Per altra banda també s’ha modificat el disseny de la web de teoria de

l’assignatura abans esmentada, per tal de poder relacionar amb un marc superior comú les dues pàgines webs, ja que com hem comentat abans, s’ha intentat que la web del laboratori de Sistemes Digitals sigui com més pràctica possible deixant la teoria a la web dedicada a ella.

A la creació d’aquesta eina interactiva s’ha utilitzat els fitxers de text o html a la

major part de la web; als testos hem utilitzat el llenguatge Java per realitzar les opcions correctes i incorrectes; finalment, les simulacions i animacions les hem realitzat amb el Adobe Flash CS3 Professional.

Explicarem amb detall el disseny utilitzat, tota l’estructura de la web i la ubicació

dels fitxers. D’aquesta manera serà molt més fàcil d’entendre l’estructuració de la web.

3.2.- Subdivisió de les pàgines webs En aquesta web s’ha decidit confeccionar uns tutorials de només les 3

primeres pràctiques de laboratori, per tal de que l’alumne agafi una mecànica de com realitzar les pràctiques i pugui fer les 3 restants sense l’ajut de l’eina interactiva. No obstant, en un futur, hi ha la possibilitat d’afegir les altres 3 en funció dels resultats obtinguts.

La subdivisió de les pàgines webs és quasi idèntica. disseny lògic I (Disseny lògic amb ABEL i IspExpertn (I)) 1.1 Objectius de la pràctica 1.2 Material necessari 1.3 Bases teòriques 1.4 Realització al laboratori disseny lògic II (Disseny lògic amb ABEL i IspExpertn (II)) 2.1 Objectius de la pràctica 2.2 Material necessari 2.3 Realització al laboratori conversor bin-BCD (Conversor de Binari a BCD amb lògica discreta) 3.1 Objectius de la pràctica 3.2 Material necessari 3.3 Estudi previ 3.4 Realització al laboratori


8

Downloads Documents Enunciats de les pràctiques Transparències temari introducció als Sistemes Digitals Col·lecció de problemes combinacionals Col·lecció de problemes seqüencials Model PLD per a exercicis Test d’examens Exàmens d’Introducció als Sistemes Digitals ISP Manual Ispsyn (Introducció al programa ISP Synario de la URV) Introducció ABEL (Universitat de Pennsylvania) ABEL Design Manual ABEL Reference Manual Fulls d’especificacions 7408 7485 7486 DM74LS83A DM74LS157 DM7400 Isp22v10 IspLSI2000 IspLSI2032E Introgal (Introduction to GAL Device Architecture)

3.3.- El disseny de la web

Alhora de fer el disseny web es té com a guia l’estructura de les pràctiques que

es feien servir en format paper fins al dia d’avui, ja que és la pauta que es segueix a les sessions de laboratori pel personal docent. Hem de fer el disseny prenent com a referència l’índex del pràctiques i intentar que la interfície resultant permeti enllaços entre les diferents pràctiques i altres elements que tot seguit dissenyarem.

L’estructura de disseny s’ha realitzat tenint en compte la pàgina web de

l’assignatura de Sistemes Digitals realitzant alguns canvis importants els quals citem a continuació:

- Incloure al menú inicial de la teoria de l’assignatura l’enllaç a la web de les

pràctiques. - Modificació del menú superior per tal de relacionar tant els apartats

necessaris de la web de les pràctiques com els temes de la teoria de l’assignatura, per tal de poder enllaçar d’una manera ràpida i intuïtiva les dues parts de l’assignatura.

- Modificació del menú superior incloent l’enllaç al menú principal i menú de les pràctiques per tal de poder iniciar la navegació en qualsevol moment.

- Modificació del menú esquerra per tal de tornar a l’inici de l’apartat en qualsevol moment sense haver de realitzar l’acció “enrere” de manera consecutiva fins arribar a la pàgina desitjada.


9

No obstant s’ha respectat el disseny web de teoria, on l’espai pels menús i

barres de navegació fos els mínim imprescindible, maximitzant d’aquesta manera l’espai per la visualització dels materials.

També s’ha considerat mantenir els apartats existents als menús que volem

que estiguin sempre visibles, mostrant els temes, pràctiques i altres enllaços d’interès a la pàgina que esta en consulta.

D’aquesta manera es deixen els dos menús ja definits, el menú de temes

teòrics, pràctiques i “downloads” i del menú dels subapartats de cada pràctica/download.

Dintre del que seria el disseny de la web i per la creació d’una eina realment

interactiva, es van introduir dintre dels apartats de cadascun de les pràctiques enllaços a parts teòriques de manuals, definicions, exemples i sobretot la incorporacions d’animacions per la comprensió de l’elaboració i resultat de les pràctiques per part de l’alumne.

Gràcies a les animacions i les aplicacions en Flash la web deixarà de ser un

simple recopilatori resultats i definicions de sessions de laboratori i passarà a ser una web multimèdia que pretén resoldre dubtes de l’alumnat. És en aquest apartat on hi hem dedicat més esforços per poder oferir animacions i simulacions de qualitat.

Com que els elements creats amb Flash s’incorporaran a les pàgines de les

pràctiques, no requeriran d’un menú específic. A efecte del disseny només haurem de tenir en compte els elements en Flash per inserir-los a les pàgines de text i en els elements gràfics de l’animació o simulació que caldrà que respectin el disseny unitari de la web.

Després d’haver tingut en comte aquestes directrius la distribució de la web

queda de la següent manera: - Un marc superior on es trobarà el menú amb la possibilitat d’escollir la

pràctica que ens interessi, el tema de teoria de l’assignatura que ens faci falta consultar, un enllaç a “downloads” per poder descarregar-se material didàctic de l’assignatura i de les pràctiques, a més d’un enllaç al menú principal de l’assignatura i un altre al menú de les pràctiques.

- Un marc a la part esquerra, a la part de dalt el logotip del DEEEA –clicant sobre ell s’accedeix a la seva web-, sota hi ha ubicat el menú dels apartats de cada pràctica –òbviament anirà variant en funció de cada una i sota d’aquest menú, amb un altre menú desplegable hi haurà: enllaços i bibliografia.

Per la elecció dels colors que composen la web també hem mantingut el

disseny de la web de teoria:

- Els fons blanc per tota la web - Els elements del menú de dalt fons blau, excepte el tema/pràctica/donwload que esta en consulta on els fons és blanc i el text és blau (figura 1). - Els elements del menú de l’esquerra els apartats són de fons blanc excepte el que està en consulta que està en fons blau (figura 1). - Dins al material de consulta –part de la dreta de la web, sota el menú dels temes- apareix el títol en lletres blaves i la resta de text en negre (figura 1).


10

- L’enllaç per tornar a l’inici de la pràctica (modificació de la primera versió) és amb fons blau en lletres blanques, les quals canvien de mida quan passa el ratolí per damunt, per poder trobar-los de manera ràpida. - Els enllaços que es troben al text es destaca en blau també canviant de mida quan passa el ratolí per damunt. Al final del contingut -marc BAIX- hi ha una línia blava d’un píxel d’alçada i 400 px d’amplada justificada a la dreta (figura 1).

Figura 1

S’ha mantingut el disseny per tal de poder veure de manera completa a un tipus de resolució de pantalla estàndard de 1024*768 píxels ja que la resolució de pantalla de 800*600 px es pot considerar obsoleta. En cas que la resolució de pantalla sigui diferent a les dues mencionades, la web es veurà però no s’ajustarà a la pantalla, hi haurà fletxes –scrollbars- per desplaçar-se.

El tamany de les animacions, a diferencia de la web de l’assignatura, dependrà

del detall que sigui necessari, no obstant totes elles podran observar-se a pantalla completa per a resolucions de pantalla de 1024*768 px, és a dir que per resolucions de pantalla inferiors apareixeran les scrollbar o fletxes per navegar-hi.

S’han incorporat a les pàgines “hiperlinks” mitjançant elements interactius

invisibles (invisibles tags) per tal que els enllaços siguin el més específics possibles per tal que l’alumne no trobi dificultats alhora de trobar la informació que busca i deixi de banda aquesta eina interactiva. No obstant l’alumne que ho cregui necessari també te al seu abast documentació complementaria i pot anar més enllà del punt concret al que hem cregut convenient enllaçar per la realització i coneixement de la pràctica.


11

A més, també s’ha incorporat nous enllaços als menús per tal de crear un bucle entre la pàgina web de teoria i de laboratori de l’assignatura i intentar facilitar la navegació entre elles.

D’altra banda, les animacions i simulacions, que ja es van utilitzar d’una

manera més senzilla a la web de teoria, són emprades de tal manera que l’alumne pot visualitzar de manera clara aspectes de les pràctiques difícils d’explicar d’una manera teòrica.

3.4.- Ubicació i estructura dels arxius Per tal de donar accessibilitat a la pàgina web en qüestió s’ubicarà al servidor

del que disposa la facultat. L’estructura consta d’un directori arrel del qual penjarem tota la informació:

subdirectoris i fitxers. Per tal de relacionar les dos pàgines webs (teoria i laboratori) s’afegirà al

directori arrel de la web de teoria la carpeta “practiques”, quedant de la següent manera:


12

Figura 2 Llistat de directoris, subdirectoris i arxius que formen la web

3.4.1.-Pràctiques Al directori “practiques” s’ha incorporat una innovació que es un menú general

d’aquestes on es pot enllaçar a cadascuna d’elles segons la necessitat. Els arxius necessaris es penjaran directament al subdirectori arrel, tal i com s’observa en la figura 2.

Així mateix al directori practiques hi creem un subdirectori per cada

pràctica i un subdirectori per l’apartat downloads, així tindrem la informació més ben organitzada i, a la vegada, serà més fàcil de trobar-la per modificar. Dins de cada subdirectori s’ha creat a la vegada uns altres subdirectoris (imatges, animacions, fulls i


13

documentació) pel mateix motiu. Dins de les pràctiques i de l’apartat downloads nomenarem als arxius amb un

títol representatiu del contingut que tingui per tal si hi hagués la necessitat de modificació d’unes de les parts d’un dels apartats aquest sigui fàcilment identificable.

La descripció del contingut de les pràctiques la detallarem a continuació. disseny logic I (Disseny lògic amb ABEL i IspExpert (I)) Aquesta es la pràctica més didàctica. Conté gran quantitat d’informació en

format d’animacions per tal d’intentar assolir una base per la resta de les sessions de laboratori. El seus arxius és la següent:

- Un subdirectori animacions: conté les animacions emprades en aquesta pràctica. - Un subdirectori imatges: conté les imatges emprades en la confecció dels arxius html d’aquesta pràctica - Un subdirectori Ispsyn3_archivos: conté les imatges emprades en la confecció de l’arxiu Ispsyn3.html. S’ha optat per no barrejar les imatges ja que aquest arxiu te una gran quantitat d’elles. - baix.html: conté l’índex del tema, apareix quan seleccionem un tema per primera vegada. - bases teoriques.html: conté animacions per tal de mostrar de manera gràfica les diferents portes lògiques. - capçalera.html: conté informació i exemples de com crear la capçalera en programació Abel. - dalt.html: conté la barra de navegació per enllaçar a l’índex general de l’assignatura, a l’índex de les pràctiques, a cadascuna de les pràctiques i a l’apartat downloads. Aquest fitxer és diferent per cada tema, ja que indica quin tema estem visualitzant. - declaracions.html: conté informació i exemples de com realitzar declaracions en programació Abel. - descripcio logica.html: conté informació i exemples de com realitzar la descripció lògica en programació Abel. - exemple.html: conté l’explicació en forma d’exemple gràfic de com realitzar declaracions. - Introduccio Abel univ. Pennsylvania.html: conté un manual de programació en Abel de la Universitat de Pennsylvania al qual s’enllaça per tal de donar a l’alumne bases teòriques de les pràctiques. - Ispsyn3.html: conté un manual d’introducció al programa Isp Synario confeccionat per Nicolau Canyelles de la Universitat Rovira i Virgili al qual també s’enllaça pels mateixos motius descrits al punt anterior. - material.html: conté informació del material necessari per tal de realitzar cadascuna de les pràctiques al laboratori. - menu.html: conté el menú de l’esquerra, serà diferent per cada apartat. - objectius.html: conté els objectius a assolir a cadascuna de les pràctiques. - realitzacio al laboratori.html: conté les pautes per tal de realitzar les pràctiques a les sessions de laboratori. A la segon i tercera pràctica es repetiran arxius tal com baix.html, dalt.html,

inici.html, material.html, menu.html, objectius.html i realització al laboratori.html. A més a l’apartat downloads també es repeteixen els arxius baix.html, dalt.html, inici.html i menu.html. de les pràctiques.


14

A més també es repetirà l’existència dels subdirectori animacions i imatges a

les pràctiques ”Disseny lògic amb ABEL i IspExpert (II)” i “Conversor Binari BCD amb Lògica Discreta”.

disseny logic II (Disseny lògic amb ABEL i IspExpert (II)) - comparador.html: conté informació, exemples i animacions per tal d’assolir els conceptes del funcionament d’un comparador. - conjunts.html: conté informació, exemple i animacions per tal de poder realitzar la declaració de conjunts. - multiplexor.html: conté informació, exemples i animacions per tal d’assolir els conceptes del funcionament d’un multiplexor. conversor bin-BCD (Conversor Binari BCD amb Lògica Discreta) - estudi previ.html: conté informació per tal de realitzar l’estudi previ d’aquesta pràctica. Downloads Conté dos subdirectoris diferenciats de les pràctiques: - documents: conté documentació completaria per tal de poder tenir en format paper els arxius necessaris. - fulls: conté els fulls d’especificacions emprats o explicats a l’assignatura.

Figura 4a Esquema dels arxius del subdirectori “Disseny”


15

Figura 4b Esquema dels arxius del subdirectori downloads 3.4.2.-Enllaços

En aquesta pàgina veurem els enllaços a webs externes a la que estem

treballant. Aquestes pàgines són de general interès i no pas en concret de l’assignatura. Trobarem webs com la de la Universitat Rovira i Virgili, la de l’ensenyament de

ETSE, la del departament DEEA i la pàgina del personal docent. En aquestes direccions externes s’ha cregut convenient posar-les en pàgines independents i no com una part més de la pàgina de pràctiques.

L’estructura es igual que a les de pràctiques. Està formada per dalt.html,

menú.html, baix.html. A dalt.html on no es marca el tema on estàvem –fons blanc i lletres blaves-,

sinó que apareixen tots com si no estiguéssim en cap, que de fet és el que passa realment.

A menu.html no hi apareix cap apartat de cap tema, i al ser un arxiu comú, només permet consultar la bibliografia a l’apartat “més apartats”. Això es deu al fet que al usar un arxiu únic d’enllaços per tota la web no podem saber de quin tema veníem prèviament.


16

Figura 6 Mostra general de la pàgina d’enllaços 3.4.3.-Bibliografia

L’apartat bibliografia és idèntic al que acabem d’explicar sobre enllaços, manté

la mateixa estructura i, per tant, caldrà editar els mateixos arxius per fer-ne modificacions.

A partir del subdirectori /bibliografia tenim diferents arxius: welcome.html i

inci.html –són per modificar tamany dels menús-, dalt.html i menu.html –són per modificar els menús- i baix.html –per modificar el contingut de la bibliografia-.

Al utilitzar un arxiu únic per tota la web no sabem a la pàgina on

estàvem prèviament i, per tant, al menú esquerra no hi apareixen els aparats de cap tema, ni cap tema es mostra com el que estem visualitzant –fons blanc i lletres blaves-.

Figura 7 Aspecte general d’apartat bibliografia

3.4.4.-Animacions Les animacions en Flash que són accessibles des de la web, estan ubicades

dins del subdirectori de cada tema. Son els arxius .swf que poden ser visualitzats per la majoria de navegadors i en cas contrari, hi ha visualitzadors gratuïts a Internet.


17

Recordem que els fitxer per modificar les animacions estan situats a la ubicació: /”Nom_practica” /animacions/.

3.5.- Marcs Els marcs –frames, en anglès- són els elements de la web que serveixen per

crear menús de navegació fixes o mòbils. En el nostre cas, tant el menú de dalt de la pàgina –on hi figuren els temes/pràctiques- com el de l’esquerra –canvia per cada pràctica- són mòbils.

Cada marc té un nom diferent. Si des d’un marc A volem enllaçar una

pàgina perquè s’obri al marc B posem com a destí de l’enllaç A el marc B. Podem veure-ho al Dreamweaver:

Figura 8 Exemple de com linkem entre marcs

Figura 9 Nom dels marcs i dels fitxers que ens caldrà editar per modificar l’estructura de la web


18

Finalment, podem veure -a la figura 9- com queden definides la nostra estructura de marcs de la web. Tenim la pàgina principal –welcome.html- dividida en 2 columnes: la de l’esquerra -menu.html- i la de la dreta -inici.html-. La columna de la dreta –inici.html- està dividida a la vegada amb dues files: la de dalt –dalt.html- i la de baix –baix.html. Veiem que els noms dels fitxers son molt intuïtius.

Si volem modificar amplades o alçades dels marcs que contenen els

menús o els temes, ens caldrà modificar l’arxiu original welcome.html i/o inici.html de cada subdirectori des de l’arrel –podeu veure’n l’estructura de fitxer al punt 3.4-. Els arxius menu.html, dalt.html i baix.html només contenen informació, no permeten modificar cap d’aquests dos paràmetres.

3.6.- Utilització de la pàgina d’estils En la confecció de la pàgina web hem emprat els mateixos estils –extensió css-

que a la pàgina web de teoria de l’assignatura, tal com hem comentat abans, per donar a les dos pàgines una visió de continuïtat.

Amb aquesta pàgina d’estils per tota la web podem controlar colors, colors i

tamany de lletres, colors de fletxes, taules,... Només amb un sol fitxer ho podem modificar tot al contrari que si fem el disseny de forma individual cada pàgina del nostre projecte, tindrem seriosos problemes quan en vulguem canviar el format general. Per això, al haver-hi moltes pàgines hem treballat amb les pàgines d’estils1 –tenen per extensió css-.

La funcionalitat dels estils és molt elevada, perquè ens permet realitzar efectes amb el text, sobretot als menús: canvi de tamany, color quan es posa el ratolí per sobre, canvi del color de fons del text,... totes aquestes característiques abans s’havien de realitzar amb imatges. Anteriorment a l’aparició del full d’estils s’havien d’utilitzar vàries imatges pels mateixos efectes que ara podem aconseguir amb un simple fitxer. Una imatge pel text normal, una per quan s’hi posa el ratolí per sobre i l’altre per quan la pàgina que apunta la imatge està activa –visualitzant la pàgina en un altre marc-. Això fa que no carreguem la web d’imatges pels menús i es carregui més ràpidament.

Per adjuntar una fulla d’estils sols caldrà que en cada fitxer .html on vulguem

usar la fulla d’estils cridem l’arxiu .css. Per fer-ho, anem a la part de baix de l’editor visual del Dreamweaver, seleccionem el menú desplegable de l’editor d’estils i posem “Adjuntar” a la següent finestra escollim “Examinar” i triem el fitxer que vulguem, en el nostre cas l’arxiu estils.css, situat al directori arrel. Aquest arxiu també l’haurem de penjar al servidor.

1.- Es pot consultar el codi del fitxer estils.css a l’annex 1.


19

Figura 10 Inserim l'estil que vulguem a cada fitxer html

Figura 11 Escollim "Examinar" i busquem l'arxiu estils.css, situat al directori arrel

Figura 12 Triem l'arxiu css que vulguem inserir a l’arxiu html


20

Per tant, si el que volem es modificar un tipus de lletra, color, taula concreta

d’una pàgina concreta el que farem serà editar aquesta pàgina individualment, però aquest canvis només afectaran a la pàgina editada, la resta de la web no es veurà modificada. Si el que volem es modificar les mateixes característiques però de totes les pàgines de la nostra web, el que haurem de fer serà modificar únicament l’arxiu estils.css, situat al directori arrel, tenint en compte que prèviament haurem hagut de d’inserir la pàgina d’estils i els estils corresponents a cada part de l’arxiu html.

Figura 13 Mostra de la pàgina d’estils utilitzada La lletra de referència a tota la web és l’Arial a 11px, el color dependrà de la

situació del text, ja es detalla en cada part. El fitxer de la nostra web s’anomena estils.css i està situat al directori arrel de la web.


21

Figura 14 Mostra del diferents estils utilitzats a una pàgina de la primera pràctica

Figura 15 Estils aplicats a la pàgina downloads/fulls d’especificacions Els estils que hem definit per la nostra web són molts, els acabem de veure en

les figures anteriors. Però ara explicarem amb més detall quan utilitzem cada un d’ells. Cal considerar que cada tema té una estructura d’arxius que s’explica al punt 3.4, en aquesta part ens referim a fitxers comuns per cada tema –menu.html, dalt.html, baix.html...

També és molt important saber quin estil s’aplica al text d’una cel·la, a

la pròpia cel·la o tota la taula. És convenient diferenciar-ho clarament, ja que sinó es poden produir errors en el disseny desitjat Els estils que hem utilitzats a la web s’indica, a continuació, en quina part s’apliquen i s’acompanya una captura gràfica per fer-ho encara més entenedor i fàcil.


22

Els estils emprats són: - font: defineix el tipus de lletra i color que es fan servir per defecte a la web, en cas que no s’assigni cap estil al text, aquest agafaria aquests valors. Aquest estil té quatre característiques diferents en funció de si té un enllaç –link-, ha estat visitat –visited-, està actiu l’enllaç a que apunta –active- o quan estem damunt amb el ratolí –hover-. - body: defineix l’estructura general de la web: els colors de les fletxes –scrollbar- que serveixen per navegar per la web. Encara que aquests colors només es mostren amb l’Internet Explorer, no amb el Firefox.

Figura 16 Aspecte de la web amb l'Internet Explorer on es poden apreciar els colors de les

fletxes de navegació -scrollbar- que hem definit al fitxer estils.css - temes: s’utilitza al fitxer menu.html per definir cada cel·la de la taula dels apartats del tema, i al fitxer dalt. html s’utilitza per definir tota la taula.


23

Això es pot fer mitjançant el menú/text/CSS Styles

Figura 17 Menú desplegat on es veu la ruta a seguir per seleccionar un estil de text


24

O mitjançant la implementació de codi:

Figura 18 Part del codi on podem observar l’estil del text: class=”temes”

- menú_temes_taula: aquest estil s’usa al menú de l’esquerra a la imatge de “més apartats” -l’arxiu és menu.html- i el menú dels temes –dalt.html- per definir tota la taula. També s’aplica a tota la taula dels exemples –partN.html-.


25

Figura 19 Aplicació de l'estil menu_temes_taula a tota la taula del menú esquerra -menu.html- - boto_seleccio: definim les cel·les de la taula del menú desplegable “més apartats”, excepte l’última cel·la –que té un marge a la part inferior- a l’arxiu menu.html - boto_seleccio_ultim: definim l’ultima cel·la –que té un marge a la part inferior- de la taula del menú desplegable “més apartats” a l’arxiu menu.html - boto_seleccio_text: definim el text de cada una de les cel·les que formen el menú desplegable “més apartats” de l’arxiu menu.html. Aquest estil té quatre característiques diferents en funció de si té un enllaç –link-, ha estat visitat –visited-, està actiu l’enllaç a que apunta –active- o quan estem damunt amb el ratolí –hover-.


26

Figura 20 Aplicació dels estils boto_seleccio, boto_Seleccio_ultim i boto_seleccio_text al text de dins les cel•les del menú desplegable de l’esquerra -menu.html-

- dalt: S’aplica al text de cada cel·la de la taula del menú dels temes –dalt.html-, excepte al tema que s’està visualitzant on s’aplica a tota la cel·la.


27

Figura 21 Aplicació de l'estil dalt al menú dels temes -dalt.html- - menú: s’utilitza al menú de l’esquerra –menu.html-, per definir el text de cada cel·la. Aquest estil té quatre característiques diferents en funció de si té un enllaç –link-, ha estat visitat –visited-, està actiu l’enllaç a que apunta –active- o quan estem damunt amb el ratolí –hover-. - dalt: s’utilitza al menú de l’esquerra –menu.html-, per definir el text “tornar a inici“ de la primera cel·la de la taula del menú. Aquest estil es igual que a dalt.html per cridar la atenció de l’usuari quan passa per sobre. Aquesta és una de les millores que s’han fet respecte de la web de teoria de l’assignatura per tal de poder anar a l’inici de la pràctica, estiguis a l’apartat que estiguis.


28

Figura 22 Aplicació dels estils dalt i menú al menú de l’esquerra -arxiu menu.html- - text_link: definim amb aquest estil als apartats de cada tema a l’arxiu baix.html, que conté un índex de cada tema i apareix només quan seleccionem un tema al menú de dalt. Aquest estil té quatre característiques diferents en funció de si té un enllaç –link-, ha estat visitat –visited-, està actiu l’enllaç a que apunta –active- o quan estem damunt amb el ratolí –hover-. - textnormal: aquest estil és l’utilitzat al títols dels apartats. Només es fa servir una vegada a cada arxiu de la part1.html, part2.html,... resum.html, test.html, baix.html.


29

Figura 23 Aplicació de l'estil text_normal i text_link a la pàgina on es mostra l’índex -baix.html- - text_baix: : la majoria de text de la web. Normalment, és el text on hi ha els apunts, problemes,..., per tant, aquest estil només s’utilitza als arxius part1.html, part2.html,... resum,htlm, test.html


30

Figura 24 La majoria de text de la web pertany a l'estil text_baix Hem vist amb tota mena de deteniment els estils utilitzats, i encara que hem

creat forces, són els que hem necessitat per l’aplicació. Malgrat tot, la gestió de tants estils no comporta cap problema, ans al contrari, tot són avantatges. La principal, la modificació de la web de forma molt ràpida i eficaç.

3.7.- Menús D’igual manera que a la web de teoria de l’assignatura s’utilitzen dues barres

de menús: uns pels temes i l’altra pels apartats de cada tema. Com que la majoria de les webs estan configurades amb frames –barres de navegació- a l’esquerra, hem volgut seguir aquesta estructura i fer-ho de la mateixa manera. Així, el menú de cada tema, el que serà més consultat, l’hem situat a l’esquerra, en canvi, el menú dels temes que no serà tan important, l’hem situat a l’extrem superior de la pàgina. Hem inclòs un menú desplegable amb les opcions que es consulten amb menys freqüència al menú de l’esquerra.

D’altra banda, per saber en tot moment en quin tema estem situats, el

menú dels temes –situat a l’extrem superior-, ens indica el tema que estem navegant canviant el color de la lletra –a blau- i del fons de la cel·la –a blanc-. I per saber en quin apartat de cada tema visualitzem, el menú de l’esquerra canvia el tipus de lletra –a blanc- i el de color de fons de la cel·la –a blau-. És a dir, que en tot moment sabem en quin tema i quin apartat estem situats.


31

Figura 25 Mostra dels diversos menús que conté l’aplicació També hem incorporat el logotip del DEEEA a la part superior esquerra

amb un hiperenllaç cap a la seva pàgina. El tamany del menú de l’esquerra és de 140 píxels d’amplada i el dels temes és

de 20 píxels d’alçada. Aquest valors són per tots els tipus de resolució de pantalla, degut a que són els mínims perquè el text es vegi correctament. En funció de la resolució gràfica les taules que contenen cada un dels dos menús s’ajusten automàticament en alçada –menú esquerra- o amplada –menú temes-.

La resta de paràmetres, és a dir, l’alçada del menú de l’esquerra i l’amplada del

menú dels temes venen predeterminats per la resolució gràfica i pel tamany total de la finestra del navegador i el propi navegador ja el calcula i l’ajusta automàticament.

La part de pantalla que no utilitzem pels menús, que com acabem de

dir, està en funció de la resolució gràfica i del tamany de la finestra del navegador s’hi mostrarà cada apartat. L’espai que destinem a la visualització dels apartats és d’un 80% aproximadament, cosa que creiem òptima i ha estat un dels objectius plantejats al dissenyar l’aplicació.

Els altres elements de la web no implicaran cap alteració dels elements dels

menús, perquè tota la informació enllaçada des dels menús s’obre en altres marcs, no pas en el mateix del menú.


32

4.- Creació/actualització de la web 4.1.- Introducció

Des de que al 1984 es va originar el terme internet amb l’ús del protocol TCP/IP

la tecnologia de propagació, la quantitat de moviments intercanvi d’informació, així com la seva velocitat ha canviat d’una manera molt gran.

Es per aquest motiu que les millores en la confecció, elaboració i actualització

de pàgines web canvien d’una manera ràpida i contínua posant a l’abast tant del programador com de l’usuari de la web de noves eines interactives que fan més agradable i fàcil la navegació per internet.

Les noves eines faciliten la creació de la web, però com que augmenten

les prestacions que ofereixen, els dissenyadors necessiten més coneixements pel desenvolupament de l’aplicació. Donarem uns coneixements dels punts més conflictius, però no explicarem el funcionament general dels programes perquè creiem no es l’objectiu del projecte.

A continuació s’explicarà el procés que hem seguit pel desenvolupament de

aquest eina interactiva a partir del disseny base de la pàgina web de la teoria de l’assignatura de Sistemes Digitals.

Hem de tindre clar la necessitat d’un procés d’actualització perquè la nostra

web no quedi obsoleta, cosa que provoca la no consulta i no utilització per part de l’usuari de l’eina interactiva.

Per aquest motiu en el present apartat hem posat en pràctica alguna de les

possibles modificacions que es poden realitzar a la nostra pàgina web. La modificació de qualssevol pàgina web si no ha estat realitzada per un mateix

sempre és una mica complicada en un principi. No obstant, s’espera que amb la petita guia establerta en els apartats que veurem a continuació sigui possible petites modificacions no estructurals de l’eina interactiva que ens ocupa.

Sota el nostre punt de vista moltes vegades, per l’assoliment d’estils hem

cregut convenient la modificació de la web mitjançant el codi html, ja que, en l’especialitat d’enginyeria estem familiaritzat amb el llenguatge de programació (d’aquest o de qualssevol altre tipus de codi).

4.2.- Formats i fitxers utilitzats La nostra eina interactiva té un factor comú a tots els subdirectoris utilitzats:

una pàgina inicial on s’introdueix la pràctica i des de la que s’accedeix a les diferents parts d’aquesta pràctica, fitxers que contenen text, imatges i animacions flash, on cada part estan creades de manera diferents i amb eines informàtiques diferents.

- Fitxers en format text: són la gairebé la totalitat dels arxius que conformen la web. Exceptuant els fitxers welcome.html i inici.html que només contenen informació sobre els marcs ; la resta d’arxius, fins i tot els menús, inclouen text. La modificació d’aquests arxius serà senzilla i es podrà realitzar amb l’editor gràfic del Dreamweaver.


33

- Fitxers amb imatges : aquests arxius, a més a més de text, incorporen imatges. Les imatges han estat capturades, mitjançant el programa MWSnap, del

material didàctic en sistema informàtic proporcionat pel tutor del projecte o confeccionats mitjançant programes informàtics com el Picture It! V.10.

Aquestes imatges capturades o creades s’han emmagatzemat al subdirectori

corresponent tal i com s’ha comentat al punt 3.4 “Ubicació i estructura dels arxius” en /practiques/”nom_de_la_pràctica”/imatges.

També mostrarem amb detall com inserir les imatges a la pàgina web. - Fitxers Flash: són els arxius que, a banda de text i/o imatges, tenen

inserides animacions o simulacions realitzades en Flash. Però el que linquem des de la web són els arxius .swf, –que no podrem obrir amb el Flash per editar, però que ocupen molt menys espai-, i que es poden visualitzar a qualsevol navegador estàndard –si més no, instal·lant els complements necessaris, que són gratuïts-.

Els fitxers .swf estan guardats dins els directori

/practiques/”nom_de_la_pràctica”/animacions. Aquestes animacions van ser creades mitjançant el programa Adobe Flash

CS3 Professional. Al contrari del que s’opinava sobre la utilització del Macromedia Flash per la

realització d’animacions en Flash com el programa que ofereix més característiques, la nova versió de l’Adobe utilitzat en aquesta projecte es considera que aporta millores sobre la versió de la versió de Macromedia.

Per realitzar modificacions a la nostra web, a continuació explicarem els punts

més importants dels arxius i eines a utilitzar per efectuar aquesta tasca. D’aquesta manera farem que la interactuació entre l’alumne/usuari i el

professorat quedi plasmada en aquesta pàgina, mitjançant millores. Per tal de poder realitzar aquestes millores es referenciarà als manuals dels

diferents programes emprats , ja que en aquest projecte no té com a finalitat explicar totes les possibilitats del programes utilitzats per l’elaboració de la pàgina web.

Creiem que més que realitzar una guia general de modificació de arxius

utilitzats en una pàgina web comentarem pas a pas la modificació de la nostra pàgina web en concret. D’aquesta manera veurem com poden realitzar-se tots els canvis i quins efectes tenen.

D’altra banda es farà una petita introducció a l’edició d’arxius .fla, però sense

entrar en detall, ja que es d’una complexitat considerable.


34

4.3.- Creació/actualització dels arxius format text Hem definit arxius en format text als arxius html. Aquests arxius son la base de tota pàgina web, la superfície per la qual es

navega s’enllacen els diferents destins. Aquestos arxius seran actualitzats mitjançant qualssevol versió el

Dreamweaver. Es possible la utilització d’altres editors de pàgines webs, no obstant nosaltres recomanem aquest software per la seva riquesa en eines i per la facilitat i agilitat alhora d’utilitzar-lo.

4.3.1.- Creació/actualització de marcs Els arxius que contenen informació sobre les amplades i alçades dels

marcs són tipus text, però el que hi apareix no es pot visualitzar explícitament des de la web. Encara que el codi html de les seves pàgines es interpretat pel navegador per ajustar el tamany dels marcs.

Per tal de crear un marc em d’anar a insert/frames i allí especificar si desitgem

inserir un marc a l’esquerra, dreta, dalt, baix....

Figura 26 Imatge on s’observa la creació d’un marc Els arxius que hem de modificar per tal d’efectuar canvis als marcs són: - /practiques/”nom_de_la_pràctica”/welcome.html que permet la modificació de l’amplada del menú de l’esquerra de cada tema. - /bibliografia/welcome.html per modificar l’amplada del menú de l’esquerra de l’apartat bibliogràfic. - /enllacos/welcome.html per modificar l’amplada del menú de l’esquerra de l’apartat d’enllaços.


35

- /practiques/”nom_de_la_pràctica”/inici.html permet modificar l’alçada del menú de temes de dalt. - /bibliografia/inici.html permet modificar l’alçada del menú de temes de dalt de la part de bibliografia. - /enllacos/inici.html permet modificar l’alçada del menú de temes de dalt de l’apartat d’enllaços.. Inicialment l’amplada del menú de l’esquerra és de 240 píxels i l’alçada del

menú dels temes és de 20 píxels. Aquest valors són els mínims perquè es visualitzi tot el text i per tant, no poden ser reduïts. Aquest valors són idèntics per totes les resolucions de pantalla ja que si els disminuïm, sigui quina sigui la resolució, el text no hi apareixerà correctament.

Per modificar el tamany dels marcs obrirem l’arxiu que correspongui amb el

“Bloc de Notas” del Windows i canviarem els valors escaients. Podem veure-ho amb uns exemples:

Figura 27 Fitxer welcome.html que permet modificar l’amplada del menú de l’esquerra

Figura 28 Fitxer inci.html que modificarem per canviar l’alçada del menú dels temes Si en lloc de modificar les amplades i/o alçades el que volem és

introduir un nou marc, caldrà que obrim el fitxer welcome.html –si volem incloure’l a tota la web- o inici.html –si volem posar-lo a la part dreta de la web-.Un cop oberts algun d’aquest arxius hem de definir el nou marc tal i com hem vist a l’inici d’aquest apartat.


36

Una vegada realitzades totes les modificacions o insercions de marcs l’aspecte de la web haurà canviat substancialment, quan a disseny és refereix. Però per modificar el disseny no és l’únic element que podem editar, tenim també la possibilitat de canviar els tipus de lletra, colors de les taules, canvi de tipografia quan passem el ratolí per damunt,... tot aquests canvis i alguns d’altres ho podrem fer amb l’edició dels estils.

4.3.2.- Creació/actualització d’estils

A la web hem treballat amb els estils que hem llistat al punt 3.6. Aquest estils

els hem creat en funció del disseny escollit, però òbviament es poden modificar i/o eliminar o ampliar.

Cal recordar que per canviar el format d’una taula, text o pàgina concreta no

hem de modificar la pàgina d’estils, en tenim prou modificant l’arxiu concret, en canvi, per modificar tots els dissenys de lletra, taules, colors,... de tots els arxius, si que cal editar la pàgina d’estils.

Si el que volem es crear un nou estil, el procediment és gairebé el mateix, l’únic

que en lloc de modificar –quan ens apareixen tots els estils del fitxer estils.css- posarem “New” i la següent pantalla que ens apareixerà hi podrem definir el nostre propi estil.

Figura 29 Podem crear els estils que necessitem Per modificar qualsevol estil ho podem fer canviant el codi de l’arxiu

estils.css – situat al directori arrel de l’aplicació- o bé, fent-ho a partir de el gestor d’estils del Dreamweaver.

Per fer-ho amb el gestor d’estils: obrim un arxiu .html qualssevol de la nostra

pàgina i anirem a Text/CSS Styles/Edit Style Sheet o amb les tecles Ctrl+Shift+E


37

Figura 30 Canvi dels estils amb l’editor gràfic del Dreamweaver S’obrirà una pantalla on hi apareixeran tots els fitxers css que hem cridat per

aquella pàgina. En el nostre cas només es mostrarà estils.css. Seleccionem “estils.css” i premem “Editar”. A continuació, veurem tots els estils que tenim definits al fitxer estils.css, només ens queda seleccionar el que vulguem modificar. Un cop seleccionat, només caldrà modificar les opcions que ens interessin i ho guardarem i ja ho tindrem modificat.

Figura 31 Podem seleccionar el fitxer d’estils que vulguem modificar


38

Figura 32 Seleccionem l’estil que hem de modificar

Figura 33 Opcions que podem modificar d’un estil, en aquest cas de text_baix

La personalització del disseny segons les necessitats a la pàgina d’estils

és molt senzilla, només ens cal efectuar petites modificacions. Un dels avantatges de l’ús d’aquestes pàgines és la realització de menús amb molts efectes gràfics i poc temps de càrrega –no hi tenim imatges-. Aquests menús la majoria de vegades estan realitzats amb taules perquè augmenten la versatilitat i permeten aplicar un estil determinat a cada cel·la, cosa que ajuda molt a l’usuari a saber per quina pàgina de la web esta navegant.


39

La relació entre la pàgina d’estils i les taules és molt estreta i la combinació

eficaç dels dos elements permet desenvolupar menús per estructurar correctament la web amb una mínim temps de càrrega i que simplifiquen la navegació.

4.3.3.- Creació/actualització de taules Les taules són un element bàsic alhora de confeccionar menús per les

grans prestacions que ofereixen. Cada cel·la de la taula pot tenir un estil diferent i d’aquesta manera podem indicar en quin tema i en quin subapartat estem navegant, entre d’altres.

Dins als apunts també hem utilitzat taules pels exemples, per poder-los trobar

amb més facilitat. D’aquesta manera podem destacar els exemples de la resta dels apunts i augmentar-ne la visibilitat.

Alhora de crear o modificar cel·les o taules hem de tenir present, que apliquem

estils diferents a la taula, a cada cel·la i al text de cada cel·la. Encara que sembli una mica complicat d’aquesta manera podem personalitzar-ho gairebé tot.

El procés de creació d’una nova cel·la és molt senzill, només cal que ens posar

a la cel·la de sota o damunt d’on volem crear la nova, llavors, anem a “Insertar” – “Objectos de tabla” i posem fila o columna a la part que vulguem. La nova cel·la còpia l’estil de la cel·la on estàvem abans de crear la nova. Només caldrà introduir-hi el text que vulguem, seleccionar-lo i escollir l’estil que vulguem. Finalment, haurem de seleccionar el text i posar l’enllaç cap a la pàgina que vulguem, cal tenir en compte posar, si s’escau, el marc corresponent de l’hiperenllaç.

Per la creació d’una nova taula, suposem que volem afegir un nou

exemple, la millor opció i més ràpida és copiar un altre exemple i modificar-ne els continguts. Encara que explicarem el passos que cal fer si la volguéssim crear de nou.

Primer, anem a “Insert” – “Table” i ens apareixerà una finestra on

podrem seleccionar la quantitat de files i columnes. Pel cas que ens ocupa posarem una columna i dues files. A “Width” posarem 100 i triarem “Percent”, al “Border” posarem 0. A “Rows” i “Columns” posarem el nombre de files i columnes que ens interessi corresponentment.

A la resta d’opcions no cal modificar-les, només ens queda posar “Ok”.

Figura 34 Inserció d'una nova taula


40

Ara ja tenim la taula creada, només ens queda aplicar els estils, en aquest cas, els estils d’una taula d’exemples. Seleccionem tota la taula i apliquem l’estil “menu_temes_taula”, després seleccionem la primera fila i apliquem l’estil“taula_exemples_titol”, a la segona fila hi apliquem l’estil “taula_exemples_dins”. En aquest cas no cal que apliquem cap tipus d’estil al text.

A dins dels apunts hi ha algunes parts que contenen taules, bàsicament per

incloure taules de veritat. Aquestes taules tenen aplicades a tota la primera fila l’estil taula_exemples_titol i la resta de taula s’hi aplica l’estil text_baix, com gairebé tot el text de la web. Veiem que aquestes taules no tenen contorns, ja que així ho hem preferit.

El procés de creació d’una nova taula i aplicació d’estils es fa de la mateixa

manera per la resta de parts de la web: menús,... Podrem inserir taules sempre que ens interessi, i aplicant l’estil en funció de cada cas, tindrem la taula integrada en el disseny unitari de la web.

Hem vist les possibilitat que ofereixen les taules per la creació de menús. Amb

una taula i els estils relacionats podem aconseguir un menú de gran utilitat i senzillesa. Val la pena la utilització d’aquests elements de menú perquè donen una millor imatge visual utilitzant menys temps de carrega –perquè no s’utilitzen imatges-.

Per la modificació dels menús ens cal poder saber modificar taules i

estils, d’aquesta manera podrem adequar-los a les necessitats que tinguem en cada moment.

4.3.4.- Actualització del Menú de l’esquerra Per editar el menú de l’esquerra dels temes obrirem el fitxer

/practiques/”nom_de_la_pràctica”/menu.html amb el Dreamweaver. En cas que vulguem modificar el menú de l’esquerra de la bibliografia obrirem l’arxiu /bibliografia/menu.html i si el que volem es modificar el menú de la part d’enllaços, el fitxer que ens caldrà obrir serà /enllaços/menu.html. Tots els arxius es modifiquen de la mateixa manera.

De cada un d’aquest arxius podem modificar el que ens interessi, tot tenint cura

de posar correctament els enllaços i els estils. La modificació del text no la documentem ja que és directa.

La modificació de l’amplada esta documentada al punt 4.3.1 i si la modificació

dels estils ho esta al punt 4.3.2. En cas que ens interessi afegir un nou apartat, només ens caldrà introduir una nova cel·la a la taula –esta documentat al punt 4.3.3-.

Si el que volem es modificar la imatge que apareix –logotip del DEEEA- ho

haurem de fer amb l’editor gràfic i tornar-la a inserir al menú. La ubicació original de l’arxiu és /logoDEEEA.gif i el tamany 140 px d’amplada per 101 px d’alçada.

Per editar el menú “més apartats” hem de buscar en el codi l’etiqueta:

<//Inici selector>, posem el cursor el text que hi ha sota de l’etiqueta –vista del “code”- i ens apareixerà en la vista per disseny tot el que estava ocult. Després, anirem a la vista per “design” i editarem el text de forma directa. Si el que volem es crear un nou apartat, crearem una nova cel·la. Cal tenir present alhora d’aplicar els estils a les cel·les que només l’ultima ha tenir l’estil “boto_seleccio_ultim”. Els estils


41

utilitzats al menú de l’esquerra són els següents: - menu: s’aplica per definir el text de cada apartat. - menu_general: serveix per definir el text de la primera cel·la on s’hi mostra el tema actual. - menu_temes_taula: aquest estil s’utilitza per definir tota la taula dels sub apartats dels tema. - boto_seleccio: definim les cel·les de la taula del menú desplegable “més apartats”, excepte l’última cel·la. - boto_seleccio_ultim: definim l’ultima cel·la de la taula del menú desplegable “més apartats” - boto_seleccio_text: definim el text de cada una de les cel·les que formen el menú desplegable “més apartats”. Aquest estil té quatre característiques diferents en funció de si té un enllaç –link-, ha estat visitat –visited-, està actiu l’enllaç a que apunta –active- o quan estem damunt amb el ratolí –hover-. - temes: s’utilitza per definir cada cel·la de la taula dels apartats del tema. Hem vist els principals elements que hem de tenir en compte alhora de

realitzar modificacions al menú de l’esquerra. Totes les consideracions explicades són les que poden presentar més problemes, òbviament, hi ha molts més aspectes de disseny que són generals i que no hem comentat, però es poden consultar al manual del Dreamweaver referenciat en aquest projecte, ja que comporten una gran dificultat.

Només queda per explicar les modificacions dels menú de dalt i ja haurem vist

com es realitzen les modificacions de tots els menús. Els menús que hem inserir a la nostra aplicació pretenen donar celeritat i agilitat a la navegació.

4.3.5.- Actualització Menú dels temes/pràctiques (dalt) Editant aquest menú ja haurem explicat tots els menús que podem modificar de

la nostra aplicació. Aquest és el menú que permet navegar per cada tema, sempre seran visibles tots els temes i el tema seleccionat estarà marcat amb un fons blanc a diferència dels altres que tenen fons blau.

Quan es navega per les pàgines d’enllaços i bibliografia, al tractar-se d’un sol

arxiu per totes les pàgines, no es mostrarà cap tema seleccionat, tots tindran el fons blau i lletres blanques.

Per editar el menú dels temes/pràctiques obrirem el fitxer

/practiques/”nom_de_la_pràctica”/dalt.html. En cas que vulguem modificar el menú de dalt de la bibliografia obrirem l’arxiu /bibliografia/dalt.html i si el que volem es modificar el menú de dalt d’enllaços, el fitxer que ens caldrà obrir serà /enllaços/dalt.html. Amb els tres arxius la modificació es farà de la mateixa manera, per això explicarem només la modificació dels arxius /practiques/”nom_de_la_pràctica”/dalt.html.


42

La modificació del text és directa, només cal tenir cura de posar adequadament l’estil del text i els enllaços al marc de destí que vulguem. Com hem vist al punt 4.3.1 la modificació de l’alçada del menú es fa amb l’edició de l’arxiu inici.html i, si volem modificar els estils ho farem editant l’arxiu /estils.css -veure punt 4.3.2-. En cas que ens interessi afegir un nou tema, haurem d’inserir una nova columna a la taula –veure-ho al punt 4.3.3- i afegir-hi l’estil correcte, que expliquem tot seguit. A més, cal tenir en compte que el text l’hem de enllaçar amb l’arxiu que vulguem i posar de destí: “_top” perquè s’ha d’obrir de nou l’arxiu a tota la pàgina, no en cap marc, ja que canvien tots els arxius – menús,...-.

Els estils que s’utilitzen al menú de dalt són els següents: - dalt: S’aplica al text de cada cel·la de la taula, excepte, al tema que s’està visualitzant que s’aplica a tota la cel·la. - temes: s’utilitza per definir tota la taula.

Figura 35 Aplicació de l'estil temes a tota la taula. i de l’estil dalt a cada cel·la -arxiu dalt.html-

4.3.6.- Creació/actualització dels índexs La intenció és que la web de pràctiques al laboratori sigui accessible des de

l’índex que apareix la primera vegada que entrem a la web de l’assignatura, on es són presents a més del link a les pràctiques, tots els temes. Aquest índex només apareix la primera vegada i ja no apareix més, excepte si tornem a l’inici. Els altres índex apareixen en algunes de les pàgines ja sigui a l’inici o en qualsevol altra lloc en que sigui necessari l’accés a altres pàgines o aplicacions.

Per modificar l’índex del principi de l’aplicació només ens cal editar

l’arxiu /welcome.html i l’edició és simplement de text, d’enllaços i d’estils. Per modificar els altres índex només en caldrà obrir el fitxer /practiques/practicaN/baix.html, tenint en compte la selecció de l’estil corresponent i els hiperenllaços a quin marc han d’obrir-se.

Als índex hi apareixen tan sols dos estils, el textnormal –pel títol (en cas de que

hi hagi)- i el text_link –pels enllaços establerts-. En canvi, pel primer índex de l’aplicació s’usa l’estil text_link –pel text de cada tema/pràctica-.

A l’índex general de la web hi apareixen: el logotip del DEEEA –

/logoDEEEA.gif-, el logotip de la URV –/logoURV.gif- i el logotip de l’ETSE -/logoETSE.gif-. Per modificar-los és qüestió de fer-ho amb un editor d’imatges i tornar-los a guardar a la ubicació original. Caldrà guardar-los amb el mateix format –gif- i l’extensió en minúscules per evitar problemes alhora de penjar-los al servidor.


43

Bibliografia Per modificar el contingut bibliografia cal editar l’arxiu /bibliografia/baix.html i en

fem l’edició de l’arxiu pertinent. Amb aquest arxiu modifiquem tot el contingut de la web d’aquest apartat.

Figura 36 Vista de la pàgina de bibliografia on apliquem l'estil textnormal i text_baix A aquest arxiu només apliquem l’estil textnomal al títol i text_baix a la resta del

text. Enllaços. Cal fer esment que ens referim a l’apartat enllaços de la web, i no pas

als hipervíncles cap a altres parts de la web o cap a d’altres pàgines. Per incloure hipervíncles és un procediment molt simple.

Per modificar l’apartat d’enllaços, al igual que la bibliografia, només en

caldrà editar un arxiu per tota la web, és /enllacos/baix.html. Només s’apliquen els estils textnormal i text_baix.

4.3.7- Actualització subapartats pràctiques Per editar qualsevol subapartat de les pràctiques, només caldrà escollir l’arxiu i

modificar-lo. Haurem de repetir aquest procés tantes vegades com fitxers vulguem modificar.

Cal tenir present que alhora de modificar els elements gràfics de la web tenim

dues opcions: la primera, si només volem modificar l’element en qüestió i no volem que l’aplicació del disseny afecti enlloc més, editarem l’arxiu .html concret i en farem els canvis pertinents; la segona opció, si el que volem és la modificació d’un element gràfic però a tota la web –totes les pàgines- caldrà que modifiquem l’arxiu estils.css, situat al directori arrel.

Els formats que hem utilitzat són: - text_baix: la majoria de text de la web. - textnormal: aquest estil es l’utilitzat al títols dels apartats .


44

- menú_temes_taula: aquest estil s’utilitza a tota la taula dels exemples, hem de seleccionar tota la taula aplicar-hi l’estil, d’aquesta manera, els costats, tamany,... són els de la resta de la web. Per aplicar cada estil a cada tipus l’element –taula, text, cel·la- ja ho hem

documentat al punt 3.4 del present. A la part dels apunts de cada tema també hi hem introduït els problemes

resolts. Hem cregut necessari que fossin inclosos com exemples a cada tema per facilitar-ne la navegabilitat.

Per inserir imatges només ens cal obrir l’arxiu on la vulguem inserir amb

el Dreamweaver i, a continuació, anem al menú “Insert” – “Image” seleccionem la imatge que vulguem i ja la inserirem automàticament. Cal prestar atenció en la ruta d’accés a la imatge, si bé quan editem l’arxiu localment podem accedir a tots els arxius de l’ordinador, quan pengem la web al servidor només podrem accedir a les imatges contingudes dins al directori arrel, per la qual cosa es recomanable que si una imatge és fora del directori arrel al nostre ordinador, la posem dins d’aquest directori, i així només ens quedarà penjar-la al servidor.

El Dreamweaver crea automàticament la ruta d’accés a tots els

directoris o subdirectoris de dins i fora del directori arrel, però si hem pres les precaucions anteriors – seleccionar imatges de dins del directori arrel-, el programa crearà la ruta d’accés i no ens caldrà preocupar-nos de res més, només caldrà penjar-les al servidor.

4.4.- Creació/actualització dels fitxers d’imatges

Abordem en aquest punt l’edició d’imatges, que permetrà fer modificacions o

crear-ne de noves, segons les necessitats. Se suposa que cal tenir uns coneixements bàsics d’editors gràfics, i en cas en contrari, cal consultar els manuals documentats per poder fer modificacions bàsiques.

Vam pretendre de realitzar una web nova, sense primar el disseny, però

si una mínima estructura comuna per tots els elements gràfics, per això, vam optar per dibuixar de nou molts circuits i equacions, tot posant-los amb el tipus de lletra establerts prèviament a l’arxiu estils.css –annex 1-. La lletra utilitzada per defecte es l’Arial a 11 px.

Per modificar les imatges hem utilitzat el Microsoft Picture It! V.10. El tipus d’arxiu utilitzat per gravar les imatges ha estat el jpg, creiem que és el

que ofereix més prestacions: gran capacitat de comprimir informació i, partint d’aquesta premissa, una gran qualitat d’imatge... Recordem que les imatges són al directori /practiques/”nom_de_la_pràctica”/imatges

El tamany dels fitxers de les imatges, si bé no ens ha preocupat massa,

perquè en general no ocupen excessivament, si que hem intentat que cada imatge ocupi el mínim possible amb el binomi qualitat-tamany. Hem primat la qualitat, sense descuidar en cap moment el tamany.

Una vegada la imatge estigui modificada o creada de nou, només ens

caldrà obrir l’arxiu html que volem que contingui la imatge, situem el cursor a la zona on volem inserir-la i al menú “Insert” seleccionem “Image”, i triem la imatge que


45

volem posar. Les imatges col·locades dins un altre directori –que no sigui per defecte-, el propi programa escriurà la ruta d’accés correcta perquè es visualitzin correctament, però nosaltres al pujar la web al servidor hem de pensar a penjar la imatge en qüestió i canviar-ne la ruta d’accés al Dreamweaver, si s’escau, sinó ho fem correctament la imatge no es veurà.

Una vegada inserida la imatge podem lincar-la cap a un arxiu, direcció

web , modificar tamany i totes les opcions que ofereix el Dreamweaver. Però en el cas que ens ocupa, les imatges i equacions convertides amb imatges, les inserim a tamany real. És a dir, si el que volem es reduir-ne les proporcions ho fem amb el Photoshop i, a continuació, la gravem amb jpg i la inserim de nou. Aquest procés tan llarg el realitzem perquè si modifiquem directament el tamany amb el Dreamweaver, la imatge es veu molt malament, cosa que no podem acceptar.

Després de tot aquest procés ja tenim les imatges al fitxer html i consultables

des de la web. D’aquesta manera tanquem les explicacions de tots els elements que podem trobar en les pàgines html que contenen imatges. 4.5.- Creació/actualització de simulacions i animacions

A continuació, s’exposa el procés que cal seguir per tal de poder

crear/modificar simulacions que s’han incorporat a la web. El programa que s’ha usat és el Adobe Flash CS3 Professional. La utilització d’aquest programa permet fer gairebé qualsevol tipus d’aplicació i, aquesta, es pot incorporar en un arxiu html –com ja hem explicat-.

Degut a la gran quantitat d’opcions que disposa el programa, només

explicarem aspectes rellevants del programa. Segurament per poder realitzar modificacions d’importància, caldrà buscar més informació al manual.

Per fer fàcil la comprensió, en aquesta part analitzarem la simulació del

conjunt comparador-sumador vist a la pràctica “Conversor de Binari a BCD amb Lògica Discreta” degut a que es la simulació més completa.

Suposarem que les funcions bàsiques del Flash són conegudes, sinó es pot

consultar el manual. Ens referim a línia de temps, introduir codi, introduir clips de pel·lícula, introduir botons,...

Els arxius originals .fla –que no permeten la visualització amb el navegador,

però permeten la modificació- són a /practiques/”nom_de_la_pràctica”/simulacions. Un aspecte important a conèixer del Flash, són els frames. Aquests elements

són petites unitats de temps –la duració dels quals es pot modificar- i que permeten inserir objectes, textos,... i que s’aniran reproduint quant pertoqui. El Flash anirà reproduint la línia de temps i s’aturarà en un frame concret sempre que ho hàgim programat.


46

4.5.1.- Creació de simulació comparador-sumador A la pràctica Conversor de Binari a BCD amb Lògica Discreta”, al punt 3.4

Realització a laboratori es pot veure el funcionament del muntatge del conjunt comparador-sumador

Figura 37 Simulació del muntatge d’un comparador-sumador La pantalla serà interactiva i al posar el ratolí damunt de N<=9 o N>9

simularà la transmissió dels bits mitjançant la connexió entre els dispositius. D’aquesta manera l’usuari observarà visualment com establirem un “6”al sumador mitjançant la sortida del comparador i connexions a “0”.

Aquesta animació té la peculiaritat que es pot veure el recorregut del bit al llarg

de la connexió i com queda el valor del sumador una vegada s’ha establert el valor.


47

Figura 38 Simulació del muntatge d’un comparador-sumador on observem el recorregut del bit 0 quan posem el ratolí damunt N<=9

Figura 39 Simulació del muntatge d’un comparador-sumador on observem el final del recorregut del bit 0 quan posem el ratolí damunt N<=9 y el resultat final del conjunt B


48

Figura 40 Simulació del muntatge d’un comparador-sumador on observem el recorregut del bit 1 quan posem el ratolí damunt N>9

Figura 41 Simulació del muntatge d’un comparador-sumador on observem el final del recorregut del bit 1 quan posem el ratolí damunt N>9 y el resultat final del conjunt B


49

Per realitzar aquest efecte interactiu anem al Flash i creem una “movie clip” per la realització del desplaçament (en aquest cas del 0) al llarg del muntatge del comparador-sumador utilitzant la línia de temps.

Figura 42 Visualització de l’estat inicial a la línia del temps 1 del recorregut del bit 0


50

Figura 43 Visualització de l’estat intermedi a la línia del temps 45 del recorregut del bit 0


51

Figura 44 Visualització de l’estat final a la línia del temps 65 del recorregut del bit 0 i de la visualització del valor del conjunt B


52

L’altra part de l’animació es més típica amb la creació de capes a les quals se li han d’inserir les imatges que creguem convenients, els circuits i potser alguna animació complementaria com la que es crea quan posem damunt del botó el ratolí

Figura 45 Visualització de l’acció quan sobre el botó superior (en gris) no passa res


53

Figura 46 Visualització de l’acció quan sobre el botó superior (en gris) es troba el ratolí

4.5.2.- Publicació de l’arxiu Quan ja s’han realitzat les animacions es guardaran en el tipus d’arxiu .fla per

les possibles modificacions que es puguin fer a posteriori en una carpeta no accessible des de la xarxa.

Per que aquestes animacions es puguin veure des d’internet transformarem

aquest arxiu .fla en tipus d’arxiu .swf el qual es guardarà a la carpeta practiques/”nom_de_la_pràctica”/animacions i només ens quedarà introduir l’arxiu .swf a un arxiu .html.

També podrem canviar la qualitat que vulguem la còpia del fitxer swf, tot

dependrà del tamany i, en conseqüència, menys qualitat més rapidesa al descarregar-se l’arxiu i executar-se però amb menys qualitat. Per defecte hem treballat amb la màxima qualitat.

Amb la publicació hem vist algunes pinzellades de com modificar arxius .fla. Un

dels últims elements que ens queda per explicar és la modificació dels tests de l’apliació, realitzats amb Java.


54

4.6.- Actualització d’una pàgina concreta A continuació farem un exemple pràctic de la modificació d’una pàgina web en

concret. Degut a que la modificació dels elements com marcs, estils, animacions... ja han sigut explicades en els apartats anteriors no entrarem en aquests aspectes.

Hem escollit la web la pràctica “Conversor de Binari a BCD amb Lògica

Discreta” perquè conté la major part dels elements que configuren la web –fitxers html i swf, imatges- i, per tant, creiem que ens pot ser molt més útil.

La manera escollida per modificar ha sigut modificant el codi html ja que, des

del meu punt de vista, es creen menys errors i s’aprèn més com està organitzada la pàgina web.

Figura 47 Aspecte inicial de la pàgina principal de la pràctica “Conversor de Binari a BCD amb Lògica Discreta”

4.6.1.- Actualització de taules

Degut a la importància de les taules a les pàgines webs farem una petita

introducció d’algún element del llenguatge html sobre aquestes. tr: l’etiqueta table row ens permetrà inserir files en la taula. La instrucció d’inici es <tr> i la instrucció final <tr/>. td: l’etiqueta td indica el tipus de cel·la de les taules html. Aquesta etiqueta, Table Data (taula de dades) tindrà la funció d’introduir totes les dades que vulguem en les cel·les definides d’aquesta forma.


55

Per inserir un nou apartat al menú de l’esquerra –/practiques/conversor bin-BCD/menu.html- damunt de punt 3.2 seleccionarem aquesta fila de la taula al codi html (des de <tr> fins </tr>), el copiarem i el pegarem damunt.

Després caldrà modificar el títol i l’enllaç. D’aquesta manera ens assegurem

que l’estil de la cel·la és el mateix.

Figura 48 Inserció d'una nova cel·la amb l'estil de la resta de cel·les

Una vegada modificat s’haurà de modificar “refrescar” la vista disseny per comprovar que hem realitzat correctament els canvis

Figura 49 Vista de l’eina “refresh”


56

4.6.2.- Actualització del menú “més apartats” En aquest apartat no comentarem com introduir nous apartats al menú

perquè ho acabem de veure en el punt anterior. Explicarem bàsicament què cal fer per modificar el menú “més apartats” de la banda esquerra-baix.

Obrirem l’arxiu /practiques/conversor bin-BCD/menu.html i al codi html

busquem l’etiqueta: <//Inici selector>, posem el cursor al text que hi ha sota de l’etiqueta –vista del “c”- i ens apareixerà a “la vista per disseny” tot el que estava ocult, d’aquesta manera ja ho podrem editar. És pot veure a continuació:

Figura 50 Modificació del menú de la pràctica “Conversor de Binari a BCD amb Lògica Discreta”

Un cop veiem els apartats hi podem fer les modificacions que creguem oportunes, per exemple, inserir taules com hem explicat al punt 4.7.2. Els estils que aplicarem seran:

“boto_seleccio_text” al text de la nova cel·la, la resta d’estils de la nova cel·la ja els crea el propi programa, al inserir-hi la cel·la.

Hem pogut comprovar la senzillesa de modificar el menú de l’esquerra, ara

només en cal veure com modificar el menú dels temes, i ja haurem explicat detalladament totes les barres de navegació.


57

4.6.3.- Actualització del menú dels temes de la pràctica “Conversor de Binari a BCD amb Lògica Discreta”

Per editar-lo haurem d’obrir el fitxer /practiques/conversor bin-BCD/dalt.html.

Igual que al menú de l’esquerra podrem inserir-hi un nou tema, caldrà doncs afegir una cel·la nova.

Per a això, seleccionarem una cel·la qualsevol de la taula al codi html (des de

<td> fins </td>), el copiarem i el pegarem damunt o sota segons ens convingui. Després caldrà modificar el títol i l’enllaç. D’aquesta manera ens assegurem

que l’estil de la cel·la és el mateix.

Figura 51 Edició de l'arxiu dalt.html de la pràctica on apliquem l’estil “dalt” a la nova cel·la Una vegada modificat s’haurà de modificar “refrescar” la vista disseny per

comprovar que hem realitzat correctament els canvis.

Figura 52 Vista de l’eina “refresh”

4.6.4.- Actualització de l’índex de la pràctica “Conversor de Binari a BCD amb Lògica Discreta”

L’arxiu que haurem d’editar serà /practiques/practica3/baix.html, i només

caldrà fer les modificacions del text que necessitem, cal tenir en compte que el títol té assignat l’estil “textnormal” i la resta de text l’estil “text_link”.

Recordar que aquest arxiu només apareix la primera vegada que

seleccionem un tema, i per tant, quan naveguem per cada un dels apartats que té la pràctica “Conversor de Binari a BCD amb Lògica Descriptiva”, aquest arxiu ja no es


58

veurà. Es pot complementar la informació d’aquest apartat amb el punt 4.3.6

d’aquest projecte. A continuació, es mostra el procés d’edició de l’arxiu /practiques/conversor bin-

BCD/baix.html:

Figura 53 Edició de l'arxiu baix.html de la pràctica 3 La modificació de l’arxiu baix.html es gairebé immediata només cal tenir

presents els estils i canviar el text que vulguem.

4.6.5.- Modificació del contingut de l’arxiu Realització al laboratori.html de la pràctica “Conversor de Binari a BCD amb Lògica Discreta”

En aquest apartat volem modificar l’arxiu /practiques/conversor bin-

BCD/Realitzacio al laboratori.html, ja que la resta de les parts del tema són molt semblants.

En aquest apartat indicarem com inserir arxiu Flash o arxius imatges. Per inserir un arxiu Flash anem al menú Insert/Media/Flash


59

Figura 54 Imatge del menú per inserir un arxiu flash

Figura 55 Selecció de l’arxiu flash


60

I seleccionem l’arxiu flash que vulguem inserir. Un cop inserit en podrem modificar el tamany, la qualitat, si volem que

es reprodueixi automàticament, si volem que es reprodueixi contínuament,... Ho podem veure:

Figura 56 Modificació dels paràmetres d'un arxiu swf -Flash- al inserir-lo a una pàgina html Un altre element que considerem important en l’edició de l’arxiu

Realització al laboratori.html és la inserció d’imatges. Per inserir un arxiu Flash anem al menú Insert/Image

Figura 57 Imatge del menú per inserir un arxiu d’imatge


61

Figura 58 Seleccionem la imatge a inserir Una vegada tenim a la imatge inserida podrem canviar el tamany, crear

un hiperenllaç posant un marc com a destí –si ens interessa- o una etiqueta. Ho podem veure:

Figura 59 Un cop inserida la imatge, podem modificar el tamany i lincar-la en alguna altre arxiu o url

4.6.6.- Modificació d’imatges de la pràctica “Conversor de Binari a BCD amb Lògica Discreta”

La modificació d’imatge en l’actualitat, al contrari del que passa per exemple en

la creació o modificació d’arxiu flash, és molt a l’abast de l’usuari de la xarxa. Qualssevol usuari avui en dia sap modificar el color, retallar un tros d’imatge,

voltejar, canviar les proporcions de mesures, inserir text, formes... amb un programa de disseny gràfic bàsic com pot ser el “paint”.

Per fer el tipus d’imatges que utilitzem en aquesta pàgina no fa falta cap

programa d’alt nivell com pot ser Photoshop, amb possibilitat de crear capes diferents i infinitats d’efectes de llum, color, textura...

Per aquest motiu, encara que en el meu cas s’ha utilitzat el Microsoft Picture It!

V.10, per la seva facilitat d’utilització, no és veu la necessitat d’explicar com modificar imatges d’aquesta pràctica ni de cap altra pàgina web feta en aquest projecte.


62

4.7.- Publicar la web a internet La publicació de qualssevol pàgina web s’ha de fer mitjançant un programa

FTP. En el nostre cas, serà el tutor de penjar els arxius al servidor d’internet de la

universitat. Per que el funcionament i els enllaços amb la pàgina web de l’assignatura

siguin correctes la creació de la nostra eina interactiva s’ha realitzat amb la simulació d’un directori arrel ja existent al servidor de la universitat. Per això només cal copiar la carpeta “practiques” perquè tots els enllaços funcionen correctament es pengin al servidor que sigui –encara que el servidor tingui per defecte altres arxius que no siguin els estàndards: index.html, welcome.html-.

Figura 60 Simulació d’arxiu arrel a PC local on s’ubica la carpeta pràctica D’aquesta manera, ja hauríem acabat la feina de modificar la nostra

aplicació i ja seria consultable des d’internet.


63

5.- Guia d’utilització de l’Eina Interactiva

5.1.- Introducció

Aquest pretén ser un referent per la navegació de la web Laboratori de

Sistemes Digitals de l’ensenyament ETI especialitat en Electrònica que s’imparteix al primer curs a la URV.

S’abordaran els aspectes tècnics mínims necessaris per navegar per

l’aplicació sense problemes i, també, una breu guia de navegació.

5.2.- Requisits tècnics Actualment qualssevol ordinador del mercat té les característiques necessàries

per l’accés a internet. El software necessari pot ser l’Internet Explorer, Firefox o qualssevol altre

navegador gratuït (Google Chrome BETA...)

5.3.- Navegació per la web A la web si pot navegar com qualsevol altra aplicació d’aquest tipus. Si es

tenen els connectors de Flash i Java instal·lat correctament en el sistema no hi ha d’haver cap error per navegar-hi. En cas que no estiguin instal·lats, el propi navegador ens indicarà els passos a seguir per tal de descarregar-los i instal·lar-los.

En cas de que la navegació sigui bloquejada pel software caldrà permetre la

visualització de la totalitat dels arxius de la pàgina web habilitant-la en el pop-up superior (botó dret sobre pop-up/permitir contenido bloqueado...)


64

Figura 61 Desplegament de l’opció “Permitir contenido bloqueado” Per tal de permetre sempre que els elements de la nostra pàgina web no siguin

bloquejats caldrà realitzar els següents passos al navegador iexplorer: Menú/Herramientas/Bloqueador de elementos emergentes/Configuración del

bloqueador de elementos emergentes...

Figura 62 Desplegament de l’opció “Configuración del bloqueador de elementos emergentes...”


65

I indicar la nostra pàgina perquè no bloquegi els seus elements

Figura 63 Configuración del bloqueador de elementos emergentes de iexplorer En el cas de navegar amb Firefox podem realitzar la mateixa tasca tal i com

mostra la imatge següent:

Figura 64 Finestra de configuració del Firefox, on permetrem el Java, Javasript i les finestres emergents perquè l’aplicació funcioni correctament


66

6.- Conclusions finals

Diuen que per realitzar una tasca per una altra persona, com es el nostre cas que estem realitzant una pàgina web per l’alumne, un s’ha de posar al lloc de la persona per la que es fa aquesta tasca.

En el nostre cas això ha sigut la realitat de la creació de la nostre eina

interactiva. El llarg temps d’inactivitat amb la que m’enfrontava a la realització de les

pràctiques de Laboratori de Sistemes Digitals ha fet que realitzi aquestes no de la manera que una persona fa una tasca que te assolida i entesa si no com una feina que s’ha de fer poc a poc i pas a pas. És a dir, com un alumne de primer de carrera.

Per aquest motiu creiem que l’alumne no tindrà cap problema en utilitzar

aquesta eina per la realització de les pràctiques i per l’enteniment del comportament del dispositius programables i del muntatges realitzats a les sessions de laboratori.

A més s’han disposat els elements necessaris per la consulta interactiva i

ràpida amb la part teòrica de l’assigntura perquè d’aquesta manera el coneixement del comportament pràctic sigui comparat amb les explicacions teòriques. No obstant, en la nostra pàgina no s’ha volgut carregar de teoria, ja que ja existeix una pàgina web per a tal fi i creiem que la massificació d’informació moltes vegades crea desmotivació i per tant desinformació.

No s’ha observat la necessitat de la utilització d’una tecnologia, tant per la

realització d’aquesta pàgina web com per la navegació per a aquesta, puntera envers de l’afavoriment d’una aplicació senzilla i còmoda.

La fàcil i neta visualització dels diferents menús, links, informació que puguem

tindre a la pàgina web creiem que es un punt a favor per la motivació alhora de navegar per qualssevol pàgina, ja que l’acumulació d’imatges, símbols... a més de provocar una lentitud en la càrrega de l’eina interactiva provoca una confusió per trobar la informació que es necessita i es desitja.

Una altre consideració és la resolució a la que volem tenir optimitzada la

pàgina. Hem cregut suficient que la resolució òptima fos la de 1024 per 768 píxels, ja que d’aquesta manera també és pot utilitzar resolucions de pantalla més grans sense que es presentin grans dificultats en la visualització. La resolució 800 per 600 píxels creiem que es troba en desús pels usuaris, per això l’hem desconsiderat, encara que no hi ha cap problema de visualització de la web amb la utilització dels scrollbars.

La pàgina també esta optimitzada per qualsevol tipus de navegador, sempre hi

quan tingui l’opció del Java activada degudament, i el reproductor de Macromedia Flash instal·lat. Òbviament, el navegador ha de suportar marcs, però és bastant difícil en els ordinadors moderns que no els suportin.

La incorporació de continguts d’aplicacions flash s’ha realitzat no des del punt

de vista de disseny si no des del punt de vista de comprensió de l’alumne. Per aquest motiu, aquestes aplicacions poden ser fàcilment superables i millorables per experts sempre i quan no es deixi de banda la netedat del concepte a assolir.

Hem exposat amb tota mena de detalls el procés per d’actualització/modificació

de la web i el manual d’usuari per la navegació. Creiem que és suficient per la


67

realització d’unes primeres modificacions, però caldrà conèixer amb profunditat els programes de disseny, a mesura que vulguem augmentar-ne la complexitat de l’aplicació.

L’actualització i ampliació de la pàgina web, ja que l’estancament d’informació

crea que l’eina interactiva no sigui visitada assíduament i quedi obsoleta, sent la seva recuperació difícil. Només hem de veure que les pàgines més visitades són les que s’actualitzen constantment, ja siguin buscadors de vídeos, consulta de software, d’informació de l’actualitat...

Per aquest motiu s’ha realitzat una petita guia d’actualització per motivar la

afluència de noves i també de visites ja realitzades. Encara que la creació d’un fòrum en la que es puguin realitzar consultes entre

professor, alumne, i entre els mateixos alumnes, es molt interessant, en un principi no s’ha inclòs a la nostra pàgina web.

Aquest tipus de noves tecnologies són molt interessants i molt fàcils de crear

però a la vegada necessiten un gran control i dedicació per que el fòrum no es corrompi o caigui en l’oblit.

No obstant, la riquesa d’aquest tipus d’eines es la possibilitat de deixar les

portes obertes per incloure aquests tipus o altres eines segons les nostres necessitats i/o possibilitats.


68

7.- Bibliografia Tocci, Ronald J. Sistemas Digitales. Principios y aplicaciones Thomson 2002. ISBN: 84-9732-054-9 Mandado, E.; Alvarez L. Dispositivos lógicos programables Prentice-Hall 2000. ISBN: 84-205-2994-X Alcubilla, R.; Pons, J.; Bardes, D. Diseño digital: una perspectiva VLSI-CMOS Barcelona: Edicions UPC. ISBN: 84-7653-570-8 Artigas, J.I.; Barragan, L.A.; Orrite, C. Aplicaciones y problemas de electrónica digital Prensas Universitarias de Zaragoza 1999. ISBN: 84-7733-526-5


69

8.- Referències a manuals de software - Macromedia Dreamweaver 4.0 http://www.adobe.com/support/dreamweaver/documentation/dreamweaver4_tut.html - Adobe Flash CS3 Professional http://livedocs.adobe.com/flash/9.0_es/UsingFlash/

- Adobe Acrobat 8.1.2 Professional http://help.adobe.com/en_US/Acrobat/8.0/Professional/index.html

- Microsoft Picture It! http://download.microsoft.com/download/e/a/b/eabffb07-599d-4df3-9aad-7cb5f432e813/PIE_Manual.pdf

Plecs de Condicions

1

Plecs de Condicions

Plecs de Condicions

2

1.- Introducció L’objectiu d’aquest apartat és especificar les condicions generals,

econòmiques, tècniques per la correcta execució del projecte. En aquest Plec de Condicions es presenten 4 parts, que són les següents: 1.- Condicions Generals 2.- Condicions Econòmiques 3.- Condicions Tècniques 4.- Condicions Facultatives

2.- Condicions Generals El DEEEA de la URV és propietària i titular dels drets d’explotació del

programa d’ordinador, així com de la documentació tècnica necessària per al seu funcionament.

Pel present contracte, el DEEEA pot concedir a qualsevol estudiant de

l’ETSE una llicència, intransferible i no exclusiva, per l’ús d’aquest Programa en un sistema informàtic que compleixi les especificacions que es descriuen en la memòria descriptiva, destinant-lo únicament el beneficiari (en aquest cas l’estudiant de l’ETSE) a la satisfacció de les seves necessitats informàtiques.

3.- Condicions Económiques

No existeix cap mena de compensació econòmica per tal d’establir el lliurament de l’Aplicació Web i de la corresponent documentació, així com dels drets d’explotació, per part del dissenyador i programador de l’Aplicació Web. El DEEEA, per la seva part, es reservarà el dret de demanar contraprestació econòmica per l’ús del programa si el beneficiari no pertany a l’ETSE de la URV. De la mateixa manera, el DEEEA tindrà total llibertat per establir les normes que cregui oportunes per al control i utilització del programa.

4.- Condicions Tècniques

El present Software, amb el seu suport magnètic i manual de usuari, està garantitzat contra qualsevol defecte de fabricació durant un període de dos mesos a partir de la data de lliurament per part del dissenyador i programador de l’Aplicació informàtica. Aquesta garantia inclou la modificació, per part del dissenyador, dels errors de fabricació en el programa que beneficiari o propietari pogués detectar durant aquest temps. La correcció de qualsevol error o defecte en el suport magnètic serà lliure de càrrec durant aquest període.

El DEEEA no quedarà vinculada pels compromisos o promeses

realitzades per persones alienes al Departament o equip projectista, ni per expectatives errònies respecte al funcionament del Programa.

En qualsevol cas, el beneficiari accepta que aquest programa

constitueix una eina de treball destinada a complementar, però no a substituir la tasca humana, per tant la responsabilitat del DEEEA pels danys imputables

Plecs de Condicions

3

directament al Programa, es limitaran als indicats prèviament pel coordinador i director de l’assignatura.

El beneficiari haurà d’utilitzar el Programa exclusivament en un sistema

informàtic que compleixi totes les especificacions tècniques descrites a l’apartat de característiques mínimes del Hardware de la memòria descriptiva. El DEEA no es fa responsable del mal funcionament del Programa en cas que s’utilitzi en qualsevol tipus de configuració diferent a la requerida, sense haver demanat assessorament previ.

El DEEEA no serà responsable pels retards, interrupcions o falta de

prestació dels serveis previstos, quan això succeeixi per causa major o aliena a la seva voluntat.

5.- Condicions facultatives

El beneficiari reconeix els drets de Propietat Intel·lectual del DEEEA sobre el Programa, comprometent-se a no suprimir cap indicació sobre aquests drets en el Software. Aquests drets protegeixen el Programa, els manuals d’aplicació, el disseny de les pantalles, els menús i tot el material que es proporcioni amb el Programa.

El beneficiari està autoritzat a efectuar una sola còpia de seguretat del

Software, que en cap cas podrà ser utilitzada i que quedarà sota la custòdia del beneficiari, amb l’única finalitat de guardar i conservar la informació. El beneficiari s’abstindrà de copiar total o parcialment la documentació subministrada pel DEEEA per l’ús del Software, així com qualsevol material imprès lliurat pel mateix. Si el beneficiari necessités còpies addicionals d’aquest material, haurà de demanar permís al DEEEA o al director de l’assignatura, acceptant les mesures que es creguin oportunes per cada cas.

El beneficiari reconeix que aquesta aplicació Web li és cedida per al seu ús i

no per a la seva reproducció, modificació, cessió, venda, lloguer o préstec, i es compromet a no cedir el seu ús total o parcial de cap forma i a no transmetre cap dret que tingui sobre ell, així com no divulgar-lo, publicar-lo, ni posar-lo de cap altre manera a disposició d’altres persones.

El DEEEA tindrà dret a la obertura d’expedient si el beneficiari incomplís

qualsevol de les estipulacions pactades; en aquest cas ho hauria de notificar al beneficiari, procedint-se a la immediata devolució del Programa ( en cas de cessió en discs compacte), o a la denegació de l’accés ( en cas de consulta per internet).

El beneficiari estarà obligat a donar les seves dades personals per

aprofitar-se d’aquesta aplicació Web. En cas que el DEEEA observés qualsevol irregularitat en les dades del beneficiari, tindrà la capacitat per desestimar la petició si així ho cregués oportú.

En cas de sorgir qualsevol divergència de la interpretació o aplicació

d’aquests punts, serà la Universitat Rovira i Virgili la que, a través dels seus òrgans competents, resolgui el cas que es doni a confusió o disputa.

En cas que algun o alguns punts anteriors fossin invalidats, il·legals o

inexecutables en virtut d’alguna norma jurídica, es consideraran ineficaços en la mesura que correspongui, però en la resta es conservarà la seva validesa.

Plecs de Condicions

4

No s’han efectuat acords verbals i el present document, amb totes les

seves estipulacions, conforma la totalitat del conveni inter-parts, substituint qualsevol altra comunicació anterior verbal o escrita.

Annexes

1

Annexes

Annexes

2

1.- Annexe1

BODY { SCROLLBAR-FACE-COLOR: #7991b0; SCROLLBAR-HIGHLIGHT-COLOR: #7991b0; SCROLLBAR-SHADOW-COLOR: #7991b0; SCROLLBAR-3DLIGHT-COLOR: #073770; SCROLLBAR-ARROW-COLOR: #073770; SCROLLBAR-TRACK-COLOR: #7991b0; SCROLLBAR-DARKSHADOW-COLOR: #ffffff; SCROLLBAR-BASE-COLOR: #073770 } FONT { FONT-FAMILY: Arial } A:link { COLOR: #000000; TEXT-DECORATION: none } A:active { COLOR: #000000; TEXT-DECORATION: none } A:visited { COLOR: #000000; TEXT-DECORATION: none } A:hover { COLOR: #000000; TEXT-DECORATION: none } .temes { BORDER-RIGHT: #7991b0 1px solid; BORDER-TOP: #7991b0 1px solid; BORDER-LEFT: #7991b0 1px solid; BORDER-BOTTOM: #7991b0 1px solid } .menu_temes_taula { BORDER-RIGHT: black 0px solid; BORDER-TOP: #ffd700 0px solid; BORDER-LEFT: black 0px solid; BORDER-BOTTOM: black 0px solid } .taula_exemples_titol { BORDER-RIGHT: #7991b0 1px solid; BORDER-TOP: #7991b0 1px solid; BORDER-LEFT: #7991b0 1px solid; BORDER-BOTTOM: #7991b0 1px solid; background: #7991b0; font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-weight: bold; color: #FFFFFF; } .taula_exemples_dins { BORDER-RIGHT: #7991b0 1px solid; BORDER-TOP: #7991b0 1px solid; BORDER-LEFT: #7991b0 1px solid; BORDER-BOTTOM: #7991b0 1px solid; background: #ffffff; font-family: Arial, Helvetica, sans-serif; font-size: 11px; } .boto_seleccio {

Annexes

3

BORDER-RIGHT: black 0px solid; BORDER-TOP: black 0px solid; BORDER-LEFT: black 0px solid; BORDER-BOTTOM: #234D80 1px solid; } .boto_seleccio_ultim { BORDER-RIGHT: black 0px solid; BORDER-TOP: black 0px solid; BORDER-LEFT: black 0px solid; BORDER-BOTTOM: #232D80 0px solid; } A.boto_seleccio_text:link { FONT-SIZE: 11px; COLOR: #234D80; FONT-FAMILY: Arial; BACKGROUND-COLOR: #7991b0; TEXT-DECORATION: none } A.boto_seleccio_text:visited { FONT-SIZE: 11px; COLOR: #234D80; FONT-FAMILY: Arial; BACKGROUND-COLOR: #7991b0; TEXT-DECORATION: none } A.boto_seleccio_text:active { FONT-SIZE: 11px; COLOR: #234D80; FONT-FAMILY: Arial; BACKGROUND-COLOR: #ffffff; TEXT-DECORATION: none } A.boto_seleccio_text:hover { FONT-SIZE: 11px; COLOR: #FFFFFF; FONT-WEIGHT: normal; FONT-FAMILY: Arial; BACKGROUND-COLOR: #7991b0; TEXT-DECORATION: none } A.dalt:link { FONT-SIZE: 12px; COLOR: #FFFFFF; FONT-FAMILY: Arial; BACKGROUND-COLOR: #7991b0; TEXT-DECORATION: none } A.dalt:visited { FONT-SIZE: 12px; COLOR: #FFFFFF; FONT-FAMILY: Arial; BACKGROUND-COLOR: #7991b0; TEXT-DECORATION: none } A.dalt:active { FONT-SIZE: 12px; COLOR: #7991b0; FONT-FAMILY: Arial; BACKGROUND-COLOR: #ffffff; TEXT-DECORATION: none } A.dalt:hover { FONT-SIZE: 12px; COLOR: #FFFFFF; FONT-WEIGHT: bold; FONT-FAMILY: Arial; BACKGROUND-COLOR: #7991b0; TEXT-DECORATION: none } A.text.normal { COLOR: #7991b0; FONT-FAMILY: Arial; TEXT-DECORATION: underline } A.negre:link { COLOR: #000000; FONT-FAMILY: Arial; TEXT-DECORATION: none } A.negre:visited { COLOR: #000000; FONT-FAMILY: Arial; TEXT-DECORATION: none } A.negre:active { COLOR: #000000; FONT-FAMILY: Arial; TEXT-DECORATION: none } A.negre:hover { COLOR: #000000; FONT-FAMILY: Arial; TEXT-DECORATION: none

Annexes

4

} A.blanc:link { COLOR: #ffffff; FONT-FAMILY: Arial; TEXT-DECORATION: none } A.blanc:visited { COLOR: #ffffff; FONT-FAMILY: Arial; TEXT-DECORATION: none } A.blanc:active { COLOR: #ffffff; FONT-FAMILY: Arial; TEXT-DECORATION: none } A.blanc:hover { COLOR: #ffffff; FONT-FAMILY: Arial; TEXT-DECORATION: none } A.emp:link { FONT-SIZE: 11px; COLOR: #5d5d5d; FONT-FAMILY: Arial; TEXT-DECORATION: none } A.emp:visited { FONT-SIZE: 11px; COLOR: #5d5d5d; FONT-FAMILY: Arial; TEXT-DECORATION: none } A.emp:active { FONT-SIZE: 11px; COLOR: #5d5d5d; FONT-FAMILY: Arial; TEXT-DECORATION: none } A.emp:hover { FONT-SIZE: 11px; COLOR: #5d5d5d; FONT-FAMILY: Arial; BACKGROUND-COLOR: #93dedf; TEXT-DECORATION: none } A.emp1:link { FONT-SIZE: 11px; COLOR: #5d5d5d; FONT-FAMILY: Arial; TEXT-DECORATION: none } A.emp1:visited { FONT-SIZE: 11px; COLOR: #5d5d5d; FONT-FAMILY: Arial; TEXT-DECORATION: none } A.emp1:active { FONT-SIZE: 11px; COLOR: #5d5d5d; FONT-FAMILY: Arial; TEXT-DECORATION: none } A.emp1:hover { FONT-SIZE: 11px; COLOR: #5d5d5d; FONT-FAMILY: Arial; BACKGROUND-COLOR: #27bebf; TEXT-DECORATION: none } A.scv:link { FONT-SIZE: 11px; COLOR: #5b5b5b; FONT-FAMILY: Arial; TEXT-DECORATION: none } A.scv:visited { FONT-SIZE: 11px; COLOR: #5c5c5c; FONT-FAMILY: Arial; TEXT-DECORATION: none } A.scv:active {

Annexes

5

FONT-SIZE: 11px; COLOR: #5c5c5c; FONT-FAMILY: Arial; TEXT-DECORATION: none } A.scv:hover { FONT-SIZE: 11px; COLOR: #5c5c5c; FONT-FAMILY: Arial; BACKGROUND-COLOR: #afda8b; TEXT-DECORATION: none } A.scv1:link { FONT-SIZE: 11px; COLOR: #5c5c5c; FONT-FAMILY: Arial; BACKGROUND-COLOR: #afda8b; TEXT-DECORATION: none } A.scv1:visited { FONT-SIZE: 11px; COLOR: #5d5d5d; FONT-FAMILY: Arial; BACKGROUND-COLOR: #afda8b; TEXT-DECORATION: none } A.scv1:active { FONT-SIZE: 11px; COLOR: #5d5d5d; FONT-FAMILY: Arial; BACKGROUND-COLOR: #afda8b; TEXT-DECORATION: none } A.scv1:hover { FONT-SIZE: 11px; COLOR: #5d5d5d; FONT-FAMILY: Arial; BACKGROUND-COLOR: #7ac23e; TEXT-DECORATION: none } A.esc:link { FONT-SIZE: 11px; COLOR: #cccccc; FONT-FAMILY: Arial; TEXT-DECORATION: none } A.esc:visited { FONT-SIZE: 11px; COLOR: #cccccc; FONT-FAMILY: Arial; TEXT-DECORATION: none } A.esc:active { FONT-SIZE: 11px; COLOR: #cccccc; FONT-FAMILY: Arial; TEXT-DECORATION: none } A.esc:hover { FONT-SIZE: 11px; COLOR: #226e36; FONT-FAMILY: Arial; BACKGROUND-COLOR: #d7f2de; TEXT-DECORATION: none } A.esc1:link { FONT-SIZE: 11px; COLOR: #226e36; FONT-FAMILY: Arial; BACKGROUND-COLOR: #d7f2de; TEXT-DECORATION: none } A.esc1:visited { FONT-SIZE: 11px; COLOR: #226e36; FONT-FAMILY: Arial; BACKGROUND-COLOR: #d7f2de; TEXT-DECORATION: none } A.esc1:active { FONT-SIZE: 11px; COLOR: #226e36; FONT-FAMILY: Arial; BACKGROUND-COLOR: #d7f2de; TEXT-DECORATION: none } A.esc1:hover { FONT-SIZE: 11px; COLOR: #cccccc; FONT-FAMILY: Arial; BACKGROUND-COLOR: #226e36; TEXT-DECORATION: none }

Annexes

6

A.menu:link { FONT-SIZE: 11px; COLOR: #7991b0; FONT-FAMILY: Arial; TEXT-DECORATION: none; TEXT_ALIG: CENTER; } A.menu:visited { FONT-SIZE: 11px; COLOR: #7991b0; FONT-FAMILY: Arial; TEXT-DECORATION: none } A.menu:active { FONT-SIZE: 11px; COLOR: #FFFFFF; FONT-FAMILY: Arial; BACKGROUND-COLOR: #7991b0; TEXT-DECORATION: none } A.menu:hover { FONT-SIZE: 11px; COLOR: #FFFFFF; FONT-FAMILY: Arial; BACKGROUND-COLOR: #7991b0; TEXT-DECORATION: none } A.menu_general:link { FONT-SIZE: 11px; COLOR: #FFFFFF; FONT-FAMILY: Arial; BACKGROUND-COLOR: #7991b0; TEXT-DECORATION: none } A.menu_general:visited { FONT-SIZE: 11px; COLOR: #FFFFFF; FONT-FAMILY: Arial; BACKGROUND-COLOR: #7991b0; TEXT-DECORATION: none } A.menu_general:active { FONT-SIZE: 11px; COLOR: #FFFFFF; FONT-FAMILY: Arial; BACKGROUND-COLOR: #7991b0; TEXT-DECORATION: none } A.menu_general:hover { FONT-SIZE: 12px; COLOR: #FFFFFF; FONT-FAMILY: Arial; BACKGROUND-COLOR: #7991b0; TEXT-DECORATION: none } A.text_link:link { FONT-SIZE: 11px; COLOR: #7991b0; FONT-WEIGHT: normal; FONT-FAMILY: Arial; TEXT-DECORATION: none } A.text_link:visited { FONT-SIZE: 11px; COLOR: #7991b0; FONT-WEIGHT: normal; FONT-FAMILY: Arial; TEXT-DECORATION: none } A.text_link:active { FONT-SIZE: 11px; COLOR: #7991b0; FONT-WEIGHT: normal; FONT-FAMILY: Arial; TEXT-DECORATION: none } A.text_link:hover { FONT-SIZE: 11px; COLOR: #7991b0; FONT-WEIGHT: bold; FONT-FAMILY: Arial; TEXT-DECORATION: none } .menu1 { BORDER-RIGHT: #073770 1px solid; BORDER-TOP: #073770 1px solid; BORDER-LEFT: #073770 1px solid; BORDER-BOTTOM: #073770 1px solid } .menu2 {

Annexes

7

BORDER-RIGHT: #073770 1px solid; BORDER-TOP: #073770 1px solid; SCROLLBAR-FACE-COLOR: #7991b0; SCROLLBAR-HIGHLIGHT-COLOR: #7991b0; BORDER-LEFT: #073770 1px solid; SCROLLBAR-SHADOW-COLOR: #7991b0; SCROLLBAR-3DLIGHT-COLOR: #073770; SCROLLBAR-ARROW-COLOR: #073770; SCROLLBAR-TRACK-COLOR: #7991b0; BORDER-BOTTOM: #073770 1px solid; SCROLLBAR-DARKSHADOW-COLOR: black; SCROLLBAR-BASE-COLOR: #073770 } .f_menu { BACKGROUND-POSITION: left top; BACKGROUND-ATTACHMENT: fixed; BACKGROUND-IMAGE: url(img/f_menu.jpg); BACKGROUND-REPEAT: no-repeat } .desplegable { BORDER-RIGHT: #073770 1px solid; BORDER-TOP: #073770 1px solid; FONT-WEIGHT: bold; FONT-SIZE: 10px; BORDER-LEFT: #073770 1px solid; COLOR: #ffffff; BORDER-BOTTOM: #073770 1px solid; FONT-FAMILY: Arial; BACKGROUND-COLOR: #7991b0 } .f_dalt { BACKGROUND-POSITION: left top; BACKGROUND-ATTACHMENT: fixed; BACKGROUND-IMAGE: url(img/f_dalt.jpg); BACKGROUND-REPEAT: no-repeat } .l_negre_baix { BORDER-RIGHT: black 0px solid; BORDER-TOP: black 0px solid; BORDER-LEFT: black 0px solid; BORDER-BOTTOM: black 1px solid } .l_negre_tot { BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; BORDER-LEFT: black 1px solid; BORDER-BOTTOM: black 1px solid } .l_blau_baix { BORDER-RIGHT: black 0px solid; BORDER-TOP: black 0px solid; BORDER-LEFT: black 0px solid; BORDER-BOTTOM: #4084ff 1px solid } .l_blauf_baix { BORDER-RIGHT: black 0px solid; BORDER-TOP: black 0px solid; BORDER-LEFT: black 0px solid; BORDER-BOTTOM: #22497f 1px solid } .l_verd_baix { BORDER-RIGHT: black 0px solid; BORDER-TOP: black 0px solid; BORDER-LEFT: black 0px solid; BORDER-BOTTOM: #309600 1px solid } .l_vermell_baix { BORDER-RIGHT: black 0px solid; BORDER-TOP: black 0px solid; BORDER-LEFT: black 0px solid; BORDER-BOTTOM: #ff0000 1px solid } .l_negre_dret { BORDER-RIGHT: black 1px solid; BORDER-TOP: black 0px solid; BORDER-LEFT: black 0px solid; BORDER-BOTTOM: black 0px solid } .l_vermell_dret { BORDER-RIGHT: #ff0000 1px solid; BORDER-TOP: black 0px solid; BORDER-LEFT: black 0px solid; BORDER-BOTTOM: black 0px solid } INPUT {

Annexes

8

BORDER-RIGHT: #666666 1px solid; BORDER-TOP: #666666 1px solid; FONT-SIZE: 11px; BORDER-LEFT: #666666 1px solid; COLOR: #000000; BORDER-BOTTOM: #666666 1px solid; FONT-FAMILY: Arial; BACKGROUND-COLOR: #ffffff } .l_blanc_tot { BORDER-RIGHT: #ffffff 1px solid; BORDER-TOP: #ffffff 1px solid; BORDER-LEFT: #ffffff 1px solid; BORDER-BOTTOM: #ffffff 1px solid } .l_blanc_di { BORDER-RIGHT: #ffffff 1px solid; BORDER-TOP: black 0px solid; BORDER-LEFT: black 0px solid; BORDER-BOTTOM: #ffffff 1px solid } .l_negre_esq { BORDER-RIGHT: black 0px solid; BORDER-TOP: black 0px solid; SCROLLBAR-FACE-COLOR: #ffffff; SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; BORDER-LEFT: black 1px solid; SCROLLBAR-SHADOW-COLOR: #ffffff; SCROLLBAR-3DLIGHT-COLOR: #ffffff; SCROLLBAR-ARROW-COLOR: #000000; SCROLLBAR-TRACK-COLOR: #ffffff; BORDER-BOTTOM: black 0px solid; SCROLLBAR-DARKSHADOW-COLOR: #ffffff; SCROLLBAR-BASE-COLOR: #ffffff } .l_gris_tot { BORDER-RIGHT: #999999 1px solid; BORDER-TOP: #999999 1px solid; BORDER-LEFT: #999999 1px solid; BORDER-BOTTOM: #999999 1px solid } .l_verd_tot { BORDER-RIGHT: #309600 1px solid; BORDER-TOP: #309600 1px solid; BORDER-LEFT: #309600 1px solid; BORDER-BOTTOM: #309600 1px solid } .l_gris_de { BORDER-RIGHT: black 0px solid; BORDER-TOP: #999999 1px solid; BORDER-LEFT: black 0px solid; BORDER-BOTTOM: #999999 1px solid } .font1 { FONT-SIZE: 11px; FONT-FAMILY: Arial } .lgrisbaix { BORDER-RIGHT: medium none; BORDER-TOP: medium none; BORDER-LEFT: medium none; BORDER-BOTTOM: #999999 1px solid } .textnormal { font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-style: normal; font-weight: normal; color: #7991b0; text-decoration: underline; } .textlk { font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-style: underline; font-weight: normal; color: #3399ff;

Annexes

9

text-decoration: underline; } .textexemples { font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; color: #FFFFFF; } .text_baix { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #000000; text-decoration: none; } .text_exemple_enunciat { font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #FFFFFF; text-decoration: none; font-weight: normal; } .text_negat { text-decoration: overline; font-family: Arial, Helvetica, sans-serif; font-size:@000000; font-size: 11px; }