Realizzare un piccolo sito personale con Mootabs.

La realizzazione di un sito web implica svariate tecniche e linguaggi e si sa, può farsi più o meno articolata e/o complessa, e in molti casi non può prescindere da mani esperte. Ci sono comunque situazioni in cui, facendo da soli, è possibile ottenere risultati di tutto rispetto senza troppi sforzi, avvalendosi di soluzioni già pronte. Volendo realizzare la propria pagina personale, ad esempio, al di là dei vari editor più o meno noti, con un po’ di applicazione e un minimo di padronanza del solo linguaggio html, si potrà optare per Mootabs (questo è il suo sito ufficiale), una soluzione pulita e facilmente personalizzabile reperibile sul web: ve la presento. Basata sul framework Mootools, Mootabs è  semplice, veloce e ha dalla sua un chiaro ed accattivante impatto visivo. Integra uno slideshow delle pagine presenti e un comodo menu a “tabs”(linguette). Ne esistono varie versioni, con diversi effetti. In quest’articolo parleremo della la 0.1, reperita sul sito ufficiale del progetto. Per prima cosa procuratevi i files necessari,  ( qui), e scompattateli all’interno della directory principale del vostro spazio web  o in una cartella del vostro server locale. Ritengo utile, prima di entrare nel merito, una riorganizzazione del materiale, in modo da tenere tutto in ordine e sotto controllo: trasferite i files css e  js che trovate liberi, all’interno di due cartelle dedicate che creerete appositamente all’interno della root, quindi adeguatene i richiami nell’header del file index.html, indicando il nuovo path dei files, come segue:

<link rel=”stylesheet” type=”text/css” href=”css/main.css” />

<script type=”text/javascript” src=”js/mootools-1.2.1-core-yc.js”></script>

<script type=”text/javascript” src=”js/mootabs-0.1.0-nc.js”></script>

Testate l’esempio: se visualizzerete i contenuti standard della demo (come si può vedere a questo link e a quest’altro), sarà tutto ok.

A questo punto portatevi nuovamente sul file precedentemente aperto.

Noterete che il file è organizzato in due div: uno per i pulsanti (tabs), l’altro per i contenuti (contents), a loro volta organizzati secondo lo schema di una “unordered list“, quindi troveremo i tag <ul> e </ul> e all’interno dell’area racchiusa,  i vari elementi, delimitati dai tag<li>e </li>, (acronimo di list item: elemento della lista). Per aggiungere o rimuovere una voce  all’interno delle due parti sarà sufficiente rimuovere una voce di lista non ordinata (<li></li>) o aggiungerla in coda alle altre. Dando uno sguardo al codice, la cosa sarà moolto più chiara. A questo punto il grosso è fatto, e non sarà difficile personalizzare i contenuti.

Volendo rinominare le sezioni in “about“, “portfolio” e “contacts“, sostituiremo  il testo all’interno degli elementi di lista (<li></li>) contenuti nel div tabs, e poi compileremo in maniera analoga le rispettive sezioni all’interno del div contents, tenendo conto che la corrispondenza tra i due dipenderà dalla loro posizione: il primo elemento di “tabs” con il primo elemento di “contents”, il secondo con il secondo e via di seguito. Altra cosa facile da fare è sostituire il testo dei pulsanti “prev”, “play” e “next” o quello che troviamo accanto ad essi in basso, làddove esce scritto “Changed to“, semplicemente effettuando una ricerca per il termine esatto all’interno del file  e modificandone poi il solo testo (le etichette le trovate in coda al file). Se il tema colori non dovesse soddisfarvi, potrete sempre editare il file css  a riguardo, avventurandovi tra i colori e i vari attributi (Google potrà certamente aiutarvi molto in questo :)).

Ad esempio, volendo modificare il colore di sfondo in secondo piano, basterà raggiungere le regole per il tag body, all’interno del file css, impostandone il colore preferito in codice esadecimale preceduto dal carattere ‘#’;

Volendo cambiaare il colore di sfondo delle tabs non attive, dovrete raggiungere la riga contenente la regola

ul.tabs li

e anche lì modificare il valore del parametro background; stessa cosa per la modifica dello sfondo della tab attiva,

ul.tabs li.active

oppure se vorrete allungare le vostre pagine, sostituirete il valore height all’interno della regola

.contentsWindow

…a conti fatti, la personalizzazione grafico/cromatica è modesta e poco ampia, soprattutto perchè gli effettini sono vincolati a valori assoluti e ad altre cosucce che, se modificate, altererebbero l’aspetto complessivo.

Al di la’ di tutto, personalmente considero Mootabs, un vero e proprio jolly, e ve lo consiglio, nel caso in cui vi dovesse servire una soluzione temporanea pratica e veloce.

A voi le conclusioni.

Alla prossima!