Logo de Mosaic
El text central d'HTML
Creació de múltiples pàgines amb menús de navegació

23. Creació de múltiples pàgines amb menús de navegació

Christian Heilmann. 26 de setembre de 2008. Darrera modificació: 10 de març de 2017 (equip docent del grau de Multimèdia de la UOC). Publicat a: seleccionar, menú, navegació, mapa, imatge,

En aquest apartat parlaré sobre la navegació en llocs web i els menús. Veureu els diferents tipus de menús i la manera de crear-los amb HTML. També parlaré sobre la qüestió de la usabilitat i l'accessibilitat dels menús. No entraré encara en l'aplicació d'estils als menús, però sí que establiré els fonaments per a un altre apartat posterior d'aquest curs sobre el CSS.

Vegeu també

Vegeu el mòdul "CSS" d'aquest curs.

Nota

Podeu descarregar-vos codis d'exemple a "menu_examples.zip" per anar seguint les explicacions; jo m'hi aniré referint al llarg d'aquest apartat.

Els continguts d'aquest apartat són els següents:

Amb l'HTML cal considerar diversos tipus diferents de menús i sistemes de navegació, tots ells molt relacionats amb els elements link i a (àncora). Per explicar-ho ràpidament:

Si no heu llegit els apartats anteriors d'aquest curs sobre els enllaços i sobre les llistes, us aconsello que els llegiu, ja que aquí dono per coneguda part de la informació que trobareu en aquests apartats per així evitar repeticions.

Vegeu també

Vegeu les llistes i els enllaços en els apartats 16 i 18 d'aquest mòdul.

Les àncores i els enllaços no es converteixen en menús sense més ni més; cal donar-los una estructura i aplicar-los estils perquè tant el navegador com els usuaris sàpiguen que funcionen com un menú de navegació i no només com un grup d'enllaços aleatoris. Si l'ordre de les pàgines no és important, podeu utilitzar una llista desordenada igual que a l'exemple de menú de llista desordenada de l'arxiu "unordered.html".

Observeu que he posat un id als elements ul. Ho he fet per oferir un lligam per aplicar-los estils amb el CSS i per afegir-los més endavant un comportament especial amb JavaScript. Un id és una manera molt eficaç de permetre que altres tecnologies escullin un element concret amb l'HTML.

Si l'ordre en què els visitants van passant per tots els documents és important, llavors hauríeu de fer servir una llista ordenada. Si, per exemple, teniu un curs en línia format per múltiples documents i cadascun parteix d'allò que s'ha explicat a l'anterior, podeu utilitzar una llista ordenada com la de l'exemple de llista ordenada de l'arxiu "ordered.html".

L'ús de llistes per crear menús és ideal per diverses raons:

Les llistes s'imbriquen incrustant la llista imbricada a l'element li, i no després d'aquest. Podeu veure'n un exemple correcte i un d'incorrecte a l'arxiu "nesting.html".

Tingueu en compte que els navegadors mostren els dos exemples de la mateixa manera.

La visualització en el navegador no hauria de ser mai un indicador de la qualitat del codi.

Una construcció HTML no vàlida com la de l'exemple erroni anterior farà que sigui molt difícil aplicar-hi estils, afegir-hi comportament amb el JavaScript o de convertir a un altre format. L'estructura des elements UL imbricats ha de ser sempre <ul><li><ul><li></li></ul></li></ul> i mai <ul><li></li><ul><li></li></ul></ul>.

23.2. La necessitat de flexibilitat

És molt probable que el menú d'un lloc canviï sovint; els llocs web tenen tendència a créixer orgànicament a mesura que s'hi van afegint funcions i que creix la base d'usuaris, per la qual cosa hauríeu de crear els menús tenint en compte que s'hi afegiran i se'n trauran entrades a mesura que el lloc vagi progressant, i també que potser es traduiran a diferents llenguatges (amb la qual cosa canviarà la longitud dels enllaços). També us podeu trobar treballant en llocs en els quals l'HTML dels menús es crea dinàmicament utilitzant llenguatges del servidor i no HTML estàtic. Això, però, no significa que el coneixement de l'HTML ja no tingui cap utilitat. De fet, serà cada vegada més important perquè aquests coneixements se seguiran necessitant per crear plantilles HTML amb les quals treballarà l'script del servidor.

23.3. Diferents tipus de menús

Hi ha diversos tipus de menús que haureu de crear en HTML quan aneu treballant en diferents llocs web. La majoria es poden crear amb llistes, tot i que algunes vegades les restriccions de la interfície obliguen a seguir un altre camí (ja en parlarem més endavant). Els menús basats en llistes que molt probablement creareu són els següents:

23.3.1. Navegació per la pàgina (contingut)

Ja n'he parlat una mica a l'apartat sobre els enllaços, però aquí trobareu una descripció més detallada de què significa la navegació per la pàgina i què cal fer perquè funcioni.

A l'exemple relatiu a aquest subapartat de navegació per la pàgina (arxiu "inpagenavigation.html") he fet servir una llista d'enllaços que condueixen a àncores que es troben més avall a la mateixa pàgina. Per connectar les àncores cal fer servir un atribut id en els elements cap als quals es navegarà i un atribut href consistent en un símbol de coixinet seguit del mateix nom que el valor id de l'àncora a la qual voleu que condueixi aquest enllaç. Cadascuna de les seccions de la pàgina també té un enllaç per tornar al menú que funciona de la mateixa manera, però que condueix de tornada cap al menú.

La navegació pel lloc és probablement el tipus de menú més habitual que haureu de crear. És el menú de tot el lloc (o d'una subsecció) que mostra tant les opcions que poden escollir els visitants com la jerarquia del lloc. Per a aquests menús les llistes són l'opció perfecta, tal com veureu a l'exemple de navegació pel lloc de l'arxiu "home.html".

No hi trobareu gaires sorpreses, com a mínim des del punt de vista de l'HTML en si. Més endavant en aquest curs parlaré sobre l'aplicació d'estils a aquests tipus de menús amb el CSS i sobre la manera d'afegir-hi comportament amb el JavaScript. Una cosa important que cal tenir en compte és la manera de destacar el document actual del menú, per tal de donar a l'usuari la sensació de ser en un lloc concret i que s'està movent d'un lloc a l'altre (encara que en realitat no es mou en absolut, tret que faci servir algun dispositiu mòbil per navegar pel web). Això és el que veurem a continuació.

1) Donar als visitants la sensació de "Vostè es troba aquí"

La regla principal per al desenvolupament de webs i la navegació és que el document actual no s'ha d'enllaçar mai amb ell mateix sinó que ha de ser clarament diferent de les altres entrades del menú. Això és important perquè dóna als visitants alguna cosa a la qual aferrar-se i perquè els explica on es troben en el seu viatge pel lloc. Hi ha molts casos diferents, com ara aplicacions web, enllaços permanents en blocs i el que es coneix com a llocs web "d'una pàgina", però en el 99% dels casos un enllaç cap al document que ja esteu mirant és redundant i resulta confús per al visitant.

A l'apartat sobre els enllaços ja he explicat que un enllaç és un acord i una responsabilitat: s'ofereix als visitants una manera d'arribar a més informació que necessiten, però cal tenir molta cura perquè si l'enllaç no dóna als usuaris allò que volen, o si té un comportament inesperat, perdreu credibilitat i la seva confiança. Si, per exemple, oferiu un enllaç que apunta cap al document actual, en activar-lo es tornarà a carregar el document. Com a usuari això és una cosa que no espereu: de què serveix clicar aquest enllaç? L'únic que s'aconsegueix és que els usuaris quedin perplexos.

És per això que des del menú no hi ha d'haver mai cap enllaç fins a la pàgina actual. Podríeu eliminar l'enllaç o, millor encara, fer que deixi d'actuar com un enllaç però destacar-lo (per exemple amb un element strong); amb això els usuaris tindrien una indicació visual i també diria als visitants cecs que és important i que és l'entrada actual del menú.

Podeu veure un exemple de pàgina actual destacada a: "about.html"

2) Quantes opcions cal donar als usuaris en cada moment?

Una altra qüestió que cal tenir en compte és quantes opcions voleu donar als visitants. Molts dels menús que veieu al web intenten garantir que es podrà accedir a totes les pàgines del lloc des d'un únic menú. Aquí és on entren en joc els trucs dels scripts i del CSS; podeu fer que els menús siguin més fàcils de fer servir ocultant-ne parts fins que els usuaris en seleccionin algunes àrees concretes (és el que algunes vegades es coneix com a menús desplegables). Des d'un punt de vista tècnic és perfecte, però aquest enfocament presenta uns quants problemes:

Fet i fet, la decisió sobre les entrades que posareu en un menú és vostra, ja que els diferents dissenys exigiran unes opcions diferents; però si teniu algun dubte, sempre hauríeu d'intentar reduir els menús als enllaços fins a les seccions principals del lloc. Sempre podeu oferir altres menús en els llocs on sigui oportú.

23.3.3. Menús contextuals

Els menús contextuals són enllaços que es basen en contingut del document actual i ofereixen més informació relacionada amb la pàgina a la qual us trobeu. Un exemple clàssic són els enllaços "notícies relacionades" que s'acostumen a trobar al final de les notícies que llegiu, tal com podeu veure a la figura 1.

Captura de pantalla d'un menú contextual, en aquest cas titulars de notícies relacionades

Figura 1. Exemple de menú contextual: una notícia que ofereix notícies relacionades.

Aquests menús són una mica diferents dels menús contextuals de les interfícies d'usuari, que ofereixen opcions diferents segons el lloc des d'on s'hi accedeix (com els menús que apareixen amb un clic del botó dret del ratolí o amb 'Ctrl' + clic en les aplicacions d'escriptori que ofereixen unes opcions concretes segons el punt on es troba el punter del ratolí en cada moment).

Els menús contextuals dels llocs web són una manera perfecta de presentar el contingut d'altres parts del lloc; i pel que fa a l'HTML, no són res més que una altra llista d'enllaços.

23.3.4. Mapes del lloc

Els mapes del lloc són ben bé el que indica el seu nom: mapes de totes les pàgines diferents (o de les seccions principals si parlem de llocs realment molt grans) del lloc. Permeten als visitants del lloc veure'n ràpidament l'estructura general i anar ràpidament allà on vulguin, fins i tot si la pàgina que necessiten es troba en un nivell molt profund de la jerarquia.

Tant els mapes del lloc com les cerques en el lloc són una manera perfecta d'oferir als visitants una opció alternativa quan es troben perduts, o d'oferir-los un accés ràpid quan tenen pressa.

Des del punt de vista de l'HTML, poden ser una llista molt gran imbricada plena d'enllaços o bé, en el cas de llocs web molt grans, títols de secció amb enllaços imbricats de jerarquies específiques de cada secció, o fins i tot formularis de cerca per a cadascuna de les seccions.

23.3.5. Paginació

La paginació és necessària quan cal oferir una manera de navegar per documents molt grans dividits en diverses pàgines. Trobareu paginació, per exemple, als arxius d'imatges molt grans o a les pàgines de resultats de cerca (com Google o Yahoo).

La paginació és diferent d'altres tipus de navegació perquè normalment enllaça cap al mateix document, però amb un enllaç que conté més informació, com per exemple la pàgina des de la qual cal començar. La figura 2 mostra alguns exemples de paginació:

Diferents tipus de menús de paginació

Figura 2. Els menús de paginació permeten que els visitants naveguin per grans conjunts de dades sabent en tot moment on es troben.

L'HTML no és gens revolucionari, ja que no deixa de ser una altra llista d'enllaços amb l'enllaç actual (el que indica les dades actuals i el nivell que ocupen a la paginació) desactivat i destacat (amb un element strong, per exemple).

La diferència principal amb la navegació pel lloc és que la paginació inclou una lògica de programació important. Segons el lloc on us trobeu de tot el conjunt de dades, haureu de mostrar o ocultar els vincles previ, següent, primer i últim. Si teniu un volum d'informació realment enorme pel qual navegar, també és recomanable oferir enllaços a punts de referència com 100, 200 i moltes més opcions. És per aquesta raó que molt probablement no codificareu menús d'aquesta mena en HTML sinó que els creareu en el servidor. Això, però, no fa que canviïn les normes; les dades actuals no s'han d'enllaçar amb elles mateixes i no heu d'oferir enllaços que no portin enlloc.

23.4. Quan les llistes no són suficients: mapes d'imatge i formularis

En el 99% dels casos, les llistes ordenades o desordenades són opcions de l'HTML suficients per crear menús, especialment perquè l'ordre lògic i la imbricació també permeten aplicar uns estils molt interessants amb el CSS. Hi ha algunes situacions, però, que poden exigir algunes tècniques de disseny diferents.

23.4.1. Definir zones sensibles amb mapes d'imatge

Una de les tècniques són els mapes d'imatge del client. Els mapes d'imatge converteixen una imatge en un menú convertint seccions d'una imatge en àrees interactives que es poden enllaçar amb diferents documents. L'exemple de mapa d'imatge associat a aquesta secció converteix una imatge en un menú que es pot clicar. Proveu-ho seguint l'enllaç anterior i clicant les diferents seccions del triangle de la imatge que apareix a la figura 3.

Captura de pantalla d'una imatge amb zones sensibles

Figura 3. Definint un mapa amb elements d'àrea podeu convertir parts d'una imatge en elements interactius.

Arxiu font: "imagemap.html"

Podeu convertir una imatge en un menú definint un mapa amb àrees diferents (també conegudes com a zones sensibles). Haureu de donar al mapa un atribut name i connectar la imatge i el mapa amb l'atribut usemap de l'element img. Observeu que això funciona exactament igual que els enllaços a la mateixa pàgina, la qual cosa significa que el valor de l'atribut usemap haurà d'anar precedit d'un coixinet.

Cadascuna de les àrees ha de tenir diversos atributs:

href
Defineix la URL a la qual enllaça l'àrea (que també podria ser un destí en el mateix document).
alt
Defineix un text alternatiu per si no es pot trobar la imatge o si l'agent d'usuari no accepta imatges.
shape
Defineix la forma de l'àrea. Pot ser rect per a rectangles, circle per a cercles o poly per a formes irregulars definides mitjançant polígons.
coords
Defineix les coordenades en la imatge que s'han de convertir en zones sensibles; aquests valors es mesuren des del vèrtex superior esquerre de la imatge i es poden mesurar en píxels o percentatges. Per a les àrees rectangulars només cal definir el vèrtex superior esquerre i l'inferior dret; per als cercles haureu de definir-ne el centre i el radi; per als polígons haureu d'oferir una llista de tots els punts de vèrtex.

23.4.2. Estalviar espai de pantalla i evitar la sobrecàrrega d'enllaços amb formularis

Una altra tècnica que podeu utilitzar és crear un formulari amb l'element select. Podeu definir les diferents pàgines com a opcions de l'element select, i així els visitants podran escollir una opció i trametre el formulari per passar a altres pàgines. Trobareu un exemple de menú de formulari a l'arxiu "selectnavigation.html"

L'avantatge més obvi de l'ús d'aquest tipus de menú és que podeu oferir un munt d'opcions sense ocupar molt d'espai de la pantalla, ja que els navegadors mostren el menú en una línia; vegeu la figura 4.

Captura de pantalla d'un menú creat amb un quadre de selecció obert i tancat

Figura 4. Els menús de selecció ocupen només una línia a la pantalla.

Arxiu font: "selectnavigationoptgroup.html"

Podeu anar més lluny i agrupar les diferents opcions del menú amb l'element optgroup, tal com podeu veure a l'exemple de l'arxiu "selectnavigationoptgroup.html"

Llavors apareixerà un menú amb opcions que no es podran seleccionar (són els noms dels grups), tal com es mostra a la figura 5.

Aquesta tècnica té l'avantatge que ocupa molt poc espai, però també us obliga a tenir un script del servidor per enviar els visitants a les pàgines que han escollit. Per fer que els enllaços funcionin també podeu utilitzar JavaScript, però no us podeu refiar que el JavaScript estigui disponible; haureu de comprovar que els vostres usuaris puguin utilitzar els menús fins i tot amb el JavaScript desactivat.

Captura de pantalla d'un menú creat amb un quadre de selecció que inclou grups d'opcions

Figura 5. Els menús de selecció poden incorporar grups d'opcions que us permetran dir als visitants quines opcions estan relacionades entre elles. Així és tal com apareix a l'Opera 9.5.

Un altre avantatge, tot i que menys evident, és que d'aquesta manera no oferiu un excés d'enllaços en el mateix document. Això significa que no atabalareu els usuaris de tecnologies d'assistència (que normalment solen trobar tots els enllaços en una llista molt llarga). I també significa que els motors de cerca no consideraran els enllaços de la vostra pàgina com una cosa inútil, ja que la relació entre enllaços i text fa que el document sembli un mapa de lloc. No obstant això, moltes tecnologies d'assistència poden generar un mapa dels enllaços de les vostres pàgines; si tots els vostres enllaços importants es troben en un menú de selecció, hi ha la possibilitat que un visitant no els arribi a trobar mai. Així, doncs, és una bona idea oferir enllaços d'àncora cap a les pàgines de destí principals i els menús de l'element select per oferir més opcions. Els visitants els podran utilitzar, però les màquines com els robots dels motors de cerca no caldrà que sàpiguen que existeixen.

Una última cosa que cal mencionar sobre els menús HTML és que la situació del menú és molt important. Penseu en els visitants que no tenen cap mecanisme de desplaçament o que no poden veure-s'hi i que, per tant, es refien de la navegació amb el teclat per moure's pel lloc. La primera cosa amb què es trobaran quan carreguin el document és la seva ubicació i el títol, i a continuació el document es llegirà de principi a fi aturant-se en cadascun dels enllaços per demanar al visitant si el volen seguir o no. Altres opcions poden ser una llista de tots els enllaços o passar de títol a títol. Si el menú es troba a la part superior del document, serà la primera cosa que trobarà l'usuari. El fet d'haver de passar per 15 o 20 enllaços abans d'arribar al contingut pot ser una tasca realment empipadora. Per a això hi ha dues solucions disponibles. En primer lloc, podeu posar el menú després del contingut principal del document (si voleu també el podeu posar a la part superior de la pantalla utilitzant el CSS). En segon lloc, podeu oferir un enllaç per passar per alt el menú. Aquest no és res més que un enllaç col·locat abans del menú principal i que porta cap al començament del contingut, amb la qual cosa el visitant, si ho desitja, pot saltar-se el menú i anar directament al contingut. Podeu afegir un altre enllaç "anar al menú" al final del document per així poder tornar fàcilment a la part superior.

Per conèixer més detalls sobre aquesta mena d'enllaços, podeu veure'n exemples a: "skiplinks.html"

Els enllaços per saltar el menú no només són útils per a les persones amb aquesta mena de discapacitats, sinó que també ho fan tot més fàcil quan es navega per un lloc en un dispositiu mòbil amb una pantalla petita.

Resum

En aquest apartat he explicat els diferents tipus de menús que probablement haureu d'escriure en HTML. He parlat de:

Més endavant tornarem a parlar d'alguns d'aquests temes a la secció del CSS d'aquest curs i explicarem com es pot aconseguir que aquestes estructures HTML tinguin un aspecte atractiu i siguin uns menús encara més intuïtius per als visitants.

Preguntes de repàs

  1. Per què és una bona idea etiquetar els menús com a llistes?

  2. Quan dissenyeu un menú de navegació, què cal planificar de cara al futur?

  3. Quins són els avantatges d'utilitzar elements select per als menús, i quins són els problemes?

  4. Què es defineix amb els elementsarea, i per a què serveix l'atribut nohref d'un element area (no ho trobareu aquí, us caldrà fer una mica de recerca en línia).

  5. Quins són els avantatges dels enllaços per saltar el menú?

Logo Creative Commons
Els continguts recollits en aquest article estan subjectes a una llicència Creative
Commons Reconeixement, No comercial - Compartir Igual 3.0 No adaptada
.
: Anar a l'índex :