Estils de navegació

És evident que a la web hi trobareu moltes maneres de representar els diferents tipus de navegació que heu vist a la pràctica anterior, trobareu uns estils que acostumen a estar presents en la majoria de webs actuals. Aquests estils comporten unes expectatives d'ús per als usuaris que visiten la web i els fan servir. Si la navegació adquireix la forma de menú desplegable, llavors els usuaris entendran i actuaran en conseqüència i en relació al comportament del menú desplegable i no a cap altre estil de navegació.

Llistes

La llista d'enllaços és la representació més bàsica de navegació d'una web. Si esteu familiaritzats amb el llenguatge de la web, l'HTML, sabeu que la manera més fàcil de representar un conjunt d'enllaços és mitjançant les llistes.

Una llista d'enllaços es pot representar en una pàgina web mitjançant una llista no ordenada d'elements. El llenguatge HTML disposa de les següents marques:

  • <ul> per identificar l'inici d'una llista no ordenada.
  • <li> per identificar cada ítem de la llista.
  • <a>: defineix un enllaç.

Veieu el següent fragment de codi HTML d'una simple llista de navegació de les pràctiques d'aquest mòdul

<ul>
  <li><a href="practica_1">Pràctica 1</a></li>
  <li><a href="practica_1">Pràctica 2</a></li>
  <li><a href="practica_1">Pràctica 3</a></li>
  <li><a href="practica_1">Pràctica 4</a></li>
</ul>

Des d'una perspectiva d'estil, les llistes són adaptables a qualsevol representació. Fixeu-vos en els següent exemple, el menú de navegació secundària de la pàgina principal de la XTEC

i, sense entrar ara en detall, comproveu que el codi HTML que el genera correspon al patró d'una llista no ordenada com la que heu vist al principi d'aquesta secció.

<ul>
   <li class="groc"><a href="escola/index.htm">Escola oberta</a></li>
   <li class="taronja"><a href="projxarxa/index.htm">Projectes en xarxa</a></li>
   <li class="vermell"><a href="practicomp/index.htm">Pràctica compartida</a></li>
   <li class="rosa"><a href="/formacio/index.htm">Formació permanent</a></li>
   <li class="lila"><a href="innova/index.htm">Innovació i recerca </a></li>
   <li class="blaufort"><a href="serveis/index.htm">Serveis educatius</a></li>
   <li class="blau"><a href="centres/index.htm">Webs de centres</a></li>
   <li class="verdfort"><a href="estudis/index.htm">Estudis</a></li>
</ul>

Més endavant veureu com gràcies a l'ús d'un full d'estil (CSS) li assignareu a aquesta estructura la presentació i el disseny més idonis al lloc web que haureu creat.

Els menús desplegables (dropdowns menus en anglès) corresponen a una de les maneres de representació dels menús més antiga que la Web. En certa manera, el disseny web els copia i incorpora dels dissenys de les aplicacions d'escriptori de qualsevol sistema operatiu, als quuals ja esteu habituats: fent clic a una opció us apareix un desplegable amb una llista d'opcions o, en el cas que ens toca, una llista de enllaços.

Una altra representació típica dels menús desplegables la trobareu sovint als formularis, especialment quan escolliu l'opció d'idioma o de país. Veieu l'exemple que trobareu a la configuració del servei del cercador de Google:

Pestanyes

El sistema de pestanyes és, des de fa poc temps, un estil d'organització de la informació extensament adoptat. Només heu de recordar que les últimes actualizacions dels navegadors actuals ja en fan ús d'aquest sistema d'organització de les diferents pàgines de navegació que obrim a cada sessió. No és estrany, llavors, que en el disseny web s'incorpori aquest estil de navegació.
Podeu veure uns exemples de navegació per pestanyes a les pàgines següents:

Pestanyes a l'espai de configuració personal del servei de vídeos Vimeo

Pestanyes a la pàgina principal de la fundació Mozilla com a navegació principal

O també trobareu dissenys verticals de les pestanyes, com per exemple a la pàgina Life in Mono

Un estil sofisticat que, gràcies a les noves llibreries Javascript, s'han posat molt de moda en el disseny web és l'efecte acordió, és a dir, un menú plegable i, alhora, expansible. Veieu el següent exemple d'acordió que trobareu a la pàgina principal d'Apple

Núvol d'etiquetes

Els núvols d'etiquetes (tags) és un altre manera de representar la informació de navegació dins d'un lloc web. Un núvol d'etiquetes està molt associat al món dels blocs (blogs), ja que els articles són etiquetats o categoritzats mitjançant descriptors.
En funció del nombre de vegades que s'utilitza una etiqueta o descriptor, més rellevància tindrà aquest en el núvol, quedant destacat normalment amb tipus de lletra més gran o un color més intens. D'aquesta forma els usuaris poden copsar d'una ullada, quins són els temes o continguts que predominen en un lloc web, bloc o un espai de publicació de continguts.

Veieu alguns exemples de núvols d'etiquetes:

Núvol d'etiquetes del lloc web Web Designer Wall

Núvol d'etiquetes del lloc web Menéame

Núvol d'etiquetes del servei XTEC Blocs