implementació d’una eina interactiva de suport a l...

Implementació d’una Eina Interactiva de Suport a

l’Assignatura d’Electrònica Digital I TITULACIÓ: Enginyeria Técnica Industrial especialitat Electrònica Industrial

AUTOR: Francisco L. Ferrer Mingorance

DIRECTOR:Nicolau Cañellas Alberich .

DATA: Juny de 2009

Memòria descriptiva 1.- Introducció a l’Eina Interactiva ...............................................................................2 1.1- Introducció ...........................................................................................................2 1.2- Justificació ...........................................................................................................2 1.3- Destinatari ............................................................................................................3 1.4- Titular...................................................................................................................3 2.- Requisits dels Sistema i Eines Utilitzades ................................................................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.- Estructura de la Web.................................................................................................7 3.1- Introducció ...........................................................................................................7 3.2- Programa de l’Assignatura...................................................................................7 3.3- El Disseny de la web............................................................................................8 3.4- Ubicació i estructura dels arxius .......................................................................10 3.4.1- Temes..........................................................................................................10 3.4.2- Bibliografia .................................................................................................11 3.4.3- Flash............................................................................................................11 3.5-Marcs(frames) .....................................................................................................11 3.6- Utilització de la pagina d’estils..........................................................................13 3.7-Menus..................................................................................................................15 3.8- Conclusió ...........................................................................................................16 4.- Codi HTML i arxius flash. Manteniment de la Web............................................17 4.1- Introducció .........................................................................................................17 4.2- Tipus de dades....................................................................................................17 4.3- Modificació del text ...........................................................................................19 4.3.1-Modificions dels Marcs..............................................................................21 4.3.2-Modificacions de taules .............................................................................21 4.3.3-Modificacions apartats ...............................................................................21 4.3.4-Modificació Marco temas ..........................................................................22 4.3.5-Modificació del índex ................................................................................23 4.3.6-Modificació de la bibliografia....................................................................23 4.3.7-Modificació de fitxers d’imatges i equacions ............................................23 4.4- Modificació de simulacions i animacions.........................................................25 4.4.1-Inversor Nmos ideal/Cmos ideal................................................................26 4.4.2-Inversor Nmos............................................................................................29 4.4.3-Inversor Cmos............................................................................................35 4.4.4-Transistor ...................................................................................................44 4.5- Publicar la web a Internet .................................................................................55 4.6- Conclusió ..........................................................................................................56

5.- Manual d’usuari de l’aplicació ...............................................................................57 5.1- Introducció ........................................................................................................57 5.2- Requisits tècnics................................................................................................57 5.3- Navegació per la web........................................................................................57 6.- Conclusió final..........................................................................................................59 7.- Bibliografia ...............................................................................................................61 Plec de condicions..........................................................................................................63 1.- Introducció................................................................................................................63 2.- Condicions generals .................................................................................................63 3.- Condicions econòmiques .........................................................................................63 4.- Condicions Tècniques ..............................................................................................63 5.- Condicions Facultatives...........................................................................................64 Annexes ..........................................................................................................................65 Annexe 1 .........................................................................................................................66 Annexe 2 .........................................................................................................................67 Annexe 3 .........................................................................................................................68 Annexe 4 .........................................................................................................................70 Annexe 5 .........................................................................................................................71

1

Memòria Descriptiva

Memòria Descriptica

2

1.- Introducció a l’Eina Interactiva

1.1.- Introducció

El projecte que es presenta en aquest informe vol ser complementari a la docència

de l’assignatura Electrònica Digital I que s’imparteix al segon curs d’Enginyeria Tècnica Industrial especialitat en Electrònica Industrial de la Universitat Rovira i Virgili. D’una banda, l’alumne podrà seguir l’assignatura com es feia habitualment, i de l’altra, disposarà de l’eina interactiva que estarà penjada a d’Internet, per facilitar-ne l’accés, on podrà consultar els apunts i, millorar els coneixements amb les animacions dels conceptes més complicats.

El que pretenem realitzar en aquest projecte és una aplicació vàlida per complementar la docència, és a dir, partim de la base que el professorat a de continuar impartint l’assignatura, això amb tots els nous recursos que les noves tecnologies posen a l’abast.

Es tracta que sigui una aplicació útil que permeti alguna cosa més que la simple

consulta dels apunts per part dels usuaris. Una web on els continguts siguin fàcilment actualitzables: per les noves incorporacions de problemes, exàmens,… i on els elements de difícil comprensió també siguin explicats amb animacions que permetin adquirir els coneixements per part dels usuaris/alumnes.

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ó

Les assignatures precedents d’on s’ha extret part de la informació, malgrat tenir

web, només tenien els apunts i els enunciats dels problemes digitalitzats. Però en el portal d’Internet que es pretén realitzar, es vol arribar molt més enllà que reordenar la informació ja existent de l’assignatura.

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

primer lloc, es pot consultar des de qualsevol indret, i actualment, es una eina quasi imprescindible. La majoria d’alumnes en disposen a casa, i en cas negatiu, tenen al seu abast les sales d’informàtica de la Universitat.

El segon avantatge que ofereix, és la possibilitat d’anar ampliant i/o

modificant el contingut en funció de les necessitats concretes. Finalment, ofereix la possibilitat de penjar-hi animacions i simulacions que gairebé no requereixen un software específic –i en tot cas, hi ha programes gratuïts que permeten visualitzar-ho correctament-.

S’ha fet un disseny de la web, aprofitant alguna interfície web existent.S´ha fet un

disseny fàcil ,àgil, ràpid i deixant el màxim espai central per la visualització dels apunts, problemes i elements interactius. Iniciem el projecte primat el contingut i no pas el disseny. Es pretén que la nova eina sigui útil més enllà de poder trobar apunts i problemes, i sigui una eina capaç de resoldre dubtes i


3

explicar –amb ajuda de les animacions- les qüestions que requereixen més atenció per part dels alumnes.

Amb els nous programes d’animació com el Macromedia Flash, es poden explicar amb tot detall el funcionament dels principals elements electrònics de l’assignatura fàcil comprensió. El nou portal esperem que esdevingui un lloc de referència per la docència de l’assignatura, ja que deixem enrere les primeres webs on el contingut era gairebé el mateix que es podia deixar al servei de copisteria de la Universitat. 1.3.- Destinaris

Evidentment, com a complement a la docència de l’assignatura d’Electrònica Digital I

els principals usuaris es preveu que siguin els propis alumnes d’aquesta assignatura. Aquest fet no exclou que alumnes d’altres assignatures que tenen continguts semblants puguin utilitzar-la per comprendre millor alguns conceptes.

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

l’assignatura requereix, això s’intenta aconseguir amb les animacions dels punts més crítics, però alhora, s’espera que l’alumne desperti la seva curiositat i motivació, aconseguint que s’impliqui de manera activa en el coneixement de l’assignatura.

El fet que la web estigui penjada a Internet, també permet l’accés a tots els usuaris de

la xarxa. Es va optar per no restringir l’accés a la web amb contrasenya, perquè la informació no és pas confidencial i d’aquesta manera podem ampliar els continguts que ofereix la xarxa i, afavorir que cada cop sigui més lliure i oberta. 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 dels Sistema i Eines Utilitzades 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. El material necessari pel correcte desenvolupament de l’aplicació ha de ser recent, però no cal l’última generació de processadors per poder-hi instal·lar el software més modern, que permet el desenvolupament d’aplicacions d’Internet amb més prestacions. Així, amb una millor velocitat de processat d’informació per part de l’ordinador utilitzat, podrem instal·lar-hi programes com el Adobe Photoshop CS2, Macromedia Flash i Macrodemia Dreamweaver que són els que més recursos utilitzen de l’ordinador.

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 – es pot consultar al punt 4-. 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 PC compatible Processador Intel Celeron Dual-Core inside Freqüència de treball 2.0 GHz Memòria RAM DDR 4 Gb Disc dur serial-ata 250 Gb Tarja de vídeo ATI Radeon Gravadora de DVD-ROM +/-R

Impressora

Hem utilitzat per la realització de l’aplicació les següents impressores: Epson Stylus Color 5400 injecció de tinta

Router Hem pogut connectar-nos a Internet a través d’un router amb les següents

característiques: Router SAGEM 2404.. I la xarxa utilitzada ha estat la de l’empresa ORANGE

2.2.2.- Materials

CD’s gravables


5

2.2.3.- Software

Els programares utilitzat per la elaboració d’aquesta aplicació han estat el següent:

Microsoft Windows Vista Basic

És l’ultima versió de Microsoft

Macromedia Dreamweaver MX 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 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.

Macromedia Flash MX

Última versió del programa d’animació que hem escollit per realitzar totes les animacions de problemes i simulacions d’elements i dispositius electrònics. 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. La tria d’aquest programa no ha estat a l’atzar, com hem vist té una sèrie d’avantatges, i afegir la més important, que permet introduir-hi codi de programació en un format propi –semblant al c- que ens ha facilitat moltíssim l’automatització d’animacions i simulacions.

Firefox 1.0.7

Navegador web de lliure distribució, el qual hem utilitzat per la consulta de les pàgines i veure’n com quedava la seva visualització.

És el navegador que hem utilitzat sempre per la configuració de l’aplicació, ja que té forces prestacions, més que d’altres més populars, encara que no és tan utilitzat com d’altres d’inferiors característiques.

Internet Explorer 7

Última versió del navegador de Microsoft, encara que només s’ha utilitzat per corregir possibles errors, no s’ha utilitzat estrictament per l’elaboració del projecte. Es creia necessari fer una revisió de l’aplicació amb aquest navegador, ja que és el més utilitzat i segur que algun usuari l’utilitza. Per tant, hem retocat tot el necessari perquè no hi hagués errors ni amb el Firefox, ni l’Explorer.


6

Photoshop CS 2

El millor dels editors d’imatges existent al mercat. L’hem utilitzat per elaborar les imatges dels menús, i alguns esquemes de circuits que enlloc d’escanejar-los, la qual cosa feia que la seva qualitat era molt reduïda, hem preferit redibuixar-los de nou. Aquest programa permet la utilització de capes en les imatges, cosa que suposa un gran estalvi de temps alhora de fer-ne modificacions.

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 MX. També hem creat les equacions amb aquest programa i les hem passat al Photoshop CS 2 on les hem guardat en format jpg.


7

3.- Estructura de la web

3.1.- Introducció

En aquest apartat es pretén començar a abordar l’aplicació. Una de les primeres

parts que cal valorar és el disseny, en funció del que vulguem o puguem realitzar; la resta d’estructura estarà en funció seva. Elements com marcs, menús, arxius,... estan condicionats pel disseny que es vol dur a terme.

Per dissenyar la web partim de les necessitats que l’aplicació ha de complir, volem

que sigui un disseny agradable, però que simplifiqui l’actualització dels continguts. També, adjuntem el temari de l’assignatura que ens servirà de base per l’estructura i

disseny de la web, com dèiem, és una de les necessitats de l’aplicació mantenir l’estructura per capítols.

Per adaptar-nos a les necessitats de la web, hem treballat amb diversos tipus de

llenguatges de programació. Hem 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 Macromedia Flash.

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.- Programa de l’Assignatura I. Definicions i propietats bàsiques dels circuits integrats I.1 Paràmetres elèctrics I.2 Caracterització de circuits integrals digitals. II. El transistor MOSFET II.1 El transistor mosfet II.2 Inversor NMOS II.3 Inversor CMOS II.4 Portes de transmissió II.5 Caracterització elèctrica II.6 Estimació de capacitats i retards de propagació.

III. Disseny lògic amb MOS III.1 Síntesis de funció combinacional amb transistor de pas inversor III.2 Mòdul lògic universal III.3 Portes III.4 Estratègies amb rellotge. IV.Memòries. IV.I Dispositiu DSP IV.2 Memòries ROM IV.3 Memòries RAM


8

3.3.- El disseny de la web

Una de les premisses més importants alhora de plantejar-se el disseny de la web es

tenir ben presents les necessitats prèvies. En el nostre cas caldrà tenir en gran consideració que es tracta d’una web d’una assignatura i, per tant, serà recomanable seguir l’estructura dels propis apunts. Hem de fer el disseny prenent com a referència l’índex del temari i intentar que la interfície resultant permeti enllaços entre temes i altres elements que tot seguit dissenyarem.

Alhora de dissenyar la web hem tingut en compte les pàgines webs d’altres

assignatures, en aquestes s’havia prioritzat el contingut enfront el disseny. S’havien descuidat alguns aspectes que considerem bàsics per donar unitat en tot la web, per exemple –hi havia temes on els apunts estaven escanejats directament sense cap tractament de text ni d’imatges -. D’altres elements de dubtosa utilitat són els errors que generava les pàgines de testos dels diversos temes.

Acabem de parlar del disseny a grans trets, però ara ens cal plantejar-nos quins són els apartats que necessitem per plasmar el temari al conjunt de la web. És a dir, partim del temari que és la forma lògica d’enllaçar els apartats, i considerem que cal un menú dels temes que voldrem que estigui sempre visible. Seria molt interessant que aquest menú ens mostres al tema que esta en consulta. Posarem un menú amb els apartats de cada tema que també estarà constantment visible, però que en funció del tema consultat aniran variant els apartats. Tenim dos menús ja definits, el menú dels temes i del menú dels subapartats de cada tema.

Fins aquí hem distribuït la informació pròpia del temari, però per donar importància

a la web com element multimèdia, permetent que sigui una mica més que la còpia dels apunts.

El que acabem de plantejar podria ser el disseny de qualsevol web d’una assignatura de característiques semblants, però volem donar-hi valor afegit, primer perquè les noves tecnologies ho posen a l’abast i, segon, per millorar la finalitat de la web, que és la comprensió dels apunts per part dels alumnes/usuaris. En aquest context és on apareix la necessitat de realitzar animacions amb flash que mostrin de manera clara i entenedora els punts més conflictius del temari.

Com que els elements creats amb Flash s’incorporaran a les pàgines del temari, no

requeriran d’un menú específic. A efecte del disseny només haurem de tenir en compte els elements en Flash per insertar-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.

Hem exposat les necessitats del disseny, ara es qüestió de transportar-ho a la

interfície web. Per això, hem distribuït l’espai de la pàgina de la següent manera: a la part de dalt hi haurà els temes, on es podrà escollir el que vulguem, aquesta barra de navegació ocuparà molt poc espai. A la banda esquerra hi haurà: 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 tema –òbviament anirà variant en funció de cada un- i sota d’aquest menú, amb un altre menú desplegable hi haurà: enllaços, bibliografia –els temes que en disposin -.

Després de diverses proves, em escollir els fons blanc per tota la web. Els elements del

menú de l’esquerra fons blanc. Les pestanyes dels temes són blaves, les lletres blanques. Si la pestanya es seleccionada es transforma a color turquesa.


9

Sempre que es selecciona un tema podem veure el continguts del tema en la plana

principal i a la esquerra els diferents apartats del tema seleccionat. Per a cada tema em seleccionat un color de enunciat diferent per posar atenció en el canvi de tema seleccionat.

Figura 1.Plana principal de la web

Figura 2.Mostra de Disseny de la web


10

A tots aquests elements n’hi podem afegir un altre: les animacions o simulacions amb

Flash. És l’aspecte més innovadors que vol oferir al projecte. S’hi ha integrat animacions clares i senzilles, de gran ajuda per comprendre les qüestions més elementals. Amb aquestes ajudes solucionarem moltes mancances que pot tenir l’alumne solament consultant els apunts.

3.4.- Ubicació i estructura dels arxius

Encara que a la web hi hem treballat des del nostre ordinador personal, un cop

acabada per tal de fer-la accessible des d’Internet caldrà que la pengen en algun servidor. L’estructura serà la mateixa en ambdós casos. Tenim un directori arrel , hi ha partir d’aquí hi penjarem tota la informació: subdirectoris i fitxers. Tota la web ha sigut estructurada carpetes com hem dit de la mateixa forma que es veurà en el servidor.

Les carpetes ,hem intentat que siguin lo més intuïtives per poder accedir a elles de forma ràpida per realitzar possibles modificacions .

La estructura es: - Un arxiu INDEX en el qual com el seu nom indica es la pàgina principal per

accedir al tema que vulguem. -Un arxiu Tema_x que conte diferents arxius a la vegada. Després podem observar les carpetes TEMA_x,el la qual introduint tot el referent al

tema pertinent. Així doncs dins de la carpeta tema podrem trobar: -Apartado: fa referència a la par esquerra de la web en la qual es veu els diferents

punts o apartats del tema. -marcotemas: fa referència a la part superior en la qual observen les pestanyes dels

temes i observen activada la pestanya corresponent. -Índex: fa referència a la plana principal ,es veurà els contingut del tema. -per últim tenim diferents carpetes en las quals poden observar per exemple ;en la

carpeta flash definitius estaran ubicats tot el referent als arxius flash de les animacions realitzades.

Com hem pogut apreciar els noms són molt intuïtius cosa que facilita la cerca d’arxius. D’altra banda, el subdirectori enllaços no l’hem pogut anomenar enllaços perquè no ens ho permetia el sistema operatiu ni el servidor on hem penjat la web. Malgrat tot, encara continua sent un nom força lògic i fàcil de trobar.

3.4.1.-Temes

A les carpetes TEMA_X tindrem la informació corresponent a l tema. Aquests arxius són: - apartado.html: conté el menú de l’esquerra, serà diferent per cada tema. Per a cada tema esta constituït per:

Logo de la DEEA Apartats:els diferents apartats que conté el tema

Biografía:És comú a tos els temes. Enllaços: conte un hipervincle amb http://www.etse.urv.es/~ncanyell/

- marcotema.html: conté la barra de navegació per temes de la part superior de la web. Aquest fitxer és diferent per cada tema, ja que indica quin tema estem visualitzant. - index.html: conté l’índex del tema, apareix quan seleccionem un tema per primera vegada - 1.1.html: conté la informació de la primera part del tema.


11

- 1.2.html.... i, consecutivament, per les altres parts de cada temari.

Figura 3. Esquema dels arxius de la carpeta tema_1

Les imatges de cada tema estan gravades a l’interior de la carpeta: ”imagenes”. Les imatges generals com per exemple el icono de la Universitat ,hi son a la carpeta principal “proyecto.”

3.4.2.-Bibliografia La carpeta biografia tenim ,un arxiu índex que es on poden introduir la informació

que fa referència a aquest apartat.

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

la carpeta “flash definitivos.”els arxius .swf que poden ser visualitzats per la majoria de navegadors i en cas contrari, hi ha visualitzadors gratuïts a Internet. 3.5.- Marcs (frames)

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- com el de l’esquerra –canvia per cada tema- són mòbils. L’estructura que en volgut utilitzar es una que sigui molt intuïtiva i fàcil de realitzar possibles modificacions. Observarem com hem explicat abans les diferents carpetes que n’hi ha per tema(Tema 1,Tema 2…) dins d’aquestes carpetes tenim dos arxius que són “apartados.html” i “marcotemas.html”. El arxiu “apartados” fa referència a la part dels diferents apartats que conte el tema corresponent (part esquerra de la pantalla) i l’arxiu “marcotemas.html” fa referència a l part de les pestanyes on es pot observar el tema seleccionat.


12

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

Per realitzar els efectes dels canvis de pagina hi haurà de vincular cada apartat a la direcció corresponent.En la imatge poden observar un exemple de vinculació. Això vol dir que quan seleccionen o fem clic amb el ratolí damunt d’aquest aparta anirem al punt 3.1 del tema 3.

Figura 5. Exemple de vinculació

Per realitzar modificacions simplement tindrien que anar a la carpeta del tema corresponent i seleccionar el arxiu a realitzat la modificació.

marcotemas

apartados


13

3.6.- Utilització de la pàgina d’estils

El llenguatge html –de disseny de planes web- permet confeccionar múltiples

opcions de disseny, per poder-ho visualitzar després amb un navegador web. Si el que volem construir són poques pàgines, no hi ha cap problema en anar-les realitzant cadascuna individualment i introduint els elements de disseny comuns –colors, lletres, fons,...-, un cop acabades les pàgines, si per exemple, volem canviar el color del fons de cada pàgina, les haurem de tornar ha editar una per una.

Si apliquem el disseny de forma individual a 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’estils5 –tenen per extensió css- i amb una sola fulla 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.

Evidentment tots aquests estils que hem creat, s’apliquen a la web de forma

combinada uns amb els altres. En una mateixa pàgina hi poden aparèixer molts tipus d’estils.

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-.

Òbviament, el fet d’utilitzar imatges afecta al temps de càrrega de la web ja que són

forces imatges. El temps de càrrega de la pàgina d’estils és molt reduït i permet anar més ràpid al carregar la pàgina.

L’ús de les pàgines d’estils, si bé augmenta la versatilitat de la web en general, és molt positiva per la confecció de menús, ja que evita l’ús de moltes imatges. És el principal ús que en donarem a la nostra web. Podrem tenir un disseny propi dels menús sense haver de fer ús d’imatges, però amb les mateixes funcions que utilitzant-ne.

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.

Figura 6. Inserim l'estil que vulguem a cada fitxer HTML


14

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

Figura 8.Arxiu creat css que vulguem incerta a l’arxiu html 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’insertar la pàgina d’estils i els estils corresponents a cada part de l’arxiu html.


15

Tot el que em explicat es de forma general.Com que nosaltres no som dissenyadors de pagines web em fet el disseny de estils d'una manera més fàcil. Simplement em agafats el apunts de l’assignatura, en millorats les imatges amb el corresponent programa i hem fet un “guardar como” tipo “pagina web” així doncs es crea uns estils del propi arxiu.

Figura 9. Mostra com guardar l’arxiu. 3.7.- Menús

Com hem vist en el disseny, hem cregut molt convenient que la visualització sigui

ràpida i fàcil. A la part superior es pot observar els diferents temes de la web i a la part esquerra els diferents apartats del tema seleccionat.

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 pestanya a una tonalitat més suau.A la part esquerra per indicar l’apartat seleccionat es fa un efecte de canvi de lletra augmentant el tamany i canvien el color a un blau més intens. És a dir, que en tot moment sabem en quin tema i quin apartat estem situats.

També hem incorporat el logo de la DEEEA a la part superior esquerra amb un hiperenllaç cap a la seva pàgina.

Com es pot observar el nostre objectiu es que la visualització dels continguts sigui lo

més clara i ample possible. Així es facilita el enteniments dels continguts.


16

Figura 10 .Apartats de la web

3.8.- Conclusió

Hem partit de les altres webs realitzades sobre altres assignatures molt semblants, hem avaluat les mancances que si derivàvem i hem pensat en millorar tota la interfície. Les principals millores han estat: utilitzar molt més espai per la visualització de la informació, adaptar el disseny a les resolucions estàndards i utilitzar full d’estils que permet una canvi de disseny molt ràpid i efectiu.Introduir més animacions per fer una clara explicació dels apartats més significatius del temes.

Hem intentat seguir una estructura la més fàcil possible per poder fer les

modificacions de la web de manera ràpida. Navegant per un tema, es troba que tots els arxius són idèntics per la resta, cosa que creiem que facilita les coses.

Ara que ja tenim l’estructura i el disseny ja podrem fer les modificacions que

vulguem, sempre tenint en compte de si es tracta d’un fitxer .html o .swf o .fla. –ho veurem al punt 4-.


17

4.-Codi HTML i arxius de flash. Manteniment de la web.

4.1.- Introducció

Actualment, la programació i disseny de pàgines web ha canviat molt respecte les

primeres aplicacions creades ja fa més de 10 anys, quan es va començar a introduir l’ús d’Internet a la societat. Des de llavors, ha experimentat un notable augment d’abonats i una millora en les prestacions tècniques.

Per això, no ens podem plantejar una web amb les mateixes característiques

tècniques que les primeres que es van construir per altres assignatures, hem de donar un pas més, en d’anar més enllà, i amb les noves eines informàtiques aplicar-les per tenir una nova interfície més agradable, però sobretot més funcional.

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.

En l’elaboració de la web partirem de zero, perquè tal i com hem justificat, hem

considerat que era la millor opció. Encara que la major part de la web –disseny, animacions, simulacions- no caldrà modificar-les, explicarem amb tot detall, el procés que hem seguit pel seu desenvolupament.

Creiem que és clau l’actualització, sempre que sigui possible. Ja que d’aquesta

manera és converteix amb un element molt més dinàmic i útil i resulta molt més interessant per part de l’usuari. 4.2.- Tipus de dades En cregut que tot el contingut de la web sigui fàcil de entendre,per això em fet que totes les animacions estiguéssim integrades als mateixos apunts .Així aconseguim que a mes de llegir els apunts ,es pot fer una consulta amb la animació per la correcta assimilació dels apunts.

- 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 marcs9 ; 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.

- Fitxers amb imatges i equacions: aquests arxius, a més a més de text, incorporen

imatges i/o equacions. A la nostra aplicació i a causa del format erroni que agafaven les equacions amb

elements amb subíndex i superíndex, em decidir realitzar-les amb el Microsoft Word capturar-les i passar-les al Photoshop on les posarem al tamany adequat per ser incloses, finalment, a la pàgina de text de la web.

Les imatges o circuits han estat aprofitats d’altres webs precedents i, si la qualitat no

ho permetia, redibuixats de nou


18

- Fitxers Flash: són els arxius que, a banda de text i/o imatges, tenen insertades 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 Per realitzar modificacions en els arxius flash es fan obrim el arxius.fla. Els fitxers flash estan ubicats dins de la carpeta “flash definitius”.

De tots els formats que acabem de tractar, en funció del tipus de fitxer es modificaran

amb un o altre programa. El Dreamweaver MX 20041 el farem servir per editar tots els fitxers a excepció de les imatges, equacions i fitxers .fla. El Flash MX 20042 l’usarem per modificar i editar les animacions i simulacions de circuits i/o problemes. Finalment, el Photoshop l’usarem per editar les imatges i guardar les equacions que prèviament haurem realitzat amb el Microsoft Word.

Cal tenir molt de compte a editar cada fitxer amb el seu programa adequat per evitar

incompatibilitats a l’hora d’obrir-los. D’altra banda, per a la realització de la web hem realitzat les modificacions amb els programes anteriorment descrits, però n’hi ha d’altres. Per editar documents html un altre programa que també té entorn gràfic és el Microsoft FrontPage, per l’edició d’imatges existeixen molts més, com el Gimp programa gratuït, pel que fa referència a programes per l’edició de text –semblant al text- podem utilitzar l’Openoffice que també és gratuït. En canvi, per la realització d’animacions en Flash el programa que ofereix més característiques és el que hem utilitzat, i malgrat haver-n’hi d’altres no ofereixen, ni de lluny, totes les opcions del que utilitzat.

Un cop hem definit el tipus de dades i programes amb que cal realitzar l’edició dels arxius, només ens queda explicar amb detall els aspectes més significatius que ens podem trobar al fer modificacions. Reiterem que comentarem els punts més crítics, als que cal posar-hi més atenció, però sense cap mena de dubte no es pretén profunditzar en tots les opcions que s’han utilitzat en la confecció de la web, ja que algunes són elementals.

Tenim molt clar, que no podem comentar tots els aspectes que ofereix el Dreamweaver, el Flash ni per descomptat les opcions gràfiques del Photoshop, i per tant referenciem uns manuals per cada programa que creiem poden servir de gran ajuda.

També s’explica l’edició d’arxius .fla, però degut a la complexitat i gran quantitat de

característiques que s’han utilitzat en la realització, suposarem que l’usuari sap els conceptes bàsics d’un programa d’animació d’aquest tipus. En cas contrari es pot consultar el manual referenciat anteriorment.

1 Podeu consultar un manual complet del programa a http:/www.macromedia.com/support/documentation/es/dreamweaver 2 Podeu consultar un manual complet del programa a http:/www.macromedia.com/support/documentation/es/flash


19

4.3.- Modificació del text

Per editar arxius de text hem d’editar només les extensions html –extensió .html i

.htm-. Hem utilitzat el programa Macromedia Dreamweaver MX 2004 i de sistema operatiu el Windows Vista Beta. D’aquest programa se’n troben diverses versions per MAC i per Linux es poden editar amb altres programes.

En aquesta part, només es documenta l’edició d’arxius .html /.htm els fitxers en format .fla /.swf estan documentats en el punt 4.5. Els arxius .html són els majoritaris a cada tema i contenen el text i les imatges.

El navegador que es fa servir per comprovar el correcte funcionament de les pàgines

és Internet Explorer només se’n comprova que la navegació no produeixi errors.

Els arxius de text permetran la modificació de gairebé la totalitat de la web, cal tenir present que els arxius Flash també són inserits a les pàgines de text per ser visualitzats correctament. Una de les principals opcions que podem canviar del disseny és el tamany dels marcs, això permetrà canviar l’aspecte dels menús i de la resta de la web.


20

4.3.1.- Modificació de marcs Com hem dit abans els marcs s’utilitzen per fer els diferents menús de navegació de

la nostra web.També em comentat els diferents tipus de marcs que consta la nostra web i la seva ubicación.Per tant simplement agafarem l’arxiu a modificar i realitzarem les modificacions desitjades.

Tots el marcs que hem fet som composats per taules que més endavant comentarem com s podem modificar.

Les modificacions de tamany ,per exemple ,es poden fer simplement canviar la dada corresponent com poden observar a la imatge.

Les diferents modificacions es faran igual que ha una pagina tipus Word.

Figura11.Es pot observar les diferents mides del marc “apartados”


21

4.3.2.- Modificació 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.

Nosaltres les hem fet servir per crea el contingut dels marcs i els diferents apartats de navegació.També les hem fet servir als apunts i per introduir les diferents simulacions.Així es pot destacar diferents continguts dels apunts.

A l’hora 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 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 “Insertar” – “Tabla” 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 “Ancho de la tabla” posarem 100 i triarem “Porcentaje”, al “Grosor del Borde” posarem 0 i la resta d’opcions no cal modificar-les, només ens queda posar “Acceptar”.Així tenim la taula creada.

Figura 12.Inserció d'una nova taula 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 -.


22

4.3.3.- Modificació apartados

Aquest menú permet navegar per cada apartat de cada tema,com hem dit abans esta ubicat a la carpeta corresponent del tema - així doncs si volem modificar el menú de la esquerra del tema_X ,obrirem la carpeta del tema _X i amb el Dreamweaver obrim l’arxiu apartados.

Figura 13.Menu apartados del tema 4

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.

Com es pot observar i em dit abans en utilitzat taules,i si volguéssim afegir un nou

apartat,només en caldrà introduir una nova cel·la a la taula.

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 insertar al menú.

4.3.4.- Modificació marcotemas

Aquest menú ens permet elegir el tema seleccionat,com es lògic sempre haurà un tema seleccionat,per això una de les pestanyes té un color diferent.

Figura 14Imatge de “marcotemas”

Per realitza modificacions i com hem dit abans cada tema té el seu arxiu

marcotemas,així anirem a la carpeta seleccionada del tema que vulguem i obrim l’arxiu.


23

4.3.5.- Modificació dels índex

La primera vegada que entrem a l’aplicació apareix un índex de tots els temes i

permet escollir-ne un. Aquest índex només apareix la primera vegada i ja no apareix més, excepte si tornem a l’inici. Els altres índex que apareixen són el de cada tema. En el qual indiquen els coneixements a assolir

Per modificar l’índex del principi o inicial de l’aplicació només ens cal editar l’arxiu índex de la carpeta “proyecto”.

Per modificar l’índex de cada tema simplement obrim la carpeta del tema corresponent i seleccionen índex .

4.3.6-Modificació de la Bibliografia

Per modificar el contingut bibliografia cal anar a la carpeta “bibliografia” ,en aquesta es troba l’arxiu html índex. Aquets arxiu es comú per a tots el temes per això qualsevol modificació serà general

4.3.7.- Modificació dels fitxers d’imatges i equacions 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 documentats3 per poder fer modificacions bàsiques.

Per fer les modificacions o creació de noves imatges dependrà de l’editor que utilitzem, entre un i l’altre el seu funcionament varia substancialment per la qual cosa, en funció del que s’utilitzi caldrà documentar-se.

Alguns dels circuits dibuixats a la web malgrat ser els mateixos que en d’altres webs

d’assignatures semblants d’altres ensenyaments, s’han dibuixat de nou a causa de la seva poca resolució o que estaven dibuixats a mà i escanejats.

Vam pretendre de realitzar una web nova, sense prima el disseny, però si una mínima estructura comuna per tots els elements gràfics, per això, em 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

Els subíndex4 i superíndex5 que formen part d’una equació han estat realitzats com

equació amb el Microsoft Word i convertits en imatges, per la seva perfecta visualització.

Per modificar les imatges hem utilitzat el Photoshop. Malgrat tot, hem posat especial cura en la modificació d’imatges perquè no tinguessin cap error. Considerem que les imatges no s’han de modificar gairebé mai, com a molt s’haurà d’ampliar amb d’altres de noves.

3 Es pot consultar ha Internet la gran quantitat de manuals que hi ha. 4 Per inserir subindex on no formin part d’equacions hem de seleccionar l’estil subindex 5 Per inserir superindex on no formin part d’equacions hem de seleccionar l’estil superex


24

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, més que no pas el format gif. A l’hora de gravar les imatges amb el Photoshop ho hem fet a “guardar para la web” on hem escollit el format jpg a màxima resolució, d’aquesta manera el propi programa optimitza les imatges perquè ocupin menys espai, però sense que afecti a la visualització.

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ú “Insertar” seleccionem “Imagen”, i triem la imatge que 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ó web19 ,

modificar tamany si totes les opcions que ofereix el Dreamweaver. Però en el cas que ens ocupa, les imatges i equacions convertides amb imatges, les insertem 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 insertem 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.

Una recomanació es guardar les imatges en format psd, encara que després a la web

només utilitzem format jpg. Al guardar-les en format del Photoshop ens permet gravar l’arxiu tal i com l’estem editant, és a dir, les capes no es barregen i en cas que vulguem fer- hi modificacions ja tindrem bona part de la feina feta. Recordem que el directori on es guarden les imatges originals és el /imatges originals/temaN/.

També, cal tenir present, que si agafem un document en word i el passem

directament a html amb el converso que el propi programa té incorporat , les imatges es veuen amb molt mala qualitat, és per això que hem decidit agafar cada imatge del Word passar-la al Photoshop i a partir d’aquí gravar-la amb jpg, amb el mateix procediment que l’explica’t anteriorment.

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.


25

4.4.- Modificació de simulacions i animacions

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

simulacions que s’han incorporat a la web. El programa que s’ha usat és el Macromedia Flash MX 2004. 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 rellevant del programa. Segurament per poder realitzar modificacions d’importància, caldrà buscar més informació al manual.

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, interpolación de movimiento,de forma...

Els arxius originals .fla –que no permeten la visualització amb el navegador, però permeten la modificació- són a la carpeta flash definitivos.

Un aspecte important a conèixer del Flash, són els frames o fotogrames. Aquests

elements són petites unitats de temps –la duració dels quals es pot modificar- i que permeten insertar 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.


26

4.4.1.- Inversor Nmos_ideal / Cmos_ideal Explicarem el funcionament de la simulació NMOS_ideal, aquesta simulació té el

seu homòleg a la anomenada cmos_ideal,per aquesta raó amb una solo explicació totes dues serra compreses.

A la imatge podem observar la pantalla principal de la simulació.

Figura 15.Pantalla principal


27

Ara passarem a explicar la composició de la simulació i el seu funcionament. A la imatge podem observar les capes de la simulació en les quals esta els diferents

continguts

Figura 16 Pantalla principal En la capa acciones es on esta col·locat el codi de programació: El codi6 que hem introduït al frame 1, per començar la simulació inicialitzant

les variables i la posició inicial. El codi7 que hem introduït al frame 2, es on esta programat les condicions de funcionament de l’interruptor.

En les capes anomenades letra /letra_n esta contingut els diferents textos de la simulació e imatges de circuits.

A la capa SIMBOLO esta contingut el dibuix del símbol d'un inversor. A la capa circuito esta introduït el dibuix de l’interruptor. Per realitzar modificacions simplement anirem a la carpeta desitjada i realitzar

directament els canvis. L’interruptor de selecció de nivell lògic es un clip de pel·lícula el qual esta compost

per diferents capes con es pot observar a la imatge.

6 Es pot consultar l’annexe 1 7 Es pot consultar l’annexe 1


28

Figura 17.Pantalla clip de pel·lícula interruptor

El contingut es ben senzill simplement a les capes letras _n/estado_n estant contingut els diferents textos que fan referència a l’estat_n.

A la capa interruptor con el seu nom indica esta contingut l’interruptor en la posició de nivell 1 al frame 1 i de nivell 0 al frame 2.

El funcionament de la simulació es senzill simplement l’usuari pot seleccionar el nivell lògic d’entrada i observar el funcionament i observar el que passa a cada transistor.


29

4.4.2.- Inversor Nmos

Explicarem el funcionament de la simulació del inversor nmos,com en el cas anterior amb aquesta explicació també es pot aplicar al inversor cmos ,perquè el funcionament es idèntic. Però com hi ha certes particularitats explicarem les dues simulacions. A la imatges es pot observar la pantalla principal .

Figura 18..Pantalla principal

El usuari pot seleccionar el nivell d’entrada ,d’aquesta manera pot observar el diferents estats dels transistor,el circuit equivalent i pot observar la gràfica de carrega del condensador de sortida,les formules de temps de carrega. A la vegada pot observar les diferents corrents que actuen al circuit.

Com en els cas anteriors explicarem les diferents capes de la simulació i la programació que s’ha fet per realitza la simulació.Amb aquesta explicació es podrà fer les modificacions desitjades. A la imatge podem observar les diferents capes de la simulació.

Figura 19.Capes de la simulació


30

El contingut de les capes es el següent:

A la capa acciones tenim la programació del frame 18 i al frame 29. A la capa corriente hi som els dos clips de pel·lícula anomenats :

elevcc,que correspon a la corrent de alimentació. entrada que fa referència a la corrent d’entrada al seleccionar el nivell “1” lògic.

Amb aquest clips de pel·lícula aconseguim realitzar els efecte de moviments de les corrents o efectes de la simulació.

Explicarem la seva composició, per entendre el funcionament i per poder realitzar qualsevol modificació desitjada.

Clip de pel·lícula elevcc: A la imatge es pot observar les diferents capes que forma el anomenat clip de pel·lícula.

Figura 20.Capes del clip de pel·lícula elevcc

El contingut de les diferents capes que formen el clip es el següent: Capa acciones:al últim fotograma hi hem posat la parada de la simulació. Capa equivale:dibuix del circuit equivalent quan en selecciona el nivell

d’entrada “0” Capa efecto:dibuix del requadre vermell que indica la formula del la constant

de temps corresponent al nivell seleccionat. Capa punto _grafica:Dibuix del punt que es pot observar a la gràfica Capa gràfica:Dibuix de la gràfica de carga/descarrega. Capa texto:El diferents textos que es poden observar a la simulació. Capa corriente:Dibuix del quadrat groc que representa el recorregut de la corrent. Carpeta linea:Dibuix de la línea vermella que indica el recorregut de la corrent. Es repeteix per indicar la carrega de Vo

8 Es pot consultar a l’annexe 2 9 Es pot consultar a l’annexe 2


31

En la següent imatge poden observar el contingut de les capes abans

explicades ,en referència al clip de pel·lícula elevcc.

Figura 21.Contingut de les capes del clip elevcc

Clip de pel·lícula entrada A la imatge podem observar les deferents capes que composem el anomenat clip de pel·lícula.

Figura 22.Capes del clip de pel·lícula entrada El contingut de les diferents capes que formen el clip es el següent:

Capa acciones: al últim fotograma hi hem posat la parada de la simulació Capa equivalent:dibuix del circuit equivalent quan en seleccionat el nivell d’entrada “1” Capa corriente:Dibuix del quadrat groc que representa el recorregut de la corrent Carpeta linea1:Dibuix de la línea vermella que indica el recorregut de la corrent. Capa punto _grafica:Dibuix del punt que es pot observar a la gràfica Capa grafica:Dibuix de la gràfica de carga/descarrega. Capa efecto:dibuix del requadre vermell que indica la formula del la constant de temps corresponent al nivell seleccionat. Capa letras:El diferents textos que es poden observar a la simulació.

Capa linea

Capa corriente Capa efecto

Capa punto Capa grafica Capa texto

Capa equivale


32

En la següent imatge poden observar el contingut de les capes abans explicades ,en referència al clip de pel·lícula entrada.

Figura 23.Contingut de les capes del clip entrada

A la capa corriente 2 : hi ha el clips de pel·lícula anomenat descarin ,per

realitzar la simulació quan es selecciona el nivell de entrada “0”.Es pot observar el efecte de corrent de descarrega del transistor d’entrada.

Dins d’aquest clips de pel·lícula les diferents capes per realitzar el efecte de moviments de les corrents o efectes de la simulació:

Clip de pel·lícula descarin:

Figura 24.Capes del clip de pel·lícula descarin.

El contingut de les diferents capes pel qual esta format es el següent: Capa acciones: al últim fotograma hi hem posat la parada de la simulació Capa corriente:Dibuix del quadrat groc que representa el recorregut de la corrent. Carpeta linea1:Dibuix de la línea blava que indica el recorregut de la corrent. Capa texto:El diferents textos que es poden observar a la simulació.

Capa corriente

Capa linea1

Capa letras

Capa grafica

Capa puntp_graafica

Capa equivale

Capa efecto


33

En la següent imatge podem observar el contingut de les capes abans explicat pel

anomenat clip de pel·lícula descarin.

Figura 25.Contingut de les capes del clip descarin.

A la capa letras,com el seu nom indica hem introduït diferents textos generals de la simulació. A la imatge es pot observar aquest textos.

Figura 26.Contingut de la capa letras

Capa corriente

Capa texto

Capa linea 1


34

A la capa circuito tenim dibuixat el circuit corresponent al interruptor i a l’esquema

del circuit inversor nmos. Es pot observar o ens podem preguntar el perquè hi ha diversos circuit en diferents capes,es realitza això per poder realitzar canvis en fotogrames diferents ,per fer la simulació més real.

Figura 27.Contingut de la capa circuito. Com hem dit abans en aquesta capa poden observar l’ interruptor per seleccionar el nivell d’entrada,aquest és un clip de pel·lícula anomenat inter.

Clip de pel·lícula inter:

Figura 28.Capes del clip inter El contingut de les diferents capes es el següent:

Capa acciones: al primer fotograma hi hem posat la parada de la simulació,que es en la posició d’entrada a nivell 1.


35

Capa interruptor:Dibuix del interruptor,es pot observar que te dos frame,en el frame 1 es la posició a nivell “1” i al frame 2 es la posició a nivell “0”.

Figura 29.posicions de interruptor Capa fondo:Es simplement per augmentar la superfície de detecció quan posen el ratolí damunt l’interruptor.

A la capa condensador tenim dibuixat el condensador de sortida del circuit. A la capa formulas tenim con indica el seu nom les formules de les constants de temps de carrega i descarrega.

En resum el contingut de les capes que formen la simulació es: Capa acciones:Conté programació de la que consta la simulació. Capa corriente:Conté els clips de pel·lícula elvcc i entrada. Capa corriente 2:Conté el clip de pel·lícula descarin Capa letras:Conté diferents textos de la simulació. Capa circuito:Conté l’esquema del circuit inversor. Capa condensador:Conté el dibuix del condensador de sortida. Capa formulas:Conté les formules de la constant de temps. 4.4.3.- Inversor Cmos Explicarem el funcionament de la simulació Inversor Cmos,com hem dit hi ha moltes semblances amb la simulació Inversor Nmos,per aquesta raó,la explicació serà menys detallada,però lo suficient per tindré els coneixements de funcionament i cobrir les necessitats de poder realitzar les modificacions pertinents. A la imatge següent es pot observar les capes i la pantalla principal que formen la simulació.

Figura30.Capes de la simulació


36

Figura 31.Pantalla principal.

El funcionament de la simulació es el mateix que en la simulació Nmos,l’usuari pot seleccionar el nivell de entrada desitjat i observar el comportament de la corrent i l’estat dels transistor.

Explicarem el contingut de les diferents capes que formen la simulació. Capa acciones:Es formada per dos fotogrames framen 110 on es fa la initzializació de les variables i frame 211 on es troba el cos de la programació per realitzar els diferents efectes Capa letras:Conté diferents textos corresponent a la pantalla principal. Capa corriente2 :Conté els clip de pel·lícula anomenat elevcc. Aquest clip de pel·lícula tenim el circuit equivalent quan el nivell d’entrada es “0”,la gràfica de constant de temps,el punt de la gràfica i l’efecte de senyalització de la formula de la constant de temps corresponent.

10 Es pot consultar a l’annexe 3 11 Es pot consultar a l’annexe 3


37

A la imatge es pot observar els continguts anomenats i les capes que formen el anomenat clip de pel·lícula.

Figura 32.Clip de pel·lícula elevcc3 Es pot observar que tenim diferents carpetes anomenades v0 =0/1, vo=2, vo=3, vo=4, vo=5, en les qual esta els efectes de recorregut de la corrent.Es a dir ,la línea vermella que s’observa al recorregut fet per la corrent. Capa corriente:En aquesta capa tenim diferents textos insertats,el circuit equivalent

corresponent quan seleccionem el nivell d’entrada “1”,la gràfica de la constant de temps i el quadre vermell que ens fa referència a la formula corresponent de la constant de temps.

Esta format per tres clips de pel·lícula,anomenats alimen, entrada,salida. En aquesta capa es tracta els efectes que poden observar quan em seleccionat el

nivell d’entrada “1”

linea 2 linea1

linea 3

linea 4

linea 5 linea 6

Efecto

equivalente

grafica


38

Clip de pel·lícula alimen:

Es realitza per observar el efecte de la corrent Icc. Esta format per les capes: Acciones:esta posat la parada de la pel·lícula. Corriente: requadre groc que representa el corrent. Línia 1-2:Línea vermella que indica el recorregut de la corrent Texto:Per introduir diferents textos que volem fer visibles en algun

moment.La tenim buida per si volem fer algun mena de modificació

Figura 33.Clip de pel·lícula alimen

Linea 1

linea 2

corriente


39

Clip de pel·lícula salida:

Es realitza per observa el efecte de la tensió de sortida. Poden observar com es produeix la descarrega tant en el valor de tensió com

la situació a la gràfica. Esta format per les capes: Acciones:Esta posat la parada de la pel·lícula. Efecto:Quadre vermell per indicar la formula de la constat de temps

corresponent. Equivalente:Dibuix del circuit equivalent corresponen al nivell d’entrada seleccionat. Punto:Punt de la gràfica. Carpetes vo=5 ,vo=4 ,vo=3 ,vo=2 ,vo=1/0,es realitza per fer l’ efecte de descarrega de la vo.Corriente es el requadre groc representant la corrent Grafica:Dibuix de la gràfica de la constat de temps.

Figura 34.Capes clip de pel·lícula salida


40

Figura 35.Clip de pel·lícula salida

Linea 1

Linea 2

Linea 3

Linea 4 Linea 5

Linea 6

grafica

punto

corriente

texto


41

texto

Linea 1

invc

Linea 3

Linea 2

Clip de pel·lícula entrada:

Es realitza per observar el efecte que fa quan seleccionem en nivell d’entrada “1”. Podem observar el efecte als transistor i el estat en el que estan treballant. Esta format per les següents capes: Acciones:Es on posem la parada de la pel·lícula. Invcc:Requadres groc que fan el efecte del recorregut del corrent Linea 1,Linea 2,Linea3:Son les linea que fan el efecte de marcar el

recorregut del corrent. Texto:Es on es posa els diferents textos en els qual informen del estat del transistor i les línees posades a la porta dels transistor per indicar el seu estat

Figura 36.Clip de pel·lícula entrada


42

Capa corriente 3:.Conté el clip de pel·lícula anomenat descargain,el qual forma part del efecte que es produeix quan es selecciona el nivell d’entrada “0”.

Clip de pel·lícula descargain: Esta format per les capes següents: Capa acciones:Conté la parada de la pel·lícula. Capa corriente:requadre groc per fer el efecte de corrent. Capa linea: Línea vermella que indica el recorregut del corrent. Capa texto:Conté el text de informació del estat del transistor i línea posada en la porta del transistor per indicar el seu estat

Figura 37.Clip de pel·lícula descargain

linea corriente

texto


43

Capa despmos Conté el clip de pel·lícula anomenat despmos,el qual forma part del efecte que es produeix quan es selecciona el nivell d’entrada “0”

Clip de pel·lícula despmos: Esta format per les capes següents: Capa acciones:Conté la parada de la pel·lícula. Capa corriente:requadre groc per fer el efecte de corrent. Capa linea 1 ,linea 2:Linea vermella que indica el recorregut del corrent. Capa letras:Conté el text de informació del estat del transistor i línea posada en la porta del transistor per indicar el seu estat.

Figura 38.Clip de pel·lícula despmos Capa circuito:Conté l’esquema del circuit inversor cmos. Capa condensador:Conté el dibuix del condensador de sortida. Capa formulas:Conté les formules corresponents a la constant de temps.

corriente

Linea 2

Linea 1

letras


44

4.4.4.-Transistor

Explicarem el funcionament i composició de la simulació transistor.Amb aquesta

simulació el que es pretén és fer més fàcil el funcionament d’ un transistor i les seves etapes de treball.

Aquesta simulació no conté cap clip de pel·lícula,que volen dir amb això,que esta formada íntegrament per diferents capes i carpetes les quals contenen el fotogrames pertinents de la pel·lícula. Per aquesta raó la comprensió del funcionament i estructura de la simulació es més fàcil d’ entre i molt més fàcil i directe de realitza possible modificacions. Aquesta simulació té la particularitat de la seva funcionabilitat, és a dir poden observar de varies formes la simulació. Es pot observar sencera o en un moment o etapa que el usuari vulgui.

A més per fer més còmode la comprensió hem posat uns menús o botons de stop i play per aturar o iniciar el moment de la simulació.

La simulació esta composada per una pàgina principal o presentació del que es va

observar.Podem veure l’estructura d’un transistor i el seu esquema.

Figura 39.Pantalla principal de simulació transistor.

Com podem observar en aquesta pantalla tenim un botó de PLAY per polsar quan es vol iniciar la simulació.

Aquesta pantalla principal esta ubica al fotograma 1 de la simulació i formada per varies capes.

A la imatge 39 es pot observar la capes i carpetes que formen la simulació.


45

Figura 40.capes i carpetes de la sumissin transistor.

La pantalla principal esta formada per les capes següents: Texto:Tenim ubicades únicament les lletres de l’esquema del transistor.

Vgs ,Vds,G,S… i el títol de la simulació. Presentación:En aquesta capa tenim els textos explicatiu el quan ens indica el que poden observar.

En aquesta capa tenim un clip de pel·lícula anomenat pulsa _play.La funció d’aquest clip es fer el efecte de canvi de color del texts que ens indica que tenim que polsar play per començar la simulació. Clip de pel·lícula pulsa _play: És un clip de pel·lícula molt senzill. El que hem fet es crea un nombre de fotogrames on en posat les lletres de color Blau i altes de color vermell.No hem posat cap stop o parada de pel·lícula i com aquesta no para mai el efecte que provoca es veure el text canviar de color.El podem observar a la imatge 40/41.

Figura 41.Efecte text blau Figura 42.Efecte text vermell. Texto_tr2:Conté el text del dibuix del transistor de la esquerra. Transistor:Conté els dibuixos dels transistors. Boton_ini:Conté el boto de PLAY12 per començar la simulació. A la imatge 42 podem observar la col·locació de les capes que formen la presentació de la simulació transistor.

12 Es pot consultar a l’annexe 4


46

Figura 43.Capes que formen la pantalla de presentació.

Començarem a explicar la simulació, tot el explicat fins ara fa referència com hem dit ,a la pantalla inicial de la simulació. Una vegada l’usuari pulsa el botó PLAY es pot observar la pantalla principal i la gràfica de les corbes de característiques del transistor. Es pot observar en primer lloc,el funcionament en la zona de tall,després la formació de canal i el funcionament en la zona òhmica,seguidament es pot observa el funcionament en la zona de saturació. Tot això es pot observar seguidament o pausat quan es vol i continuar gràcies als diferents botons que hi ha.

Figura 44.Pantalla de la simulació


47

Fins aquí en explicat tos el continguts de les diferents carpetes que contenen el referent al funcionament de les zones.Gràcies aquest contingut fem els efectes de funcionament. Com es pot observar si volguéssim fer alguna modificació simplement seleccionem la carpeta desitjada i desprès seleccionem la capa a la qual volguéssim fer la modificació. Abans de fer la explicació de la simulació, explicarem el contingut de la pantalla.

Podem observar els diferents botons que el usuari pot utilitzar. Tenim els botons de les zones de treball, els quals si es prem anirem directament ha

observar el funcionament d'aquesta zona. Tenim el botó INICI ,el qual ens porta a la pantalla principal. Tenim els botons PLAY / STOP per realitzar una parada de la simulació quan el

usuari ho cregui convenient i desprès reanuadar la simulació des de el punt n havia fet la parada.

Es pot observar la gràfica de les corbes de característiques de les zones de funcionament del transistor. En aquesta gràfica es pot observar un punt que ens indicarà en la zona on estem,això esta explicat més endavant.

Una vegada en fet aquesta petita introducció començarem a explicar la construcció i formació de la simulació.

En fet una estructuració per carpetes per fer més senzilla la comprensió i possibles

modificacions que es poden fer en un futur de la simulació. Les carpetes que en creat son formacanal, tall,òhmica,saturació,gràfica.

Figura 45.Carpetes de la simulació Començarem explicant el contingut de les diferents carpetes per ordre de funcionament de la simulació. La simulació comença en la zona de tall,desprès formació de canal i òhmica , per últim saturació. Carpeta tall:

En aquesta carpeta en fet tota la construcció per poder observa la i entendre la zona de tall. Podem observar el recorregut del corrent i el posicionament de les cargues. Esta format per varies capes i fem una repetició d’ aquestes per veure el efecte varies vegades.

Capa ids1,ids2,ids3:Fa referència al quadre groc que representa el corrent,el nombre es per saber a quina posició pertanyia.

Capa linea1,linea2,linea3:Fa referència al recorregut del corrent.


48

Capa cargas:Conté el dibuix de les carregues.

Capa textos tall:Conté el text indicatiu de la zona seleccionada.

Figura 46.Contingut de la Carpeta tall

Figura 47.Capes de la Carpeta tall Com podem observar a la imatge es repeteix el contingut per fer el efecte del

recorregut del corrent i el estat de carregues. Carpeta formacanal:Conté tot el referent per realitzar el efecte de la

formació de canal en el transistor. Esta formada per les següents capes i carpetes:

Capa texto:Conté els diferents textos informatius de la formació del canal. Capa canal:Conté el dibuix o requadre que fa referència a la formació del canal. Capa linglobo:Conté la línea del globus informatiu. Capa globo:Conté el dibuix del globus informatiu.7

Linea2

Linea3

Linea1

Ids3 textotall

cargas


49

Carpeta VGS1,VGS2,VGS3,VGS,VGS5:Conte les diferents capes per realitzar el efecte de la corrent quan augmenta la tensió VGS. Com es pot observar es repeteix varies vegades per realitzar el efecte de augment de tensió des 0 a 5 volts.

Cada carpeta VGS esta formada per les següents capes: Capa vgs1,vgs2,vgs3:Fan referència al quadre groc que representa el corrent en les diferents posicions. Capa linea1,linea2,linea3:Indica la línea de recorregut del corrent.

Figura 48.Capes de la Carpeta formacanal t

Figura 49.Contingut de la carpeta formacanal

texto

Linea1

linglobo

globo

Vgs3

Linea2

canal


50

Carpeta òhmica:Conté tot el referent per realitzar el efecte de la zona òhmica. Esta formada per les següents capes i carpeta: Capa texto:Conté els text referents a aquesta zona. Capa canal:Conté el referent al canal del transistor en aquesta zona. Carpeta Ids:Conté tot el referent per fer el efecte de recorregut del

corrent. Esta formada per diferents capes que es repeteixen com en els casos anterior per fer el efecte desitjat del funcionament.Es a dir el augment de tensió Vds. El contingut de la carpeta és:

Capa Id1 a Id7:Requadre groc que representa el corrent en les diferents posicions del seu recorregut. Capa linea 1 a linea7:Línea que indica el recorregut del corrent.

Figura 50.Capes de la Carpeta òhmica.

Figura 51.Contingut de la carpeta òhmica.

texto

canal

Linea1

Linea2 Ids


51

Carpeta saturacio:Conté tot el referent per realitzar el efecte de la zona en qüestió. Esta formada per les capes:

Capa texto:Fa referència als text que es poden visualitzar en aquesta zona de funcionament. Capa canl:Conté el estat o efecte del canal en aquesta zona. Capa textovds:Conté els diferents valors de la tensió Vds.

Figura 52.Capes de la Carpeta saturació.

Figura 53.Contingut de la carpeta saturació.

texto canal


52

Capa tr1:Aqueta capa es efectiva a partir del fotograma 2,es fa així per poder fer el dibuix de transistor amb els text que vulguem i no siguin visibles en la pantalla principal.

Figura 54.Contingut de la capa tr1.

Capa botones:Conté els botons de la simulació,amb aquest poden seleccionar la zona de funcionament,fer una para de la simulació i fer la reanudació d’aquesta.

Cada botó te assignat un fotograma que quan realitzen una pulsació fa que la simulació tingui un “adreça” per anar al fotograma en qüestió.

Una altre manera de fer aquest efecte es simplement posar a la funció corresponent el nombre del fotograma que al qual volem anar quan es polsa el botó.

Els botons son el propis que hi ha a la biblioteca del Macromedia flash. Per accedir aquesta biblioteca ,anirem a ventana,otros paneles,biblioteca

comunes,botones.Podem fer la selecció del botó desitjat.

Figura 55.Acces a la biblioteca botones.

Per realitzar la programació13 desitjada,seleccionem el botó a programa i es crea el menú acciones-boton

13 Es pot consulta l’annexe 5

Fotograma2

tr1


53

Figura 56.Acces al menú Acciones-Boton.

Per últim tenim la carpeta gràfica en la qual tenim les diferents capes per realitza els

efectes de visualització en les zones de funcionament. Així doncs les capes que formen l’anomenada capa són:

Capa graf_tall,graftall2,capa graftall3:Conte el referents al efectes de visualització quan seleccionen es visualitza la zona de tall.Es fan tres vegades per repetir el mateix procés. Capa graf_2:Conté el efectes de visualització que comença a formar-se el canal Capa graf_ohn:Conté els efectes de visualització quan es selecciona o es visualitza la zona òhmica. Capa graf_sat: Conté els efectes de visualització quan es selecciona o es visualitza la zona saturació. Capa texto:Conté els texts informatius de la gràfica. Capa gràfica:Conté el dibuix de la gràfica.

Figura 57.Capes de la Carpeta gràfica.

Selecció de botó i activació del

menú Acciones-Boton.


54

Figura 58.Contingut de la carpeta gràfica.

Fins aquí em explicat tos els continguts de les simulacions fetes a la web.Com totes aquestes explicacions es poden fer les modificacions pertinents que desitjent.Com em dit en un principi per realitza modificacions em suposat que es te uns coneixements bàsic de flash Macromedia,en els quals saben per exemple que es un clip de pel·lícula,una transformació de forma,de moviment,dient aquest perquè son en els quals estan basats les simulacions fetes. A més també em suposat que es te uns petits coneixements de programació,ja que són molts bàsiques i semblants a qualsevol llenguatge de programació excepte les funcions utilitzades que són pròpies de flash.

texto

grafica

graf_ohn


55

4.5.- Publicar la web a Internet

A partir d’ara, un cop explicat els continguts de la web amb els quals creien que se esta preparat per realitza qualsevol modificació, només ens queda posar penjar- els arxius al servidor que ens servirà els arxius als usuaris d’Internet. Desprès de realitzar qualsevol modificació només ens caldrà penjar de nou els arxius

que hàgim modificat (.html, .swf, .jpg) al servidor. Cada tipus de servidor requereix una manera diferent de penjar-ho. Ho podem fer

amb programes FTP, a través de la web –amb programes com Webftp-,... Per això no ho expliquem amb detall, però aquest procés no comporta gaire treball.

La web ha estat dissenyada de tal manera que només copiar-la 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-.

Cal no oblidar de penjar al servidor tots els arxius que hem modificat, imatges, testos, resums, menús,...a la carpeta corresponent, sinó, no funcionarà correctament la web des d’Internet.

En fet una provar la pujada i visualització de la web a Internet, gràcies a un lloc o domini gratuït. N’hi ha molts ,el elegit a sigut la pagina web iespana.es,la quan ens facilita un programa FTP, per realitzar la pujada.

Així doncs la web creada és http://miproyectomosfet.iespana.es/. La problemàtica de no tenir un domini propi i com que aquest són gratuïts, contenen

nombrosos banners i publicitat. D’aquesta manera, ja hauríem acabat la feina de modificar la nostra aplicació i ja seria consultable des d’Internet.

Figura 59.Visualitzacio de la web a Internet..


56

4.6.- Conclusió

Hem vist tots els passos bàsics per realitzar modificacions i ampliacions a la pàgina

web. Encara que cal ser ben conscients que la web esta dissenyada d’una manera determinada i que modificar l’estructura pot ser una mica complicat, la resta de modificacions poden realitzar-se de manera ràpida.

No hem volgut fer un manual del llenguatge html, del programa Flash ni del

llenguatge Java, ja n’hem referenciat alguns. Hem incidit en els aspectes concrets de la web, amb les particularitats i els punts més crítics que poden tenir dificultats alhora de modificar-se.

Hem pogut veure els grans avantatges que ens ofereix la xarxa per realitzar

modificacions i sobretot, la de les actualitzacions, cosa que és una avanç per la tasca docent, que aquesta web vol complementar.


57

5.- Manual d’usuari de l’aplicació 5.1.- Introducció

Aquest pretén ser un referent per la navegació de la web d’Electrònica digital de

l’ensenyament ETI especialitat en Electrònica Industrial , que s’imparteix als segon 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 Ordinador

Per consulta d’aquesta aplicació necessitem un ordinador amb les següents característiques mínimes:

Ordinador PC compatible Pentium o superior Memòria RAM 32 Mb Espai al disc dur 20 Mb

Software

El programari necessari és: Sistema operatiu: Windows 95 o superior, Linux o Mac OS Internet Explorer 7 o superior, Firefox 1.0.7 , Konector,.. Visualitzador de Flash per navegador d’Internet. Màquina virtual de Java . La navegació esta optimitzada per una resolució de pantalla de 1024x768 i 800x600.

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.


58

Podem veure alguns exemples de navegació a les figures 60 i 61. Es pot comprovar

que la web és molt intuïtiva i per accedir als diferents recursos només cal clicar-hi damunt.

Figura 60.Visualització de la pagina principal del tema 2

Figura 61.Visualització del apartat 2.3 del tema 2.

Aquest són els punts bàsics que cal considerar a l’hora de navegar per la pàgina web correctament.

Aquesta web suposem que serà compatible amb les noves versions dels navegadors,

a menys que hi hagin grans canvis en les noves versions.


59

6.- Conclusions finals

Aquesta web de l’assignatura d’Electrònica Digital de l’ensenyament ETI-

Electrònica Industrial del segon curs que s’imparteix a la URV, esta basada en els apunts i problemes de l’assignatura, però amb la incorporació de problemes resolts i simulacions interactives per facilitar-ne la comprensió.

Amb tots els elements exposats es pretén fer molt més senzill el treball de

l’assignatura per part de l’alumne i d’aquesta manera, augmentar la motivació per adquirir els coneixements que aquesta assignatura preveu.

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 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ó.

Creiem que l’explicació d’aquesta memòria descriptiva es pot complementar amb

els manuals dels programes que es referencien. Malgrat les grans possibilitats que ofereixen les tecnologies, i en concret, la creació

de pàgines web, hem cregut que era necessari adaptar la varietat d’aplicacions web en una que s’adeqüi a les necessitats de l’assignatura.

Es necessitava una web que oferís informació de l’assignatura, però adreçada

especialment als usuaris que la usen. La web seria una nova manera de complementar la docència.

Amb tots aquests condicionats i, considerant que la persona que hauria

d’actualitzar tota aquesta informació calia que ho pogués fer de forma fàcil i senzilla, i a més, que tenia coneixements d’informàtica bàsics,em optar per desenvolupar un portal senzill visualment però que aportés gran informació als possibles usuaris, per tant, era necessària una actualització fàcil del mateix. Perquè l’actualització és l’element clau de qualsevol web, encara que siguin webs molt ben dissenyades i construïdes sinó tenen la informació renovada no té sentit la pròpia existència, almenys tal i com ho hem entès.

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ó. L’altra resolució, 800 per 600 píxels encara l’utilitzen alguns usuaris, per això l’hem optimitzat per 1024*768 i per 800*600.

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 Macrodemia Flash instal·lat. Òbviament, el navegador ha de suportar marcs, però és bastant difícil en els ordinadors moderns que no els suportin.

Com hem anat veient hem fet una web plena de contingut. Això sí, hem mantingut

un criteri de disseny unitari per tota la web. Hem intentat que fos fàcil d’actualitzar i de navegar, que l’usuari sabés en tot moment on havia d’anar per buscar una informació determinada.


60

Si bé, aquesta aplicació ha intentat incorporar nous continguts fins ara inexistents a

d’altres aplicacions semblants, encara hi ha un gran treball per realitzar. Aquest projecte només vol ser l’embrió d’una aplicació web amb animacions de tots i cadascun dels problemes i dels dispositius electrònics, així com de les pràctiques de l’assignatura. Hem posat la primera pedra, però no hem pas ni començat la casa.

Tenim clar que el present projecte ha de ser modificat, si s’escau, i, sobretot,

ampliat en d’altres de successius. D’aquí la seva riquesa, no pròpiament de contingut, sinó d’obertura d’unes possibilitats inexistents fins ara. També ens proposàvem fer una web comunicativa i no informativa, és a dir, fer una web per interactuar entre el professor i els usuaris i viceversa, una web que resolgui tots els dubtes possibles de l’assignatura.

La xarxa esdevé uns instrument per treure’n informació encara que de forma

interactiva, però al fi i el cap només en traiem informació, normalment no interactuem amb la xarxa, només li demanem continguts.

Si ho mirem fredament el que nosaltres pretenem fer: una web comunicativa, també

té els seus riscos, ja que mica en mica s’anirà perdent el contacte humà, aquelles expressions facials, els gestos de les mans,… tot això si que la xarxa no ho pot transmetre - almenys de moment-. Clar que com més comunicativa fem la nostra web més feina estalviarem als professors/es de consultes per part dels alumnes, tot serà més ràpid i fluid i aconseguirem la immediatesa.


61

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

Plec de condicions

62

Plec de condicions

Plec de condicions

63

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 directament al Programa, es limitaran als indicats prèviament pel coordinador i director de l’assignatura.

Plec de condicions

64

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 inejecutables 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. 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

65

Annexes

Annexes

66

Annex 1

Programació per fer eles efectes de visualització de la simulació NMOS_ideal/Cmos_ideal. Primerament es fa una initzialització de variables,les quals ens permetre’n fer els efectes de canvi de nivell d’entrada. Seguidament es pot observar la programació de sentencies per tractar el diferents nivells d’entrada. A cada línea em posat comentaris per fer més clara el enteniment de la programació.En respectat els comentaris fets als arxius flash,per fer més fàcil possibles modificacions i que no ens portin a cometre errors. //INICIALIZAR VARIABLES Y CLIPS DE PELICULA// //FRAME 1 var corriente=1; //Variable que determina el bit de entrada// inter.gotoAndStop(1); //selecciono la posiscion inicial del interruptor en 1//

//FRAME 2 stop(); // PARADA DE PELICULA inter.onRelease = function() //Accion pulsar interruptor// { if (corriente==0) //Sentencia if para controlar en nivel de estado “0”/ ” 1”// {corriente=1; //el estado es “0” y pulsamos lo pasamos a “1”//

this.gotoAndStop(1); // para hacer efecto de cambio de posición del interruptor // }else { corriente=0; // el estado es “1” lo paso a “0 “// this.gotoAndStop(2); //posicionamos el interruptor en “0”// } }

Annexes

67

Annex 2

Programació per fer eles efectes de visualització de la simulació Inversor NMOS. Primerament es fa una initzialització de variables,les quals ens permetre’n fer els efectes de canvi de nivell d’entrada. Seguidament es pot observar la programació de sentencies per tractar el diferents nivells d’entrada i les diferents visualitzacions de corrents.A cada línea em posat comentaris per fer més clara el enteniment de la programació.

//FRAME 1 //INICIALIZAR VARIABLES Y CLIPS DE PELICULA// var corriente=1; //Variable Que determina la corriente del circuito elijimos estado inical

“1”// inter.gotoAndStop(1); //Posicionamos el dibujo(llamado inter) el dibujo del interruptor en

“1”// setProperty("elevcc",_visible,0); //oculatamos la visibilidad de la corriente elevcc setProperty("descarin",_visible,0); //oculatamos la visibilidad de la corriente descarin //FRAME 2 //PROGRAMCION DE LAS CORRIENTES // stop(); // Parada de la pelicula inter.onRelease = function() //Accion para pulsar un clip de pelicula {if (corriente==0) //Sentencia if para controlar el estado // // Si la corriente es cero la pasamos a uno// { corriente=1; this.gotoAndStop(1); // dirijimos la pelicula al fotograma 1// //Realizamos los cambios pertinentes de clips de pelicula para hace le efecto de visivilidad de las corrientes// setProperty("elevcc",_visible,0); // Ocultamos el clip elevcc// setProperty("descarin",_visible,0); //Ocultamos el clip descarin// ele0.gotoAndPlay(1); // Posicionamos el clip de pelicula en el fotograma 1// setProperty("ele0",_visible,1); //mostramos la peli ele0 // entrada.gotoAndPlay(1); //posicionamos en el frame 1 el clip entrada// setProperty("entrada",_visible,1); //Hacemos visible el clip entrada // }else{ { corriente=0; // Realizamos lo mismo pero para entrada 0//

Annexes

68

this.gotoAndStop(2);

elevcc.gotoAndPlay(1);

setProperty("elevcc",_visible,1); setProperty("ele0",_visible,0); setProperty("entrada",_visible,0); descarin.gotoAndPlay(1); //primero posiciono la corriente en el //punto de partida.clip descargain en 1 setProperty("descarin",_visible,1); //Hacemos visible clip descargain// ele0.gotoAndPlay(1) //Posiciono el clip ele0 en el fotograma 1//

Annexes

69

Annex 3

Programació per fer eles efectes de visualització de la simulació Inversor NMOS. Primerament es fa una initzialització de variables,les quals ens permetre’n fer els efectes de canvi de nivell d’entrada. Seguidament es pot observar la programació de sentencies per tractar el diferents nivells d’entrada i les diferents visualitzacions de corrents.A cada línea em posat comentaris per fer més clara el enteniment de la programació. //FRAME 1 //INICIALIZAR VARIABLES Y CLIPS DE PELICULA var corriente=1; //Varieable que determina el valor de la corriente o estado// inter.gotoAndStop(1); // Posicionamos el interruptor en estado inicia// setProperty("elevcc3",_visible,0); //oculta una pelicula setProperty("alimen",_visible,1); // hacemos visible. setProperty("descargain",_visible,0); setProperty("despmos",_visible,0); //FRAME 2 //COMIENZA LA PROGRMACION DE LA SIMULACION stop(); // PARADA DE PELICULA inter.onRelease = function() //Accion de pulsar el clip de pelicula interuptor// { if (corriente==0) //Sentencia if para contolar los estados// { // Si la corriente es 0 la pasamos a 1// corriente=1; inter.gotoAndPlay(1); // Posicionamos el clip interuptor en su fotograma 1) setProperty("elevcc3",_visible,0); // Ocultamos clip elevcc// setProperty("despmos",_visible,0); //Ocultamos clip despmos// setProperty("descargain",_visible,0); // Ocultamos clip descarin// salida.gotoAndPlay(1); // Posicionamos el clip salida en el fotograma 1// setProperty("salida",_visible,1); //Hacemos visible el clip salida// entrada.gotoAndPlay(1); //Posicionamos el clip entrada en fotograma 1// setProperty("entrada",_visible,1); //Hacemos visibli el clip entrada.// alimen.gotoAndPlay(1); //Posicionamos el clip alimen en fotograma 1// setProperty("alimen",_visible,1); }else{ corriente=0; // Igual pero seleccionamos el estado 0// this.gotoAndStop(2); descargain.gotoAndPlay(1); setProperty("descargain",_visible,1); elevcc3.gotoAndPlay(1); setProperty("elevcc3",_visible,1);

Annexes

70

despmos.gotoAndPlay(1); setProperty("despmos",_visible,1); setProperty("entrada",_visible,0); setProperty("alimen",_visible,0); setProperty("salida",_visible,0); } }

Annexes

71

Annex 4

Programació del botó PLAY que es pot veure a la pantalla principal. Al polsar aquets botó ens porta la pantalla de la simulació. on (press) { play();//funcion del boton para hacer el avance. }

Annexes

72

Annex 5

Programació dels diferents botons que ens troben a la simulació. Boton play on (press) { play(); } Boton stop on (press) { stop(); } Boton zona tall on (press) { play(); gotoAndPlay(2); gotoAndPlay("tall"); } Boton zona ohmica on (press) { play(); gotoAndPlay("canal"); } Boton zona saturacio on (press) { play(); gotoAndPlay("saturacio"); }

implementació d’una eina interactiva de suport a l...

Documents