Guia del curs

La finalitat d'aquest curs és aprofundir en l'elaboració de pàgines web mitjançant la utilització de recursos avançats, fent especial incidència en la interfície, l'estructura interna de la web i les possibilitats d'interactivitat de l'usuari/ària, utilitzant un editor específic.

Els objectius del curs són:

Aprofundir en les estructures del llenguatge HTML.

Comprendre i aplicar els mecanismes propis del llenguatge web.

Conèixer i utilitzar l'editor de pàgines web Dreamweaver MX 2004.

Incorporar interactivitat i animació en el disseny web.

Conèixer i utilitzar recursos externs.

Crear, mantenir o ampliar una web de centre o personal.

 

 Format

Per seguir aquest curs podeu optar entre:

 

Anar consultant en línia els diferents mòduls.

Descarregar tot el curs en format HTML, fent clic al CD que hi ha a la portada.

Un cop descarregats tots els fitxers, instal·leu-lo executant nomdelfitxer.exe. Després, podeu visualitzar el curs en qualsevol navegador, sense necessitat d'estar connectats a Internet.

 

Estructura

La durada del curs és de 60 hores, distribuïdes en 48 hores per als mòduls i 12 hores per a la realització del projecte. Els mòduls són:

Mòdul 1: Instal·lació i configuració del Dreamweaver MX 2004. Revisió D72. Entorn de treball (I)

Mòdul 2: Entorn de treball del Dreamweaver MX 2004 (II)

Mòdul 3: Taules. Capes dinàmiques. Conversions

Mòdul 4: Plantilles. Fulls d'estil CSS

Mòdul 5: Interfície d'usuari (I). Disseny d'interfícies (I)

Mòdul 6: Interfície d'usuari (II). Disseny d'interfícies (II). Marcs

Mòdul 7: JavaScripts. Java. Objectes Flash

Mòdul 8: Formularis. Serveis externs. Accessibiltat. Ús

 

Coneixements previs

Per fer aquest curs es requereixen uns coneixements i unes destreses bàsiques en el domini de l'entorn Windows. És a dir, convé estar familiaritzat amb operacions com crear carpetes, copiar fitxers, retallar i enganxar, instal·lar programes, navegar per Internet, enviar correu electrònic, trametre fitxers al servidor..., així com tenir coneixements sobre el disseny i la creació de pàgines web similars als del curs D72, Disseny i creació de pàgines web.

 

Requeriments tècnics

Els materials d'aquest curs s'han dissenyat per treballar-se amb l'editor Dreamweaver MX 2004 i es poden visualitzar amb els navegadors Mozilla Firefox i Internet Explorer (versió 4 i superiors) amb les opcions JavaScript i Cookies activades (eines accessibles des del DVD Materials de formació).

 

Icones i elements de navegació

Les icones utilitzades són:

Informació. Ofereix documentació sobre el contingut que s'està tractant a les pàgines.

Pràctiques. Treball que l'alumnat ha de fer seguint les propostes guiades. Aquestes pràctiques són personals i no s'han d'enviar al tutor/a del curs.

Programa editor. Indica aspectes concrets relacionats amb l'editor de pàgines web i la seva utilització.

Atenció. Aquesta icona indica suggeriments, comentaris i idees complementaris a la documentació i a les pràctiques de cada mòdul.

Els elements de navegació són:

Permet canviar de mòdul d'una manera immediata, indicant en tot moment en quin us trobeu.

Permet accedir a qualsevol pràctica del mòdul actiu de manera immediata, indicant en tot moment en quina us trobeu.

Permet accedir a qualsevol exercici del mòdul actiu de forma immediata, indicant en tot moment en quin us trobeu.

Facilita l'accés a aquesta guia.

Obre una pàgina on hi ha un recull de termes que guarden relació directa amb el treball del curs.

Permet el retorn a l'inici de la pàgina consultada.

Tutoria

A cada participant se li assigna un tutor o una tutora que l'assessorarà i l'orientarà en el treball dels diferents mòduls. L'alumnat pot formular les consultes i preguntes que calgui a través de l'entorn Educampus. Per aquest mateix mètode pot demanar orientacions, suggeriments i recomanacions per desenvolupar el projecte. La persona responsable de la tutoria farà un seguiment personal del procés de cada participant basant-se en els exercicis.

Lliurament d'exercicis

En començar el curs, cada alumne/a disposarà d'una pàgina web especial en el servidor de la XTEC on trametrà els exercicis proposats a cada mòdul i el projecte. Les pàgines provisionals per a la realització del curs es regeixen per la normativa de les pàgines personals de la XTEC. Aquest espai web tindrà un límit de 5 Mbit que no podrà ser superat pels fitxers que es trametin. En acabar el curs, la pàgina es donarà de baixa automàticament. Si es volen conservar els continguts, hauran de ser traspassats a la pàgina personal.

Els tutors revisaran els exercicis mirant directament la pàgina web de cada alumne/a, qüestió per la qual no s'han de trametre fitxers a les persones que tutoritzen el curs.

Projecte

A partir del mòdul 5, heu de començar a treballar en un projecte final, que consisteix en l'elaboració de la vostra web, on integrareu i posareu en pràctica els diferents aspectes (conceptes, tècniques, eines, destreses...) tractats al llarg del curs. El projecte constitueix l'element avaluador definitiu per obtenir el certificat del curs.

La web del projecte ha de ser d'interès educatiu, lliure de motivacions comercials i sense ànim de lucre. El contingut es regeix per la mateixa normativa que les pàgines personals i les webs de centres hostatjades en el servidor de la XTEC. Podeu desenvolupar una web personal o de centre. Si preferiu fer una web de centre, treballeu un aspecte concret: la vostra àrea, els treballs dels alumnes, les activitats extraescolars, de manera que en acabar pugueu integrar el vostre treball a la web del centre. Com a web personal, us recomanem un tema concret de la vostra especialitat que us atregui especialment, però podeu tocar qualsevol tema sempre que tingui interès educatiu.

Les imatges i el contingut de les vostres pàgines ha de ser original, d'elaboració pròpia. Quan utilitzeu imatges o textos aliens, cal que en citeu la font. Les imatges o textos citats no poden superar mai el 10 % de l'obra. El projecte és un treball individual i de nova creació. No podeu adaptar una web ja existent, encara que sigui vostra.

Als exercicis del mòdul 5 trobareu les indicacions necessàries per elaborar la proposta del projecte. El vostre tutor/a donarà el vistiplau a la proposta amb els suggeriments i les orientacions que cregui oportuns. A partir d'aquí, ja podeu començar-lo.

El calendari estableix una data per al lliurament del projecte i una altra per al lliurament d'una versió revisada. Cal entendre que el projecte ha d'estar enllestit a la primera data. Només si el tutor/a considera que s'han d'efectuar modificacions perquè no es compleixen els requisits, podreu corregir-lo i lliurar-lo a la data de lliurament de la versió revisada.

Requisits del projecte

La web del projecte ha de contemplar els aspectes següents:

  • La web constarà d'un mínim de 10 pàgines.
  • Una d'aquestes pàgines serà la principal. Des de la pàgina principal es podrà accedir a les diferents seccions, les quals constaran de diverses pàgines. Al mòdul 5 haureu de preparar, entre altres coses, un esquema de l'organització jeràrquica de la web. Aquest esquema pot preveure més de deu pàgines, però només caldrà completar-ne deu abans d'acabar el curs.
  • La web ha de tenir una interfície d'usuari coherent i entenedora, amb canvis contextuals. Al mòdul 6 dissenyareu la interfície de la vostra web.
  • Els continguts textuals i gràfics de cada pàgina s'hauran d'organitzar en taules o en capes.
  • Totes le pàgines del projecte hauran d'estar basades en una plantilla, tal com s'explica al mòdul 4. La web se servirà d'un full d'estils CSS vinculat a totes les pàgines del projecte, per assegurar la coherència en el format del text. Els fulls d'estils CSS s'estudien al mòdul 4.
  • Una de les deu pàgines haurà de tenir inserit algun objecte Flash. Aquest objecte pot ser un document transformat amb el programa FlashPaper. Tractareu els objectes Flash al mòdul 7.
  • En una de les deu pàgines es farà ús d'algun servei extern: formulari, comptador, fòrum o xat. Els veureu al mòdul 8.
  • Malgrat que la web no estigui acabada, la pàgina principal contindrà els metatags convenients per al registre als cercadors (mòdul 8).
  • Una de les deu pàgines serà una secció de vincles a altres webs de tema similar a la vostra, de les quals n'haureu de fer una descripció i valoració.
  • Tots els elements de la pàgina han de visualitzar-se i funcionar correctament (imatges, vincles, elements audioviuals, serveis externs, applets, javascripts...). Deixeu inactius els vincles a pàgines que encara s'hagin de construir. Comproveu tots els vincles amb el Dreamweaver MX 2004.
  • La web resultant s'ha de visualitzar correctament en navegadors de versió 4 o superior a una resolució de 800 x 600 o més.
  • La redacció dels textos s'ha de guiar per la claredat. És essencial la correcció ortogràfica.
  • En acabar, heu de trametre les pàgines de la vostra web al servidor. Podeu crear una carpeta nova o bé esborrar tots els fitxers i totes les carpetes dels exercicis anteriors, de manera que el projecte sigui accessible a l'adreça http://www.xtec.net/~actxxxx. Comenteu el tema amb el vostre tutor/a.
  • L'espai límit que disposeu per a la vostra web és de 5 Mbit. Mentre duri el curs, en cap cas podreu sobrepassar aquest límit.
  • Una vegada tramès el projecte al servidor, comproveu-ne el funcionament i la visualització en línia. Si no observeu cap anomalia, comuniqueu l'adreça al tutor/a per correu electrònic.

 Recomanacions per al projecte

A l'apartat anterior hem enumerat una sèrie de requisits que la web del projecte ha de complir. Les recomanacions que presentem a continuació no són de compliment obligatori, però tenir-les en consideració pot millorar el resultat final.

Continguts textuals

A Internet es dóna una curiosa paradoxa. Per una banda, el visitant ve al web pels continguts. No hi ha res que atregui més visites que uns continguts de gran qualitat, encara que el tema no sembli d'interès general. Per l'altra (i ho corroboren les potents eines estadístiques només possibles en aquest mitjà), els navegants llegeixen molt poc. Tots hem experimentat que llegir en una font de llum a baixa resolució (és a dir, en un monitor) és força pesat. La postura i les condicions òptiques posen el web en condicions inferiors a la lectura d'un bon llibre escarxofats en un sofà. En un llibre, a més, la paraula no té competidors. Als webs, els textos estan envoltats de tota mena d'imatges atractives, colors llampants, coses que es belluguen, vincles que porten a altres llocs… i que atrauen d'entrada la nostra atenció.

Potser l'arribada i extensió de monitors a 300 ppp (resolució del textos que imprimim) millorarà les coses d'aquí a uns quants anys, però ara per ara costa ser llegit al web. Podem facilitar les coses als lectors potencials si seguim una sèrie de fórmules recomanades:

Escriure textos curts, clars i concisos. Cap expert aconsella sobrepassar les 700 paraules per pàgina (l'equivalent més o menys a un full fet amb un processador de textos tipus Writer o Word) o les tres pantalles (que és una altra manera de mesurar-ho). És evident que una persona molt interessada en el tema llegirà més, però fent textos més curts arribarem a un públic més ampli. La claredat ha de ser total: ja costa que l'usuari/ària comenci; si no ho entén, difícilment continuarà. La concisió sempre és agraïda: si diem el mateix amb la meitat de paraules, estalviem temps al lector/a. Les oracions i els paràgrafs curts i les llistes amb números o vinyetes també faciliten la lectura.

Això significa partir textos llargs en diferents pàgines? Normalment sí. Però hi ha altres tàctiques. Una d'eficaç és presentar un resum en una pàgina curta, i posar al final un vincle del tipus Més informació cap a una pàgina més llarga. Si l'usuari/ària hi fa clic, és perquè li interessa molt i estarà disposat a llegir un text més llarg.

Si penseu que, sens dubte, el destí del text és la impressió, llavors pot ser molt útil donar l'opció de descarregar un fitxer amb el text. Per exemple, heu elaborat una didàctica molt bona del sistema solar que ocupa trenta pàgines, i voleu donar-la a conèixer a altres professors. Podeu fer en una pàgina un resum del contingut i oferir un vincle per descarregar-lo. En general, utilitzeu el format que utilitzeu (DOC o PDF), és millor comprimir-lo amb el WinZip per evitar que el navegador l'intenti obrir. El format PDF ocupa més que el del Word, però és més universal i políticament correcte, ja que l'Acrobat Reader és un programa gratuït. És convenient informar l'usuari/ària de la mida del fitxer si és una mica gran (per exemple, més de 50 Kbit).

Estructurar els textos. El títol de la pàgina hauria de reunir tres característiques: que correspongui amb les paraules del vincle que ens hi ha portat, que resumeixi el contingut de la pàgina i que estigui ben destacat visualment (donant format al títol o fent un GIF amb el títol). Tant per facilitar la lectura com per ajudar a localitzar la informació, convé dividir el text en apartats breus amb el subtítol corresponent. Les imatges, el títol i els apartats són el primer que mira el visitant. Podem aprofitar aquesta circumstància per cridar l'atenció. Per exemple, si estem parlant de taurons, un apartat titulat Alimentació crida menys l'atenció que Mengen homes?. Però amb això cal ser molt cautelosos. Si ens excedim, el lector no sabrà què s'explica a cada apartat.

Amenitzar els continguts. Sempre que sigui possible procurarem il·lustrar els continguts amb elements visuals (dibuixos, fotos, gràfiques, taules, vídeos…) que tinguin relació amb el text o fins i tot que l'estalviïn. En canvi, convé prescindir de les imatges merament decoratives, ja que alenteixen la descàrrega de la pàgina. Prescindiu particularment dels GIF animats sense relació amb el contingut (ja sabeu que cada quadre és un GIF i, per tant, ocupen més). Se suposa que animacions i marquesines serveixin per cridar l'atenció sobre coses importants. Però si una cosa és important, serà més fàcil llegir-la si s'està quieta. I si no és important (per exemple, el vincle de correu), no cal que es bellugui. Per altra banda, els GIF animats han acabat associant-se a les cibertires (banners) de propaganda, de manera que molta gent ni se'ls mira. No obstant, si per exemple expliqueu la formació de l'Imperi Romà, estaria molt bé un GIF animat que mostrés la seva expansió en una mapa de la Mediterrània.

Optimitzar la llegibilitat. Pel que fa al format, és essencial facilitar la lectura, i per això, el més simple per al cos del text és utilitzar una font de color negre sobre fons blanc, com és habitual a tots els mitjans escrits, sense que hagueu d'excloure altres combinacions llegibles (noteu, en canvi, que és habitual utilitzar colors de fons per a la interfície, tècnica que remarca visualment les zones de la pàgina). En aquest sentit, és molt recomanable no posar fons predissenyats o imatges de fons sota el text, ja que normalment dificulten la lectura. Penseu que el visitant ve pels continguts, no per admirar què hi ha a sota de les lletres. Naturalment, tot això és aplicable a webs amb una bona dosi de contingut textual. Si feu una pinacoteca virtual, per exemple, i els únics textos han de ser el nom del pintor i el títol del quadre, no teniu aquestes limitacions.

Contra el que pugui semblar, les fonts molt grans no milloren la llegibilitat. Recordeu que no podeu utilitzar fonts exòtiques, ja que és fàcil que el visitant no les tingui instal·lades al seu ordinador. El més segur és utilitzar les famílies de fonts del Dreamweaver. Si voleu destacar paraules importants, no utilitzeu colors diferents, ja que l'usuari/ària creurà que són vincles. El mateix passa amb els subratllats. Gràcies als estils CSS, que aprendreu al mòdul 4, ja no és cap maldecap aconseguir un format homogeni per als diferents nivells de text (títol, apartat, subapartat...), amb l'avantatge que podeu modificar el format de tota la web tocant només el full d'estils.

També cal recordar que les línies molt llargues costen de llegir, i per això sovint s'organitza el text en dues o més columnes de taula o en capes.

Material gràfic

Ja hem comentat com el material gràfic que incloeu a la web beneficia, per una banda, els continguts, i per l'altra, repercuteix negativament en la velocitat de descàrrega. Mantenir un equilibri és complicat, i pràcticament impossible si no tracteu adequadament el material gràfic abans d'inserir-lo a les pàgines. Si us limiteu a posar les imatges tal com les heu trobat o tal com surten de l'escàner, obtindreu pàgines lentes i no gaire vistoses. Un bon domini de qualsevol programa gràfic permet retocar i tractar les imatges i obtenir excel·lents resultats, però penseu que no és l'objectiu d'aquest curs; heu d'adquirir aquest domini en un curs diferent o pel vostre compte.

El format GIF. Volem comentar, no obstant, alguns errors i malentesos que de vegades es produeixen sobre els formats web. Se sol dir que el format JPEG és adequat per a les fotografies i el format GIF per als dibuixos. Ara bé, cal entendre que "dibuixos" no vol dir dibuixos fets en paper i escanejats, sinó imatges simples generades digitalment: icones, clip-arts, títols, esquemes, gràfics estadístics... Aquesta mena d'imatges contenen àrees planes i es creen amb pocs colors. És en imatges d'aquestes característiques on el format GIF actua de manera eficient.També és bo saber que la compressió GIF actua en sentit horitzontal, de manera que un degradat vertical, per exemple, ocupa molt menys que un degradat horitzontal, ja que a cada línia hi ha un sol color.

En general, per a cap imatge escanejada, ni tan sols per a un dibuix, és adequat el format GIF. El nombre de colors és sempre molt alt i a més, si els mireu amb el zoom del Fireworks MX 2004 o del GIMP, veureu que pocs píxels contigus són iguals. El resultat són fitxers grans i de poca qualitat, si no és que els tracteu abans. Recordeu que en el format GIF és possible definir el color de fons com a transparent, amb la qual cosa la imatge queda molt més ben integrada a la pàgina. Si us voleu estalviar el procés, poseu com a color de fons el mateix de la pàgina quan genereu la imatge. El resultat en mides del fitxer és similar.

El format JPEG. Pel que fa al format JPEG, és imprescindible temptejar diferents nivells de compressió fins a obtenir una bona relació entre la qualitat i els quilobits. El Fireworks MX 2004 disposa d'una vista prèvia de la imatge en els diferents formats en els quals podeu guardar la imatge.Pot saber greu la pèrdua de qualitat que comporta augmentar la compressió, però penseu que el visitant no pot comparar la foto de la web amb l'original que teníeu. Per això, sempre us semblen bé les fotos que veieu al web. A més, del factor de compressió, l'altre aspecte decisiu són les mides en píxels de la imatge. No hi ha cap manera de fer que la foto d'una nena disfressada de bruixa es vegi bé i ocupi poc si té 400 píxels d'ample. Per tant, les heu de posar més petites. Una tàctica que heu d'aplicar sempre és retallar el centre d'interès de la foto: en l'exemple anterior, la nena potser només ocupa 150 píxels de la imatge: retalleu-la amb el programa d'edició d'imatge que utilitzeu i obtindreu un fitxer molt més petit sense perdre-hi res.

Considerem, també, que de vegades el material gràfic no és un complement del text, sinó un contingut. Penseu en l'exemple de la pinacoteca virtual, o imagineu una web sobre Dalí. Alguns voldran llegir la vida del pintor, però molts vindran només pels quadres, i estaran disposats a suportar temps de descàrrega més llargs per veure'ls. Per a aquests casos, és ideal la tècnica de les miniatures, que haureu vist moltes vegades. En una pàgina poseu vuit quadres de 80 píxels d'ample, per exemple, de manera que quan feu clic en un dels quadres, s'obri una nova pàgina amb una ampliació. Però ni tan sols en casos com aquest les fotos poden ocupar molt, perquè l'usuari/ària acabaria abandonant.

La interfície i la navegació

Als mòduls 5 i 6 es parla prou àmpliament de la interfície de la web, però podem afegir encara algunes consideracions. Ja heu vist que el requisit fonamental d'una interfície és la claredat: cal que l'usuari/ària entengui a l'acte a quina web està, què conté i com funciona. El segon és la rapidesa, de la qual parlarem després. El disseny quedaria en tercer lloc. Si la web no s'entén o triga mig minut a caure, de poc us servirà que sigui preciosa.

Això no vol dir que pugueu descuidar la qualitat gràfica. A parer nostre, la funció del disseny és proporcionar credibilitat i actualitat a la pàgina. No podem entendre el disseny web com un art (un quadre és per contemplar-lo, una web és per fer-la anar) ni tampoc menysprear-lo com a luxe innecessari en nom dels continguts.

Diem credibilitat perquè la interfície és la cara de la web, i instintivament es tendeix a desconfiar de webs d'aparença descuidada, encara que després descobrim que els continguts són excel·lents. De la mateixa manera, si fem les webs com es feien l'any 1997, estem donant a entendre que la nostra web no s'actualitza mai, encara que no sigui cert. Fins a cert punt, per tant, estem obligats a seguir les modes. També es dóna el cas contrari: webs de disseny excel·lent i actual en què, en navegar-hi, descobrim que són pràcticament buides. Però tot això que diem és motiu de controvèrsies i potser teniu una altra opinió. Ho posem aquí només com a idees sobre les quals reflexionar.

En tot cas, sí que podem consignar una sèrie de recomanacions més objectives:

La pàgina principal. Tot i que ja heu procurat ser clars a la nostra interfície, una de les funcions essencials de la pàgina principal és acabar d'esvair qualsevol dubte que pugui quedar. Amb la màxima brevetat i claredat possible, heu de redactar un text que expressi què hi ha a la web.

Al mòdul 5 comentem que el visitant, quan arriba a la web, vol saber de seguida on és, què hi ha i on pot anar. Es diu que l'usuari/ària es fa una quarta pregunta. té formulacions variades, però bàsicament vol saber el valor de la pàgina, és a dir, si és millor que altres de semblants. Això només ho pot esbrinar comparant, però també podem intentar ajudar-lo amb aquest text inicial. Per això, al mateix temps que expliqueu què hi ha i què s'hi pot fer, mireu d'expressar (honestament, perquè la web és valuosa) sense fer tampoc un bombo excessiu que després el defraudi.

Aquest text l'heu de situar en una posició destacada de l'àrea de continguts i subratllar-lo visualment (la manera més simple és amb una imatge). No oblideu, sobretot, que el text ha de ser molt clar i molt breu. Sovint va bé una llista de tres o quatre ítems. Altres elements adients per a la pàgina principal són les notícies relacionades amb el tema de la web i les novetats o últims continguts que s'hi han afegit.

No s'ha de confondre la pàgina principal amb les anomenades pàgines d'entrada. Una pàgina d'entrada és una mena de presentació, normalment d'aire espectacular, en què només podeu fer clic i arribar a la pàgina principal pròpiament dita. Aquestes pàgines poden causar una bona impressió la primera vegada que el visitant ve a la web, però la vostra aspiració ha de ser que el visitant torni, i a partir de la segona vegada són una molèstia. Si no tenen cap funció (per exemple, escollir l'idioma), és millor prescindir-ne.

La navegació. Sobre els vincles de la interfície, cal destacar alguns aspectes: en primer lloc, les paraules que utilitzeu com a vincle. De vegades, costa que aquestes paraules (que normalment no seran més de dues) expressin amb claredat el contingut de la pàgina on portarà el vincle. Cal parar-hi atenció en triar-les i pensar que, el que per a nosaltres és evident, pot no ser-ho gaire per al visitant. Us pot ajudar fer grups de vincles; el nom del grup contribuirà a aclarir el significat del vincle.

Un altre aspecte és respectar l'equació un vincle = una pàgina. En aquest sentit, excepte en casos especials, no són recomanables els enllaços amb objectius, almenys en els vincles de la interfície. Tampoc no podeu fer que dos vincles diferents portin a la mateixa pàgina.

Els vincles externs. Encara que pugui semblar obvi, cal remarcar que el visitant s'espera que els vincles de la interfície siguin interns. I no només els de la interfície, sinó també, mentre nosaltres no li indiquem el contrari, els de l'àrea de continguts. Sempre que feu un vincle extern, heu d'informar mínimament al visitant del lloc on el portarà el vincle.

Però, sovint, la millor fórmula és fer una pàgina o secció de vincles, tal com demanem als requisits del projecte. Heu de partir de la idea que una pàgina de vincles ben feta és un valor afegit a la vostra web. El visitant ha vingut perquè li interessa el tema, i quan es tracta d'un tema molt específic, sovint no coneix altres llocs on anar, de manera que les pàgines de vincles són força visitades. Donar a conèixer les pàgines de la competència és un signe de professionalitat i desinterès que tothom us agrairà. De cada web feu-ne una descripció i una valoració honesta; la podeu acompanyar d'una captura del logotip. En general, és millor ser selectiu; prescindiu de pàgines que a vosaltres mateixos us semblen fluixes, ja que fareu perdre el temps al visitant. De tant en tant, haureu de visitar els vostres vincles, ja que les actualitzacions i canvis d'adreça són constants.

Navegadors i resolucions

Com a autors de webs, ja estareu al corrent del fet que tenim poc control sobre el resultat final. Les diferents versions dels navegadors i la resolució del monitor donen lloc a diferents presentacions de la pàgina, amb efectes de vegades curiosos (proveu de navegar en un monitor de 16 colors; és divertidíssim) i de vegades desesperants. Diguem, de passada, que els navegadors, en la seva cursa hipercompetitiva, s'han convertit en el programari amb més bugs de la història. Com podem assegurar que la web es vegi bé a la major part dels ordinadors?

Els professionals tenen diferents solucions. Una és crear diferents versions de la web, adaptades a les característiques del navegador o de la resolució de l'usuari/ària. Per al problema de les resolucions, les tècniques del disseny líquid permeten crear una sola versió de la web que s'adapta al monitor del visitant, però això requereix uns coneixements tècnics fora del nostre abast. I la veritat és que no són moltes les webs que atenen aquest problemes.

No serem pas els únics, doncs, que ens limitem a mirar les estadístiques. Les estadístiques d'ara mateix indiquen que la immensa majoria dels usuaris tenen la versió 5 o superior del l'Internet Explorer o la versió 1 del Mozilla Firefox, i que la resolució predominant és 800 x 600 (el percentatge de resolucions inferiors és ínfim). Per aquesta raó, figura entre els requisits del projecte que la web resultant s'ha de veure bé a una resolució de 800 x 600 en navegadors abans esmentats. Ja que no podeu atendre absolutament tots els visitants, heu de procurar que la vostra web arribi correctament a la immensa majoria. Ara bé, de tots els aspectes del curs, aquest serà el primer a quedar obsolet. D'aquí a un temps, haurem de tornar a mirar les estadístiques i plantejar-nos si no seria millor fer la web a 1024 x 768 o si podem dissenyar-la aprofitant les característiques avançades dels navegadors.

Però el que haurem de fer sempre, ara i en el futur, és comprovar que la nostra web arriba correctament als entorns per als quals hem decidit dissenyar-la. Pel que fa als diferents navegadors, cal visualitzar la pàgina abans de pujar-la al servidor, partint de la idea que no es poden aconseguir resultats idèntics per a cada versió de cada navegador; n'hi ha prou que la visualització i el funcionament sigui correcte. Sovint ens oblidem també de mirar com queda la nostra web a una resolució superior, i això ens pot donar més d'un disgust. Ho hem de tenir en compte en el mateix moment en què ens posem a dissenyar la interfície amb el Fireworks.

Velocitat de la web

Voldríem, per acabar, reflexionar sobre la importància decisiva de la velocitat. Alguns creuen que plantejar-se aquestes coses és mirar el passat, i que cal dissenyar pensant en les amplades de banda del futur. La veritat és que les coses no han millorat substancialment en els últims anys i no hi ha massa perspectives de millora en els propers. El motiu és el mateix que en el trànsit: es fan moltes autopistes, però cada vegada hi ha més cotxes.

Temps objectiu. La velocitat de la vostra web depèn de molts factors que no podeu controlar: el servidor, la connexió de l'usuari/ària, les inclemències del temps… (quan plou tot va malament; Internet no és cap excepció). L'únic aspecte que és a les vostres mans és el nombre de quilobits. Com més baix, més ràpida és la web. No és un mal resultat aconseguir que la pàgina més els elements incrustats (imatges, etc.) sumin, per exemple, 64 kbit. Però si podeu dir el mateix amb la meitat, molt millor.

Tanta diferència hi ha entre una pàgina lenta i una de ràpida? Hi ha estudis curiosos que mostren com les pàgines lentes són menys visitades, i que n'hi ha prou amb fer-les més ràpides (eliminant, per exemple, els gràfics ornamentals) perquè augmenti el nombre de visites. L'usuari/ària, a mesura que va fent clic, va calculant inconscientment el temps mitjà de descàrrega. Si és llarg, s'ho pensa molt abans de fer clic, i plega aviat. En canvi, si és curt, s'aventura fins i tot a mirar pàgines que potser no li interessaven d'entrada, ja que obté la satisfacció d'anar fent moltes coses en poc temps. Si en alguna cosa estan d'acord tots els experts és aquesta: les pàgines lentes tenen tots els inconvenients i cap avantatge.

La simple presència d'una interfície d'usuari millora la velocitat de la vostra web, ja que les imatges de la interfície es conserven a la memòria cau del navegador. Si preferiu una interfície amb marcs, guanyeu velocitat amb relació a les interfícies amb taules, però cal tenir en compte tots els inconvenients que comentem al seu moment. Considerant que les vostres webs no seran de grans proporcions, la nostra recomanació és amagar les barres de desplaçament dels marcs, ja que costa molt integrar-les estèticament al disseny de la pàgina.

Temps psicològic. Tot això que diem fa referència al temps objectiu, però resulta que el temps psicològic és també molt important. Imaginem dues pàgines que triguen el mateix a descarregar-se: dotze segons. La primera va caient a poc a poc: primer el logotip, ara un gràfic, després un text, després la columna de vincles… A la segona no apareix res durant els primers onze segons, i, al dotzè, cau tota de cop. No hi ha dubte que la primera ens semblarà més ràpida, perquè anem mirant i ens distraiem. A la segona ens hem d'estar onze segons sense fer res, o millor dit, preguntant-nos coses com: "Què passa?", "S'ha penjat?", "Valdrà la pena, això?", etc.

Precisament, un dels arguments a favor del trossejament d'interfícies, tècnica que veiem al mòdul 3, és l'aparença de rapidesa que proporciona. Així i tot, de vegades s'utilitzen javascripts per produir la caiguda sobtada, precarregant, per exemple, les imatges trossejades. Estèticament és millor, però... i si l'usuari/ària, al cap d'onze segons de no veure res, prem el botó Enrere del navegador? De la mateixa manera, cal anar amb compte amb les taules (especialment amb les imbricades), ja que els navegadors necessiten molta informació abans de poder començar a representar-les. Si som partidaris de la caiguda progressiva, hem d'utilitzar diverses taules en lloc d'una per a tota la pàgina.

Temps funcional. Junt amb el temps psicològic, se sol parlar del temps funcional, és a dir, del temps que l'usuari/ària necessita invertir per efectuar certa tasca. Voleu, per exemple, esbrinar el temps que farà a Florència, perquè marxeu de viatge, i visiteu dos portals diferents. Seguint el camí més curt, aquesta informació es troba a tres clics en un portal i a cinc en un altre: dos temps funcionals diferents. Però la veritat és que el número de clics té poca importància. És molt més important, per exemple, que la interfície sigui clara; en cas contrari, podeu començar a anar endavant i enrere i fer dotze clics en lloc dels tres necessaris. I la rapidesa: si les pàgines caiguessin en tres segons, encara que féssiu dotze clics, quedaríeu satisfets d'haver-ho trobat "tan de pressa": sempre compta més el temps psicològic.

 

Calendari

Vegeu calendari de l'activitat