Formats de gràfics per al web.
Programes de gràfics aconsellats.
Animacions i Flash.
Optimització de les imatges.
Ús d'imatges com a fons de pàgines i taules.
Elements de navegació: Mapes d'imatges i rollovers.

Elements de navegació
Als primers anys de la web, l'aspecte de les pàgines era més aviat gris (i no tan sols perquè el fons era gris, que ho era!): poques imatges, sempre el mateix tipus de text, una estructura de navegació previsible. L'hipertext de la primera generació de pàgines web més aviat era semblant a l'ajuda de Windows (a l'ajuda textual més simple que pogueu trobar.) A les webs actuals els dissenyadors tenen molta més llibertat i més recursos. Entre altres coses, existeixen nombroses opcions per dissenyar l'estructura de navegació de la web, i es pot recurrir als gràfics per guiar els visitants a través de les pàgines, amb una experiència més rica i variada que els simples hiperenllaços al text.

Ús de les imatges a la navegació.
Les imatges tenen un gran impacte dins de les pàgines web, no tan sols com a il.lustracions, sinó com una forma d'atreure l'atenció. Aprofitar aquesta qualitat ha de ser l'objecte d'utilitzar les imatges com a fil conductor de la navegació.

Com amb tantes coses, l'abús d'imatges (sobre tot si són molt cridaneres o si són animacions) pot distreure en comptes de cridar l'atenció selectivament. El dissenyador ha d'escollir de forma sensible les imatges que pot utilitzar, i dosificar-les amb seny. Així doncs, una imatge pot servir-nos perfectament per focalitzar l'atenció en els enllaços que consideram preferents dins de cada pàgina, sense que calguin massa explicacions addicionals. Per exemple, si ens interessa que es vagi a una pàgina que parla d'un determinat disc, o un llibre, res millor que incloure una petita fotografia de la portada.

Abans de fer res amb l'ordenador, és convenient treballar amb llapis i paper per tenir clara quina ha de ser l'estructura general de la web: quines seccions inclourà i quines pàgines depenen de quines.

Mapes d'imatge.
Tots els navegadors actuals suporten la tecnologia dels image maps o mapes de navegació. Aquests, en la versió més senzilla, no són altra cosa que imatges com la que teniu a la part superior d'aquestes pàgines; existeixen diferents regions dins de la imatge, definides per unes coordenades, que enllacen amb diferents pàgines web o seccions d'una pàgina. Un d'aquests mapes d'imatge simples es pot substituir perfectament per una taula amb imatges parcials que enllacen amb les corresponents pàgines. L'avantatge del mapa, en aquest cas, és que cal incorporar una sola imatge, no un conjunt d'elles.

Els mapes d'imatge tenen més sentit i són més atractius si s'utilitzen per simbolitzar diferents parts d'un edifici, d'un cos, d'un objecte, fent una metàfora visual de la navegació a través de la web.

Per exemple, com al costat, cada carpeta simbolitza els continguts d'una pàgina i clicant-hi a sobre ens hi porta.

Pel que fa al disseny, el major motiu per fer un mapa d'imatge és independitzar-se de les restriccions en el format de les pàgines. No cal limitar-se a les pautes de posicionament del text i les taules. Si fem el mapa d'imatge -vigilant que no sigui un fitxer de tamany massa gran-, tenim una forma magnífica d'estructurar la navegació per la web. A més, si els visitants tenen desactivada la càrrega automàtica de les imatges, encara que es perdin l'atractiu visual del nostre mapa, els enllaços seguiran essent actius. Com a precaució, cal indicar a la etiqueta ALT que la imatge és un image map.

Barres de navegació.
Les barres de navegació són potser l'element de navegació més utilitzat. Es poden fer només de text o emprar-hi imatges. En aquest darrer cas, la barra de navegació es pot preparar, de fet, amb un mapa d'imatge. Existeixen versions més sofisticades de barres de navegació que es despleguen en fer clic a sobre d'un nom, com si fossin menús del programa, i es poden preparar amb HTML dinàmic, amb Java o amb Flash.

Crear una barra de navegació amb programes avançats com Netobjects Fusion és senzillíssim, perquè aplica l'estil escollit a les seccions de la web que li indiquem, en forma de plantilla, i qualsevol canvi d'aquesta actualitza automàticament totes les pàgines, per moltes que n'hi hagi. Si no utilitzem Fusion -o un altre programa que manegi plantilles- la solució òbvia és crear la nostra pròpia plantilla, que conté una sèrie d'elements fixos i uns espais on col.locar les parts variables, específiques de cada pàgina. Per crear cada pàgina obrim la plantilla i a l'hora de guardar-la, anem en comptes de a Guardar, a Guardar como... i li donam un nom diferent.

Mouseovers: imatges alternants
Un recurs que darrerament s'ha utilitzat molt (massa: potser s'ha fet servir de forma gratuïta en molts casos.) Per crear l'efecte cal una mica de programació en JavaScript, o bé un editor visual de pàgines web. Un editor bàsic d'HTML (com els que s'obsequien amb Netscape o Explorer) no permet crear aquests efectes, i aprendre tot el sistema de programar-lo no ho val la pena. Editors avançats com ara Dreamweaver o Netobjects Fusion tenen aquesta capacitat, i ho fan molt fàcilment.

Si no es volen gastar diners, i es vol tenir tot el que cal per generar aquests efectes de mouseover (i moltíssimes més coses, com menus desplegables) la solució existeix en forma de freeware: First Page 2000. Aquest programa inclou un mòdul especialitzat per a la creació d'imatges de rollover; si es vol es pot generar tot el codi necessari utilitzant-lo i després es pot copiar i aferrar dins de l'editor de pàgines web que volguem.

Una forma alternativa de manejar els mouseovers és un efecte que fa canviar la imatge (sigui la mateixa o una altra a la pàgina) per una altra que mostra més informació referent a allò que representa la imatge primera. (Vegeu un exemple al costat.) Aquest sistema té l'avantatge de que permet "amagar" més informació de la que cap físicament a la pàgina, i la fa apareixer quan es passa per sobre de l'àrea escollida. És una molt interessant possibilitat que cal explorar, i en certa manera alternativa dels menus desplegables: encara que no ens porti directament a cada secció, sí que podem mostrar quines subseccions hi ha a cada apartat.

Efectes de rollover amb CSS.
Cal afegir, finalment, que es poden fer efectes de rollover sense imatges, utilitzant fulls d'estil. Dissortadament, només l'explorador Internet Explorer (versió 4 o 5) incorpora aquesta característica. Si utilitzau aquest navegador us n'hareu adonat amb el enllaços d'aquestes pàgines.

Mapes visuals de la web.
Un mapa visual,com a sumari de tots els continguts, permet al visitant localitzar allò que li interessa ràpidament i estalviant-li viatges innecessaris a través de la web. Sempre és positiu estalviar esforç i temps als visitants! Quan preparem un mapa visual de la web, cal que l'estructura quedi ben clara, i que es vegi bé quines seccions pertanyen a cada part.

El mapa de la web sol fer-se en una pàgina apart, donat que quan una web assoleix un cert tamany, un esquema detallat dels continguts ocuparia massa espai, en perjudici dels continguts concrets de cada pàgina. Aquest mapa visual es pot crear en forma textual, en forma de llistes de pàgines, amb una breu explicació dels continguts, o bé en forma gràfica, utilitzant un esquema de carpetes, o qualsevol metàfora visual adient. Per exemple, per a una pàgina-catàleg de productes alimentaris podem utilitzar una imatge de diferents queviures representant les seccions corresponents.

    { A dalt }