Vegeu també:
HTML
Javascript i Java
Shockwave/Flash
Fitxers comprimits (ZIP)
Consells bàsics per crear i mantenir una web que funcioni.
Planificar la web pas a pas: una fitxa pràctica.

Per analitzar algunes de les decissions que s'han de prendre en teixir una web, res millor que analitzar aquesta mateixa. Les pàgines que constitueixen Vigital són un bon exemple d'alguns principis generals sobre el disseny per a la web.

Veureu que no només comentam les coses que funcionen, sino que també reflexionam sobre allò que podríem haver fet d'una altra manera. Aquí explicam:

1. Objectius. Per què de les pàgines.
2. Planificació. Criteris per preparar tot.
3. Modularitat. Per possibles canvis i ampliacions.
4. Consideracions sobre el disseny de les pàgines.
5. Utilització de plantilles i fulls d'estil. Per assegurar la coherència estilística.
6. Manejar els gràfics de forma efectiva.
7. Eines utilitzades... pràcticament de tot.
8. Altres afegits i futurs canvis. Què ens volta pel cap.
   

Objectius.
Per què volem tenir una presència a la web? Si no tenim un motiu clar i fàcilment explicable, difícilment podem crear un producte capaç d'oferir quelcom d'interessant als visitants. En el cas de Vigital, volíem crear una web útil per aprendre tot allò relacionat amb el món del disseny digital, i omplir un buit existent a la xarxa (i fins i tot al món editorial) de materials de referència sobre disseny gràfic, web i tipografia, en català. No manquen recursos en anglès (i poques coses en castellà), però en català l'oferta era gairebé nul.la.

Per una altra banda, teníem dos altres objectius molt clars:

• Preteníem crear una web de promoció personal, incloent un formulari per a la contractació de serveis d'il.lustració i disseny.
• Aprendre el maneig de nous programes i tècniques (i gaudir-ne!); aquest és un objectiu intranscendent per al públic, però molt interessant per als creadors!

Planificació.
Abans de fer res, vam pensar molt sobre què havia d'oferir el projecte Vigital.

Vam omplir un grapat de papers amb llistes de temes a tractar, intentant agrupar-los en una sèrie de seccions ben definides.

A aquesta fase la eina millor és el llapis i el paper. Quan ja tenim un esborrany raonablement bo, podem passar a l'ordinador i començar a perfilar les parts de la xarxa. Una forma molt útil de crear les seccions i subseccions és emprar un processador de textos i fer servir els estils per definir cada part. (A Word apareixen en forma de menú desplegable a la part superior, i es pot triar Títol 1, Títol 2, Títol 3...) Una vegada creat el llistat, si anam a Ver | Mapa del documento, apareixerà l'estructura que hem decidit per a la nostra web. Fins i tot podem introduir text en arribar al que seran les pàgines (típicament, al nivell 2 o 3: no convé aprofundir massa l'estructura per fer més fàcil la navegació.)

A les fases inicials, la millor eina no és l'ordinador, sinó el llapis i el paper. (Esbós de la pàgina Inicial d'aquesta web.)

Un cop decidides les línies mestres, vam passar a crear uns esborranys (que ja ens servirien d'index per a les seccions.) El títol el vam copiar d'un terme que ha inventat un dissenyador gràfic africà, i és una contracció de "arts visuals amb medis digitals."

Modularitat.
Una manera d'assegurar que la web pugui créixer de forma senzilla és planificar bé la seva estructura, fent-la modular: una sèrie de seccions independents (encara que hi hagi enllaços entre elles), i amb possibilitats d'incorporar noves seccions des de la pàgina inicial. Així no resulta difícil incorporar-les, ja que només s'ha de crear un enllaç a la nova secció a la portada; posteriorment es poden afegir enllaços des de pàgines particulars i subseccions.

Per exemple, vam crear quatre seccions (Bàsic, Disseny gràfic, Disseny per a la Web i Tipografia) a les quals s'entra des de la portada. Tornar d'una secció a la pàgina inicial és ràpid, i a cada pàgina hem tengut cura d'afegir un enllaç a la portada a la part inferior. Així, si volem afegir una cinquena o sisena secció, només cal modificar la portada i tendrà les mateixes condicions d'accessibilitat que la resta.

La pàgina inicial és essencialment gràfica; el significat de les icones abstractes es revel.la amb un efecte de mouseover.

Les quatre pàgines de seccions (nivell 2) contenen un sumari i enllacen amb els principals articles.

Als articles (nivell 3) s'hi accedeix a partir de la barra de navegació superior (temes principals), o amb els enllaços de la columna esquerra.

Consideracions sobre el disseny de les pàgines.
En un projecte personal, al qual tots els aspectes poden ser decidits per un mateix, existeix la temptació d'experimentar amb el sistema de navegació, els gràfics, i tota la resta dels elements. Però, en tractar-se d'un material utilitari com aquest, ha de primar una total consistència en el maneig dels elements per moure's d'una pàgina a una altra, fent que als visitant no els costi gens esbrinar com tornar a una secció determinada o a la pàgina inicial.

És molt útil planjejar-se la web en termes arquitectònics; en termes d'espai i temps. Si les pàgines han de ser fàcilment accessibles, hem de proporcionar "sales" d'accés a les pàgines que depenen d'aquestes: crear unes seccions i subseccions que facin simple i fàcil d'entendre la manera de navegar a través de la web. Al visitant no ha de semblar-li un edifici laberíntic, sino un espai agradable i on es pot moure amb total llibertat i sense impediments.

Vigital està estructurat en tres nivells de navegació:

• Nivell 1: la pàgina inicial; enllaça al nivell 2 i també inclou altres serveis (cerca, mapa de la web...)
• Nivell 2: les quatre pàgines de seccions (Bàsic, Disseny gràfic, Disseny per a la web i Tipografia digital); de cada una s'accedeix a les principals pàgines del nivell següent.
• Nivell 3: les pàgines dels articles; algunes permeten accedir a noves pàgines sobre temes relacionats. Existeixen enllaços entre diferents pàgines del nivell, i es pot tornar enrera a la secció corresponent o a la pàgina inicial. La barra de navegació superior (en color blau) porta a les principals pàgines de la secció.

Cada pàgina d'un nivell inclou un enllaç a la pàgina inicial, retornar al nivell anterior i un enllaç de correu electrònic amb l'autor.

El disseny general de les pàgines és sobri: la informació és fàcil de localitzar i d'una forma previsible, a cada nova pàgina sabem on trobar-la. Això és imprescindible per un material que pretengui cumplir una funció educativa.

Pel que fa al disseny d'alguns elements com les icones de les quatre seccions, ens allunyem un poc del propòsit representatiu d'aquests elements. Aquí hem crear quatre icones que representen les quatre divisions de Vigital, basades en la idea de les icones que l'equip de Neville Brody va crear per a Macromedia. Són gràfics abstractes, que funcionen a manera de codi de color, identificant les seccions i que, en ser només un petit nombre (4) , no resulten difícils de recordar, perquè, a més, es repeteixen a cada pàgina.

Utilització de plantilles i fulls d'estil.
Aixó és important: perquè les diferents pàgines de la web semblin germanes, i no parents llunyans (o complets desconeguts) cal que comparteixin una sèrie de peces en el seu disseny. Que es mantenguin constants arreu de la web ajuda als visitants a orientar-se, a entendre el sistema de navegació que hem utilitzat i, en definitiva, a que aprofitin millor la seva visita i poguem assolir els nostres objectius.
La millor manera d'assegurar aquesta consistència és utilitzar plantilles per crear les diferents pàgines de cada secció; després n'hi ha prou amb introduir el text i els gràfics específics de cada pàgina.

Aquí també hem fer servir fulls d'estil per a les pàgines web (CSS), perquè, un cop definits, no cal preocupar-se més de quin tamany o tipus de lletra correspon al text, als peus d'imatge, a les barres de menú... i qualsevol canvi d'idea que tinguem al respecte es fa a un sol fitxer, que actualitza automàticament totes les pàgines que depenguin d'ell.

L'esquema de color i tipografia que hem utilitzat als logos i barres de navegació també procuram mantenir-los constants. Aquests colors i lletres tenen un aspecte net i ordenat; (de fet, la lletra de les barres de menú és London Tube, una lletra que està basada en la que s'utilitza al metro de Londres.) Pensam que ajuden a concentrar-se en els continguts, i donen la seguretat de tenir a mà el pas a les altres seccions.

Manejar els gràfics de forma efectiva.
Els gràfics que hem inclòs no són decoratius, sinó que reforcen el missatge del text, amplien la informació o ofereixen nous punts de vista.

Donat que hem estat molt conservadors en el disseny de les pàgines, amb els gràfics hem tengut l'oportunitat d'usar el color, les formes i la tipografia amb molta més llibertat, i també serveix de toc distintiu: en passar d'una pàgina a una altra, esperam veure un nou joc de colors i formes a l'etiqueta que correspon a la pàgina o subsecció.

És cert que algunes imatges no són imprescindibles, però cal pensar que també han d'alleugerir la càrrega visual que provoca una gran extensió de text sol. Certament, tampoc són massa coherents estilísticament: hi ha un poc de tot; dins d'una web comercial és convenient una certa unitat d'elecció del tipus de gràfics, però aquí no teníem aquestes imposicions externes, i també hem aprofitat per incloure imatges de mostra que serveixen com a promoció pròpia.

Eines utilitzades.
Per preparar les pàgines i els gràfics hem fet servir una col.lecció de programes bastant àmplia, i fins i tot diferents ordinadors (molts textos i alguns gràfics estan preparats en un ordinador molt senzill per als estàndars actuals, que vam manejar fins fa poc més d'un any.)

En general, utilitzam programes que encaixen bé dins la nostra idea de Cheapware: programes molt funcionals però que tothom es pot permetre utilitzar, bé perquè són gratis, o molt econòmics. També hem aprofitat diferents demos de programes comercials; tant de bo els poguéssim tenir en versió completa!

Una idea que volem transmetre és la de que no és imprescindible tenir tots els programes més recents i els millors ordenadors; si tenim un projecte clar i bones idees podem treure-ho endavant amb materials més modestos.

Altres afegits i futurs canvis.
Aprofitant diferents serveis gratuits, hem incorporat:

• Una cerca de paraules o frases per localitzar ràpidament informació arreu de les pàgines de Vigital.
• Un servei de recepció de formularis, per tal de recollir encàrrecs, enquestes, opinions...

Les idees que tenim per més endavant inclouen:

• Col.laboracions d'altres dissenyadors.
• Entrevistes.
• Traducció d'alguns articles especialment interessants.
• Cursets específics i detallats sobre alguns temes.