unitat7b

Unitat 7 - Projecte 2:
Creació i publicació d'un espai web amb mapes d'imatges.

Els mapes són enllaços creats directament sobre qualsevol tipus de fitxer gràfic. Es a dir, podem utilitzar una imatge i sobre aquesta imatge definir zones actives, cadascuna de les quals pot portar a una marca interna del document o a una adreça URL externa.

Es poden crear zones calentes des del llenguatge HTML, però sol ser una feina ardua i minuciosa:

Per aquesta raó la majoria dels programes de desenvolupament web preveuen una opció per tal de generar aquests mapes de forma automàtica.

Els mapes d'imatges amb Word'2000

Generar mapes d'imatges amb Word és molt fàcil. Només cal insertar al document web la imatges sobre la que es vol treballar. A continuació només cal dibuixar les figures que delimiten les zones calentes, associar a aquestes figures un destí web i, finalment, ver transparents les formes geomètriques per a que no siguin visibles.

Veiem el procés més detalladament:

En primer lloc insertem la imatge sobre la que volem crear el mapa. (Insertar/Imagen/Desde archivo). Per fer més cómode el treball convé que tinguem visible la finestra d'eines de dibuix (Ver/Barras de Herramientas/Dibujo)

A continuació seleccionem la forma amb la que farem la marca (en el cas de l'exemple rectangular) i dibuixem sobre la imatge el rectangle que serà la zona interactiva.

A continuació, a aquesta zona acabada de dibuixar, li associem un destí URL (Insertar/Hipervinculo).

Finalment, convertim la figura dibuixada en una zona completament transparent, amagant les línies exteriors i el color interior, d'aquesta manera es podrà veure el contingut de la imatge original.

Els mapes d'imatges amb Word'97 i Mapedit

Donat que Word'97 no permet crear automàticament de forma interactiva aquests mapes, cal utilitzar algún programa complementari de word especialitzat en la creació de mapes.

Un dels programes d'aquesta mena més utilitzat en el disseny de mapes i la generació del codi HTML corresponent, és Mapedit.

Però, tal com hem aprés, mentre anem donant voltes a la idea original se'ns acudeixen altres aspectes, requisits, condicionants, elements de disseny o navegació, etc. que anem anotant a la documentació del nostre projecte:

A partir de la idea i de les concrecions anotades decidim que l'estructura de l'espai web del projecte podria ser aquesta:

1. Crear la carpeta on guardarem tots els documents que formen part del segon projecte web que ara iniciem
	Anar a "Mi PC" Disc C: o disc D: (segons convingui a la configuració dels equips) Archivo/Nueva/Carpeta Nom de la carpeta: "projecte2"
2. Copiar a la carpeta "projecte2" els documents word i les imatges originals.
	Els textos que s'han d'incorporar a la web es lliuraran fotocopiats Les imatges per fer la pràctica les podeu trobar al següent fitxer... Fitxers comprimits per desenvolupar la pràctica
3. Creació de la plana del menú principal.
	Posarem en marxa Word. Crearem una nova plana web en blanc Archivo/Nuevo/Página Web (amb Word '97: Archivo/Nuevo/Páginas web/Página web en blanco) Posarem el fons de tot l'espai web. Posarem el títol. Insertarem la imatge on dibuixarem el menú principal (menu.jpg o menu.gif) Posarem un enllaç al correu electrònic de l'autor utilitzant la icona animada del correu del final d'aquesta plana. Salvarem el document HTML a la carpeta disc:\projecte2 amb el nom index.htm.
4. Creació del mapa d'imatge amb Word'2000
	Amb la tècnica explicada a l'inici d'aquesta unitat, es senyalaran sobre la imatge les diferents zones, al menys una per cadascuna de les planes secundàries (fonam.htm, estru.htm, tanca.htm, insta.htm, acaba.htm) i es crearà l'enllaç corresponent a cadascún dels documents web que formaran part de l'espai.
4. Creació del mapa amb Word'97 i Mapedit
	Posarem en marxa Mapedit. Quan demani el fitxer HTML sobre el que s'ha de crear el mapa, triarem el fitxer index.htm, del directori disc:\projecte2. Quan pregunti sobre quina imatge s'ha de dissenyar el mapa triarem menu.jpg o menu.gif (segons quina sigui la que s'ha utilitzat). Es senyalaran sobre la imatge les diferents zones, al menys una per cadascuna de les planes secundàries (fonam.htm, estru.htm, tanca.htm, insta.htm, acaba.htm). A més, s'ha d'incorporar un comentari que haurà d'apareixer quan el cursor es mogui per damunt de la zona seleccionada. Insertarem tipus de zona de diferents formats: rectangulars, circulars o poligonals. Una vegada marcades totes les zones es salvarà de nou el fitxer index.htm, al directori C.\projecte2.
5. Creació d'una plana secundària com a model amb fons, títol i navegació al menú principal.
	Crearem una nova plana web en blanc Archivo/Nuevo/Página Web (amb Word '97: Archivo/Nuevo/Páginas web/Página web en blanco) Posarem el fons de tot l'espai web. Posarem el títol model de la plana secundària, amb el tipus de lletra, tamany i color adequats. Deixarem un munt de línies en blanc. Insertarem la imatge d'alguna de les fletxes animades del projecte anterior al centre de la part inferior. Enllaçarem aquesta imatge de la fletxa al menú principal (index.htm) Salvarem aquest document amb el nom "model.htm".
6. Creació, a partir de la plana model, de totes les planes secundàries.
	Tenint el document "model.htm" en pantalla, triarem l'opció "Archivo/Guardar como página web" i salvarem tots els documents secundaris previstos en la planificació amb el seu nom corresponent. De fet el procés es pot anar sequenciant, salvant cada plana amb el nom corresponent una radera de l'altra.
7. Edició de cadascuna de les planes secundàries, incorporant imatges, textos i referències externes.
	Obrir cadascuna de les planes secundàries i editar els continguts específics d'aquesta plana: títol, imatges, textos, enllaços, etc.

1. Proves locals.
	Anar al directori c:\projecte2 (o al directori local on s'hagin guardat tots els fitxers de la web). Comprovar que existeixen els fitxers de format HTML (extensió .htm) corresponents a totes les planes del nostre espai web. Comprovar que existeixen els fitxers de cadascun dels gràfics que formen part del nostre projecte (fons de pantalla, imatges dels documents...) Executar el fitxer index.htm. Comprovar si els enllaços des de l'index funcionen adequadament. Comprovar que els enllaços des de les planes secundàries funcionen adequadament. Comprovar que es veuen totes les imatges. Si hi ha algun error o algun defecte en el disseny, cal obrir Word i cridar el fitxer corresponent i corregir el problema.
2. Publicació a l'espai de pràctiques amb WS_FTP.
	Obrir WS_FTP Comprovar que tenim activa la fitxa corresponent a l'espai de pràctiques del servidor de la intranet de l'Escola Joan Pelegrí. Seleccionar el directori local adequat. Seleccionar el directori destí correcte. Seleccionar els fitxers que formen part del projecte web. Publicar-los al servidor remot. Proves dins del servidor remot de la intranet. Anar a l'espai de pràctiques (amb el directori corresponent) i comprovar que s'activa automàticament el document index.htm. Fer les comprovacions rutinaries. Si hi ha algun error, corregir-lo des de word i repetir tot el procediment des de les proves locals, la publicació a geocities i al servidor de pràctiques del fitxer o fitxers afectats pels canvis. Ara tenim dos espais amb el mateix contingut.
3. Publicació a Geocities
	Anar a l'espai propi de Geocities Utilitzar l'administrador de fitxers de la plana web per crear una carpeta (projecte2) dins de l'espai propi. Publicació de tots els documents de la plana web (els fitxers HTML i tots els gràfics). Proves al servidor remot de Geocities Obrir l'adreça personal de geocities, amb l'afegit de la carpeta creada (www.geocities.com/.../projecte2/). Apareix el document index.htm automàticament? Funcionen els enllaços des del menú principal? Funcionen els enllaços de les planes secundàries? Es veuen totes les imatges? Si hi ha algun error, algun problema amb els enllaços o alguna imatge no es veu cal reeditar amb Word el fitxer on hi ha l'error i cal tornar a repetir el procediment des de les proves locals i la publicació a geocities del fitxer o fitxers afectats pels canvis.
4. Donar d'alta l'espai web a diversos motors de recerca.
	Anar a www.terra.es i omplir el formulari per donar d'alta l'espai web al seu index de recerca. Anar a www.ozu.es i omplir el formulari per donar d'alta l'espai web al seu index de recerca. Veure com es pot fer l'alta de la plana a http://es.yahoo.com/ o http://es-es.altavista.com/

Si tens algun dubte o vols donar solucions a les propostes de treball pots enviar-me un e-mail.

	Què són els mapes d'imatges?
	Els mapes d'imatges amb Word'2000
	Els mapes d'imatges amb Word'97 i Mapedit
	Plantejament del projecte: la idea i primers esbossos de la planificació.
	La concreció de la planificació.
	L'edició i la integració dels continguts. Implementació de la navegació a l'espai web.
	Les proves i la publicació del projecte
	Propostes de treball
	Weberia
(2004)