In questi casi un ottimo strumento che ci viene in aiuto sono i patterns, ovvero tracciati preimpostati che si ripetono lungo gli assi x e y in un’area definita dall’utente.

Una tipologia di patterns sono quelli denominati seamless, letteralmente “senza cucitura”, ovvero quei patterns che possono essere utilizzati su una porzione infinita di interfaccia senza che si riconosca la matrice di base.

Nella rete esistono molti pacchetti di risorse scaricabili gratuitamente, ma molte volte mi sono ritrovato a dover cercare insiemi di patterns che però no soddisfacevano le mie esigenze.

Proprio per questo motivo ho deciso di creare questo pacchetto di patterns personale, formato da 8 tipologie fondamentali di patterns, ognuna con 5 misure differenti.

Il pacchetto è scaricabile cliccando sull’immagine in alto, oppure da qui (brusheezy) o da qui (deviantart) mentre nell’immagine qui sopra potete vedere un’anteprima dei pattern che ho raggruppato in questo set.

Essendo il primo pacchetto che rilascio, ho deciso di condividerlo pienamente e quindi di non includere nessun tipo di restrizione all’utilizzo, perciò buon divertimento!

Una volta scaricato sul proprio computer prelevandolo dal link sopra indicato, esistono diversi modi per installarlo:

1 -  (con sistema operativo Windows) copiarlo e incollarlo all’interno della cartella C:\Documents and Settings\*(* indica il nome dell’utente corrente)\Dati applicazioni\Adobe\Adobe Photoshop CS*(* indica versione del programma)\Presets\Patterns. Così facendo aprendo photoshop, troveremo direttamente il nostro pattern tra quelli predefiniti del programma.

2 – (tutti i sistemi) aprire Photoshop, puntare sul secchiello (paint bucket) e nel menù a tendina dello strumento selezionare “pattern” al posto di “foreground”. Cliccare sulla freccina a destra del pattern preimpostato e successivamente sulla nuova freccina che si trova nel tondino a destra. Scegliere quindi Load Patterns e selezionare il pattern desiderato.

Et-voilà! Il pattern è ora pronto all’uso per i nostri progetti.

Come per l’aggiunta del bottone “home” di cui ho parlato in un precedente articolo, per aggiungere questa nuova area è semplicemente necessario aprire il file “functions.php” nella cartella principale di thematic ed aggiungere le seguenti righe prima della riga contenente “?>” :

// questo crea la widget area
function my_widgets_init() {
 register_sidebar(array(
 'name' => 'Header Aside',
 'id' => 'header-aside',
 'before_widget' => '<li id="%1$s">',
 'after_widget' => "",
 'before_title' => "<h3 class=\"widgettitle\">",
 'after_title' => "</h3>\n",
 ));
}
add_action( 'init', 'my_widgets_init' );

// questo comando aggiunge l'area creata al tema
function my_header_widgets() {
if ( function_exists('dynamic_sidebar') && is_sidebar_active('header-aside') ) {
 echo '<div id="header-aside">'. "\n" . '<ul>' . "\n";
 dynamic_sidebar('header-aside');
 echo '' . "\n" . '</div><!-- #header-aside .aside -->'. "\n";
}
}
add_action('thematic_header', 'my_header_widgets', 9);

Come sempre basta ricaricare online il file appena modificato e la nuova widget area, che in questo caso avrà il nome di “Header-Aside” apparirà all’interno del menu “widget” situato sotto “aspetto“.

Nell’ultima riga del codice che ho riportato è presente un numero, in questo caso un “9“, situato appena prima della dicitura “);”

Questo numero indica la posizione della widget area all’interno del codice php della pagina. Modificandolo con il numero “8” la widget area da noi creata verrà automaticamente posizionata prima del menù di navigazione principale del nostro sito.

N.B.: questa modifica funziona correttamente con la versione 2.9.1 di WordPress e con la versione 0.9.5.1 di Thematic.

La sua installazione è semplicissima, basta scaricare questo plugin ed installarlo in wordpress (semplicemente caricando via ftp sul proprio sito la cartella appena scaricata nella cartella di default dei plugin che è wp-content/plugins/) e successivamente attivandolo nel pannello di controllo dei plugin all’interno di WordPress.

Una volta effettuata questa operazione comparirà tra gli strumenti di wordpress una nuova area chiamata Gallery, attraverso la quale è possibile aggiungere e gestire le immagini e le gallerie (è infatti possibile generare più di una gallery, nel caso si vogliano suddividere le immagini per categorie), impostare la dimensione dei thumbnail ovvero le miniature delle immagini sulle quali si andrà a cliccare per lanciare la photogallery, impostare lo stile di visualizzazione della gallery stessa oltre ad altre impostazioni utili al fine di personalizzare la gallery secondo le proprie esigenze.

Inoltre questo plugin possiede anche altre potenzialità e strumenti che andrò ad illustrare nel prossimo articolo.

Oltre quindi a fornire strumenti per la creazione e la modifica di articoli, per la divisione in categorie e per l’aggiunta di tags, la piattaforma WordPress permette di modificare l’aspetto della propria pagina web, permettendo di installare e raccogliere diversi temi.

Questi ultimi, attraverso la modifica dei fogli di stile a loro associati, mutano l’aspetto della propria pagina web, agendo su tutti gli aspetti grafici dell’interfaccia. è pertanto possibile modificare lo sfondo, la forma e la grafica dei pulsanti, il comportamento dei link, il colore, l’altezza e la tipologia delle font utilizzate e tutti gli altri aspetti grafici del proprio blog.

WordPress permette di gestire anche dei widget, ovvero delle piccole applicazioni che svolgono le funzioni più disparate, come ad esempio la visualizzazione di uno slideshow, un calendario, il blog-roll (la lista dei link ad altri siti di interesse), i link alle categorie del blog ecc.

Questi widget vengono organizzati all’interno di aree del blog predisposte, ad esempio nella sidebar (barra laterale), nel footer (il “piè di pagina” del blog) o nell’header (intestazione). Il numero e la disposizione di queste aree all’interno dell’interfaccia varia a seconda del tema caricato.

Esiste una grande varietà di temi già pronti per wordpress reperibili nel web, alcuni gratuiti, altri a pagamento.

Tra questi thematic è un tema basilare e molto pulito, reperibile gratuitamente e che permette di modificarne completamente l’aspetto agendo sui css.

Per inserire aree aggiuntive e personalizzabili per i widget esistono varie soluzioni, ma questo tema contiene già di per sè una grande quantità di aree per i widget, fattore che permette un’ampia personalizzazione del layout grafico del sito.

Nei prossimi articoli parlerò appunto dei widget e dei plugin inseribili all’interno della piattaforma di WordPress.

Riescono a catturare l’attenzione dell’utente e comunicare in modo chiaro ed inequivocabile un contenuto, facilitando e velocizzando la navigazione all’interno di un sito. Inoltre vanno aldilà delle barriere linguistiche, poiché i simboli sono riconoscibili pressoché universalmente.

Pertanto, il fatto di sfruttare questo mezzo di comunicazione immediato e globale, è un aspetto fondamentale da tenere in considerazione in fase di progettazione in ambito web.

Di seguito elenco alcune fonti di icone gratuite varie ed interessanti da poter utilizzare all’interno dei propri siti:

Wefunction: un valido set di icone molto dettagliate.

Famfamfam: altro interessante set di icone di misura ridotta.

Iconfinder: un potente motore di ricerca per icone. Permette di impostare diversi filtri per la ricerca.

Iconza: set predefinito di icone che permette di modificarne diversi parametri come colore delle icone, grandezza e colore dello sfondo.

Infine segnalo questo articolo su smashingmagazine.com che contiene una grande raccolta di icone incredibilmente dettagliate.

Consistono fondamentalmente in una serie di modifiche (o meglio aggiunte) all’interfaccia del browser.
Nello specifico si tratta di barre degli strumenti (toolbars) e pulsanti (buttons), ma anche di temi o modifiche all’interfaccia che permettono all’utente di personalizzare al massimo l’utilizzo del browser e di velocizzare le operazioni che compie più frequentemente o permettergli di sfruttare specifiche funzionalità avanzate.

Esiste una vasta quantità di addons, grazie anche al fatto che possono essere sviluppati dagli utenti stessi, e spaziano dai bottoni per il controllo della posta elettronica e la lettura degli rss feed alle barre personalizzate dei programmi applicativi o dei motori di ricerca (Google, Yahoo…), passando per i bottoni della gestione di vari comandi, come i download dei files o per “catturare” una schermata video.

Alcuni di questi strumenti sono molto utili (se non fondamentali) nel campo del web-design e forniscono un supporto pratico e di rapido utilizzo

Di seguito vediamo i principali:

- Firebug: tool molto utile che permette di “mettere a nudo” la pagina web, mostrandone il codice html o css e gli script in una finestra separata.

- Web Developer Toolbar: questa barra contiene diverse funzionalità simili che permettono di attivare e disattivare elementi come i css, la cache o i cookies di una pagina web.

- ColorZilla: bottone permette con un semplice click di conoscere la gradazione di colore di qualsiasi elemento della pagina (ad eccezione degli elementi in Flash), fornire la relativa codifica in RGB ed esadecimale e di copiarla negli appunti.

- MeasureIt: consente di “misurare” in pixel una porzione di sito..

- ScreenGrab: permette di salvare o copiare negli appunti la schermata di un sito o una porzione.

Di seguito invece elenco alcuni tools che possono tornare utili anche a chi piace semplicemente navigare in rete e utilizzare le potenzialità del web 2.0.

- Google toolbar: questa barra permette di accedere, oltre alle principali funzioni di Google come la ricerca e il servizio Gmail, anche ad altri servizi come il traduttore e la correzione automatica.

- Add this: pulsante che permette di condividere le pagine internet sui principali social network.

- Clear Cache Button: come suggerisce l’icona, questo pulsante fa una rapida pulizia della cache.

- Password exporter: utile strumento per chi ha molte registrazioni a diversi servizi poiché questo bottone permette di salvare, gestire ed esportare le password registrate.

- StumbleUpon: per finire, una toolbar che riporta una pagina a caso pescando nella rete in base alle preferenze impostate dall’utente. Molto comodo e divertente per scoprire ad ogni click contenuti interessanti sparsi per il web.