Mapa del lloc web

El primer pas, un cop finalitzat el procés de definició de la missió del lloc web, determinar els continguts clau i, finalment, tenir a la mà un bon grapat de referències visuals d'altres dissenys web, és la planificació de l'estructura general del lloc web. Per realitzar aquesta tasca no cal ordinador. Us recomanem que agafeu llapis i paper i comenceu a fer esborranys de com serà el lloc web a un primer nivell de concreció, és a dir, sense aprofundir gaire en aspectes tècnics.

La millor manera de representar l'estructura del lloc web és en forma d'arbre, on el primer node o element correspon a la pàgina principal. La resta de pàgines penjaran del primer element o pàgina principal. I així successivament fins arribar als últims elements del projecte. La figura següent us mostra un exemple representatiu de diagrama de lloc web.

L'objectiu de realitzar aquesta representació del lloc web és múltiple:

  • Us permetrà tenir una visió conjunta del lloc web
  • Us ajudarà a definir la navegació general del lloc web
  • Us ajudarà a establir les diferents connexions i relacions entre els diferents elements o pàgines del lloc web
  • Us permetrà relacionar els continguts clau que heu determinat a la fase prèvia amb cada ítem del diagrama del lloc web.

Diagrama final del lloc web

Si ja teniu clar que el diagrama que heu esbossat del lloc web és el definitiu -després de successives correccions-, és el moment de transformar l'esborrany en una representació neta que mostri amb claredat i precisió l'estructura del lloc web. A l'actualitat trobareu diferents eines que us ajudaran a realitzar aquest procés de traducció digital de l'esborrany del diagrama. Si bé és possible treballar amb eines de propòsit general com el GIMP o l'Inkscape, us recomanem dues eines dedicades a l'elaboració professional de diagrames de dades.

WriteMaps

URL: http://writemaps.com

WriteMaps és un servei web que us ajudarà a crear i compartir diagrames d'acabat professional del lloc web. Us permet realitzar el mapa en forma d'arbre o bé en forma de text.

WriteMaps és un servei gratuït i només us cal registrar-vos per accedir-hi. Encara que l'interfície de l'aplicatiu es en anglès, el seu ús és suficientment intuitïu. Veieu aquí la representació en forma d'arbre i en forma de text de l'il·lustració de l'esborrany del lloc web d'aquesta pràctica.

En forma d'arbre:

En forma de text:

Mind Meister

Mind Meister és un servei web que permet la creació coŀlaborativa de mapes mentals.

mm2.jpg

Què és un mapa mental?
Un mapa mental (mind map en anglès) és un tipus especial de diagrama que representa un conjunt de conceptes (paraules, idees, tasques,…) disposats de manera radial al voltant d'una paraula clau.

Cliqueu a http://www.mindmeister.com/. Per crear un mapa mental, el servei Mind Meister us demanarà que us registreu. Feu clic al següent botó:

Us demanarà una adreça de correu vàlida. També podeu fer ús d'un compte OpenID

Què és l'OpenID1)
OpenID és un sistema d'identificació digital descentralitzat, amb el qual un usuari pot identificar-se a una pàgina web a través d'un URL (o un XRI a la versió actual) i pot ser verificat per qualsevol servidor que suporti el protocol. La idea que hi ha al darrere és, doncs, que no calgui diferents comptes per entrar a diferents llocs web, sinó que amb una única dada identificadora es pugui entrar en més d'un espai: un compte d'usuari OpenID facilita l'accés als llocs que suporten aquest protocol i no cal tenir un identificador per a cada lloc web que es vulgui visitar.

Us enviaran un missatge d'activació del compte a l'adreça de correu electrònic. Obriu el missatge i feu clic a l'adreça d'activació. Completeu el formulari i, finalment, arribareu a l'espai de gestió i edició dels mapes mentals. Per defecte us apareixerà un mapa mental (My First Mind Map) d'exemple.

Feu clic al butó Create Mind Map per crear un nou mapa mental. Us apareixerà un entorn de creació on, al mig de l'àrea de treball, està situat el primer node My New Mind Map. Feu doble clic per modificar el text i escriviu el text del primer node del diagrama que heu realitzat prèviament.

Per crear un nou ítem que enllaci el node mare o node central heu de fer clic a l'opció Add del menú superior. Si, pel contrari, voleu esborrar un node, feu clic a Delete

Aquí teniu el mapa mental de l'esborrany del diagrama qua apareix al principi d'aquesta pràctica després d'un temps curt de treball (aproximadament 10 minuts)

Finalment, exporteu el resultat a una imatge mitjançant el botó Export

i obtindreu

Slick Map CSS

Una altra manera, un xic més artesanal, de generar un diagrama net i definitiu del lloc web és gràcies a SlickMap CSS. SlickMap CSS és un full d'estil per representar llistes no numerades d'HTML en un diagrama d'arbre d'aspecte professional. Anem a traduir l'estructura del lloc web d'exemple de la pràctica actual al codi HTML i seguint la convenció que ens demana aquesta utilitat.

<ul id="primaryNav">
  <li id="home"><a href="/">Home</a></li>
  <li><a href="design.html">Design Process</a></li>
  <li><a href="contact.html">Contact</a></li>
  <li><a href="gallery.html">Gallery</a>
    <ul>
	<li><a href="comp.html">Comp Doc</a>
     	 <ul>
	   <li><a href="ppc.html">PPC</a></li>
	 </ul>
	</li>
	<li><a href="khoi.html">Khoi Tran</a>
	 <ul>
	<li><a href="digvision.html">Digvision</a></li>
	 </ul>
	</li>
	<li><a href="sub">Sub Lawn</a>
	 <ul>
	<li><a href="hidroclean.html">HidroClean</a></li>
	 </ul>
	</li>
     </ul>
   </li>
   <li><a href="pricing.html">Pricing</a></li>
   <li><a href="specials.html">Specials</a></li>
</ul>

És a dir, la representació en HTML quedaria de la següent manera sense cap full d'estil associat:

Ara bé, si associeu a aquesta estructura el full d'estil de SlickMap obtindreu la següent visualització:

Descarregueu diagrama, descomprimiu-lo i obriu el fitxer per veure'l en acció.

És cert que encara és massa aviat per parlar d'HTML i CSS, però és necessari fer una aturada i reflexionar en les avantatges que ens proporciona una metodologia que il·lustra perfectament la utilitat SlickMap:

  1. Elimina la necessitat de dependència de programari extern i propietari (com és el cas de l'exemple de MindMeister i WriteMaps)
  2. El fet de separar l'estructura (HTML) del disseny (CSS), facilita modificar el contingut i actualitzar-lo sense problemes.
  3. La pàgina web és navegable i representable encara que el navegador no suporti els fulls d'estil, com és el cas dels navegadors textuals.