Eina Informàtica de Suport a l’Assignatura Tecnologia...

Eina Informàtica de Suport a l’Assignatura TecnologiaElectrònica I

AUTOR: Xavier Carrión Barbero.DIRECTOR: Roger Cabré Rodón .

DATA: Juny / 2001.

Eina Informàtica de Suport a l’Assignatura de Tecnologia Electrònica I

Universitat Rovira i Virgili Índex

ÍNDEX

1. Memòria Descriptiva

2. Memòria de Càlcul

3. Plànols

4. Pressupost

5. Plec de Condicions

6. Annex


Universitat Rovira i Virgili 1.Memòria Descriptiva.

1

ÍNDEX

1. Memòria Descriptiva ......................................................... Pàg. 1-2

1.1 Objecte del Projecte .................................................................... Pàg. 1-2

1.2 Titular ............................................................................................ Pàg. 1-2

1.3 Destinataris ................................................................................ Pàg. 1-2

1.4 Antecedents ................................................................................ Pàg. 1-2

1.5 Descripció General .................................................................... Pàg. 1-3

1.5.1 Procés de creació de la Web ............................................ Pàg. 1-3

1.6 Aplicació Web ................................................................................ Pàg. 1-4

1.6.1 Introducció .................................................................... Pàg. 1-4

1.6.2 Requeriments mínims ........................................................ Pàg. 1-4

1.6.3 Aplicació .................................................................... Pàg. 1-5

1.6.4 Tipus de botons .................................................................... Pàg. 1-12

1.7 Consideracions Finals .................................................................... Pàg. 1-13



2

1.1 Objecte del Projecte

El projecte és una Aplicació Web composta d’exercicis de díodes, transistorsbipolars (BJT) i transistors d’efecte de camp (FET). Aquests exercicis estan dissenyats perdonar una ajuda addicional a l’estudiant de primer curs en el moment de cursarl’assignatura Tecnologia Electrònica I. L’Aplicació estarà disponible en CD-ROM i perInternet, aprofitant així la formació continua des de qualsevol punt de l’assignatura.

1.2 Titular

El titular del projecte és el DEEEA (Departament d’Enginyeria Electrònica,Elèctrica i Automàtica). Amb adreça :

Escola Tècnica Superior d’EnginyeriaAutovia de Salou, s/n. (Complex Educatiu)43006 – TARRAGONA

1.3 Destinataris

Els destinataris seran principalment estudiants de primer curs de l’assignaturaTecnologia Electrònica I. També és pot considerar destinatari qualsevol persona del’ETSE que vulgui adquirir conceptes de circuits bàsics amb díodes, transistors bipolarsBJT’s i transistors d’efecte de camp FET’s. Les persones de fora de l’ETSE podranaccedir al projecte respectant les condicions que imposi el DEEEA.

1.4 Antecedents

Quantes vegades l’alumne ha observat al mirar un problema d’un llibre que hi hapassos que els donen per suposats? A ell, li seria de gran ajuda que es mostressin tots elspassos d’una manera més clara i més detallada. Aquest és un dels reptes del projecte;oferir una col·lecció de problemes amb uns nivells de dificultat adequats amb un sistemaque pogués incloure una dedicació més exhaustiva amb passos i càlculs més bàsics que nopermetessin a l’alumne perdre molt temps a trobar suposicions, definicions i càlculs que jatindria que conèixer per que s’ha donat a hores de classe de l’assignatura pròpia o enassignatures anteriors, però que no per això se li ha de negar l’oportunitat de veure i tornara repassar una equació bàsica o un pas que és molt evident.

La idea de fer una col·lecció de problemes d’aquestes característiques podriasemblar molt útil personalment, però encara no coneixíem l’opinió de l’estudiant, peraquesta raó es va fer una petita enquesta a uns 20 estudiants de la carrera d’EnginyeriaTècnica en Electrònica Industrial, obtenint unes conclusions encoratjadores al veure que al90% li semblava una idea molt bona i fins i tot més del 80% ho trobava indispensable comajuda per cursar bé i al dia una assignatura del nivell de la carrera.



3

1.5 Descripció General

L’aplicació Web està formada per:

• 250 pàgines webs dedicades a la col·lecció de problemes.• 15 pàgines webs dedicades a la col·lecció de tests.• Un total de 2.500 arxius i 275 carpetes.• 3.959 Hipervincles.• 372 dibuixos, dels quals:

♦ 368 gràfics són en format gif.♦ 6 gràfics són en format jpg.♦ En quan a la mida en Kbytes:

• 4 gràfics ocupen més de 10 Kbytes.• 85 gràfics ocupen més de 5 Kbytes.• 101 gràfics ocupen menys de 2Kbytes.

La mida que ocupa és de 14.041.088 bytes. (14 Mbytes).

1.5.1 Procés de creació de la Web

Activitats a considerar per la construcció del programa:

Nº Activitat Designació de l’activitat Duració [díes]

1 Plantejament d’objectius i 2orientació de l’eina informàtica.

2 Disseny gràfic i creació de les 5principals pàgines i menús denavegació.

3 Investigació i estudis previs per 2l’optimització de l’aplicació.

4 Recopilació i tractament dels tests 4d’exàmens d’anys anteriors.

5 Resolució dels tests i aplicació 8del procès de interactivitat.

6 Estudi i selecció de problemes 10de interés pels objectius del’aplicació web.

7 Posta en comú amb el client per 2obtindre el vist i plau delsproblemes que s’inclouran.

8 Resolució de problemes. 10



4

9 Preparació dels formats idonis i 60programació dels problemesseleccionats.

10 Comprovació i posta en funcionament. 3

11 Optimització i millora tècnica de 5l’aplicació web.

12 Procés de disseny i oferta de 1l’aplicació off-line en formatCD-ROM.

13 Disseny i creació de memòries i 2Manuals d’usuari.

Duració total d’activitats ... 114 dies(1)

(1) Es considera com activitat diària l’execució de 8 hores de treball efectives.

1.6 Aplicació Web

1.6.1 Introducció

Aquesta Aplicació Web és una col·lecció de problemes de semiconductors i díodes,transistors BJT’s i transistors d’efecte de camp FET’s. El programa també inclou unacol·lecció dels tests parcials que s’han fet des de l’any 1996 fins al 2000. AquestaAplicació pot servir d’eina de suport als estudiants de l’assignatura Tecnologia ElectrònicaI, i a qualsevol persona que vulgui repassar aspectes bàsics dels temes abans exposats.

1.6.2 Requeriments mínims

Els requeriments mínims per veure l’Aplicació correctament són els següents:

• Ordinador amb 32 MB de RAM i lector de CD ROM.• Mòdem de 28 Kbytes en el cas de utilitzar el programa On-line.• Sistema Operatiu Windows 95 o superior.

La configuració recomanada per veure tots els recursos que ofereix l’Aplicació són:

• Resolució de pantalla de 800x600 píxels.• Mòdem 56 Kbytes o superior.• Navegador Internet Explorer 5.0 o superior.



5

Sota aquesta configuració els resultats obtinguts arriben al 100% dels recursos delprograma.

1.6.3 Aplicació

El menú principal ens permet accés a quatre opcions:

♦ Menú de la col·lecció dels problemes de díodes, BJT’s i FET’s

♦♦ Menú dels tests dels darrers anys.

♦♦ Enviar un e-mail

♦♦ Informació de la Web

Figura 1: Pàgina del Menú Principal

Informació de la Web

Dona informació dels objectius, requeriments recomanable i el significat delsbotons que ens podem trobar a les pàgines que composen el projecte.



6

Figura 2: Informació de la Web

Enviar un e-mail

Amb aquesta pàgina l’estudiant que consulta l’Aplicació a Internet pot enviar unmissatge al professor de l’Assignatura per comentar-li qualsevol dubte, suggeriment,incidència...

Figura 3: Pàgina per enviar un e-mail



7

Menú dels tests dels darrers anys

Figura 4: Pàgina per seleccionar el tipo de test parcial

Com podem veure a la figura 4, aquesta opció ens porta a un menú on podemescollir quin dels tres tests parcials volem fer:

♦♦ Primer Parcial: Semiconductors i díodes.♦♦ Segon Parcial: Transistors Unipolars i Bipolars.♦♦ Tercer Parcial: Components i Fabricació de dispositius.

Després d’escollir el test parcial, ens sortirà un menú on escollirem el test concretque volem fer:

Figura 4: Pàgina per seleccionar el tests



8

Si seleccionem com a exemple l’any 2000, veurem el test complet amb quatrepossibles respostes per pregunta. Al fer un clic damunt de qualsevol possible resposta, ensinformarà si la seleccionada és la correcta o no. El sistema interactiu de les respostes espot veure a les figures següents:

Figura 5: Enunciat de la pregunta amb les quatre respostes possibles

Si seleccionem la resposta equivocada el botó canviarà i es ficarà amb un fonsvermell amb una creu. Si seleccionem la resposta correcta sortirà el botó amb fons verd iamb una senyal d’acceptació

Figura 6: Selecció de la resposta equivocada

Figura 7: Selecció de la resposta correcta

Si tornem a fer clic damunt de la resposta que hem descobert, aquesta tornarà al’aparença inicial:

Figura 8: Al tornar a fer clic damunt la resposta que hem descobert, aquesta s’amagarà.



9

Col·lecció de problemes

Al escollir aquesta opció veurem un menú amb els diferents tipus de problemes que hi ha:

♦♦ Semiconductos i díodes.♦♦ Transistors BJT’s.♦♦ Transistors FET’s.

També podem escollir el nivell dels problemes:

♦♦ Nivell Bàsic♦♦ Nivell Mitjà.♦♦ Nivell Avançat.

La pàgina d’aquest menú es mostra a continuació:

Figura 9: Menú inicial de la col·lecció de problemes

Al seleccionar una de les opcions, passarem a una pàgina formada per un marc ambun menú general a l’esquerra de tota l’Aplicació, i una pàgina a la dreta amb tots elsproblemes corresponents al nivell seleccionat.



10

Figura 10: Al seleccionar el tipus de problema passem a una pàgina d’aquest estil.

A l’esquerra tenim un menú per anar a d’altres opcions de la Web. A la dreta,podem anar al problema que vulguem d’aquell nivell fent un clic a la diana que hi ha alfinal de cada problema.

Al fer un clic a la diana que hi ha al final de casa problema, ens canviarà només lapàgina de la dreta per una amb les possibles opcions del problema. En aquest cas seria:

♦♦ Solució pas a pas.♦♦ Solució final.

Figura 11: A la dreta surten les 2 possibles opcions en aquest problema.



11

Si seleccionem el botó de la dreta, anirem a la solució final del problema. Siseleccionem el botó de l’esquerra, anirem la resolució pas a pas del problema:

Figura 12: Pàgina on s’explica el problema pas a pas.

La part dreta de la figura 12 sortiran les respostes parcials del problema. Aquestespàgines sortiran quan fem un clic damunt dels botons que ens trobarem a la pàgina del’esquerra. Els botons poden ser:

♦♦ D’ajuda.♦♦ Solució a la qüestió concreta.

Figura 13: Pàgina amb els dos tipus de botons.



12

1.6.4 Tipus de botons

Ens permet obrir una pàgina que ajudarà en la resolució del problema.

Fa aparèixer la solució parcial del problema al costat dret de la pantalla.

[Icona] que serveix per accedir a la pàgina on es troba el

problema seleccionat.

[Icona] que serveix per accedir a la pàgina on es troba la

solució final del problema seleccionat.

[Icona] que serveix per accedir a les pàgines que mostren la

resolució del problema pas a pas.

[Icona] que serveix per accedir a una pàgina dedicada a una

simulació activa d'una part del problema.

[Icona] que ens permet tornar al menú principal.

Botò per diverses utilitats que ens enllaça amb

altres pàgines.

Botò per diverses utilitats que ens enllaça amb

altres pàgines.



13

1.7 Consideracions finals

L’Aplicació és una col·lecció de problemes i tests relacionats amb els temes que esdonen a l’assignatura Tecnologia Electrònica I. Aquesta eina de treball té l’avantatjad’oferir una ajuda a l’estudiant que per diverses raons no acaba de assimilar l’assignatura ique necessita una eina addicional que li permeti veure aspectes molt bàsics, però necessarisper la resolució i anàlisis de configuracions bàsiques amb díodes i transistors.

El mètode de navegació és molt intuï tiu i permet que no faci falta tenir gransconeixements de com funciona un navegador per veure perfectament com funcional’Aplicació.

Una avantatja d’aquesta aplicació és la possibilitat de tenir uns problemes adisposició de l’alumne qualsevol dia de la setmana, a qualsevol hora. Això és possiblegràcies a la publicació per internet dels problemes per consulta on-line. També s’ofereix la

possibilitat de que en cas de que l’alumne no pugui entendre un problema ni amb l’ajudade l’Aplicació, pugui enviar un missatge al professor a través de la pàgina de correudisposada a tal efecte.

La forma d’exposar, més atractiva que amb paper i d’una forma més activa, potdonar un incentiu més a l’alumne al moment d’estudiar l’assignatura. Aquesta part deproblemes, junt a la part de teoria de un altre projecte, pot ajudar en gran mesura al’estudiant per tal d’adquirir coneixements i per descobrir per ell mateix, i perl’experiència, quins són els factors i dades més important en el disseny i anàlisi decircuiteria bàsica amb transistors i díodes.

Signat:

Xavier Carrión BarberoJuny 2001


Universitat Rovira i Virgili 2.Memòria de Càlcul

1

ÍNDEX

2. Memòria de Càlcul ........................................................ Pàg. 2-2

2.1. Introducció ............................................................................... Pàg. 2-2

2.2. Criteris de Disseny .................................................................... Pàg. 2-2

2.2.1 Facilitat de Navegació ........................................................ Pàg. 2-2

2.2.2 Control de Fluxe de Navegació ................................. Pàg. 2-2

2.2.3 Control de la Mida de les Pàgines ................................. Pàg. 2-2

2.2.4 Proves en Diferents Navegadors i Resolucions de Pantalla Pàg. 2-3

2.3. Com Crear les Pàgines Mitjançant FRONTPAGE2000 .............. Pàg. 2-3

2.3.1 Les vistes .................................................................... Pàg. 2-3

2.3.2 Comenzar des de Zero ........................................................ Pàg. 2-5

2.3.3 Donar Format a les Pàgines ............................................ Pàg. 2-6

2.3.4 Aplicar Format de Text i Gràfics ......................................... Pàg. 2-6

2.3.5 Com Organitzar els Arxius ............................................ Pàg. 2-8

2.3.6 Creació d’Hipervincles ............................................ Pàg. 2-8

2.3.7 Creació de Taules ........................................................ Pàg. 2-9

2.3.8 Imatges Webs ................................................................... Pàg. 2-11

2.3.8.1 Mida de les Imatges ............................................ Pàg. 2-14

2.3.8.2 Ubicació ........................................................ Pàg. 2-15

2.3.8.3 Barra d’Eines de la imatge ................................. Pàg. 2-15

2.3.9 Optimitzar Imatges per Pàgines Webs ..................... Pàg. 2-17

2.3.9.1 Introducció ........................................................ Pàg. 2-17

2.3.9.2 Reduir la Mida dels Arxius ................................. Pàg. 2-17

2.4 Marcs ............................................................................................ Pàg. 2-19

2.5 Consideracions Tècniques Finals ............................................ Pàg. 2-20



2

2 Memòria de Càlcul

2.1 Introducció

En aquest apartat mostrem els processos i les eines que més hem utilitzat pertreballar amb el programa FRONTPAGE2000 de Microsoft. Aquest Software ha estat la baseper dissenyar i fer realitat la nostra Aplicació Web. D’altra banda, també cal destacar elsprogrames de dibuix i de retoc fotogràfic que s’han fet servir pel tractament de les imatges,com són el PaintBrush de Windows i el MGI PhotoSuite.

2.2 Criteris de Disseny

Abans de veure les tècniques del programa FRONTPAGE2000 que s’han fet servirper construir el projecte, farem menció d’alguns conceptes generals que s’han tingut encompte per optimitzar al màxim aspectes com velocitat de descarrega, qualitat d’imatges iclaredat de continguts.

2.2.1 Facilitat de Navegació

Aquest ha estat un factor molt important alhora de presentar la informació. S’ha detenir en compte que a mesura que un Lloc Web va augmentant el seu número de pàgines,hi ha la tendència per part del visitant. a perdre l’orientació per trobar el que busca. Lamillor forma d’oferir la informació del nostre projecte és organitzant aquesta informació enàrees definides, permetent així la navegació intuï tiva. Si les pàgines que dissenyem fessinperdre molt temps al visitant, de segur que la pròxima vegada que tingués que accedir al’Aplicació Web s’ho pensaria dues vegades, o pitjor encara, podria abandonar l’Aplicacióa meitat del camí.

2.2.2 Control de Fluxe de Navegació

Al dissenyar el nostre Lloc Web hem tingut en compte que, per exemple, lapersona que vol realitzar un problema d’anàlisi de díodes, no vol veure abans els tipus detests parcials que li ofereix l’Aplicació, ni tampoc veure com es fan els problemes detransistors. El fluxe de navegació ha de ser el correcte, el visitant ha de trobar el camí mésràpid i intuï tiu per arribar al seu objectiu. També s’ha intentat que les pàgines que enllacinper arribar al objectiu del visitant siguin atractives i útils per als seus propòsits.

2.2.3 Control de la Mida de les Pàgines

És desesperant veure, quan visitem pàgines, com la pantalla tarda molt temps encarregar-se del tot. Les pàgines compostes per texts i gràfics generen una agradablesensació, en canvi, son més lentes per mostrar-se al visitant. Aquest paràmetre ha generatuna gran inversió en temps de proves per veure quins formats ocupaven més espai. Hemprovat varis aspectes com ara veure si baixant la qualitat podíem conservar la claredatnecessària per mostrar el dibuix, si les fórmules d’equacions matemàtiques importades delWord 2000 eren massa obsoletes per la quantitat d’espai que consumien, si era mésaconsellable deixar una mica en segon lloc els colors per estalviar temps de càrrega, etc...



3

2.2.4 Proves en Diferents Navegadors i Resolucions de Pantalla

Havíem de tenir en compte que el visitant pot veure les pàgines en qualsevol delsdiferents navegadors disponibles al mercat (Netscape Navigator 3.0, NetscapeCommunicator 4.0, Internet Explorer 3.0, etc..), amb diferents resolucions de pantalla(640x480, 1024x768,etc..). Aquestes diferencies podien afectar al fet que un visitantpogués veure totes les pàgines que formen l’Aplicació perfectament, i en canvi, a un altre lipasses tot el contrari.

El fet de que el programa de disseny de pàgines fos de la companyia Microsoft feiaque, inevitablement, amb diferència, els millors resultats es donessin amb el navegador deMicrosoft anomenat Internet Explorer. De totes maneres, s’ha tingut la màxima cura permirar d’obtenir bons resultats amb altres tipus de navegadors. Desgraciadament, hi haefectes i moviments que no es poden observar en navegadors que no siguin de Microsoftper causa d’aquestes incompatibilitats.

2.3 Com Crear les pàgines Mitjançant FRONTPAGE2000.

2.3.1 Les vistes

FrontPage2000 ens dóna la possibilitat de tenir diferents vistes per organitzar iadministrar el nostre lloc Web (recordem que Site Web es refereix a un conjunt de pàginesWeb, s’anomena pàgina principal a la primera pàgina a la que arribem i que generalmentporta el nom de index.html).

Vista exploración: és potser on millor podem visualitzar el lloc, ja que ens mostra la sevaestructura en forma d’organigrama, on tenim a la part superior de la pàgina principal (comuna icona d’una caseta) i sota aquesta, totes les pàgines secundàries ramificades. Podemcol·locar les nostres pàgines, o no, a la vista exploració (arrossegant-les de la llista decarpetes o seleccionant una nova pàgina amb el menú del botó dret del ratolí) però sialguna no es col·loca, aquesta no apareixerà a les barres d’exploració que posem a lespàgines (una barra d’exploració és una llista automàtica de hipervincles a les altrespàgines).

Vista Página: aquesta és la vista on es construeix i es dóna format a la pàgina, com esveurà, el procés és similar a editar un document en Word, ja que les eines són semblants.



4

Figura 1. Vista exploración

Vista Carpetas: aquí és on podem veure les diferents carpetes on guardem els arxius.Generalment ens convé organitzar-los per poder treballar millor; per exemple, les imatgesles guardem totes juntes en una carpeta, i també podem guardar una secció sencera delnostre lloc en una carpeta diferent. És important no confondre l’estructura d’exploracióamb l’estructura de les carpetes ja que no tenen per que ser iguals.

Vista Informes: en aquesta vista podem obtenir una sèrie de dades molt útils pel nostre lloccom: pàgines lentes, arxius vinculats, arxius nous, hipervincles trencats (que no apunten acap pàgina), etc.

Tareas: aquí podem organitzar-nos les pròximes tasques que anirem realitzant al nostrelloc o a algun arxiu determinat. És una espècie d’agenda.

Dins de la vista pàgina podem observar que existeixen tres llengüetes: Normal,HTML i Vista prèvia.

La Vista normal és on editem la nostra pàgina, és a dir, on podem agregar el text,gràfics, etc.

La Vista HTML, ens és útil per quan tenim que fer alguna modificació al codi de lapàgina. Molts llocs Webs ofereixen la opció de donar-nos comptadors o bannersd’intercanvi, i ens poden evitar per e-mail, el codi html que hem d’agregar a la nostrapàgina. Per fer això, hem de copiar l’esmentat codi a la Vista HTML, apareixerà en elmateix lloc; pitgem Edición/Pegar i es copiarà el codi. Pot ser que en alguns casos tinguem



5

problemes i que el codi es copiï com un text per llegir a la Vista Normal o a la VistaPrèvia. Per evitar això, s’haurà de copiar el codi al bloc de notes (text sense format ambextensió .txt) i d’aquí s’haurà d’enganxar a la pàgina.

Per acabar la Vista Prèvia, ens dona una idea de com es veurà la pàgina al’explorador, tot i que alguns elements, com ara comptadors i formularis, hauran d’estarpublicats a Internet per que funcionin correctament.

2.3.2 Comenzar des de zero

Crearem el nostre lloc Web des de zero com a exemple. El lloc s’anomenarà“Projecte”.

1. Anem a Archivo/Nuevo/Web i escollim la opció Web vacío.

2. Un cop fet això es crearan les carpetes images i _private i apareixerà una pàgina enblanc. Començarem per tancar aquesta pàgina en blanc i anirem a la vistaexploración.

3. Un cop estiguem a la Vista exploración farem clic dret i seleccionarem Nuevapágina. Un cop creada, si fem doble clic, automàticament passarem a la Vistapágina. Encara estant a la Vista exploración, fem clic dret sobre la nova pàgina quecreem i seleccionem Nueva página una altra vegada, creant així una pàginasecundària.

4. Si fem clic dret sobre cada pàgina i escollim Cambiar nombre i a continuaciócol·loquem un títol a la pàgina (que és diferent al nom de l’arxiu). Posarem “Index”a la primera pàgina i “Col·lecció” a la segona.

5. Podem, d’aquesta manera, definir tota l’estructura del nostre lloc per després podertenir enllestides totes les pàgines per treballar. Una característica important és quesi fem clic a una pàgina i sense deixar-la anar l’arrosseguem, veurem una líniapuntejada que uneix a la mateixa amb la seva pàgina superior, ja al moure-la,podrem col·locar-la en qualsevol altra posició, modificant així l’estructura del lloc.

6. Un cop fet això, si fem doble clic sobre una pàgina, passem a la Vista página percomençar a ingressar el contingut.

7. Quan guardem una pàgina (amb la opció Archivo/Guardar), aquesta es guarda comun arxiu d’extensió .html. Si anem a la carpeta de Windows on estem construint ellloc, veurem que l’arxiu de la pàgina té la icona del nostre explorador, i si l’obrim,no s’obrirà al FrontPage, si no a l’explorador. Per obrir l’arxiu per editar-lo hemd’obrir el FrontPage i escollir l’opció Archivo/Abrir i buscar la pàgina que volemeditar. Si pel contrari volem obrir el lloc sencer (és el més recomanat per veure-hocomplert), hem d’escollir Archivo/Abrir Web amb el que distingirem a les carpetesde llocs Web de les altres perquè tenen una icona d’un globus terrestre. Tot i aixíles carpetes de llocs Web es veuran com carpetes comuns si la busquem des deWindows.



6

Figura 2. Finestra Abrir Web: veiem que les carpetes de llocs tenen una icona diferent. Per obrir-lesseleccionem la que volem i fem clic a Abrir dos vegades.

2.3.3 Donar format a les pàgines

És molt senzill donar format a les pàgines ja que disposem d’eines molt semblants ales de qualsevol processador de text com el Word. Solament cal fer algunes aclaracions.

Quan iniciem una nova pàgina apareix el menú de fonts, Fuente predeterminada, ien el de mida, Normal. Això es refereix a la font i la mida configurada en el navegadorpredeterminat de Internet que es tingui instal·lat. Si per exemple tenim Internet Explorer ila font predeterminada que té configurada (a Opciones de Internet del Panel de Control),és Times New Roman, llavors aquesta serà la font predeterminada de FrontPage, però uncop publicada la pàgina, cada persona veurà la pàgina amb el tipus de lletra i mida quetingui configurada en el seu navegador.

Per a que això no passi, i tothom vegi la pàgina amb la lletra que nosaltres escollim,hem de triar una font del menú, diferent a la predeterminada.

Ara seguirem amb la pàgina de “Projecte”:

1. Per escollir un color de fons per a la pàgina anem a Formato/Fondo o béFormato/Propiedades i fem clic en fitxa Fondo. Un cop allà podem escollir el colorde fons, el color del text, dels hipervincles, podrem optar per col·locar una imatgede fons que es multiplicarà en mosaic, o bé agafar informació del fons d’una pàginaque bé podria ser la principal.



7

Figura 3. Finestra per definir el format de les pàgines

2. Per canviar el color de les lletres hem de seleccionar el text i escollir el nou color ala barra d’eines (el símbol d’una A amb una ratlla sota). També es poden editartotes les opcions de format del text al menú Formato/Fuente.

3. Al guardar una pàgina per primera vegada, ens trobarem amb la finestra Guardar iserà on podrem col·locar el nom de l’arxiu i el títol de la pàgina.

4. Si al escriure ens apareix exagerat l’espai entre paràgraf i paràgraf, podem incloureun salt de línia pitjant MAYÚS+INTRO.

5. Per inserir una línia horitzontal, la qual ens és útil per a poder separar seccions otítols, anem a Insertar/Línea Horizontal. Si llavors fem doble clic a la línia,s’obrirà el quadre de diàleg amb les propietats de la mateixa.

Figura 4. Podem canviar les propietats dels nostres elements



8

6. És molt important que definim l’estil del lloc abans de començar. És convenientper aconseguir un bon lloc, que les diferents pàgines no difereixin molt en el querespecta al color de fons, tipus i mida de la lletra. Per això convé sempre que es

seleccioni una nova pàgina, escollir l’opció obtenir informació del fons d’una altrapàgina en el menú Formato/Propiedades i agafar la informació de la pàgina principal(index.htm), d’aquesta manera cada vegada que volem canviar alguna cosa del fons,solament ho fem en el quadre de Propiedades de la principal. Per al text esrecomanable escollir un tipus i una mida de lletra per als títols, i un altre tipus i mida (oel mateix) per als paràgrafs, i conservar el mateix estil per a tot el lloc deixant algunaltre canvi sols per alguna situació en particular.

2.3.4 Aplicar Format de Text i Gràfics varies vegades.

Aquesta opció que ofereix FRONTPAGE2000 és molt útil. Alguna vegada hasdesitjat ressaltar varies paraules que no estan a una mateixa seqüència utilitzant una fontespecial al document?, o potser has volgut canviar determinades línies contínues a línies depunts a gràfics creats amb les eines de dibuix?. Amb l’opció de FRONTPAGE2000 podemaplicar el mateix format a elements que es troben a diferents ubicacions d’un arxiu,utilitzant el botó una vegada per aplicar el format tantes vegades com vulguem.

1. Seleccionem l’element del que volem copiar el format.

2. Per copiar el format seleccionem en diferents elements i fem doble clic al botóCopiar formato. El botó quedarà seleccionat i podrà realitzar aquesta funció tantesvegades seguides com desitgem.

3. Seleccionem el text o el gràfic al que volem aplicar el nou format i tornem a fer clical botó Copiar formato o pitgem ESC.

2.3.5 Com Organitzar els Arxius de la Nostra Aplicació.

Quadre de diàleg per guardar arxius incrustats: Quan tenim dibuixos o arxiusdintre de la nostra aplicació, tenim l’opció de classificar-los segons l’utilitat. També podemescollir entre canviar el nom de l’arxiu o canviar-lo de carpeta (sempre dins de la carpetadel nostre lloc Web).



9

Figura 6. Tenim varies opcions alhora de guardar imatges

A l’hora d’organitzar els arxius fem anar l’opció crear carpetes per a que no se’ns barregintots en la llista de carpetes.

Figura 5. Vista general de la distribució de carpetes dels exercicis de la col·lecció

També ens convé guardar pàgines d’una secció molt gran, totes juntes a unamateixa carpeta. Per exemple, els dibuixos i esquemes del problema 1 de díodes de nivellmitjà que tenim a les pàgines que formen aquest problema, es troben ubicades a la carpetaimatges que es troba dintre de la pròpia carpeta.



10

Figura 7. Podem classificar totes les imatges en diferents carpetes conservant els enllaços amb les pàgines webs

2.3.6 Creació d’Hipervincles

Els hipervincles, també coneguts com a vincles o links, són connexions entre dosarxius. Podem inserir un vincle a una paraula, frase o imatge, de manera que al fer clicsobre aquesta, l’explorador obri una nova pàgina o un nou arxiu.

1. Per inserir un vincle a una pàgina o arxiu del nostre lloc Web, primer escrivim laparaula o frase corresponent, la seleccionem i anem a Insertar/Hipervínculo, o bépitgem a la icona del globus terrestre amb una cadena ( ) a la barra d’eines. Alquadre de diàleg, apareix una llista dels arxius del nostre lloc, n’escollim un ipitgem Aceptar. Després veiem que la paraula apareix subratllada amb un colordiferent. Podem canviar el color del vincle al menú Formato/Propiedades.

Figura 8. Quadre de diàleg per enllaçar l’hipervincle.



11

2. Per inserir un vincle a una direcció (URL) d’un altre lloc o pàgina Web d’Internet,l’escrivim al quadre Dirección URL. Igualment si escrivim aquesta direcció a lapàgina, FrontPage la reconeixerà com a tal i crearà un hipervincle automàticament,això mateix passarà amb les direccions de correu electrònic.

3. Per inserir un vincle a un arxiu que estigui al nostre ordinador, fem clic a la iconad’una lupa amb una carpeta (), el segon a la dreta, i busquem l’arxiu al nostreordinador. Posteriorment FrontPage crearà una còpia d’aquest arxiu que esguardarà al nostre lloc.

4. Per inserir una direcció de correu electrònic, hem de fer clic a la icona del sobre (eltercer a la dreta) o bé escriure al quadre de Dirección URL: mailto:[email protected], és a dir la paraula mailto seguida de dos punts i la direcció a laque volem vincular.

5. I per acabar, si volem crear un link a una pàgina nova (que encara no ha estatcreada) fem clic a la quarta icona, amb el dibuix d’una fulla de paper en blanc, is’obrirà una pàgina preparada per ser editada (tot i que encara no es guarda fins quepitgem Guardar).

Una altra classe d’hipervincles que hem utilitzat, són els anomenats marcadors, elsquals uneixen diferents punts d’una mateixa pàgina. Són molt útils per a les pàgines quesón llargues.

Aquest métode s’ha utilitzat per fer una Taula de continguts de totes les pàgineswebs en format HTML. Aquesta opció es troba a disposició del lector al CD-ROM 2del mateix projecte.

Per inserir un marcador primer seleccionem quin serà el punt de destí a la pàgina,situem el cursor allà i anem a Insertar/Marcador. Apareixerà el quadre de diàleg delsmarcadors i se’ns demanarà un nom qualsevol per aquest. Un cop fet això, pitgem Aceptar.

Ara anirem al lloc de la pàgina on inserirem l’hipervincle, i com hem fet abans,seleccionem la paraula, frase o imatge i anem a Insertar/hipervínculo. Al quadre de diàlegfem clic al menú desplegable Marcador i escollim el nom del marcador que hem creat (n’hipoden haver molts a una mateixa pàgina).

Si pel contrari, des d’un altra pàgina volem arribar a aquest marcador en particular,enlloc de que arribem a la part superior, hem de seleccionar primer la pàgina de la llista illavors sense pitjar Aceptar seleccionem el marcador.

2.3.7 Creació de Taules

A l’edició de pàgines Web les taules no sols tenen el seu ús habitual (llistes,plantilles, etc.), sinó que també s’utilitzen per alinear el text, els gràfics, barresd’exploració; fet que ens dona moltes possibilitats per a un disseny elegant.



12

Les cel·les les podem combinar i dividir, podem fer que les vores siguin visibles oinvisibles, es puguin crear taules una dins de l’altra i un munt de possibilitats més. A Sotapodem veure una taula exemple del projecte on es mostren varies coses que es poden fer:

1. Per crear la taula, anem al menú Tabla/Insertar/Tabla. Apareixerà el quadre dediàleg Insertar Tabla i allà haureu d’especificar el nombre de files i columnes.L’alineació de la taula respecte a la pàgina pot ser dreta, esquerre, centre ojustificada. La mida de la vora pot fer-se zero per què aquest no sigui visible al’explorador, aquesta opció ens és útil per a quan volem alinear text, gràfics oescriure a dues o més columnes i que no es vegin les vores de la pàgina. Podemespecificar un ample determinat en percentatge o en píxels, si no ho fem després elpodem modificar manualment. també podrem determinar el marge de les cel·les il’espai que hi ha entre elles.

Figura 9. Quadre de diàleg on escollim les característiques de la taula

2. Un cop creada la taula, poden combinar-se dos o més cel·les que seleccionemmitjançant la opció Combinar celdas al menú Tabla.

3. Si el que volem és dividir una cel·la en files o columnes hem d’escollir l’opcióDividir celdas.

4. També es poden inserir noves files o columnes mitjançant la opció Insertar/Filas ocolumnas. Si escollim Insertar/Tabla crearem una taula dins d’una altra, el qual avegades ens pot arribar a ser bastant útil.

5. Al quadre de diàleg Propiedades de tabla, es poden modificar moltescaracterístiques de la mateixa: per arribar al quadre cal fer clic dret sobre la taula iseleccionar Propiedades de tabla al menú emergent. Algunes de les característiquesque podem editar són: la alineació (dreta, esquerra, centrada o justificada) respectea la pàgina, si l’ample s’especificarà o s’ajustarà al contingut de la taula, el margede les cel·les (l’espai des de la vora d’aquesta), l’espai entre cel·les, la mida de lesvores (cal recordar que ample 0 és un ample invisible a l’Explorador però que sique es veu durant l’edició). També es pot escollir un color de fons per tota la cel·lao bé una imatge. Si el que es vol és un color per cada cel·la (o imatge), hauremd’escollir color de fons al quadre de Propiedades de celda.



13

Figura 10. Es pot escollir propietats individuals de cada cel·la

6. El quadre de diàleg Propiedades de celda és similar al de la taula sols que en aquestcas només afectarem a la cel·la seleccionada o aquella on hi hagi el cursor. Perarribar al quadre realitzem el mateix procediment que abans, fent clic dret. Unacaracterística important és la d’alineació vertical, amb el que se’ns permet alinear eltext o les imatges a les parts superior, inferior o central de la cel·la (veure exemple).



14

2.3.8 Imatges Webs

Al treballar amb imatges a un lloc Web es important saber que els arxius ques’utilitzen a Internet són de dues classes: els .jpeg i els .gif. Els dos són arxius d’imatgecomprimits. Els primers s’utilitzen per fotografies, les quals al utilitzar aquest formatcomprimit, ocupen menys memòria a canvi de baixar una mica la qualitat. Els altres, elsformats gif, s’utilitzen per a títols, logotips i gràfics amb menys de 256 colors. També espoden utilitzar per a fotos però la qualitat serà pitjor.

A continuació veurem dos imatges en cadascun dels formats:

Figura 11. Part d’un menú en format jpg

Figura 12. Part del mateix menú en format gif

Com podem veure, en aquest cas seria més convenient col·locar el dibuix en format jpg.

Observant aquest altre exemple:

Figura 13. Esquema en format jpg



15

Figura 14. Esquema en format gif

Podem veure com la diferencia de qualitat dels dos dibuixos és mínima. En canvi, el nºde bytes desmesurat que ocupa el dibuix en jpg ens obliga a escollir el format gif.

El procés per a inserir una imatge és molt simple:

1. Situem el cursor al lloc on volem inserir al imatge.

2. Anem a: Insertar/Imagen/Desde archivo o Imágenes. Si escollim Imágenes,apareixerà la galeria d’imatges predissenyades de Microsoft Office i podrem buscarimatges per varies categories. Un cop seleccionada la imatge, li fem clic i escollimInsertar en el menú emergente

3. Si escollim Desde archivo, s’obrirà una finestra on es mostraran tots els arxius dellloc Web (dins de la carpeta del mateix). Si no és així, haurem de fer clic a la iconade la carpeta, per a buscar a les carpetes de l’ordinador la imatge a inserir.

4. Un cop inserida la imatge, és possible que aquesta hagi desplaçat el text al seuvoltant, la qual cosa es pot corregir o ajustar.

La Mida de les Imatges

Com ja s’ha dit anteriorment, la mida dels arxius gràfics d’una pàgina Web, ha deser petita per optimitzar el temps de descàrrega de la pàgina. Si obrim la imatge amb alguneditor com MGI PhotoSuite, haurem d’escollir veure la imatge al 100% per saber quina ésla mida de la imatge que es veurà a la pàgina amb això s’aconseguirà un major controld’aquesta.

Un altre punt molt important, és que no és convenient inserir una imatge gran idesprés fer-la petita amb els petits quadradets que apareixen a les vores, ja que si fem això,es fa petita la imatge que veiem a la pantalla, però no la de l’arxiu.

Per canviar la mida obrirem la imatge a l’editor i modificarem el zoom fons a lamida desitjada. Un cop fet això, caldrà que ens fixem amb el valor que hem escollit dezoom. Al MGI PhotoSuite aneu a Image/Image size, i als quadrats de la unitat seleccionemPercent i ens haurem de fixar que estigui seleccionada la casella Constrain Proportions. Acontinuació escrivim a qualsevol dels quadradets de Height o Width (però sols en un) elvalor del zoom, amb el qual la imatge es reduirà a la mida desitjada. Per veure els resultats,seleccionarem el zoom al 100% i guardarem la imatge, amb el mateix nom o amb un altreper saber que es un arxiu diferent. Si utilitzem altres Software de retoc fotogràfic, el



16

procediment segurament serà similar; haurem d’anar a Imagen/Cambiar tamaño, llavorshaurem de variar el percentatge d’alt o d’ample.

Ubicació

Per ubicar la imatge amb precisió haurem d’anar al menú Formato/Ubicación, i ensapareixerà el següent quadre de diàleg:

Figura 15: Quadre de diàleg de la ubicació de la imatge

§ Cap estil d’ajustaments: la imatge s’ajustarà com un caràcter més.§ Esquerra: la imatge s’alinearà a l’esquerra i s’envoltarà amb el text.§ Dreta: similar a l’anterior.§ Cap estil d’ubicació: en aquest cas, no es podrà moure la imatge de la ubicació que

té, per fer-ho haurem de seleccionar:ú Relatiu: en aquest cas podem especificar les valors d’ubicació i mida als

quadres de diàleg, així com l’ordre Z, es a dir, la profunditat de la imatgerespecte als altres objectes de la pàgina, es a dir, endarrere o endavant del text, od’altres imatges

ú Absolut: utilitzarem aquest mètode per ubicar la imatge amb total llibertat, peròen aquest cas el text no s’ajustarà a ella.

Barra d’eines de la imatge

Si seleccionem la imatge, ens apareixerà una barra d’eines de la imatge. Si no laveiem, anem a Ver/Barra de Herramientas/Imágenes.

Figura 16: Barra d’eines de tractament de les imatges



17

1. Insertar la imagen desde archivo.

2. Escribir texto sobre una imagen existente: amb això, es transforma la imatge enGIF i es crea un arxiu de text i un altre amb la imatge de text que es superposa a laimatge original.

3. Vista en miniatura automática: amb això es crea una copia de l’arxiu d’imatge quetingui la mida més petita i de descàrrega ràpida. Per veure la imatge a mida normal,haurem de fer clic sobre ella i es descarregarà automàticament. No ens farà faltainserir cap hipervincle, ja que FrontPage ho fa tot automàticament. Això és útilquan fem una “galeria de fotos” amb moltes d’elles.

4. Ubicación absoluta.

5. Traer al frente o enviar atràs .

6. Rotar 90º, o espejar.

7. Contraste (més o menys).

8. Brillo (més o menys).

9. Recortar: amb aquesta eina podem eliminar part d’una imatge que no necessitem,amb la qual cosa també reduirem la seva mida. haurem de fer clic a la cantonada dela porció d’imatge que vulguem conservar i desplacem el ratolí fins aconseguir unquadrat. Per retallar-la haurem de tornar a fer clic al botó Recortar de la barrad’eines.

10. Establecer color transparente: fent clic a un color de la imatge, aquest es tornaràtransparent. Sols podem escollir un sol color. A continuació veiem un exempled’imatge transparent i un altre que no ho és:

Figura 17: Imatge sense fons transparent

Figura 18: Imatge amb fons transparent



18

11. Descolorar: és útil per quan es vol utilitzar la imatge al fons i que aquesta nointerfereixi al text.

12. Efecto de biselado.

13. Nuevo muestreo: quan modifiquem la mida de la imatge amb els manejadors hemdit que no es modificava la mida de l’arxiu, però si després de fer-la petita, pitgemaquest botó, es farà un nou mostreig i es reduirà l’arxiu de manera que la midanormal sigui el que hem modificat nosaltres amb els manejadors.

14. Zonas activas (rectangular, elíptica o poligonal): arrossegant el ratolí per dibuixaruna zona activa, estem creant una imatge d’hipervincle, amb la qual cosa se’nsdesplegarà el quadre de diàleg de hipervincles, demanant-nos que escrivim ladirecció del mateix. Per inserir una zona activa poligonal, haurem de fer clic a cadacantonada del polígon i després tancar-lo fent clic.

15. Resaltar zona activa: reasalta les imatges que són hipervincles.

16. Restaurar: restaura la imatge al seu estat original si és que hi ham fet algun canvi.

2.3.9 Optimitzar imatges per a pàgines Webs

Introducció

Una imatge pot valer més que mil paraules, però val 10 segons de temps dedescàrrega? Ens vam fer aquesta pregunta abans d’afegir una imatge a la Web basada enMicrosoft FrontPage. Els gràfics Web d’avui en dia són quasi tots arxius .jpeg o .gif.L’elecció del tipus d’arxiu influia molt, com hem dit abans, en la mida, la qualitat desitjadai la funció del gràfic dins l’Aplicació Web.

Reduir la mida de l’arxiu dels gràfics

La manera més senzilla de reduir la mida d’un arxiu de gràfics és reduir la mida delgràfic en sí.

Podem reduir la mida d’un gràfic, retallant-lo amb FrontPage, és a dir, movent lapart superior, els costats o la part inferior del gràfic, per eliminar parts que no sónnecessàries.

1. Seleccionem el gràfic a la fitxa Normal de la Vista página a FrontPage2000.

2. A la barra d’eines Imágenes de FrontPage 2000, fem clic a Recortar.

3. Arrossegem els controladors fins que el gràfic mostri sols el que vulguem.



19

4. Al menú Archivo, fem clic a Guardar.

Com a regla general, no hem utilitzat mai una gràfic que fos més gran que la midamostrada al lloc Web. Per exemple, si creem un gràfic a 800 x 400 píxels, no haurem demostrar aquest gràfic a 200 x 100 píxels. Tot i que el gràfic es mostra a una mida inferior,l’arxiu es segueix descarregant a mida complerta i l’explorador redueix la mida depresentació a la pantalla.

Reduir la mida dels arxius .jpg

El format d’arxiu JPEG funciona millor amb un nombre elevat de colors en gràfics dequalitat fotogràfica. Podem comprimir de manera considerable els arxius .jpg sense que esprodueixi una degradació important de la qualitat. Tot i així, la compressió de les imatgesJPEG sí produeixen pèrdues. Això vol dir que algunes dades de la imatge es perden durantla compressió, de manera que la qualitat de la imatge empitjora a nivells de compressióelevats.

Per dades que hem aconseguit fent un petit banc de proves, a una compressiódel 20%, l’arxiu es redueix a menys de la meitat de l’original i el temps de descàrregatambé és menys de la meitat. Amb una compressió del 70%, segueix sense haver-hiuna degradació considerable de la imatge i el temps de descàrrega es redueixconsiderablement. A una compressió del 90%, les bandes de color són visibles i, tot ique l’arxiu ocupa la meitat que un arxiu comprimit al 70%, el temps de descàrrega ésde sols un segon menys. La compressió al 90% no presenta cap avantatge.

L’assistent per a ús específic de Microsoft PhotoDrawTM i el Save for Web Wizardde Microsoft Image Composer proporcionen vistes prèvies d’una imatge. Aquestes vistesmostren diferents graus de compressió i el temps de descàrrega a velocitats de connexiódeterminades pel usuari, i ens poden ajudar a decidir si compensa descarregar mésràpidament les imatges tot i que es perdi nitidesa.

Reduir la mida dels arxius .gif

El format d’arxiu GIF funciona millor amb gràfics que contenen un nombre limitatde colors i consten de línies o text. Els arxius en format GIF, solen descarregar-seràpidament, ja que normalment contenen 256 colors, el mateix número de colors quemostren molts equips. Si convertim una imatge de format JPEG a format GIF, perdrà lainformació de color.

Al format GIF, els colors es guarden a les files horitzontals. Les àrees que contenencolors sòlids es comprimeixen a la proporció màxima. Els colors organitzatshoritzontalment produeixen arxius més petits i descàrregues més ràpides. Per exemple, unarxiu que conté dos llistes de colors horitzontals ocupa menys de la meitat d’un arxiu queconté dos llistes de colors verticals. Per tant, és interessant veure com es gira un gràfic.

Per girar un gràfic amb FrontPage:

1. Seleccionem el gràfic a la fitxa Normal de la Vista página a FrontPage 2000 .



20

2. A la barra d’eines Imágenes de FrontPage 2000, es fa clic a Girar a la izquierda,Girar a la derecha, Voltear horizontalmente.

Quan guardem un gràfic en un format GIF a la majoria dels programes de gràfics,aquests tenen la opció de guardar l’arxiu com a entrellaçat. L’entrellaçat, és una tècnicaque ens mostra l’arxiu en porcions horitzontals, de manera similar a una persianaveneciana. L’avantatge d’utilitzar aquesta tècnica, és que una imatge apareix ràpidament,tot i que tingui baixa resolució, i a continuació es converteix en una imatge complerta. Elsarxius entrellaçats són d’una mida més gran que els arxius que no són entrellaçats.

Molts programes de gràfics, proporcionen l’opció de comprimir arxius GIFmitjançant compressió LZW. A diferencia de la compressió d’arxius .jpg, en la compressiód’arxius .gif, no es produeixen pèrdues. Això vol dir que les dades no es perden durant lacompressió, de manera que la imatge no es deteriora.

Consideracions que vam extreure a l’hora d’optimitzar el gràfic

§ Caldrà realitzar sempre una còpia de l’original abans de realitzar cap acció.§ No s’ha de comprimir mai un arxiu que ja s’hagi comprimit. Per exemple, si es

desitja comprimir una imatge de 100KB a 20KB, s’obtindrà millors resultatscomprimint directament de 100KB a 20KB que no pas comprimint primer de100KB a 50KB i a continuació a 20KB.

§ Si volem utilitzar un gràfic d’una mida molt gran, ens haurem de plantejar lacreació d’una miniatura que porti al gràfic. Llavors haurem d’utilitzar el botó Vistaen miniatura automática de la barra d’eines Imágenes de FrontPage 2000 (Vista enminiatura automática del menú Herramientas de l’editor de FrontPage alFrontPage 98), per crear tant la miniatura com un hipervincle a la imatge de midacomplerta.

§ Caldrà utilitzar solament tants colors com pugui veure l’usuari. Si els equips delsusuaris poden mostrar sols color de 8 bits, no utilitzem més de 256 colors.

2.4 Marcs

La pàgina de marcs permet dividir la finestra de l’explorador Web en una sèrie depannells, o marcs i d’aquesta manera possibilitar mostrar més d’un document HTML(pàgina Web) al mateix temps.

Per exemple, podríem utilitzar un marc per presentar la taula de contingut d’un llocWeb i un altre per mostrar les diferents pàgines Web sol·licitades pel visitant del lloc.

A continuació podem veure alguna part del projecte on hem fet anar marcs:



21

Figura 19: Exemple de marc creat a l’Aplicació

Figura 20: Exemple de marc creat a l’Aplicació

2.5 Consideracions Tècniques Finals

Les conclusions després d’uns mesos de treball son molt bones. El fet que sigui unPaquet Software de la marca Microsoft fa que el aprenentatge sigui fàcil, ràpid i intuï tiu;amb una ‘Interface’ molt a l’estil Windows i amb un Explorador propi gairebé idèntic al’Explorador comú de qualsevol ordinador amb el Sistema Operatiu de Microsoft.



22

Les eines de FRONTPAGE 2000 són potents com per arribar a fer el 70% delsrecursos que es troben actualment a Internet. Els efectes i característiques que doneninnovació al disseny de pàgines webs són, en bona part, fàcilment executables mitjançantFRONTPAGE 2000, i en un projecte de les característiques del nostre han tingut el seulloc.

Signat:



Universitat Rovira i Virgili 4.Pressupost

1

ÍNDEX

4.1. Preus Unitaris ................................................................................ Pàg. 4-2

4.2. Descomposició de Partides i Amidaments ................................. Pàg. 4-2

Disseny Aplicació Web ........................................................ Pàg. 4-2

Documentació .................................................................... Pàg. 4-5

4.3. Amidaments ................................................................................ Pàg. 4-5

Disseny Aplicació Web ......................................................... Pàg. 4-5

Documentació ..................................................................... Pàg. 4-6

4.4. Aplicació de Preus. Pressupost ............................................. Pàg. 4-6

4.5. Resum del Pressupost ..................................................................... Pàg. 4-7



2

Pressupost

4.1 Preus Unitaris

Material

Codi Unitat Designació Preu (Ptes)101 un Disc Compacte CD-ROM 250102 un Disquet 50103 h Amortització Equipament Hardware 500104 h Amortització Equipament Software 500

Mà d’obra

Codi Unitat Designació Preu (Ptes)M1 h Dissenyador Gràfic 1600,00M2 h Redactor pàgines Webs (Web Master) 1200,00M3 h Càlculs Tècnics i Esquemista (Enginyeria) 2500,00M4 h Investigació i recopilació d’informació 1000,00

4.2 Descomposició de Partides

Disseny aplicació Web

Codi Partida Designació UnitatP-001 Creació de pàgina amb Menú gràfic i enllaçament dels

hipervincles existents.un.

Unitat Quantitat Preu unitari Total (Ptes)Material:103-Amortització equipament Hardware h 1,00 500,00 500,00104-Amortització equipament Software h 1,00 500,00 500,00

Subtotal Material: 1000,00Mà d’obra:M1-Dissenyador Gràfic h 0,20 1600,00 320,00M2-Redactor pagines Webs h 0,40 1200,00 480,00

Subtotal Mà d’obra: 800,00Cost Directe: 1800,00

Despeses Indirectes 2,00%: 36,00Cost Execució: 1836,00

Són MIL VUIT-CENTES TRENTA-SIS Ptes/un.Equivalent a 11,04 Euros.



3

Codi Partida Designació UnitatP-002 Modificació,resolució e inclusió de Test parcial d’any

anterior. Creació e incorporació de botons interactius a lesrespostes.

un.

Unitat Quantitat Preu unitari TotalMaterial:103-Amortització equipament Hardware h 0,50 500,00 250,00104-Amortització equipament Software h 0,50 500,00 250,00

Subtotal Material: 500,00Mà d’obra:M2-Redactor pagines Webs h 0,50 1200,00 600.00M3-Càlculs tècnics h 1,00 2500,00 2500,00M4-Recopilació d’informació h 0,10 1000,00 100,00



Són TRES MIL SET-CENTES SETANTA-QUATRE Ptes/un.Equivalent a 22,69 Euros.

Codi Partida Designació UnitatP-003 Creació de pàgina d’enllaç que no correspon a cap

problema.un.

Unitat Quantitat Preu unitari TotalMaterial:103-Amortització equipament Hardware h 0,50 500,00 250,00104-Amortització equipament Software h 0,50 500,00 250,00

Subtotal Material: 500,00Mà d’obra:M2-Redactor pagines Webs h 0,50 1200,00 600,00



Són MIL CENT VINT-I-DUES Ptes/un.Equivalent a 6,74 Euros.



4

Codi Partida Designació UnitatP-004 Creació i Resolució del problema tècnic. Inclusió del mateix

a l’aplicació Web i estructuració d’enllaços i pàgines.un.

Unitat Quantitat Preu unitari TotalMaterial:103-Amortització equipament Hardware h 5,00 500,00 2500,00104-Amortització equipament Software. h 5,00 500,00 2500,00

Subtotal Material: 5000,00Mà d’obra:M2-Redactor pagines Webs. h 5,00 1200,00 6000,00M3-Càlculs tècnics i esquemista h 0,50 2500,00 1250,00M4-Recopilació d’informació. h 0,10 1000,00 100,00



Són DOTZE-MIL CINC-CENTES NORANTA-SET Ptes/un.Equivalent a 75,71 Euros.

Codi Partida Designació UnitatP-005 Procés de gravació i presentació de l’aplicació en disc

compacte CD-ROM.un.

Unitat Quantitat Preu unitari TotalMaterial:101-Disc Compacte CD-ROM un. 1,00 250,00 250,00103-Amortització equipament Hardware h 0,50 500,00 250,00104-Amortització equipament Software. h 0,50 500,00 250,00

Subtotal Material: 750,00Mà d’obra:M2-Redactor Web.(Web Master) h 0,10 1200,00 120,00



Són NOU-CENTES VUITANTA-NOU Ptes/un.Equivalent a 5,95 Euros.



5

Documentació

Codi Partida Designació UnitatP-006 Realització de tota la documentació(manuals d’usuari,...) un.

Unitat Quantitat Preu unitari TotalMaterial:101-Disc Compacte CD-ROM un. 1,00 250,00 250,00103-Amortització equipament Hardware h 10,00 500,00 5000,00104-Amortització equipament Software. h 10,00 500,00 5000,00

Subtotal Material: 10250,00Mà d’obra:M2-Redactor Web.(Web Master) h 10,00 1200,00 12000,00



Són VINT-I-DOS MIL SIS-CENTES NORANTA-CINC Ptes/un.Equivalent a 136,40 Euros.

4.3 Amidaments

Disseny aplicació Web

Codi Partida Unitat Designació TotalP-001 un. Creació de pàgina amb Menú gràfic i enllaçament

dels hipervincles existents.3

P-002 un. Modificació,resolució e inclusió de Test parciald’any anterior. Creació e incorporació de botonsinteractius a les respostes.

15

P-003 un. Creació de pàgina d’enllaç que no correspon acap problema.

16

P-004 un. Creació i Resolució del problema tècnic. Inclusiódel mateix a l’aplicació Web i estructuraciód’enllaços i pàgines.

30

P-005 un. Procés de gravació i presentació de l’aplicació endisc compacte CD-ROM.

3



6

Documentació

Codi Partida Unitat Designació TotalP-006 un. Realització de tota la documentació(manuals

d’usuari,memòries,...)1

4.4 Aplicació de Preus. Pressupost

Capítol 1. Disseny aplicació Web

Codi Un. Designació Quantitat PreuUnitari

Total(Ptes)

P-001 un. Creació de pàgina amb Menúgràfic i enllaçament delshipervincles existents.

3,00 1836,00 5508,00

P-002 un. Modificació,resolució e inclusióde Test d’any anterior. Creacióde interactivitat de les possiblesrespostes.

15,00 3774,00 56610,00

P-003 un. Creació de pàgina d’enllaç queno correspon a cap problema.

16,00 1122,00 17952,00

P-004 un. Creació i Resolució delproblema tècnic e inclusió enl’aplicació Web.

30,00 12597,00 377910,00

P-005 un. Procés de gravació i presentacióde l’aplicació en disc compacteCD-ROM.

3,00 989,00 2967,00

Total Capítol 1: 460947,00

Són QUATRE-CENTES SEIXANTA MIL NOU-CENTES QUARANTA-SET Ptes/un.Equivalent a 2770,35 Euros.

Capítol 2. Documentació

Codi Un. Designació Quantitat PreuUnitari

Total(Ptes)

P-001 un. Realització de tota ladocumentació(manuals d’usuari,memòries,...)

1,00 22695,00 22695,00

Són VINT-I-DOS MIL SIS-CENTES NORANTA-CINC Ptes/un.Equivalent a 136,39 Euros.



7

4.5 Resum del Pressupost

Capítols ImportCapítol 1: Disseny aplicació Web 460.947,00Capítol 2: Documentació 22.695,00

TOTAL PRESSUPOST D’EXECUCIÓ MATERIAL en Ptes 483.642,00TOTAL PRESSUPOST D’EXECUCIÓ MATERIAL en Euros 2906,75

Despeses generals 13% 62.873,46Benefici industrial 6% 29.018,52

TOTAL PRESSUPOST PER CONTRACTA en Ptes 575.534,00TOTAL PRESSUPOST PER CONTRACTA en Euros 3.459,03

IVA 16% 92.085,44TOTAL PRESSUPOST D’EXECUCIÓ en Ptes 667.620,00

TOTAL PRESSUPOST D’EXECUCIÓ en Euros 4.016,00

EL PRESSUPOST ASCENDEIX A LA QUANTITAT DE SIS-CENTES SEIXANTA-SET MIL SIS-CENTES VINT PESSETES.

EL PRESSUPOST ASCENDEIX A LA QUANTITAT DE QUATRE MIL SETZEEUROS

Signat:



Universitat Rovira i Virgili _ 5.Plec de Condicions

1

ÍNDEX

5.1. Condicions Generals .................................................................... Pàg. 5-2

5.2. Condicions Econòmiques ........................................................ Pàg. 5-2

5.3. Condicions Tècniques .................................................................... Pàg. 5-2

5.4. Condicions Facultatives .................................................................... Pàg. 5-3



2

5.1 Condicions Generals

El DEEEA de l’ETSE de la URV és propietària i titular dels drets d’explotació delprograma d’ordinador, així com de la documentació tècnica necessària per al seufuncionament.

Pel present contracte, el DEEEA pot concedir a qualsevol estudiant de l’ETSE unallicència, intransferible i no exclusiva, per l’ús d’aquest Programa en un sistema informàticque 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 sevesnecessitats informàtiques.

5.2 Condicions Econòmiques

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

5.3 Condicions Tècniques

El present Software, amb el seu suport magnètic i manual de usuari, està garantitzatcontra qualsevol defecte de fabricació durant un període de dos mesos a partir de la data delliurament per part del dissenyador i programador de l’Aplicació informàtica. Aquestagarantia inclou la modificació, per part del dissenyador, dels errors de fabricació en elprograma 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 aquestperíode.

El DEEEA no quedarà vinculada pels compromisos o promeses realitzades perpersones alienes al Departament o equip projectista, ni per expectatives errònies respecte alfuncionament del Programa.

En qualsevol cas, el beneficiari accepta que aquest programa constitueix una einade treball destinada a complementar, però no a substituir la tasca humana, per tant laresponsabilitat del DEEEA pels danys imputables directament al Programa, es limitaran alsindicats prèviament pel coordinador i director de l’assignatura.

El beneficiari haurà d’utilitzar el Programa exclusivament en un sistema informàticque compleixi totes les especificacions tècniques descrites a l’apartat de característiquesmínimes del Hardware de la memòria descriptiva. El DEEA no es fa responsable del mal



3

funcionament del Programa en cas que s’utilitzi en qualsevol tipus de configuració diferenta la requerida, sense haver demanat assessorament previ.

El DEEEA no serà responsable pels retards, interrupcions o falta de prestació delsserveis previstos, quan això succeeixi per causa major o aliena a la seva voluntat.

5.4 Condicions Facultatives

El beneficiari reconeix els drets de Propietat Intel·lectual del DEEEA sobre elPrograma, 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, ambl’única finalitat de guardar i conservar la informació. El beneficiari s’abstindrà de copiartotal 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òpiesaddicionals d’aquest material, haurà de demanar permís al DEEEA o al director del’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 pera la seva reproducció, modificació, cessió, venda, lloguer o préstec, i es compromet a nocedir 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’altrespersones.

El DEEEA tindrà dret a la obertura d’expedient si el beneficiari incomplísqualsevol 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 dics compacte), oa la denegació de l’accés ( en cas de consulta per internet).

El beneficiari estarà obligat a donar les seves dades personals per aprofitar-sed’aquesta aplicació Web. En cas que el DEEEA observés qualsevol irregularitat en lesdades 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’aquestspunts, serà la Universitat Rovira i Virgili la que, a través dels seus òrgans competents,resolgui el cas que es doni a confusió o disputa.

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

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

No s’han efectuat acords verbals i el present document, amb totes les sevesestipulacions, conforma la totalitat del conveni inter-parts, substituint qualsevol altracomunicació anterior verbal o escrita.



4

Signat:



Universitat Rovira i Virgili 6.Annex

1

ÍNDEX ANNEX 1

6.1. Manual Bàsic de navegació per Pàgines Webs ..................... Pàg. 6-2

6.1.1 Introducció. El Navegador ............................................ Pàg. 6-2

6.1.2 Nocions Generals ........................................................ Pàg. 6-2

6.1.3 Barra de Botons ........................................................ Pàg. 6-2

6.1.4 Microsoft Internet Explorer ............................................ Pàg. 6-3

6.2. Bibliografia ................................................................................ Pàg. 6-5

6.2.1 Llibres d’Electrònica ......................................................... Pàg. 6-5

6.2.2 Llibres de Creació de Pàgines Webs ................................. Pàg. 6-5

6.2.3 Adreces d’Internet ........................................................ Pàg. 6-6

6.3. Contingut dels CD-ROMS ........................................................ Pàg. 6-7

ANNEX 2

Disc Compacte nº 2 amb les Pàgines Webs de l’Aplicació en format HTML



2

6.1 Manual Bàsic de Navegació per pàgines Webs

Aquest manual, està indicat per a les persones que desconeixen el món d’Internet ique necessiten aquest coneixement per poder tenir una agilitat suficient per moure’s perpàgines Webs com les que és mostren en aquest projecte. En cap moment intenta ser unmanual complert amb totes les possibilitat i característiques que ofereixen els navegadorsmés utilitzats, només intenta donar petites indicacions per començar a treballar amb elsnavegadors Netscape Navigator, i sobretot, amb el Internet Explorer.

6.1.1 Introducció. El Navegador

Per veure pàgines Webs off-line i on-line, un usuari necessita tenir un programavisualitzador de pàgines Web, també anomenats Navegadors o Browsers. N'hi ha unsquants en el mercat, tot i que els més coneguts són Internet Explorer, de la casaMicrosoft i Netscape Navigator, de la casa Nestcape. El Navegador o Browser enspresenta el text, les imatges i els enllaços, i, en les darreres versions, ens permet interactuaramb els documents (omplir formularis, enviar missatges, personalitzar pàgines... ) És unamena de lector de documents que estan escrits fent servir un llenguatge especial, el "html".Com en la majoria dels casos, i més en plena "guerra" de navegadors entre les casesNetscape i Microsoft, les versions diferents dels programes es succeeixen a gran velocitat:Netscape 2.0 en castellà, Netscape 3.0 en Anglès, IExplorer 3.0 en castellà o en català,Netscape Comunicator...

Convé anar actualitzant els navegadors, per poder visualitzar correctament lespàgines Web que cada vegada són millors i ofereixen més possibilitats al visitant.

6.1.2 Nocions generals

Quan trobem un text acolorit i subratllat que, quan hi passem per sobre canvia lafletxa del ratolí en una mà, ens trobem davant d'un enllaç. Si cliquem damunt de l'enllaç,abandonem la pàgina en la què estàvem i entrem a una de nova que pot ser que es trobi almateix ordinador al qual estàvem connectats o que estigui en un ordinador distant. Elnavegador ens la porta a la pantalla del nostre ordinador. Cada vegada que el ratolí passaper damunt d'un enllaç, a la part inferior esquerra de la pantalla apareix una línia amb unainformació, es tracta de l'URL (adreça electrònica de la pàgina amb la qual podemenllaçar). A la part inferior dreta, veiem un indicador gràfic, que representa la "quantitat"de pàgina que ja s’ha descarregat, es a dir, que veiem a la nostra pantalla.

6.1.3 Barra de botons

Els botons de la part superior ens poden ser de gran utilitat:

Figura 1: Barra de botons de Internet Explorer



3

Figura 2: Barra de botons de Netscape Navigator

• La fletxa cap a l'esquerra ens torna a la pàgina anterior.• La fletxa cap a la dreta ens porta a la pàgina següent, si ja l'hem visitada.• La caseta ens torna a la pàgina d'inici.• El botó amb la impressora, imprimeix els documents.• El botó de Stop atura la transferència de la pàgina actual.• Si ens interessa conservar la informació que conté una pàgina, podem guardar-laen el nostre ordinador Archivo à Guardar, o bé afegir la seva adreça al Bookmark(Marcadores en Nestcape, o Favoritos en IExplorer) per poder-hi tornar un altre dia.• Si volem anar a una pàgina concreta, de la que coneixem l'adreça, cliquem dins elquadre "Dirección", i escrivim la seva URL.

6.1.4 Microsoft Internet Explorer

Per ser aquest el navegador recomanat per obtenir els millors resultats de l’aplicacióWeb d’aquest projecte, a continuació explicarem detalladament cadascun dels botons queformen la barra superior:

1.- "Atrás"

Fent un clic sobre aquesta icona tornem a la pàgina visitada anteriorment a l'actual. És degran utilitat si volem tornar a la pàgina anterior ja que no hem de tornar a escriure total'adreça.

2.- "Adelante"

Fent un clic sobre aquesta icona tornem a la pàgina posterior a l'actual. És de gran utilitat sivolem tornar a la pàgina posterior ja que no hem de tornar a escriure tota l'adreça.

3.- "Detener"

Per carregar una determinada pàgina. Aquesta opció és de gran utilitat quan volem accedira una adreça i tardem molt en carregar la pàgina. Els motius pels quals ens costa accedir auna adreça de Internet poden ser molts (carregament del servidor, saturació del cabdal,etc.) i a vegades ens és més útil parar i posteriorment tornar a intentar la connexió.



4

4.- "Actualizar"

Carrega de nou la pàgina. Aquesta opció és útil quan, pels motius que siguin, la connexióamb l'adreça d'Internet ha estat defectuosa (no s'han carregat bé els gràfics, etc.) o bévolem obtenir la última versió de la mateixa pàgina. Fent un clic sobre aquesta iconatornem a connectar amb l'adreça actual sense necessitat de tornar a escriure-la.

5.- "Inicio"

Fent un clic sobre aquesta icona tornem a la pàgina principal que hem definit a l'InternetExplorer. Aquesta és la primera pàgina que ens surt quan obrim l'Explorer.

6.- "Búsqueda"

Fent un clic sobre aquesta icona l'Internet Explorer ens enviarà a una Web on trobaremdiferents buscadors per ajudar-nos en la cerca de informació

7.- "Favoritos"

Ens permet guardar l'adreça de la pàgina en la que estem i que visitem freqüentment iaccedir-hi sense tornar a escriure l'adreça cada vegada. Per afegir una adreça a "Favoritos"només hem de desplegar el menú Favoritos i fer un clic sobre l'opció "Agregar Favoritos".

Figura 3: Es pot guardar un accés directe a Favoritos



5

6.2 Bibliografia

Durant la realització d’aquest projecte s’han anat recollint de manera acurada lesfonts consultades, tant a nivell bibliogràfic com pàgines Webs de internet. Creiem oportúdonar-les a conèixer per tal que, qui vulgui ampliar coneixements en algun aspecte quenosaltres no haguem tractat, tingui aquestes referències com a base.

6.2.1 Llibres d’electrònica.

Títol: Fundamentos y aplicaciones de los circuitos de transistor.Autor: Henry C.Veath.Editorial: Marcombo Boixareu Editores. 1990.

Títol: Circuitos y dispositivos electrónicos.Autor: Lluís Prat Viñas.Editorial: Edicions UPC. Col·lecció Politex. 1994.

Títol: Dispositivos electrónicos y circuitos.Autor: Jimmie J.Cathey.Editorial: Mc Graw Hill.1991.

Títol: Problemas y aplicaciones de electrónica.Autor: S.Garcia Molina.Editorial: Marcombo Boixareu Editores. 1993.

Títol: Apunts de l’assignatura de Tecnologia Electrònica I.Autor: Roger Cabré Rodón. 2000.

6.2.2 Llibres sobre creació de pàgines webs.

Títol: Edición de páginas Web.Autor: Oscar Peña.Editorial: Anaya Multimedia. 2000.

Títol: Curso de HTML.Autor: Valentin Clavero.Editorial: Publicaciones multimedia. 1999.

Títol: El libro de FrontPage 2000.Autor: David ElderbrockEditorial: Anaya Multimedia. 1999.



6

6.2.3 Adreces de internet.

http://www.electroguia.com

Pàgina web dedicada al món de l’electrònica.

http://www.tecnociencia-es.com

Portal d’electrònica amb informació tècnica, apunts, articles, components...

http://www.editorialquark.com.ar.

Portal d’electrònica amb llibres, cursos i software gratuï t.



7

6.3 Contingut dels CD-ROMS

6.3.1 CD-ROM 1

El disc compacte nº 1 conté l’Aplicació Web off-line. Això permet gaudir de tots elsrecursos del programa sense tenir connexió a la xarxa. Per obrir la pàgina principal s’had’accedir al arxiu anomenat index.htm. El mètode de navegació està explicatdetalladament al manual d’usuari de la memòria descriptiva.

6.3.2 CD-ROM 2

El disc compacte nº2 conté la segona part de l’annex. Consisteix amb un recull detotes les pàgines Webs de l’aplicació, col·locades en format HTML.

Per obrir el menú principal s’ha d’accedir al arxiu anomenat annexe.htm. El sistemade navegació està basat en hipervincles. Aquests hipervincles enllacen des del menúprincipal, les pàgines que volem veure detallades en format HTML i també realitzen elsretorns de pàgina i retorns al menú.

Figura: Menú principal i pàgina en format HTML

Eina Informàtica de Suport a l’Assignatura Tecnologia...

Documents

Transcript of Eina Informàtica de Suport a l’Assignatura Tecnologia...