Progettare un sito web con le mappe mentali

Le Mappe mentali sono uno strumento per rappresentare la conoscenza il cui uso si sta allargando molto velocemente ad ambiti che inizialmente non erano stati ipotizzati. Uno di questi è, appunto, la realizzazione di siti web. In questo appuntamento vedremo come costruire una mappa mentale con il software gratuito FreeMind per progettare la struttura e i contenuti di un sito internet, anche piuttosto complesso.

Introduzione a Freemind

Freemind è stato uno dei primi software gratuiti per la realizzazione di mappe mentali, inoltre è scritto in Java ed è quindi utilizzabile su molti sistemi. Purtroppo l’attività di sviluppo è rallentata molto negli ultimi, ma il programma funziona egregiamente e ha tutte le funzionalità necessarie per poter creare mappe mentali ed esportarle in diversi formati, in modo da poter creare presentazioni o stampe.

Ecco come si presenta lo spazio di lavoro, una volta lanciato il programma:

 

L’organizzazione dell’interfaccia è piuttosto classica e ricorda le vecchie edizioni di PowerPoint, Openoffice Impress o un programma di grafica:

  • in alto abbiamo la barra degli strumenti;
  • al centro la mappa mentale;
  • in basso c’è lo spazio per le note di testo. Le note sono dei contenuti di testo troppo lunghi per essere mostrati direttamente nella mappa, vengono quindi associati ad un nodo esistente;
  • a sinistra le etichette, che sono dei simboli grafici applicabili ai nodi, molto utili per identificarne la funzione in maniera intuitiva e immediata.

Ci sono inoltre molte scorciatoie da tastiera che aiutano a velocizzare la creazione e modifica delle mappe, limitando l’uso del mouse (e i conseguenti “tempi morti”) e facilitando lo sviluppo della creatività. Ecco i più utili:

  • INS: crea un nodo figlio;
  • INVIO: crea un nodo “fratello”, posizionato dopo quello attuale. Se premiamo SHIFT, viene posizionato prima;
  • F2: modifica nodo;
  • CTRL-< (CTRL-MINORE ): editor delle note;
  • SPAZIO: apre e chiude la gerarchia sottostante ad un nodo;
  • i canonici CANC (elimina), CTRL-C (copia) e CTRL-V (incolla);
  • CTRL-FRECCIA (dove FRECCIA è SU, GIU, DESTRA o SINISTRA): spostano un nodo nelle varie direzioni, modificandone se necessario la gerarchia;
  • SHIFT-INS: inserisce un nodo genitore. Molto utile per raggruppare diversi nodi sotto un nuovo nodo-padre, basta selezionarli (devono essere allo stesso livello) e premere i tasti SHIFT-INS.

Creazione della mappa

Il primo passo per la progettazione del nostro sito sarà decidere la struttura di navigazione. Eseguiamo quindi queste modifiche:

  • modificare (F2) il testo del nodo principale in Web Agency XYZ;
  • salvare il file: il programma proporrà automaticamente il nome Web Agency XYZ.mm, l’estensione .mm sta infatti per Mind Map;
  • aggiungere questi nodi-figlio: Home, Azienda, Servizi, Contatti, Blog, Portfolio, Mappa del sito.

La mappa ora avrà più o meno questo aspetto:

 

Vogliamo ora raggruppare in modo diverso le informazioni, aggiungendo due nuovi nodi: il nodo “Pagine”, che raccoglie l’elenco di pagine, e il nodo “Template” con le informazioni sulla struttura visiva comune a tutto il sito web.

Creiamo per prima cosa il nodo Pagine:

  • selezionare tutti nodi creati prima, cliccando su di essi tenendo premuto il tasto CTRL;
  • premere SHIFT-INS per creare un nodo-padre che li raccolga tutti;
  • premere F2 sul nuovo nodo e digitare “Pagine”;
  • inserire il nodo Template.

La struttura di un sito web raramente ha un solo livello, anzi molto spesso le pagine fungono da collegamento verso altri contenuti. La pagina Servizi ad esempio avrà diverse sotto-sezioni che spiegheranno in dettaglio i vari servizi forniti dall’azienda, le modalità, i casi di successo, eccetera. A questo punto diventa fondamentale identificare, nella mappa che stiamo creando, le pagine vere e proprie da altri concetti. Per farlo possiamo utilizzare una delle tante icone messe a disposizione del programma; quella che ci pare più adatta è il classico foglio bianco con la matita, potete trovarla facendo scorrere verso il basso la barra degli strumenti sulla sinistra:

 

Creiamo quindi vari sotto-nodi alla pagina servizi e poi applichiamo l’icona a tutti i nodi che rappresentano delle pagine. Il risultato dovrebbe essere simile a questo:

 

Le meraviglie delle mappe mentali però non finiscono qui, Freemind (e altri software simili) infatti mettono a nostra disposizione altri utilissimi strumenti:

  • i collegamenti: servono per associare nodi disposti in luoghi lontani nella stessa mappa, o addirittura in altre mappe (su internet, sul file system, ecc.);
  • le nuvole, un modo graficamente molto efficace per raggruppare insieme i nodi di una gerarchia.

Proviamo anche noi ad utilizzare questi strumenti, applicandoli alla nostra mappa mentale del sito.

  • aggiungiamo al nodo Home questi figli: Ultimi lavori realizzati, Ultimi 5 post dal blog, Riquadro contatti;
  • selezioniamo il nodo Ultimi 5 post dal blog appena creato e (tenendo premuto CTRL) il nodo Blog;
  • premiamo CTRL-L per inserire un collegamento grafico;
  • selezioniamo il nodo Servizi e poi sul simbolo del fumetto nella barra degli strumenti in alto (a fianco del simbolo di “grassetto”).

Ed ecco il risultato:

 

Conclusioni

Abbiamo potuto constatare le mappe mentali sono davvero uno strumento eccezionale per la progettazione di siti internet; ci permettiamo però di darvi un ulteriore consiglio, ovvero di non limitarvi a seguire le istruzioni riportate in questa guida ma di trovare il vostro “stile”.

In allegato all’articolo potrete trovare la mappa completa, con qualche aggiunta di colore:

Web Agency final.zip

Links

  • ago

    ciao volevo sapere se le note che si mettono su ogni nodo possono essere stampate